-1

adazzle · Nov 18, 2024 · c59bffe · c59bffe
1 parent ec4485a
commit c59bffe
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/test/browser/scrollToCell.test.tsx b/test/browser/scrollToCell.test.tsx
@@ -1,6 +1,5 @@
 import { useRef } from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { page, userEvent } from '@vitest/browser/context';
 
 import type { Column, DataGridHandle } from '../../src';
 import DataGrid from '../../src';
@@ -50,11 +49,11 @@ function Grid() {
 
 async function testScroll(p: PartialPosition) {
   position = p;
-  await userEvent.click(screen.getByRole('button'));
+  await userEvent.click(page.getByRole('button'));
 }
 
 test('scrollToCell', async () => {
-  render(<Grid />);
+  page.render(<Grid />);
   const grid = getGrid();
   validateScrollPosition(0, 0);
 

diff --git a/test/browser/sorting.test.tsx b/test/browser/sorting.test.tsx
@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { render, screen } 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, SortColumn } from '../../src/types';
-import { getHeaderCells } from './utils';
+import { getHeaderCellsNew } from './utils';
 
 const columns: readonly Column<never>[] = [
   { key: 'colA', name: 'colA' },
@@ -31,101 +30,99 @@ function TestGrid() {
 }
 
 function setup() {
-  render(<TestGrid />);
+  page.render(<TestGrid />);
 }
 
 function testSortColumns(expectedValue: readonly SortColumn[]) {
-  expect(screen.getByTestId('sortColumnsValue', { suggest: false })).toHaveTextContent(
-    JSON.stringify(expectedValue)
-  );
+  return expect
+    .element(page.getByTestId('sortColumnsValue'))
+    .toHaveTextContent(JSON.stringify(expectedValue));
 }
 
 test('should not sort if sortable is false', async () => {
   setup();
-  const headerCell = getHeaderCells()[3];
+  const headerCell = getHeaderCellsNew()[3].element();
   await userEvent.click(headerCell);
   expect(headerCell).not.toHaveAttribute('aria-sort');
-  testSortColumns([]);
+  await testSortColumns([]);
 });
 
 test('single column sort', async () => {
   setup();
-  const headerCell = getHeaderCells()[0];
+  const headerCell = getHeaderCellsNew()[0].element();
   await userEvent.click(headerCell);
   expect(headerCell).toHaveAttribute('aria-sort', 'ascending');
   // priority is not shown for single sort
   expect(headerCell).not.toHaveTextContent('1');
-  testSortColumns([{ columnKey: 'colA', direction: 'ASC' }]);
+  await testSortColumns([{ columnKey: 'colA', direction: 'ASC' }]);
   await userEvent.click(headerCell);
   expect(headerCell).toHaveAttribute('aria-sort', 'descending');
-  testSortColumns([{ columnKey: 'colA', direction: 'DESC' }]);
+  await testSortColumns([{ columnKey: 'colA', direction: 'DESC' }]);
   await userEvent.click(headerCell);
   expect(headerCell).not.toHaveAttribute('aria-sort');
-  testSortColumns([]);
+  await testSortColumns([]);
 });
 
 test('multi column sort', async () => {
   setup();
-  const user = userEvent.setup();
-  const [headerCell1, headerCell2, headerCell3] = getHeaderCells();
-  await user.click(headerCell1);
-  await user.keyboard('{Control>}');
-  await user.click(headerCell2);
-  await user.click(headerCell3);
+  const [headerCell1, headerCell2, headerCell3] = getHeaderCellsNew();
+  await userEvent.click(headerCell1);
+  await userEvent.keyboard('{Control>}');
+  await userEvent.click(headerCell2);
+  await userEvent.click(headerCell3);
 
   // aria-sort is only added for single sort
-  expect(headerCell1).not.toHaveAttribute('aria-sort');
-  expect(headerCell1).toHaveTextContent('1'); // priority
-  expect(headerCell2).not.toHaveAttribute('aria-sort');
-  expect(headerCell2).toHaveTextContent('2');
-  expect(headerCell3).not.toHaveAttribute('aria-sort');
-  expect(headerCell3).toHaveTextContent('3');
-  testSortColumns([
+  await expect.element(headerCell1).not.toHaveAttribute('aria-sort');
+  await expect.element(headerCell1).toHaveTextContent('1'); // priority
+  await expect.element(headerCell2).not.toHaveAttribute('aria-sort');
+  await expect.element(headerCell2).toHaveTextContent('2');
+  await expect.element(headerCell3).not.toHaveAttribute('aria-sort');
+  await expect.element(headerCell3).toHaveTextContent('3');
+  await testSortColumns([
     { columnKey: 'colA', direction: 'ASC' },
     { columnKey: 'colB', direction: 'DESC' },
     { columnKey: 'colC', direction: 'ASC' }
   ]);
 
-  await user.click(headerCell2);
-  testSortColumns([
+  await userEvent.click(headerCell2);
+  await testSortColumns([
     { columnKey: 'colA', direction: 'ASC' },
     { columnKey: 'colB', direction: 'ASC' },
     { columnKey: 'colC', direction: 'ASC' }
   ]);
-  await user.click(headerCell2);
-  testSortColumns([
+  await userEvent.click(headerCell2);
+  await testSortColumns([
     { columnKey: 'colA', direction: 'ASC' },
     { columnKey: 'colC', direction: 'ASC' }
   ]);
-  expect(headerCell3).toHaveTextContent('2');
+  await expect.element(headerCell3).toHaveTextContent('2');
 
   // clicking on a column without ctrlKey should remove multisort
-  await user.keyboard('{/Control}');
-  await user.click(headerCell2);
-  testSortColumns([{ columnKey: 'colB', direction: 'DESC' }]);
-  expect(headerCell2).toHaveAttribute('aria-sort');
-  expect(headerCell2).not.toHaveTextContent('2');
+  await userEvent.keyboard('{/Control}');
+  await userEvent.click(headerCell2);
+  await testSortColumns([{ columnKey: 'colB', direction: 'DESC' }]);
+  await expect.element(headerCell2).toHaveAttribute('aria-sort');
+  await expect.element(headerCell2).not.toHaveTextContent('2');
 });
 
 test('multi column sort with metakey', async () => {
   setup();
-  const [headerCell1, headerCell2] = getHeaderCells();
-  const user = userEvent.setup();
-  await user.click(headerCell1);
-  await user.keyboard('{Meta>}');
-  await user.click(headerCell2);
-  testSortColumns([
+  const [headerCell1, headerCell2] = getHeaderCellsNew();
+  await userEvent.click(headerCell1);
+  await userEvent.keyboard('{Meta>}');
+  await userEvent.click(headerCell2);
+  await testSortColumns([
     { columnKey: 'colA', direction: 'ASC' },
     { columnKey: 'colB', direction: 'DESC' }
   ]);
 });
 
 test('multi column sort with keyboard', async () => {
   setup();
-  const [headerCell1] = getHeaderCells();
+  const [headerCell1] = getHeaderCellsNew();
   await userEvent.click(headerCell1);
   await userEvent.keyboard(' {arrowright}{Control>}{enter}');
-  testSortColumns([
+  await testSortColumns([
     { columnKey: 'colA', direction: 'DESC' },
     { columnKey: 'colB', direction: 'DESC' }
   ]);