Migrate more tests to vitest-browser-react and browserUserEvent

test/browser/columnOrder.test.tsx

@@ -1,8 +1,8 @@
-import { render } from '@testing-library/react';
+import { page } from '@vitest/browser/context';
 
 import DataGrid, { SelectColumn, TreeDataGrid } from '../../src';
 import type { Column } from '../../src';
-import { getHeaderCells } from './utils';
+import { getHeaderCellsNew } from './utils';
 
 const frozen1: Column<unknown> = {
   key: 'f1',
@@ -32,9 +32,9 @@ test('column order', () => {
   function run(columns: readonly Column<unknown>[]) {
     let unmount;
     if (groupBy === undefined) {
-      ({ unmount } = render(<DataGrid columns={columns} rows={rows} />));
+      ({ unmount } = page.render(<DataGrid columns={columns} rows={rows} />));
     } else {
-      ({ unmount } = render(
+      ({ unmount } = page.render(
         <TreeDataGrid
           columns={columns}
           rows={rows}
@@ -46,7 +46,7 @@ test('column order', () => {
       ));
     }
 
-    expect(getHeaderCells().map((c) => c.textContent)).toStrictEqual(expected);
+    expect(getHeaderCellsNew().map((c) => c.element().textContent)).toStrictEqual(expected);
     unmount();
   }
 

test/browser/copyPaste.test.tsx

@@ -1,10 +1,14 @@
 import { useState } from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { page, userEvent } from '@vitest/browser/context';
 
 import DataGrid from '../../src';
 import type { Column, PasteEvent } from '../../src';
-import { copySelectedCell, getCellsAtRowIndex, getSelectedCell, pasteSelectedCell } from './utils';
+import {
+  copySelectedCellNew,
+  getCellsAtRowIndex,
+  getSelectedCellNew,
+  pasteSelectedCellNew
+} from './utils';
 
 interface Row {
   col: string;
@@ -75,17 +79,17 @@ function CopyPasteTest({
 function setup(onPasteCallback = true, onCopyCallback = false) {
   onPasteSpy.mockReset();
   onCopySpy.mockReset();
-  render(<CopyPasteTest onPasteCallback={onPasteCallback} onCopyCallback={onCopyCallback} />);
+  page.render(<CopyPasteTest onPasteCallback={onPasteCallback} onCopyCallback={onCopyCallback} />);
 }
 
 test('should not allow copy/paste if onPaste & onCopy is undefined', async () => {
   setup(false, false);
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).not.toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName);
   expect(onCopySpy).not.toHaveBeenCalled();
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   await userEvent.keyboard('{escape}');
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2');
   expect(onPasteSpy).not.toHaveBeenCalled();
@@ -94,112 +98,112 @@ test('should not allow copy/paste if onPaste & onCopy is undefined', async () =>
 test('should allow copy if only onCopy is specified', async () => {
   setup(false, true);
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   expect(onCopySpy).toHaveBeenCalledWith({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2');
   expect(onPasteSpy).not.toHaveBeenCalled();
 });
 
 test('should allow copy/paste if only onPaste is specified', async () => {
   setup(true, false);
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   expect(onCopySpy).not.toHaveBeenCalled();
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   expect(onPasteSpy).toHaveBeenCalledTimes(1);
 });
 
 test('should allow copy/paste if both onPaste & onCopy is specified', async () => {
   setup(true, true);
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   expect(onCopySpy).toHaveBeenCalledWith({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1');
   expect(onPasteSpy).toHaveBeenCalledTimes(1);
 });
 
 test('should not allow paste on readonly cells', async () => {
   setup();
   await userEvent.click(getCellsAtRowIndex(1)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3');
 });
 
 test('should allow copying a readonly cell, and pasting the value into a writable cell', async () => {
   setup();
   await userEvent.click(getCellsAtRowIndex(2)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   await userEvent.keyboard('{arrowup}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a3');
 });
 
 test('should cancel copy/paste on escape', async () => {
   setup();
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
-  expect(getSelectedCell()).toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName);
   await userEvent.keyboard('{escape}');
-  expect(getSelectedCell()).not.toHaveClass(copyCellClassName);
+  await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName);
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
+  await pasteSelectedCellNew();
   expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2');
 });
 
 test('should not allow copy on header or summary cells', async () => {
   setup();
   await userEvent.tab();
-  await copySelectedCell();
-  expect(getSelectedCell()).not.toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName);
   await userEvent.keyboard('{arrowdown}');
-  await pasteSelectedCell();
-  expect(getSelectedCell()).toHaveTextContent('a1');
+  await pasteSelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveTextContent('a1');
   expect(onPasteSpy).not.toHaveBeenCalled();
   await userEvent.keyboard('{Control>}{end}');
-  await copySelectedCell();
-  expect(getSelectedCell()).not.toHaveClass(copyCellClassName);
+  await copySelectedCellNew();
+  await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName);
   await userEvent.keyboard('{arrowup}');
-  await pasteSelectedCell();
-  expect(getSelectedCell()).toHaveTextContent('a3');
+  await pasteSelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveTextContent('a3');
   expect(onPasteSpy).not.toHaveBeenCalled();
 });
 
 test('should not allow paste on header or summary cells', async () => {
   setup();
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  await copySelectedCell();
+  await copySelectedCellNew();
   await userEvent.keyboard('{arrowup}');
-  await pasteSelectedCell();
-  expect(getSelectedCell()).toHaveTextContent('Col');
+  await pasteSelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveTextContent('Col');
   expect(onPasteSpy).not.toHaveBeenCalled();
   await userEvent.keyboard('{Control>}{end}');
-  await pasteSelectedCell();
-  expect(getSelectedCell()).toHaveTextContent('s1');
+  await pasteSelectedCellNew();
+  await expect.element(getSelectedCellNew()).toHaveTextContent('s1');
   expect(onPasteSpy).not.toHaveBeenCalled();
 });
 
 test('should not start editing when pressing ctrl+<input key>', async () => {
   setup();
   await userEvent.click(getCellsAtRowIndex(1)[0]);
   await userEvent.keyboard('{Control>}b');
-  expect(getSelectedCell()).not.toHaveClass('rdg-editor-container');
+  await expect.element(getSelectedCellNew()).not.toHaveClass('rdg-editor-container');
 });

test/browser/direction.test.ts

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 
 import type { Column } from '../../src';
-import { getGrid, getSelectedCell, setup } from './utils';
+import { getGridNew, getSelectedCellNew, setupNew } from './utils';
 
 interface Row {
   id: number;
@@ -22,28 +22,28 @@ const columns: readonly Column<Row>[] = [
 const rows: readonly Row[] = [];
 
 test('should use left to right direction by default', async () => {
-  setup({ rows, columns });
-  expect(getGrid()).toHaveAttribute('dir', 'ltr');
+  setupNew({ rows, columns });
+  await expect.element(getGridNew()).toHaveAttribute('dir', 'ltr');
   await userEvent.tab();
-  expect(getSelectedCell()).toHaveTextContent('ID');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
-  expect(getSelectedCell()).toHaveTextContent('Name');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('Name');
 });
 
 test('should use left to right direction if direction prop is set to ltr', async () => {
-  setup({ rows, columns, direction: 'ltr' });
-  expect(getGrid()).toHaveAttribute('dir', 'ltr');
+  setupNew({ rows, columns, direction: 'ltr' });
+  await expect.element(getGridNew()).toHaveAttribute('dir', 'ltr');
   await userEvent.tab();
-  expect(getSelectedCell()).toHaveTextContent('ID');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
-  expect(getSelectedCell()).toHaveTextContent('Name');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('Name');
 });
 
 test('should use right to left direction if direction prop is set to rtl', async () => {
-  setup({ rows, columns, direction: 'rtl' });
-  expect(getGrid()).toHaveAttribute('dir', 'rtl');
+  setupNew({ rows, columns, direction: 'rtl' });
+  await expect.element(getGridNew()).toHaveAttribute('dir', 'rtl');
   await userEvent.tab();
-  expect(getSelectedCell()).toHaveTextContent('ID');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowLeft}');
-  expect(getSelectedCell()).toHaveTextContent('Name');
+  await expect.element(getSelectedCellNew()).toHaveTextContent('Name');
 });