Fix flaky tests (#3639)

* Rename utils * Does this fix flaky test * Use new `getGrid` * Remove act * Remove setup * revert * Fix flaky tests * Update vitest.workspace.ts Co-authored-by: Nicolas Stepien <[email protected]> --------- Co-authored-by: Nicolas Stepien <[email protected]>
adazzle · Nov 20, 2024 · a606cdd · a606cdd
1 parent ea34ae9
commit a606cdd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/test/browser/dragFill.test.tsx b/test/browser/dragFill.test.tsx
@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { commands, page, userEvent } from '@vitest/browser/context';
 
 import DataGrid from '../../src';
 import type { Column, FillEvent } from '../../src';
-import { getCellsAtRowIndexOld, getRowsOld } from './utils';
+import { getCellsAtRowIndex } from './utils';
 
 interface Row {
   col: string;
@@ -24,7 +23,7 @@ const columns: readonly Column<Row>[] = [
 const initialRows: readonly Row[] = [{ col: 'a1' }, { col: 'a2' }, { col: 'a3' }, { col: 'a4' }];
 
 function setup(allowDragFill = true) {
-  render(<DragFillTest allowDragFill={allowDragFill} />);
+  page.render(<DragFillTest allowDragFill={allowDragFill} />);
 }
 
 function DragFillTest({ allowDragFill = true }: { allowDragFill?: boolean }) {
@@ -50,68 +49,53 @@ function getDragHandle() {
 
 test('should not allow dragFill if onFill is undefined', async () => {
   setup(false);
-  await userEvent.click(getCellsAtRowIndexOld(0)[0]);
+  await userEvent.click(getCellsAtRowIndex(0)[0]);
   expect(getDragHandle()).not.toBeInTheDocument();
 });
 
 test('should allow dragFill if onFill is specified', async () => {
   setup();
-  const cell = getCellsAtRowIndexOld(0)[0];
-  await userEvent.click(cell);
-  expect(cell).toHaveFocus();
+  await userEvent.click(getCellsAtRowIndex(0)[0]);
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
   await userEvent.dblClick(getDragHandle()!);
-  expect(cell).toHaveFocus();
-  expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1');
-  expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1');
-  expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
+  await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
+  await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1');
+  await expect.element(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell
 });
 
 test('should update single row using mouse', async () => {
   setup();
-  const cell = getCellsAtRowIndexOld(0)[0];
-  await userEvent.click(cell);
-  await userEvent.pointer([
-    { keys: '[MouseLeft>]', target: getDragHandle()! },
-    { target: getRowsOld()[1] },
-    { keys: '[/MouseLeft]' }
-  ]);
-  expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1');
-  expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a3');
-  expect(cell).toHaveFocus();
+  // @ts-expect-error
+  await commands.dragFill('a1', 'a2');
+  await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
+  await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
 });
 
 test('should update multiple rows using mouse', async () => {
   setup();
-  await userEvent.click(getCellsAtRowIndexOld(0)[0]);
-  await userEvent.pointer([
-    { keys: '[MouseLeft>]', target: getDragHandle()! },
-    { target: getRowsOld()[3] },
-    { keys: '[/MouseLeft]' }
-  ]);
-  expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1');
-  expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1');
-  expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell
+  // @ts-expect-error
+  await commands.dragFill('a1', 'a4');
+  await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
+  await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1');
+  await expect.element(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell
 });
 
 test('should allow drag up using mouse', async () => {
   setup();
-  await userEvent.click(getCellsAtRowIndexOld(3)[0]);
-  await userEvent.pointer([
-    { keys: '[MouseLeft>]', target: getDragHandle()! },
-    { target: getRowsOld()[0] },
-    { keys: '[/MouseLeft]' }
-  ]);
-  expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent('a4');
-  expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a4');
-  expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a4');
+  // @ts-expect-error
+  await commands.dragFill('a4', 'a1');
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent('a4');
+  await expect.element(getCellsAtRowIndex(1)[0]).toHaveTextContent('a4');
+  await expect.element(getCellsAtRowIndex(2)[0]).toHaveTextContent('a4');
 });
 
 test('should focus the cell when drag handle is clicked', async () => {
   setup();
-  const cell = getCellsAtRowIndexOld(0)[0];
-  await userEvent.click(cell);
+  await userEvent.click(getCellsAtRowIndex(0)[0]);
   await userEvent.click(document.body);
   expect(document.body).toHaveFocus();
   await userEvent.click(getDragHandle()!);
-  expect(cell).toHaveFocus();
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
 });
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
@@ -15,6 +15,18 @@ const resizeColumn: BrowserCommand<[resizeBy: number]> = async (context, resizeB
   await page.mouse.up();
 };
 
+// TODO: remove when `userEvent.pointer` is supported
+const dragFill: BrowserCommand<[from: string, to: string]> = async (context, from, to) => {
+  const page = context.page;
+  const frame = await context.frame();
+  await frame.getByRole('gridcell', { name: from }).click();
+  await frame.locator('.rdg-cell-drag-handle').hover();
+  await page.mouse.down();
+  const toCell = frame.getByRole('gridcell', { name: to });
+  await toCell.hover();
+  await page.mouse.up();
+};
+
 export default defineWorkspace([
   {
     extends: './vite.config.ts',
@@ -25,7 +37,7 @@ export default defineWorkspace([
         enabled: true,
         name: 'chromium',
         provider: 'playwright',
-        commands: { resizeColumn },
+        commands: { resizeColumn, dragFill },
         viewport: { width: 1920, height: 1080 },
         headless: true,
         screenshotFailures: process.env.CI !== 'true'