Minor test improvements (#3991)

Author: nstepien

test/browser/column/grouping.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import type { ColumnOrColumnGroup } from '../../../src';
-import { safeTab, setup, tabIntoGrid, testCount, validateCellPosition } from '../utils';
+import { safeTab, setup, testCount, validateCellPosition } from '../utils';
 
 const grid = page.getGrid();
 const headerRows = grid.getHeaderRow();
@@ -252,12 +252,12 @@ test('grouping', async () => {
 });
 
 test('keyboard navigation', async () => {
-  await setup({ columns, rows: [{}] }, true);
+  await setup({ columns, rows: [{}] });
 
   // no initial active position
   await expect.element(grid.getActiveCell()).not.toBeInTheDocument();
 
-  await tabIntoGrid();
+  await safeTab();
   await validateCellPosition(0, 3);
 
   // arrow navigation

test/browser/direction.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import type { Column } from '../../src';
-import { setup, tabIntoGrid } from './utils';
+import { safeTab, setup } from './utils';
 
 const grid = page.getGrid();
 const activeCell = grid.getActiveCell();
@@ -25,27 +25,27 @@ const columns: readonly Column<Row>[] = [
 const rows: readonly Row[] = [];
 
 test('should use left to right direction by default', async () => {
-  await setup({ rows, columns }, true);
+  await setup({ rows, columns });
   await expect.element(grid).toHaveAttribute('dir', 'ltr');
-  await tabIntoGrid();
+  await safeTab();
   await expect.element(activeCell).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
   await expect.element(activeCell).toHaveTextContent('Name');
 });
 
 test('should use left to right direction if direction prop is set to ltr', async () => {
-  await setup({ rows, columns, direction: 'ltr' }, true);
+  await setup({ rows, columns, direction: 'ltr' });
   await expect.element(grid).toHaveAttribute('dir', 'ltr');
-  await tabIntoGrid();
+  await safeTab();
   await expect.element(activeCell).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
   await expect.element(activeCell).toHaveTextContent('Name');
 });
 
 test('should use right to left direction if direction prop is set to rtl', async () => {
-  await setup({ rows, columns, direction: 'rtl' }, true);
+  await setup({ rows, columns, direction: 'rtl' });
   await expect.element(grid).toHaveAttribute('dir', 'rtl');
-  await tabIntoGrid();
+  await safeTab();
   await expect.element(activeCell).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowLeft}');
   await expect.element(activeCell).toHaveTextContent('Name');

test/browser/dragFill.test.tsx

@@ -88,9 +88,14 @@ test('should allow drag up using mouse', async () => {
 
 test('should focus the cell when drag handle is clicked', async () => {
   await setup();
-  await userEvent.click(getCellsAtRowIndex(0).nth(0));
-  await userEvent.click(document.body);
-  await expect.element(document.body).toHaveFocus();
+  const cell = getCellsAtRowIndex(0).nth(0);
+
+  await userEvent.click(cell);
+  await expect.element(cell).toHaveFocus();
+
+  cell.element().blur();
+  await expect.element(cell).not.toHaveFocus();
+
   await userEvent.click(dragHandle);
-  await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveFocus();
+  await expect.element(cell).toHaveFocus();
 });

test/browser/events.test.tsx

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid } from '../../src';
-import type { Column, DataGridProps } from '../../src';
+import type { Column } from '../../src';
 import { safeTab } from './utils';
 
 interface Row {
@@ -55,7 +55,9 @@ const rows: readonly Row[] = [
 describe('Events', () => {
   it('should not select cell if onCellMouseDown prevents grid default', async () => {
     await page.render(
-      <EventTest
+      <DataGrid
+        columns={columns}
+        rows={rows}
         onCellMouseDown={(args, event) => {
           if (args.column.key === 'col1') {
             event.preventGridDefault();
@@ -71,7 +73,9 @@ describe('Events', () => {
 
   it('should be able to open editor editor on single click using onCellClick', async () => {
     await page.render(
-      <EventTest
+      <DataGrid
+        columns={columns}
+        rows={rows}
         onCellClick={(args, event) => {
           if (args.column.key === 'col2') {
             event.preventGridDefault();
@@ -88,7 +92,9 @@ describe('Events', () => {
 
   it('should not open editor editor on double click if onCellDoubleClick prevents default', async () => {
     await page.render(
-      <EventTest
+      <DataGrid
+        columns={columns}
+        rows={rows}
         onCellDoubleClick={(args, event) => {
           if (args.column.key === 'col1') {
             event.preventGridDefault();
@@ -104,7 +110,9 @@ describe('Events', () => {
 
   it('should call onCellContextMenu when cell is right clicked', async () => {
     const onCellContextMenu = vi.fn();
-    await page.render(<EventTest onCellContextMenu={onCellContextMenu} />);
+    await page.render(
+      <DataGrid columns={columns} rows={rows} onCellContextMenu={onCellContextMenu} />
+    );
     expect(onCellContextMenu).not.toHaveBeenCalled();
     await userEvent.click(page.getCell({ name: '1' }), { button: 'right' });
     expect(onCellContextMenu).toHaveBeenCalledExactlyOnceWith(
@@ -122,7 +130,9 @@ describe('Events', () => {
   it('should call onActivePositionChange when cell selection is changed', async () => {
     const onActivePositionChange = vi.fn();
 
-    await page.render(<EventTest onActivePositionChange={onActivePositionChange} />);
+    await page.render(
+      <DataGrid columns={columns} rows={rows} onActivePositionChange={onActivePositionChange} />
+    );
 
     expect(onActivePositionChange).not.toHaveBeenCalled();
 
@@ -181,16 +191,3 @@ describe('Events', () => {
     expect(onActivePositionChange).toHaveBeenCalledTimes(6);
   });
 });
-
-type EventProps = Pick<
-  DataGridProps<Row>,
-  | 'onCellMouseDown'
-  | 'onCellClick'
-  | 'onCellDoubleClick'
-  | 'onCellContextMenu'
-  | 'onActivePositionChange'
->;
-
-function EventTest(props: EventProps) {
-  return <DataGrid columns={columns} rows={rows} {...props} />;
-}

test/browser/keyboardNavigation.test.tsx

@@ -7,12 +7,13 @@ import {
   safeTab,
   scrollGrid,
   setup,
-  tabIntoGrid,
   testCount,
   validateCellPosition
 } from './utils';
 
 const activeCell = page.getActiveCell();
+const activeSelectAllCheckbox = activeCell.getSelectAllCheckbox();
+const activeSelectCheckbox = activeCell.getByRole('checkbox', { name: 'Select', exact: true });
 
 type Row = undefined;
 
@@ -31,13 +32,13 @@ const columns: readonly Column<Row, Row>[] = [
 ];
 
 test('keyboard navigation', async () => {
-  await setup({ columns, rows, topSummaryRows, bottomSummaryRows }, true);
+  await setup({ columns, rows, topSummaryRows, bottomSummaryRows });
 
   // no initial active position
   await expect.element(activeCell).not.toBeInTheDocument();
 
   // tab into the grid
-  await tabIntoGrid();
+  await safeTab();
   await validateCellPosition(0, 0);
 
   // tab to the next cell
@@ -107,10 +108,10 @@ test('keyboard navigation', async () => {
 });
 
 test('arrow and tab navigation', async () => {
-  await setup({ columns, rows, bottomSummaryRows }, true);
+  await setup({ columns, rows, bottomSummaryRows });
 
   // pressing arrowleft on the leftmost cell does nothing
-  await tabIntoGrid();
+  await safeTab();
   await userEvent.keyboard('{arrowdown}');
   await validateCellPosition(0, 1);
   await userEvent.keyboard('{arrowleft}');
@@ -132,7 +133,17 @@ test('arrow and tab navigation', async () => {
 });
 
 test('grid enter/exit', async () => {
-  await setup<Row, Row>({ columns, rows: Array.from({ length: 5 }), bottomSummaryRows }, true);
+  await page.render(
+    <>
+      <button type="button">Before</button>
+      <DataGrid
+        columns={columns}
+        rows={Array.from<Row>({ length: 5 })}
+        bottomSummaryRows={bottomSummaryRows}
+      />
+      <button type="button">After</button>
+    </>
+  );
 
   const beforeButton = page.getByRole('button', { name: 'Before' });
   const afterButton = page.getByRole('button', { name: 'After' });
@@ -141,31 +152,37 @@ test('grid enter/exit', async () => {
   await expect.element(activeCell).not.toBeInTheDocument();
 
   // tab into the grid
-  await tabIntoGrid();
+  await safeTab();
+  await safeTab();
   await validateCellPosition(0, 0);
+  await expect.element(activeSelectAllCheckbox).toHaveFocus();
 
   // shift+tab tabs out of the grid if we are at the first cell
   await safeTab(true);
   await expect.element(beforeButton).toHaveFocus();
 
   await safeTab();
   await validateCellPosition(0, 0);
+  await expect.element(activeSelectAllCheckbox).toHaveFocus();
 
   await userEvent.keyboard('{arrowdown}{arrowdown}');
   await validateCellPosition(0, 2);
+  await expect.element(activeSelectCheckbox).toHaveFocus();
 
   // tab should focus the last active cell
   // click outside the grid
   await userEvent.click(beforeButton);
   await safeTab();
   await userEvent.keyboard('{arrowdown}');
   await validateCellPosition(0, 3);
+  await expect.element(activeSelectCheckbox).toHaveFocus();
 
   // shift+tab should focus the last active cell
+  // click outside the grid
   await userEvent.click(afterButton);
   await safeTab(true);
   await validateCellPosition(0, 3);
-  await expect.element(activeCell.getByRole('checkbox')).toHaveFocus();
+  await expect.element(activeSelectCheckbox).toHaveFocus();
 
   // tab tabs out of the grid if we are at the last cell
   await userEvent.keyboard('{Control>}{end}{/Control}');
@@ -174,16 +191,15 @@ test('grid enter/exit', async () => {
 });
 
 test('navigation with focusable cell renderer', async () => {
-  await setup<Row, Row>({ columns, rows: Array.from({ length: 1 }), bottomSummaryRows }, true);
-  await tabIntoGrid();
+  await setup({ columns, rows: Array.from<Row>({ length: 1 }), bottomSummaryRows });
+  await safeTab();
   await userEvent.keyboard('{arrowdown}');
   await validateCellPosition(0, 1);
 
   // cell should not set tabIndex to 0 if it contains a focusable cell renderer
   await expect.element(activeCell).toHaveAttribute('tabIndex', '-1');
-  const checkbox = activeCell.getByRole('checkbox');
-  await expect.element(checkbox).toHaveFocus();
-  await expect.element(checkbox).toHaveAttribute('tabIndex', '0');
+  await expect.element(activeSelectCheckbox).toHaveFocus();
+  await expect.element(activeSelectCheckbox).toHaveAttribute('tabIndex', '0');
 
   await safeTab();
   await validateCellPosition(1, 1);
@@ -215,11 +231,8 @@ test('navigation when header and summary rows have focusable elements', async ()
     }
   ];
 
-  await setup<Row, number>(
-    { columns, rows: Array.from({ length: 2 }), bottomSummaryRows: [1, 2] },
-    true
-  );
-  await tabIntoGrid();
+  await setup({ columns, rows: Array.from<Row>({ length: 2 }), bottomSummaryRows: [1, 2] });
+  await safeTab();
 
   // should set focus on the header filter
   await expect.element(page.getByTestId('header-filter1')).toHaveFocus();
@@ -259,8 +272,8 @@ test('navigation when active cell not in the viewport', async () => {
   for (let i = 0; i < 99; i++) {
     columns.push({ key: `col${i}`, name: `col${i}`, frozen: i < 5 });
   }
-  await setup({ columns, rows, bottomSummaryRows }, true);
-  await tabIntoGrid();
+  await setup({ columns, rows, bottomSummaryRows });
+  await safeTab();
   await validateCellPosition(0, 0);
 
   await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}');
@@ -330,8 +343,8 @@ test('reset active cell when row is removed', async () => {
 });
 
 test('should not change the left and right arrow behavior for right to left languages', async () => {
-  await setup<Row, Row>({ columns, rows, direction: 'rtl' }, true);
-  await tabIntoGrid();
+  await setup<Row, Row>({ columns, rows, direction: 'rtl' });
+  await safeTab();
   await validateCellPosition(0, 0);
   await safeTab();
   await validateCellPosition(1, 0);

test/browser/rowHeight.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from 'vitest/browser';
 
 import type { Column, DataGridProps } from '../../src';
-import { setup, tabIntoGrid, testRowCount } from './utils';
+import { safeTab, setup, testRowCount } from './utils';
 
 const grid = page.getGrid();
 
@@ -19,7 +19,7 @@ function setupGrid(rowHeight: DataGridProps<Row>['rowHeight']) {
       width: 80
     });
   }
-  return setup({ columns, rows, rowHeight }, true);
+  return setup({ columns, rows, rowHeight });
 }
 
 async function expectGridRows(rowHeightFn: (row: number) => number, expected: string) {
@@ -36,7 +36,7 @@ test('rowHeight is number', async () => {
       '40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px'
   });
   await testRowCount(30);
-  await tabIntoGrid();
+  await safeTab();
   await expect.element(grid).toHaveProperty('scrollTop', 0);
   await userEvent.keyboard('{Control>}{end}');
   const gridEl = grid.element();
@@ -52,7 +52,7 @@ test('rowHeight is function', async () => {
   });
   await testRowCount(22);
 
-  await tabIntoGrid();
+  await safeTab();
   await expect.element(grid).toHaveProperty('scrollTop', 0);
   await userEvent.keyboard('{Control>}{end}');
   const gridEl = grid.element();

test/browser/styles.css

@@ -0,0 +1,4 @@
+.rdg {
+  block-size: 1080px;
+  scrollbar-width: none;
+}