Migrate more test to use vitest-browser-react and browserUserEvent (#3633)

* Use `@vitest/browser`

* Update grouping tests

* Update `userEvent`

Author: amanmahajan7

test/browser/column/cellClass.test.ts

@@ -1,64 +1,64 @@
 import type { Column } from '../../../src';
 import { cellClassname } from '../../../src/style/cell';
-import { getCells, setup } from '../utils';
+import { getCellsNew, setupNew } from '../utils';
 
 interface Row {
   id: number;
 }
 
 const rows: readonly Row[] = [{ id: 0 }, { id: 1 }];
 
-test('cellClass is undefined', () => {
+test('cellClass is undefined', async () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
       name: 'ID'
     }
   ];
-  setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(cellClassname, { exact: true });
+  setupNew({ columns, rows });
+  const [cell1, cell2] = getCellsNew();
+  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
 });
 
-test('cellClass is a string', () => {
+test('cellClass is a string', async () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
       name: 'ID',
       cellClass: 'my-cell'
     }
   ];
-  setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
+  setupNew({ columns, rows });
+  const [cell1, cell2] = getCellsNew();
+  await expect.element(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
+  await expect.element(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
 });
 
-test('cellClass returns a string', () => {
+test('cellClass returns a string', async () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
       name: 'ID',
       cellClass: (row) => `my-cell-${row.id}`
     }
   ];
-  setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true });
+  setupNew({ columns, rows });
+  const [cell1, cell2] = getCellsNew();
+  await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true });
+  await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true });
 });
 
-test('cellClass returns undefined', () => {
+test('cellClass returns undefined', async () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
       name: 'ID',
       cellClass: () => undefined
     }
   ];
-  setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(cellClassname, { exact: true });
+  setupNew({ columns, rows });
+  const [cell1, cell2] = getCellsNew();
+  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
 });

test/browser/column/colSpan.test.ts

@@ -1,7 +1,7 @@
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../../src';
-import { getCellsAtRowIndex, getHeaderCells, setup, validateCellPosition } from '../utils';
+import { getCellsAtRowIndex, getHeaderCellsNew, setupNew, validateCellPosition } from '../utils';
 
 describe('colSpan', () => {
   function setupColSpanGrid(colCount = 15) {
@@ -34,13 +34,13 @@ describe('colSpan', () => {
         }
       });
     }
-    setup({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] });
+    setupNew({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] });
   }
 
   it('should merges cells', () => {
     setupColSpanGrid();
     // header
-    expect(getHeaderCells()).toHaveLength(13);
+    expect(getHeaderCellsNew()).toHaveLength(13);
 
     // top summary rows
     const topSummarryRow1 = getCellsAtRowIndex(0);
@@ -95,7 +95,7 @@ describe('colSpan', () => {
   it('should navigate between merged cells', async () => {
     setupColSpanGrid();
     // header row
-    await userEvent.click(getHeaderCells()[7]);
+    await userEvent.click(getHeaderCellsNew()[7]);
     validateCellPosition(7, 0);
     await userEvent.keyboard('{arrowright}');
     validateCellPosition(8, 0);

test/browser/column/draggable.test.ts

@@ -1,8 +1,7 @@
-import { act } from 'react';
 import { userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../../src';
-import { getHeaderCells, setup } from '../utils';
+import { getHeaderCellsNew, setupNew } from '../utils';
 
 const columns: readonly Column<never>[] = [
   {
@@ -28,35 +27,25 @@ const columns: readonly Column<never>[] = [
 
 test('draggable columns', async () => {
   const onColumnsReorder = vi.fn();
-  setup({ columns, rows: [], onColumnsReorder });
-  const [cell1, cell2, cell3, cell4] = getHeaderCells();
+  setupNew({ columns, rows: [], onColumnsReorder });
+  const [cell1, cell2, cell3, cell4] = getHeaderCellsNew();
 
-  expect(cell1).not.toHaveAttribute('draggable');
-  expect(cell2).toHaveAttribute('draggable');
-  expect(cell3).toHaveAttribute('draggable');
-  expect(cell4).toHaveAttribute('draggable');
+  await expect.element(cell1).not.toHaveAttribute('draggable');
+  await expect.element(cell2).toHaveAttribute('draggable');
+  await expect.element(cell3).toHaveAttribute('draggable');
+  await expect.element(cell4).toHaveAttribute('draggable');
 
   expect(onColumnsReorder).not.toHaveBeenCalled();
 
-  // eslint-disable-next-line testing-library/no-unnecessary-act
-  await act(async () => {
-    await userEvent.dragAndDrop(cell2, cell4);
-  });
-
+  await userEvent.dragAndDrop(cell2, cell4);
   expect(onColumnsReorder).toHaveBeenCalledWith('col2', 'col4');
   onColumnsReorder.mockReset();
 
   // should not call `onColumnsReorder` if drag and drop elements are the same
-  // eslint-disable-next-line testing-library/no-unnecessary-act
-  await act(async () => {
-    await userEvent.dragAndDrop(cell2, cell2);
-  });
+  await userEvent.dragAndDrop(cell2, cell2);
   expect(onColumnsReorder).not.toHaveBeenCalled();
 
   // should not drag a column if it is not specified as draggable
-  // eslint-disable-next-line testing-library/no-unnecessary-act
-  await act(async () => {
-    await userEvent.dragAndDrop(cell1, cell2);
-  });
+  await userEvent.dragAndDrop(cell1, cell2);
   expect(onColumnsReorder).not.toHaveBeenCalled();
 });

test/browser/column/frozen.test.ts

@@ -1,8 +1,8 @@
 import type { Column } from '../../../src';
 import { cellClassname, cellFrozenClassname } from '../../../src/style/cell';
-import { getHeaderCells, setup } from '../utils';
+import { getHeaderCellsNew, setupNew } from '../utils';
 
-test('frozen column have a specific class, and are stable-sorted before non-frozen columns', () => {
+test('frozen column have a specific class, and are stable-sorted before non-frozen columns', async () => {
   const columns: readonly Column<never>[] = [
     {
       key: 'col1',
@@ -25,16 +25,20 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
     }
   ];
 
-  setup({ columns, rows: [] });
-  const [cell1, cell2, cell3, cell4] = getHeaderCells();
+  setupNew({ columns, rows: [] });
+  const [cell1, cell2, cell3, cell4] = getHeaderCellsNew();
 
-  expect(cell1).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
-  expect(cell3).toHaveClass(cellClassname, { exact: true });
-  expect(cell4).toHaveClass(cellClassname, { exact: true });
+  await expect
+    .element(cell1)
+    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  await expect
+    .element(cell2)
+    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  await expect.element(cell3).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell4).toHaveClass(cellClassname, { exact: true });
 
-  expect(cell1).toHaveTextContent('col1');
-  expect(cell2).toHaveTextContent('col3');
-  expect(cell3).toHaveTextContent('col2');
-  expect(cell4).toHaveTextContent('col4');
+  await expect.element(cell1).toHaveTextContent('col1');
+  await expect.element(cell2).toHaveTextContent('col3');
+  await expect.element(cell3).toHaveTextContent('col2');
+  await expect.element(cell4).toHaveTextContent('col4');
 });