update tests to respect async rendering

vaadin · Nov 15, 2024 · 9ba8bc6 · 9ba8bc6
1 parent 901dc2f
commit 9ba8bc6
Showing 1 changed file with 96 additions and 40 deletions.
diff --git a/test/Grid.spec.tsx b/test/Grid.spec.tsx
@@ -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';
@@ -63,12 +63,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,
@@ -102,10 +100,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,
@@ -217,10 +219,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;
 
@@ -239,9 +245,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;
 
@@ -257,9 +268,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];
 
@@ -277,9 +293,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;
 
@@ -298,9 +319,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;
 
@@ -317,9 +343,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;
 
@@ -335,9 +366,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];
 
@@ -355,9 +391,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;
 
@@ -374,9 +415,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;
 
@@ -585,9 +631,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;
 
@@ -604,9 +655,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;