From b1bb12026130e306714b2b0e4d14293a8da3b8fc Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Thu, 5 Oct 2023 19:06:29 +0300 Subject: [PATCH 1/4] fix: make auto-width and text-align usable in custom slot --- packages/grid/src/vaadin-grid-column-mixin.js | 2 +- packages/grid/src/vaadin-grid-mixin.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/grid/src/vaadin-grid-column-mixin.js b/packages/grid/src/vaadin-grid-column-mixin.js index 0c999889e9..5c1c439daf 100644 --- a/packages/grid/src/vaadin-grid-column-mixin.js +++ b/packages/grid/src/vaadin-grid-column-mixin.js @@ -487,7 +487,7 @@ export const ColumnBaseMixin = (superClass) => /** @private */ _textAlignChanged(textAlign) { - if (textAlign === undefined) { + if (textAlign === undefined || this._grid === undefined) { return; } if (['start', 'end', 'center'].indexOf(textAlign) === -1) { diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js index c863ed8cca..9fcadbdb76 100644 --- a/packages/grid/src/vaadin-grid-mixin.js +++ b/packages/grid/src/vaadin-grid-mixin.js @@ -339,7 +339,10 @@ export const GridMixin = (superClass) => return 0; } - const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col)); + const columnWidth = Math.max( + this.__getIntrinsicWidth(col), + this.__getDistributedWidth((col.assignedSlot || col).parentElement, col), + ); // We're processing a regular grid-column and not a grid-column-group if (!innerColumn) { From 366e5b1baddd288c7eb4c7a896ff0b828edeab2b Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Thu, 5 Oct 2023 19:06:57 +0300 Subject: [PATCH 2/4] test: add tests for wrapped grid --- packages/grid/test/grid-wrapper.test.js | 56 +++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 packages/grid/test/grid-wrapper.test.js diff --git a/packages/grid/test/grid-wrapper.test.js b/packages/grid/test/grid-wrapper.test.js new file mode 100644 index 0000000000..3fa048f36a --- /dev/null +++ b/packages/grid/test/grid-wrapper.test.js @@ -0,0 +1,56 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@vaadin/testing-helpers'; +import sinon from 'sinon'; +import '../vaadin-grid.js'; +import '../vaadin-grid-column-group.js'; +import '../vaadin-grid-column.js'; +import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; +import { flushGrid } from './helpers.js'; + +class GridWrapper extends PolymerElement { + static get template() { + return html` + + + + + + + `; + } +} + +customElements.define('grid-wrapper', GridWrapper); + +describe('columns slotted in custom element', () => { + let spy; + beforeEach(() => { + spy = sinon.spy(console, 'error'); + }); + + afterEach(() => { + spy.restore(); + }); + + it('should not throw if column with auto-width is defined', () => { + fixtureSync(''); + + expect(spy.called).to.be.false; + }); + + it('should not throw if column inside group with auto-width is defined', () => { + fixtureSync( + '', + ); + expect(spy.called).to.be.false; + }); + + it('should not throw if column with text-align is defined', () => { + fixtureSync( + '', + ); + // Delaying the definition of the custom-element so internal is not yet defined + customElements.define('grid-wrapper-delayed', class extends GridWrapper {}); + expect(spy.called).to.be.false; + }); +}); From 446d57fd81c4e27a076e85438e173267d4e7ad49 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Mon, 9 Oct 2023 16:27:25 +0300 Subject: [PATCH 3/4] test: improve tests and organize files --- .../grid/test/grid-wrapper-polymer.test.js | 2 + packages/grid/test/grid-wrapper.common.js | 59 +++++++++++++++++++ packages/grid/test/grid-wrapper.test.js | 56 ------------------ 3 files changed, 61 insertions(+), 56 deletions(-) create mode 100644 packages/grid/test/grid-wrapper-polymer.test.js create mode 100644 packages/grid/test/grid-wrapper.common.js delete mode 100644 packages/grid/test/grid-wrapper.test.js diff --git a/packages/grid/test/grid-wrapper-polymer.test.js b/packages/grid/test/grid-wrapper-polymer.test.js new file mode 100644 index 0000000000..00557852c1 --- /dev/null +++ b/packages/grid/test/grid-wrapper-polymer.test.js @@ -0,0 +1,2 @@ +import '../all-imports.js'; +import './grid-wrapper.common.js'; diff --git a/packages/grid/test/grid-wrapper.common.js b/packages/grid/test/grid-wrapper.common.js new file mode 100644 index 0000000000..2dfb205f01 --- /dev/null +++ b/packages/grid/test/grid-wrapper.common.js @@ -0,0 +1,59 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; +import { flushGrid, getBodyCellContent } from './helpers'; + +class GridWrapper extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }).innerHTML = ` + + + + + + + `; + } +} + +customElements.define('grid-wrapper', GridWrapper); + +async function initGrid(wrapper) { + const grid = wrapper.shadowRoot.querySelector('vaadin-grid'); + grid.items = Array.from({ length: 10 }).map((_, i) => ({ name: `Person ${i}` })); + flushGrid(grid); + await nextFrame(); + return grid; +} + +describe('columns slotted in custom element', () => { + it('should render column correctly with auto-width defined', async () => { + const wrapper = fixtureSync( + '', + ); + const grid = await initGrid(wrapper); + + expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('Person 0'); + }); + + it('should render column correctly with auto-width inside a column-group', async () => { + const wrapper = fixtureSync( + '', + ); + const grid = await initGrid(wrapper); + + expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('Person 0'); + }); + + it('should render column correctly when text-align is defined', async () => { + const wrapper = fixtureSync( + '', + ); + // Delaying the definition of the custom-element so internal is not yet defined + customElements.define('grid-wrapper-delayed', class extends GridWrapper {}); + + const grid = await initGrid(wrapper); + + expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('Person 0'); + }); +}); diff --git a/packages/grid/test/grid-wrapper.test.js b/packages/grid/test/grid-wrapper.test.js deleted file mode 100644 index 3fa048f36a..0000000000 --- a/packages/grid/test/grid-wrapper.test.js +++ /dev/null @@ -1,56 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fixtureSync } from '@vaadin/testing-helpers'; -import sinon from 'sinon'; -import '../vaadin-grid.js'; -import '../vaadin-grid-column-group.js'; -import '../vaadin-grid-column.js'; -import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; -import { flushGrid } from './helpers.js'; - -class GridWrapper extends PolymerElement { - static get template() { - return html` - - - - - - - `; - } -} - -customElements.define('grid-wrapper', GridWrapper); - -describe('columns slotted in custom element', () => { - let spy; - beforeEach(() => { - spy = sinon.spy(console, 'error'); - }); - - afterEach(() => { - spy.restore(); - }); - - it('should not throw if column with auto-width is defined', () => { - fixtureSync(''); - - expect(spy.called).to.be.false; - }); - - it('should not throw if column inside group with auto-width is defined', () => { - fixtureSync( - '', - ); - expect(spy.called).to.be.false; - }); - - it('should not throw if column with text-align is defined', () => { - fixtureSync( - '', - ); - // Delaying the definition of the custom-element so internal is not yet defined - customElements.define('grid-wrapper-delayed', class extends GridWrapper {}); - expect(spy.called).to.be.false; - }); -}); From 6562ebe083a74c102ca337cc0756f66a88c13261 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Mon, 9 Oct 2023 17:25:37 +0300 Subject: [PATCH 4/4] chore: add file sufix --- packages/grid/test/grid-wrapper.common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/test/grid-wrapper.common.js b/packages/grid/test/grid-wrapper.common.js index 2dfb205f01..f38447ea19 100644 --- a/packages/grid/test/grid-wrapper.common.js +++ b/packages/grid/test/grid-wrapper.common.js @@ -1,6 +1,6 @@ import { expect } from '@esm-bundle/chai'; import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; -import { flushGrid, getBodyCellContent } from './helpers'; +import { flushGrid, getBodyCellContent } from './helpers.js'; class GridWrapper extends HTMLElement { constructor() {