Bump the vitest group with 3 updates (#3692)

dependabot[bot] · nstepien · web-flow · commit 3703f4f191e3 · 2025-01-20T12:46:48.000Z
* Bump the vitest group with 3 updates Bumps the vitest group with 3 updates: [@vitest/browser](https://github.com/vitest-dev/vitest/tree/HEAD/packages/browser), [@vitest/coverage-v8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-v8) and [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest). Updates `@vitest/browser` from 2.1.8 to 3.0.2 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v3.0.2/packages/browser) Updates `@vitest/coverage-v8` from 2.1.8 to 3.0.2 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v3.0.2/packages/coverage-v8) Updates `vitest` from 2.1.8 to 3.0.2 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v3.0.2/packages/vitest) --- updated-dependencies: - dependency-name: "@vitest/browser" dependency-type: direct:development update-type: version-update:semver-major dependency-group: vitest - dependency-name: "@vitest/coverage-v8" dependency-type: direct:development update-type: version-update:semver-major dependency-group: vitest - dependency-name: vitest dependency-type: direct:development update-type: version-update:semver-major dependency-group: vitest ... Signed-off-by: dependabot[bot] <support@github.com> * update config * use toHaveBeenCalledOnce/toHaveBeenCalledExactlyOnceWith --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Nicolas Stepien <stepien.nicolas@gmail.com>
diff --git a/package.json b/package.json
@@ -74,8 +74,8 @@
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^2.1.8",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/browser": "^3.0.2",
+    "@vitest/coverage-v8": "^3.0.2",
     "@vitest/eslint-plugin": "^1.1.24",
     "@wyw-in-js/rollup": "^0.5.0",
     "@wyw-in-js/vite": "^0.5.0",
@@ -100,7 +100,7 @@
     "rolldown": "^1.0.0-beta.1",
     "typescript": "~5.7.2",
     "vite": "^6.0.3",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.2",
     "vitest-browser-react": "^0.0.4"
   },
   "peerDependencies": {
diff --git a/test/browser/column/colSpan.test.ts b/test/browser/column/colSpan.test.ts
@@ -176,7 +176,7 @@ describe('colSpan', () => {
     const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
     const testScrollIntoView = () => {
       expect(spy).toHaveBeenCalled();
-      spy.mockReset();
+      spy.mockClear();
     };
     await navigate(3);
     testScrollIntoView();
diff --git a/test/browser/column/draggable.test.ts b/test/browser/column/draggable.test.ts
@@ -38,8 +38,8 @@ test('draggable columns', async () => {
   expect(onColumnsReorder).not.toHaveBeenCalled();
 
   await userEvent.dragAndDrop(cell2, cell4);
-  expect(onColumnsReorder).toHaveBeenCalledWith('col2', 'col4');
-  onColumnsReorder.mockReset();
+  expect(onColumnsReorder).toHaveBeenCalledExactlyOnceWith('col2', 'col4');
+  onColumnsReorder.mockClear();
 
   // should not call `onColumnsReorder` if drag and drop elements are the same
   await userEvent.dragAndDrop(cell2, cell2);
diff --git a/test/browser/column/renderCell.test.tsx b/test/browser/column/renderCell.test.tsx
@@ -95,8 +95,7 @@ describe('Custom cell renderer', () => {
     await expect.element(cell).toHaveTextContent('value: 1');
     await userEvent.click(page.getByRole('button'));
     await expect.element(cell).toHaveTextContent('value: 2');
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([{ id: 2 }], {
+    expect(onChange).toHaveBeenCalledExactlyOnceWith([{ id: 2 }], {
       column: {
         ...column,
         frozen: false,
diff --git a/test/browser/column/renderEditCell.test.tsx b/test/browser/column/renderEditCell.test.tsx
@@ -80,8 +80,7 @@ describe('Editor', () => {
     // too quickly for outside clicks to be detected
     await userEvent.click(saveButton, { delay: 10 });
 
-    expect(onSave).toHaveBeenCalledTimes(1);
-    expect(onSave).toHaveBeenCalledWith([
+    expect(onSave).toHaveBeenCalledExactlyOnceWith([
       { col1: 1234, col2: 'a1' },
       { col1: 2, col2: 'a2' }
     ]);
diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
@@ -72,8 +72,7 @@ test('should resize column when dragging the handle', async () => {
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
   await resize({ column: col2.element(), resizeBy: -50 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' });
-  expect(onColumnResize).toHaveBeenCalledTimes(1);
-  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 150);
+  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150);
 });
 
 test('should use the maxWidth if specified', async () => {
diff --git a/test/browser/copyPaste.test.tsx b/test/browser/copyPaste.test.tsx
@@ -100,7 +100,7 @@ test('should allow copy if only onCopy is specified', async () => {
   await userEvent.click(getCellsAtRowIndexOld(0)[0]);
   await copySelectedCell();
   await expect.element(getSelectedCell()).toHaveClass(copyCellClassName);
-  expect(onCopySpy).toHaveBeenCalledWith({
+  expect(onCopySpy).toHaveBeenCalledExactlyOnceWith({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });
@@ -119,22 +119,22 @@ test('should allow copy/paste if only onPaste is specified', async () => {
   await userEvent.keyboard('{arrowdown}');
   await pasteSelectedCell();
   expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1');
-  expect(onPasteSpy).toHaveBeenCalledTimes(1);
+  expect(onPasteSpy).toHaveBeenCalledOnce();
 });
 
 test('should allow copy/paste if both onPaste & onCopy is specified', async () => {
   setup(true, true);
   await userEvent.click(getCellsAtRowIndexOld(0)[0]);
   await copySelectedCell();
   await expect.element(getSelectedCell()).toHaveClass(copyCellClassName);
-  expect(onCopySpy).toHaveBeenCalledWith({
+  expect(onCopySpy).toHaveBeenCalledExactlyOnceWith({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });
   await userEvent.keyboard('{arrowdown}');
   await pasteSelectedCell();
   expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1');
-  expect(onPasteSpy).toHaveBeenCalledTimes(1);
+  expect(onPasteSpy).toHaveBeenCalledOnce();
 });
 
 test('should not allow paste on readonly cells', async () => {
diff --git a/test/browser/events.test.tsx b/test/browser/events.test.tsx
@@ -128,7 +128,7 @@ describe('Events', () => {
 
     // Selected by click
     await userEvent.click(getCellsAtRowIndexOld(0)[1]);
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[1]),
       row: rows[0],
       rowIdx: 0
@@ -137,7 +137,7 @@ describe('Events', () => {
 
     // Selected by double click
     await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]);
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[0]),
       row: rows[0],
       rowIdx: 0
@@ -146,7 +146,7 @@ describe('Events', () => {
 
     // Selected by right-click
     await userEvent.pointer({ target: getCellsAtRowIndexOld(1)[0], keys: '[MouseRight]' });
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[0]),
       row: rows[1],
       rowIdx: 1
@@ -155,7 +155,7 @@ describe('Events', () => {
 
     // Selected by ←↑→↓ keys
     await userEvent.keyboard('{ArrowUp}');
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[0]),
       row: rows[0],
       rowIdx: 0
@@ -164,7 +164,7 @@ describe('Events', () => {
 
     // Selected by tab key
     await userEvent.keyboard('{Tab}');
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[1]),
       row: rows[0],
       rowIdx: 0
@@ -173,11 +173,12 @@ describe('Events', () => {
 
     // go to the header row
     await userEvent.keyboard('{ArrowUp}');
-    expect(onSelectedCellChange).toHaveBeenCalledWith({
+    expect(onSelectedCellChange).toHaveBeenLastCalledWith({
       column: expect.objectContaining(columns[1]),
       row: undefined,
       rowIdx: -1
     });
+    expect(onSelectedCellChange).toHaveBeenCalledTimes(6);
   });
 });
 
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,10 +3,37 @@ import react from '@vitejs/plugin-react';
 import wyw from '@wyw-in-js/vite';
 import browserslist from 'browserslist';
 import { defineConfig } from 'vite';
+import type { BrowserCommand } from 'vitest/node';
 
 const isCI = process.env.CI === 'true';
 const isTest = process.env.NODE_ENV === 'test';
 
+// TODO: remove when `userEvent.pointer` is supported
+const resizeColumn: BrowserCommand<[resizeBy: number]> = async (context, resizeBy) => {
+  const page = context.page;
+  const frame = await context.frame();
+  const resizeHandle = frame.locator('[role="columnheader"][aria-colindex="2"] div');
+  const { x, y } = (await resizeHandle.boundingBox())!;
+  await resizeHandle.hover({
+    position: { x: 5, y: 5 }
+  });
+  await page.mouse.down();
+  await page.mouse.move(x + resizeBy + 5, y);
+  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 defineConfig(({ command }) => ({
   base: '/react-data-grid/',
   cacheDir: '.cache/vite',
@@ -17,9 +44,6 @@ export default defineConfig(({ command }) => ({
     sourcemap: true,
     reportCompressedSize: false
   },
-  json: {
-    stringify: true
-  },
   plugins: [
     !isTest &&
       TanStackRouterVite({
@@ -50,10 +74,41 @@ export default defineConfig(({ command }) => ({
       reporter: ['json']
     },
     testTimeout: isCI ? 10000 : 5000,
-    reporters: ['basic'],
     restoreMocks: true,
     sequence: {
       shuffle: true
-    }
+    },
+    workspace: [
+      {
+        extends: true,
+        test: {
+          name: 'browser',
+          include: ['test/browser/**/*.test.*'],
+          browser: {
+            enabled: true,
+            provider: 'playwright',
+            instances: [
+              {
+                browser: 'chromium'
+              }
+            ],
+            commands: { resizeColumn, dragFill },
+            viewport: { width: 1920, height: 1080 },
+            headless: true,
+            screenshotFailures: process.env.CI !== 'true'
+          },
+          setupFiles: ['test/setup.ts', 'test/setupBrowser.ts']
+        }
+      },
+      {
+        extends: true,
+        test: {
+          name: 'node',
+          include: ['test/node/**/*.test.*'],
+          environment: 'node',
+          setupFiles: ['test/setup.ts']
+        }
+      }
+    ]
   }
 }));
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
