Skip to content

Commit

Permalink
update tests to respect async rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen committed Nov 15, 2024
1 parent 901dc2f commit 0ca7e1c
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 41 deletions.
1 change: 1 addition & 0 deletions packages/react-components/src/GridSelectionColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function GridSelectionColumn<TItem = GridDefaultItem>(
{...props}
footerRenderer={footerRenderer}
headerRenderer={headerRenderer}
ref={ref}
renderer={bodyRenderer}
>
{headerPortals}
Expand Down
137 changes: 96 additions & 41 deletions test/Grid.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
import chaiDom from 'chai-dom';
import { cleanup, render } from '@testing-library/react/pure.js';
import { cleanup, render, waitFor } from '@testing-library/react/pure.js';
import { Grid, type GridDataProvider } from '../packages/react-components/src/Grid.js';
import { GridColumn, GridColumnElement } from '../packages/react-components/src/GridColumn.js';
import { GridFilterColumn } from '../packages/react-components/src/GridFilterColumn.js';
Expand All @@ -9,7 +9,6 @@ import { GridSelectionColumn } from '../packages/react-components/src/GridSelect
import { GridSortColumn } from '../packages/react-components/src/GridSortColumn.js';
import { GridTreeColumn } from '../packages/react-components/src/GridTreeColumn.js';
import type { GridBodyReactRendererProps } from '../packages/react-components/src/renderers/grid.js';
import catchRender from './utils/catchRender.js';
import { GridColumnGroup } from '../packages/react-components/src/GridColumnGroup.js';
import { findByQuerySelector } from './utils/findByQuerySelector.js';
import { GridPro } from '../packages/react-components-pro/src/GridPro.js';
Expand Down Expand Up @@ -63,12 +62,10 @@ describe('Grid', () => {
);
}

async function getGridMeaningfulParts(columnElementName: string) {
function getGridMeaningfulParts(columnElementName: string) {
const grid = document.querySelector('vaadin-grid, vaadin-grid-pro')!;
expect(grid).to.exist;

await catchRender(grid, isGridCellContentNodeRendered);

const columns = document.querySelectorAll(columnElementName);

// Filter cells that don't have any textContent. Grid creates empty cells for some calculations,
Expand Down Expand Up @@ -102,10 +99,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-column');
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-column');

expect(columns).to.have.length(3);
expect(cells).to.have.length(15);

expect(columns).to.have.length(3);
expect(cells).to.have.length(15);
return [columns, cells];
});

const [headerRendererCell, headerInlineCell, nameHeaderCell, surnameHeaderCell, roleHeaderCell] = cells.slice(
0,
Expand Down Expand Up @@ -217,10 +218,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-column');
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(6);
expect(columns).to.have.length(1);
expect(cells).to.have.length(6);

return [columns, cells];
});

const [groupHeaderCell, nameHeaderCell, nameFooterCell, groupFooterCell] = cells;

Expand All @@ -239,9 +244,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-filter-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(3);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-filter-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(3);

return [columns, cells];
});

const [footerCell, bodyCell1, bodyCell2] = cells;

Expand All @@ -257,9 +267,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-filter-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-filter-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const footerCell = cells[1];

Expand All @@ -277,9 +292,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-selection-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-selection-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const [headerCell, footerCell, bodyCell1, bodyCell2] = cells;

Expand All @@ -298,9 +318,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-selection-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-selection-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const [headerCell, footerCell] = cells;

Expand All @@ -317,9 +342,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-sort-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(3);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-sort-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(3);

return [columns, cells];
});

const [footerCell, bodyCell1, bodyCell2] = cells;

Expand All @@ -335,9 +365,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-sort-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-sort-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const footerCell = cells[1];

Expand All @@ -355,9 +390,14 @@ describe('Grid', () => {
</GridPro>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-pro-edit-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-pro-edit-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const [headerCell, footerCell, bodyCell1, bodyCell2] = cells;

Expand All @@ -374,9 +414,14 @@ describe('Grid', () => {
</GridPro>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-pro-edit-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(4);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-pro-edit-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(4);

return [columns, cells];
});

const [headerCell, footerCell] = cells;

Expand Down Expand Up @@ -585,9 +630,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-tree-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(7);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-tree-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(7);

return [columns, cells];
});

const [treeHeaderCell, nameHeaderCell, treeFooterCell] = cells;

Expand All @@ -604,9 +654,14 @@ describe('Grid', () => {
</Grid>,
);

const [columns, cells] = await getGridMeaningfulParts('vaadin-grid-tree-column');
expect(columns).to.have.length(1);
expect(cells).to.have.length(7);
const [_columns, cells] = await waitFor(async () => {
const [columns, cells] = getGridMeaningfulParts('vaadin-grid-tree-column');

expect(columns).to.have.length(1);
expect(cells).to.have.length(7);

return [columns, cells];
});

const [treeHeaderCell, nameHeaderCell, treeFooterCell] = cells;

Expand Down

0 comments on commit 0ca7e1c

Please sign in to comment.