From da82cf24d52a99e9acd04a65677db33aafc8acc9 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 8 May 2023 12:14:13 -0500 Subject: [PATCH 01/59] Add @vitest/browser --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 840336960b..b4feffe492 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,8 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "@vitejs/plugin-react": "^4.0.0", - "@vitest/coverage-c8": "^0.31.0", + "@vitest/browser": "^0.31.0", + "@vitest/coverage-istanbul": "^0.31.0", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", @@ -89,6 +90,7 @@ "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", + "playwright": "^1.33.0", "postcss": "^8.4.23", "postcss-nested": "^6.0.0", "prettier": "2.8.8", From a7544ef29ea8205a56fee49c42e8c1a471a4d902 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 8 May 2023 12:23:28 -0500 Subject: [PATCH 02/59] Enable browser mode --- test/column/editor.test.tsx | 2 - test/column/resizable.test.tsx | 15 ------- test/rowHeight.test.ts | 28 ++----------- test/setup.ts | 75 +--------------------------------- test/ssr.test.tsx | 2 +- test/utils.tsx | 14 ++++++- test/virtualization.test.ts | 8 ++-- vite.config.ts | 6 ++- 8 files changed, 27 insertions(+), 123 deletions(-) diff --git a/test/column/editor.test.tsx b/test/column/editor.test.tsx index 7b50006337..f84b41edb2 100644 --- a/test/column/editor.test.tsx +++ b/test/column/editor.test.tsx @@ -104,9 +104,7 @@ describe('Editor', () => { expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); await userEvent.keyboard('123'); expect(screen.getByLabelText('col1-editor')).toHaveValue(1230); - const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); await userEvent.keyboard('{enter}'); - expect(spy).toHaveBeenCalled(); }); describe('editable', () => { diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 23b422cd54..2ceb6fe5ec 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -6,21 +6,6 @@ import { setup, getHeaderCells, getGrid } from '../utils'; const pointerId = 1; -// TODO: https://github.com/jsdom/jsdom/issues/2527 -class PointerEvent extends Event { - pointerId: number | undefined; - clientX: number | undefined; - - constructor(type: string, { pointerId, clientX, ...rest }: PointerEventInit) { - super(type, rest); - this.pointerId = pointerId; - this.clientX = clientX; - } -} - -// @ts-expect-error -globalThis.PointerEvent = PointerEvent; - interface Row { col1: number; col2: string; diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index d121f94efa..59359dba3e 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -1,7 +1,3 @@ -import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - import type { Column, DataGridProps } from '../src'; import { setup, getRows } from './utils'; @@ -21,26 +17,17 @@ function setupGrid(rowHeight: DataGridProps['rowHeight']) { setup({ columns, rows, rowHeight }); } -test('rowHeight is number', async () => { +test('rowHeight is number', () => { setupGrid(40); const rows = getRows(); expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' }); expect(rows[1]).toHaveStyle({ '--rdg-row-height': '40px' }); expect(rows[2]).toHaveStyle({ '--rdg-row-height': '40px' }); - expect(getRows()).toHaveLength(31); - - await userEvent.tab(); - const grid = screen.getByRole('grid'); - expect(grid.scrollTop).toBe(0); - - // Go to the last cell - const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); - await userEvent.keyboard('{Control>}{end}'); - expect(spy).toHaveBeenCalled(); + expect(getRows()).toHaveLength(30); }); -test('rowHeight is function', async () => { +test('rowHeight is function', () => { setupGrid((args) => (args.type === 'ROW' ? [40, 60, 80][args.row % 3] : 40)); const rows = getRows(); @@ -49,13 +36,4 @@ test('rowHeight is function', async () => { expect(rows[2]).toHaveStyle({ '--rdg-row-height': '80px' }); expect(rows[3]).toHaveStyle({ '--rdg-row-height': '40px' }); expect(rows).toHaveLength(22); - - await userEvent.tab(); - const grid = screen.getByRole('grid'); - expect(grid.scrollTop).toBe(0); - - const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); - // Go to the last cell - await userEvent.keyboard('{Control>}{end}'); - expect(spy).toHaveBeenCalled(); }); diff --git a/test/setup.ts b/test/setup.ts index 0fd284fa43..7b0828bfa8 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -1,74 +1 @@ -import { act } from 'react-dom/test-utils'; - -// Allow node-environment tests to properly fail when accessing DOM APIs, -// as @testing-library/jest-dom may polyfill some DOM APIs like `window.CSS` -// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -if (globalThis.window !== undefined) { - await import('@testing-library/jest-dom'); -} - -if (typeof window !== 'undefined') { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - window.ResizeObserver ??= class { - observe() {} - unobserve() {} - disconnect() {} - }; - - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - window.HTMLElement.prototype.scrollIntoView ??= () => {}; - - // patch clientWidth/clientHeight to pretend we're rendering DataGrid at 1080p - Object.defineProperties(HTMLDivElement.prototype, { - clientWidth: { - get(this: HTMLDivElement) { - return this.classList.contains('rdg') ? 1920 : 0; - } - }, - clientHeight: { - get(this: HTMLDivElement) { - return this.classList.contains('rdg') ? 1080 : 0; - } - } - }); - - // Basic scroll polyfill - const scrollStates = new WeakMap(); - - function getScrollState(div: Element) { - if (scrollStates.has(div)) { - return scrollStates.get(div)!; - } - const scrollState = { scrollTop: 0, scrollLeft: 0 }; - scrollStates.set(div, scrollState); - return scrollState; - } - - Object.defineProperties(Element.prototype, { - scrollTop: { - get(this: Element) { - return getScrollState(this).scrollTop; - }, - set(this: Element, value: number) { - getScrollState(this).scrollTop = value; - act(() => { - this.dispatchEvent(new Event('scroll')); - }); - } - }, - scrollLeft: { - get(this: Element) { - return getScrollState(this).scrollLeft; - }, - set(this: Element, value: number) { - getScrollState(this).scrollLeft = value; - act(() => { - this.dispatchEvent(new Event('scroll')); - }); - } - } - }); - - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - Element.prototype.setPointerCapture ??= () => {}; -} +import '@testing-library/jest-dom'; diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx index 242c54a80d..b068bea5a9 100644 --- a/test/ssr.test.tsx +++ b/test/ssr.test.tsx @@ -23,7 +23,7 @@ function App() { return ; } -test('basic server-side rendering (SSR) support', () => { +test.skip('basic server-side rendering (SSR) support', () => { // make sure we're not running in the JSDOM environment expect(globalThis.window).toBeUndefined(); diff --git a/test/utils.tsx b/test/utils.tsx index 6da5fea67b..b8e508b12a 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -1,6 +1,7 @@ import { StrictMode } from 'react'; // eslint-disable-next-line @typescript-eslint/no-restricted-imports import { render as rtlRender, screen, fireEvent, act } from '@testing-library/react'; +import { css } from '@linaria/core'; import DataGrid from '../src/'; import type { DataGridProps } from '../src/'; @@ -10,7 +11,18 @@ export function render(child: React.ReactElement) { } export function setup(props: DataGridProps) { - return render(); + return render( + + ); } export function getGrid() { diff --git a/test/virtualization.test.ts b/test/virtualization.test.ts index 951ab887d5..82eee49ebb 100644 --- a/test/virtualization.test.ts +++ b/test/virtualization.test.ts @@ -104,7 +104,7 @@ test('virtualization is enabled', async () => { assertRows(38, 3, 40); await scrollGrid({ scrollTop: 250 }); - assertRows(39, 3, 41); + assertRows(38, 3, 40); await scrollGrid({ scrollTop: 419 }); assertRows(39, 7, 45); @@ -116,7 +116,7 @@ test('virtualization is enabled', async () => { assertRows(38, 11, 48); await scrollGrid({ scrollTop: 530 }); - assertRows(39, 11, 49); + assertRows(38, 11, 48); await scrollGrid({ scrollTop: 1000 }); assertRows(39, 24, 62); @@ -131,8 +131,8 @@ test('virtualization is enabled', async () => { assertCells(66, 18, 0, 17); await scrollGrid({ scrollLeft: 91 }); - assertHeaderCells(19, 0, 18); - assertCells(66, 19, 0, 18); + assertHeaderCells(18, 0, 17); + assertCells(66, 18, 0, 17); await scrollGrid({ scrollLeft: 209 }); assertHeaderCells(19, 0, 18); diff --git a/vite.config.ts b/vite.config.ts index 3e733f4b1c..1ecf01eccc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -39,7 +39,6 @@ export default defineConfig({ }, test: { root: '.', - environment: 'jsdom', globals: true, coverage: { provider: 'c8', @@ -50,6 +49,11 @@ export default defineConfig({ }, useAtomics: true, setupFiles: ['test/setup.ts'], + browser: { + enabled: true, + name: 'chromium', + provider: 'playwright' + }, restoreMocks: true, sequence: { shuffle: true From 688da4a905a10ab72b146b8c6ad669b5fadb8922 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 23 May 2023 14:46:34 -0500 Subject: [PATCH 03/59] Update vitest --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9dedf0b4a7..0343fe6eae 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "rome": "12.1.2", "typescript": "~5.0.2", "vite": "^4.3.5", - "vitest": "^0.31.0" + "vitest": "^0.31.1" }, "peerDependencies": { "react": "^18.0", From f89eab6d191587576168a2f4eea4e3c6ee153cf4 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 24 May 2023 09:10:57 -0500 Subject: [PATCH 04/59] Use coverage-istanbu --- package.json | 2 +- vite.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0343fe6eae..c283a375f4 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@typescript-eslint/parser": "^5.22.0", "@vitejs/plugin-react": "^4.0.0", "@vitest/browser": "^0.31.0", - "@vitest/coverage-istanbul": "^0.31.0", + "@vitest/coverage-istanbul": "^0.31.1", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", diff --git a/vite.config.ts b/vite.config.ts index 1ecf01eccc..20710cd867 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -41,7 +41,7 @@ export default defineConfig({ root: '.', globals: true, coverage: { - provider: 'c8', + provider: 'istanbul', enabled: isCI, include: ['src/**/*.{ts,tsx}', '!src/types.ts'], all: true, From 120dbe8629df7724d9941b57d35ada43dc97e1f5 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 24 May 2023 09:13:46 -0500 Subject: [PATCH 05/59] update deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c283a375f4..b66d0cbc9b 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "rollup-plugin-postcss": "^4.0.2", "rome": "12.1.2", "typescript": "~5.0.2", - "vite": "^4.3.5", + "vite": "^4.3.8", "vitest": "^0.31.1" }, "peerDependencies": { From 6f2dc5f31a4e6b2d6bd46d53dbe06687bc3f96e3 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 00:33:58 +0100 Subject: [PATCH 06/59] work around react plugin bugs --- vite.config.ts | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 20710cd867..e72ab048bc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,5 @@ import linaria from '@linaria/rollup'; +import babel from '@rollup/plugin-babel'; import react from '@vitejs/plugin-react'; import postcssNested from 'postcss-nested'; import { defineConfig } from 'vite'; @@ -16,18 +17,24 @@ export default defineConfig({ }, resolve: { alias: { - lodash: 'lodash-es' + lodash: isTest ? 'lodash' : 'lodash-es' } }, plugins: [ - react({ - babel: { - babelrc: false, - configFile: false, - plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] - } - }), - !isTest && linaria({ preprocessor: 'none' }) + isTest && + babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'] + }), + !isTest && + react({ + babel: { + babelrc: false, + configFile: false, + plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] + } + }), + linaria({ preprocessor: 'none' }) ], css: { postcss: { From fcb35291a87d26d659092bf49e6f0bbe811d5d55 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 00:36:36 +0100 Subject: [PATCH 07/59] bump deps --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 8258d700d9..63456aac14 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "@vitejs/plugin-react": "^4.0.0", - "@vitest/browser": "^0.31.0", + "@vitest/browser": "^0.31.1", "@vitest/coverage-istanbul": "^0.31.1", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", @@ -90,7 +90,7 @@ "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", - "playwright": "^1.33.0", + "playwright": "^1.34.3", "postcss": "^8.4.23", "postcss-nested": "^6.0.0", "prettier": "2.8.8", @@ -103,7 +103,7 @@ "rollup-plugin-postcss": "^4.0.2", "rome": "12.1.2", "typescript": "~5.0.2", - "vite": "^4.3.8", + "vite": "^4.3.9", "vitest": "^0.31.1" }, "peerDependencies": { From c1394390d8d58156da589fc9d79fc57987f9c41a Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 00:37:47 +0100 Subject: [PATCH 08/59] remove jest directive --- test/ssr.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx index b068bea5a9..deb81e486e 100644 --- a/test/ssr.test.tsx +++ b/test/ssr.test.tsx @@ -1,4 +1,3 @@ -/** @jest-environment node */ import { renderToString } from 'react-dom/server'; import DataGrid from '../src'; From d837de561ee682e99a753f1bd16f9c0f00d09ef7 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 00:40:27 +0100 Subject: [PATCH 09/59] uninstall jsdom --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 63456aac14..1775fb8005 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,6 @@ "eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-sonarjs": "^0.19.0", "eslint-plugin-testing-library": "^5.9.1", - "jsdom": "^22.0.0", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", From 58949a5cb16a58b481b0fa461a89422c5b825cd3 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 00:55:53 +0100 Subject: [PATCH 10/59] ternary --- vite.config.ts | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index e72ab048bc..66adc52f47 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,19 +21,18 @@ export default defineConfig({ } }, plugins: [ - isTest && - babel({ - babelHelpers: 'runtime', - extensions: ['.ts', '.tsx'] - }), - !isTest && - react({ - babel: { - babelrc: false, - configFile: false, - plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] - } - }), + isTest + ? babel({ + babelHelpers: 'runtime', + extensions: ['.ts', '.tsx'] + }) + : react({ + babel: { + babelrc: false, + configFile: false, + plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] + } + }), linaria({ preprocessor: 'none' }) ], css: { From 3ac17b6a7978608cc06acc04bdf811f0ace13dd8 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 27 May 2023 16:28:00 +0100 Subject: [PATCH 11/59] no need for `@rollup/plugin-babel` --- tsconfig.base.json | 2 +- vite.config.ts | 24 ++++++++++-------------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/tsconfig.base.json b/tsconfig.base.json index 3285ee28b7..ac6b99a37e 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,7 +3,7 @@ "allowSyntheticDefaultImports": true, "exactOptionalPropertyTypes": true, "isolatedModules": true, - "jsx": "preserve", + "jsx": "react-jsx", "module": "esnext", "moduleResolution": "bundler", "noImplicitReturns": true, diff --git a/vite.config.ts b/vite.config.ts index 66adc52f47..85a1e99b8b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,4 @@ import linaria from '@linaria/rollup'; -import babel from '@rollup/plugin-babel'; import react from '@vitejs/plugin-react'; import postcssNested from 'postcss-nested'; import { defineConfig } from 'vite'; @@ -17,22 +16,19 @@ export default defineConfig({ }, resolve: { alias: { - lodash: isTest ? 'lodash' : 'lodash-es' + lodash: isTest ? 'lodash' : 'lodash-es', + 'lodash-es': isTest ? 'lodash' : 'lodash-es' } }, plugins: [ - isTest - ? babel({ - babelHelpers: 'runtime', - extensions: ['.ts', '.tsx'] - }) - : react({ - babel: { - babelrc: false, - configFile: false, - plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] - } - }), + !isTest && + react({ + babel: { + babelrc: false, + configFile: false, + plugins: [['optimize-clsx', { functionNames: ['getCellClassname'] }]] + } + }), linaria({ preprocessor: 'none' }) ], css: { From 32d0b83a984c5e9f2cabee6af2881d18f925dd57 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 1 Jun 2023 11:46:31 -0500 Subject: [PATCH 12/59] update vitest --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b862b4fa40..2ff43de787 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "rome": "12.1.3", "typescript": "~5.0.2", "vite": "^4.3.9", - "vitest": "^0.31.1" + "vitest": "^0.31.4" }, "peerDependencies": { "react": "^18.0", From 6bec38ab4f985c695c5907fa2ea971fba1f64cd7 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 1 Jun 2023 12:03:45 -0500 Subject: [PATCH 13/59] Remove incorrect test --- test/column/renderEditCell.test.tsx | 32 +---------------------------- 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index 855e5d7ea3..bd43b1a6e1 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -249,26 +249,6 @@ describe('Editor', () => { renderEditCell() { return ; } - }, - { - key: 'col2', - name: 'Column2', - renderEditCell({ onClose }) { - return ( - { - onClose(true); - }} - /> - ); - }, - editorOptions: { - commitOnOutsideClick: false - } } ]; @@ -285,17 +265,7 @@ describe('Editor', () => { expect(col1Input).toHaveFocus(); await userEvent.click(outerInput); expect(outerInput).toHaveFocus(); - await waitFor(() => { - expect(col1Input).not.toBeInTheDocument(); - }); - expect(outerInput).toHaveFocus(); - - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); - const col2Input = screen.getByLabelText('col2-input'); - expect(col2Input).toHaveFocus(); - await userEvent.click(outerInput); - expect(outerInput).toHaveFocus(); - expect(col2Input).not.toBeInTheDocument(); + expect(col1Input).not.toBeInTheDocument(); expect(outerInput).toHaveFocus(); }); }); From 1fce59e4831fd8f42ed00704b5378b01acaf2bc9 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 1 Jun 2023 12:06:04 -0500 Subject: [PATCH 14/59] Revert "Remove incorrect test" This reverts commit 6bec38ab4f985c695c5907fa2ea971fba1f64cd7. --- test/column/renderEditCell.test.tsx | 32 ++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index bd43b1a6e1..855e5d7ea3 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -249,6 +249,26 @@ describe('Editor', () => { renderEditCell() { return ; } + }, + { + key: 'col2', + name: 'Column2', + renderEditCell({ onClose }) { + return ( + { + onClose(true); + }} + /> + ); + }, + editorOptions: { + commitOnOutsideClick: false + } } ]; @@ -265,7 +285,17 @@ describe('Editor', () => { expect(col1Input).toHaveFocus(); await userEvent.click(outerInput); expect(outerInput).toHaveFocus(); - expect(col1Input).not.toBeInTheDocument(); + await waitFor(() => { + expect(col1Input).not.toBeInTheDocument(); + }); + expect(outerInput).toHaveFocus(); + + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + const col2Input = screen.getByLabelText('col2-input'); + expect(col2Input).toHaveFocus(); + await userEvent.click(outerInput); + expect(outerInput).toHaveFocus(); + expect(col2Input).not.toBeInTheDocument(); expect(outerInput).toHaveFocus(); }); }); From 771fdd525cd287ccca6a708906e573df21d961f4 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 7 Jun 2023 06:42:19 -0500 Subject: [PATCH 15/59] bump dependencies --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8c0df93707..7c88a50a09 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "@vitejs/plugin-react": "^4.0.0", - "@vitest/browser": "^0.31.1", - "@vitest/coverage-istanbul": "^0.31.1", + "@vitest/browser": "^0.32.0", + "@vitest/coverage-istanbul": "^0.32.0", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", From 958bf48d7ea109b9b7da1f19f85e0896e456927b Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 7 Jun 2023 07:00:16 -0500 Subject: [PATCH 16/59] try v8 --- package.json | 1 + vite.config.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c88a50a09..51377af43e 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@vitejs/plugin-react": "^4.0.0", "@vitest/browser": "^0.32.0", "@vitest/coverage-istanbul": "^0.32.0", + "@vitest/coverage-v8": "^0.32.0", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", diff --git a/vite.config.ts b/vite.config.ts index 85a1e99b8b..6513241ed5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -43,7 +43,7 @@ export default defineConfig({ root: '.', globals: true, coverage: { - provider: 'istanbul', + provider: 'v8', enabled: isCI, include: ['src/**/*.{ts,tsx}', '!src/types.ts'], all: true, From fb09afc2cb2cbaf7c66adb72dc53b6d0cd2533ee Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 7 Jun 2023 07:04:01 -0500 Subject: [PATCH 17/59] Revert "try v8" This reverts commit 958bf48d7ea109b9b7da1f19f85e0896e456927b. --- package.json | 1 - vite.config.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 51377af43e..7c88a50a09 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,6 @@ "@vitejs/plugin-react": "^4.0.0", "@vitest/browser": "^0.32.0", "@vitest/coverage-istanbul": "^0.32.0", - "@vitest/coverage-v8": "^0.32.0", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", diff --git a/vite.config.ts b/vite.config.ts index 6513241ed5..85a1e99b8b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -43,7 +43,7 @@ export default defineConfig({ root: '.', globals: true, coverage: { - provider: 'v8', + provider: 'istanbul', enabled: isCI, include: ['src/**/*.{ts,tsx}', '!src/types.ts'], all: true, From 14141317ee7e73334423a3bfa1c5d4147d834685 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 9 Jun 2023 12:31:33 +0100 Subject: [PATCH 18/59] update and pin playwright --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b77c869f59..c1b9344162 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", - "playwright": "^1.34.3", + "playwright": "~1.35.0", "postcss": "^8.4.23", "postcss-nested": "^6.0.0", "prettier": "2.8.8", From a105d6232615781b8f891faf44081521cc44410c Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 9 Jun 2023 13:56:18 +0100 Subject: [PATCH 19/59] fix column resizing tests --- src/HeaderCell.tsx | 14 +++++-- test/column/resizable.test.tsx | 70 ++++++++++++++++------------------ 2 files changed, 43 insertions(+), 41 deletions(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 72c8c923a5..b71408add7 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -81,7 +81,7 @@ export default function HeaderCell({ return; } - function onPointerMove(event: PointerEvent) { + function onPointerMove(event: PointerEvent | MouseEvent) { // prevents text selection in Chrome, which fixes scrolling the grid while dragging, and fixes re-size on an autosized column event.preventDefault(); const { right, left } = currentTarget.getBoundingClientRect(); @@ -96,9 +96,15 @@ export default function HeaderCell({ currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture); } - currentTarget.setPointerCapture(pointerId); - currentTarget.addEventListener('pointermove', onPointerMove); - currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); + // user-event cannot simulate native user interactions in real browsers + if (process.env.NODE_ENV === 'test') { + currentTarget.addEventListener('mousemove', onPointerMove); + currentTarget.addEventListener('pointerup', onLostPointerCapture); + } else { + currentTarget.setPointerCapture(pointerId); + currentTarget.addEventListener('pointermove', onPointerMove); + currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); + } } function onSort(ctrlClick: boolean) { diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 1e44b2c06e..fcf55a705f 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -1,40 +1,34 @@ -import { fireEvent } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { expect, test } from 'vitest'; import type { Column } from '../../src'; import { getGrid, getHeaderCells, setup } from '../utils'; -const pointerId = 1; - interface Row { - col1: number; - col2: string; + readonly col1: number; + readonly col2: string; } -interface ResizeEvent { - column: HTMLElement; - clientXStart: number; - clientXEnd: number; - rect: Pick; +interface ResizeArgs { + readonly cell: HTMLElement; + readonly resizeBy: number; + readonly startOffset?: number; } -function resize({ - column, - clientXStart, - clientXEnd, - rect -}: ResizeEvent) { - const original = column.getBoundingClientRect.bind(column); - column.getBoundingClientRect = () => ({ - ...original(), - ...rect +async function resize({ cell, resizeBy, startOffset = 0 }: ResizeArgs) { + // wait for layout to settle + await waitFor(() => { + expect(cell.getBoundingClientRect().right % 100).not.toBe(0); }); - fireEvent.pointerDown( - column, - new PointerEvent('pointerdown', { pointerId, clientX: clientXStart }) - ); - fireEvent.pointerMove(column, new PointerEvent('pointermove', { clientX: clientXEnd })); - fireEvent.lostPointerCapture(column, new PointerEvent('lostpointercapture', {})); + + const clientXStart = cell.getBoundingClientRect().right + startOffset; + + await userEvent.pointer([ + { keys: '[TouchA>]', target: cell, coords: { clientX: clientXStart } }, + { pointerName: 'TouchA', coords: { clientX: clientXStart + resizeBy } }, + { keys: '[/TouchA]' } + ]); } const columns: readonly Column[] = [ @@ -53,42 +47,44 @@ const columns: readonly Column[] = [ } ]; -test('should not resize column if resizable is not specified', () => { +test('should not resize column if resizable is not specified', async () => { setup({ columns, rows: [] }); const [col1] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - resize({ column: col1, clientXStart: 95, clientXEnd: 200, rect: { right: 100, left: 0 } }); + await resize({ cell: col1, resizeBy: 50 }); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await resize({ cell: col1, resizeBy: -50 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); }); -test('should not resize column if cursor offset is not within the allowed range', () => { +test('should not resize column if cursor offset is not within the allowed range', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - resize({ column: col2, clientXStart: 288, clientXEnd: 250, rect: { right: 300, left: 100 } }); + await resize({ cell: col2, resizeBy: -50, startOffset: -12 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); }); -test('should resize column if cursor offset is within the allowed range', () => { +test('should resize column if cursor offset is within the allowed range', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - resize({ column: col2, clientXStart: 289, clientXEnd: 250, rect: { right: 300, left: 100 } }); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 161px' }); + await resize({ cell: col2, resizeBy: -50 }); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 150px' }); }); -test('should use the maxWidth if specified', () => { +test('should use the maxWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - resize({ column: col2, clientXStart: 295, clientXEnd: 1000, rect: { right: 300, left: 100 } }); + await resize({ cell: col2, resizeBy: 1000 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); -test('should use the minWidth if specified', () => { +test('should use the minWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - resize({ column: col2, clientXStart: 295, clientXEnd: 100, rect: { right: 300, left: 100 } }); + await resize({ cell: col2, resizeBy: -150 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); From 959952c67f467c0bd9903034b7cdda67c9508ceb Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 16 Jun 2023 18:47:03 +0100 Subject: [PATCH 20/59] update vitest --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index c1b9344162..24e2b12b92 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "@vitejs/plugin-react": "^4.0.0", - "@vitest/browser": "^0.32.0", - "@vitest/coverage-istanbul": "^0.32.0", + "@vitest/browser": "^0.32.2", + "@vitest/coverage-istanbul": "^0.32.2", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.14.0", "eslint-config-prettier": "^8.5.0", @@ -89,7 +89,7 @@ "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", - "playwright": "~1.35.0", + "playwright": "~1.35.1", "postcss": "^8.4.23", "postcss-nested": "^6.0.0", "prettier": "2.8.8", @@ -103,7 +103,7 @@ "rome": "12.1.3", "typescript": "~5.1.3", "vite": "^4.3.9", - "vitest": "^0.32.0" + "vitest": "^0.32.2" }, "peerDependencies": { "react": "^18.0", From 3addf3f10e2ccc250804565e4c7e16e016fe24b4 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 12 Sep 2023 18:31:23 -0500 Subject: [PATCH 21/59] update deps --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ee67e8e9f4..8098ea4337 100644 --- a/package.json +++ b/package.json @@ -77,10 +77,10 @@ "@types/react-dom": "^18.2.4", "@typescript-eslint/eslint-plugin": "^6.1.0", "@typescript-eslint/parser": "^6.1.0", - "@vitejs/plugin-react": "^4.0.2", + "@vitejs/plugin-react": "^4.0.4", "@vitest/browser": "^0.34.4", "@vitest/coverage-istanbul": "^0.34.4", - "@vitest/coverage-v8": "^0.34.1", + "@vitest/coverage-v8": "^0.34.4", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.43.0", "eslint-config-prettier": "^9.0.0", @@ -107,8 +107,8 @@ "rollup": "^3.26.2", "rollup-plugin-postcss": "^4.0.2", "typescript": "~5.2.2", - "vite": "^4.4.2", - "vitest": "^0.34.1" + "vite": "^4.4.9", + "vitest": "^0.34.4" }, "peerDependencies": { "react": "^18.0", From 776b05411328705681d788614b8cd6f474236820 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 3 Oct 2023 09:07:14 -0500 Subject: [PATCH 22/59] Try vitest beta --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9dfe0ed30d..5364ad9186 100644 --- a/package.json +++ b/package.json @@ -78,9 +78,9 @@ "@typescript-eslint/eslint-plugin": "^6.1.0", "@typescript-eslint/parser": "^6.1.0", "@vitejs/plugin-react": "^4.0.4", - "@vitest/browser": "^0.34.4", - "@vitest/coverage-istanbul": "^0.34.4", - "@vitest/coverage-v8": "^0.34.4", + "@vitest/browser": "^1.0.0-beta.1", + "@vitest/coverage-istanbul": "^1.0.0-beta.1", + "@vitest/coverage-v8": "^1.0.0-beta.1", "babel-plugin-optimize-clsx": "^2.6.2", "eslint": "^8.43.0", "eslint-config-prettier": "^9.0.0", From 25bcfc2c73bcbd5786fc1657d9d1dd036585ac0e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 9 Jul 2024 14:00:29 -0500 Subject: [PATCH 23/59] Fix some tests --- test/rowHeight.test.ts | 7 ++++++- test/ssr.test.tsx | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index 04aa53c8e9..9d5aaedd61 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -1,3 +1,5 @@ +import { screen } from '@testing-library/react'; + import type { Column, DataGridProps } from '../src'; import { getRows, setup } from './utils'; @@ -22,7 +24,10 @@ test('rowHeight is number', () => { setupGrid(40); const grid = screen.getByRole('grid'); - expect(grid).toHaveStyle({ 'grid-template-rows': 'repeat(1, 40px) repeat(50, 40px)' }); + expect(grid).toHaveStyle({ + 'grid-template-rows': + '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' + }); expect(getRows()).toHaveLength(31); }); diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx index 118aedf988..f28afc793b 100644 --- a/test/ssr.test.tsx +++ b/test/ssr.test.tsx @@ -23,6 +23,7 @@ function App() { return ; } +// biome-ignore lint/suspicious/noSkippedTests: test.skip('basic server-side rendering (SSR) support', () => { // make sure we're not running in the JSDOM environment expect(globalThis.window).toBeUndefined(); From bf428faa3edc4485acdc5e18c966216e3eadb1f9 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 9 Jul 2024 14:08:28 -0500 Subject: [PATCH 24/59] Fix types, 1 test --- test/column/resizable.test.tsx | 2 +- test/rowHeight.test.ts | 2 +- vite.config.ts | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 88e6234215..955d61df54 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -77,7 +77,7 @@ test('should use the maxWidth if specified', async () => { }); test('should use the minWidth if specified', async () => { - setup({ columns, rows: [] }); + setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); await resize({ column: col2, resizeBy: -150 }); diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index 9d5aaedd61..ca6d35a022 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -28,7 +28,7 @@ test('rowHeight is number', () => { 'grid-template-rows': '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' }); - expect(getRows()).toHaveLength(31); + expect(getRows()).toHaveLength(30); }); test('rowHeight is function', () => { diff --git a/vite.config.ts b/vite.config.ts index 4ba7924d59..593c801eed 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,6 +2,8 @@ import react from '@vitejs/plugin-react'; import wyw from '@wyw-in-js/vite'; import { defineConfig } from 'vite'; +import '@testing-library/jest-dom/vitest'; + const isCI = process.env.CI === 'true'; const isTest = process.env.NODE_ENV === 'test'; From 2721a218e8b976c1b05ee8f0366a55256fa912ad Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 9 Jul 2024 14:15:01 -0500 Subject: [PATCH 25/59] Fix import --- test/setup.ts | 2 ++ vite.config.ts | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/setup.ts b/test/setup.ts index 8f5794e9d3..a7933dae09 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -1,5 +1,7 @@ import { configure } from '@testing-library/react'; +import '@testing-library/jest-dom/vitest'; + configure({ reactStrictMode: true, throwSuggestions: true diff --git a/vite.config.ts b/vite.config.ts index 593c801eed..4ba7924d59 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,8 +2,6 @@ import react from '@vitejs/plugin-react'; import wyw from '@wyw-in-js/vite'; import { defineConfig } from 'vite'; -import '@testing-library/jest-dom/vitest'; - const isCI = process.env.CI === 'true'; const isTest = process.env.NODE_ENV === 'test'; From 2e2bd958390a73bcde6c8b2613a4129d665c035a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 9 Jul 2024 21:11:43 -0500 Subject: [PATCH 26/59] Install playwright --- .github/workflows/ci.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f295734a62..ee288fe10e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -36,6 +36,8 @@ jobs: run: | node --run build node --run build:types + - name: Install Playwright Browsers + run: npx playwright install --with-deps - name: Test run: npm --run test timeout-minutes: 4 From 4cef86bdeae11aa190b59f07e8abc3782ce638a9 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 10 Jul 2024 08:05:31 -0500 Subject: [PATCH 27/59] -1 --- test/rowHeight.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index ca6d35a022..2548c90d7b 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -37,7 +37,7 @@ test('rowHeight is function', () => { const grid = screen.getByRole('grid'); expect(grid).toHaveStyle({ 'grid-template-rows': - 'repeat(1, 35px) 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px' + '35px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px' }); expect(getRows()).toHaveLength(22); }); From 620256788a8963533634781c6ac4a4dd74d7182d Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 10 Jul 2024 13:15:42 -0500 Subject: [PATCH 28/59] Fix types --- test/setup.ts | 2 -- tsconfig.json | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/test/setup.ts b/test/setup.ts index a7933dae09..8f5794e9d3 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -1,7 +1,5 @@ import { configure } from '@testing-library/react'; -import '@testing-library/jest-dom/vitest'; - configure({ reactStrictMode: true, throwSuggestions: true diff --git a/tsconfig.json b/tsconfig.json index b86e7b6f5a..49f33d4f21 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "extends": "./tsconfig.base.json", "compilerOptions": { "noEmit": true, - "types": ["vitest/globals"] + "types": ["vitest/globals", "@vitest/browser/providers/playwright"] }, "include": ["rollup.config.js", "vite.config.ts", "src/**/*", "test/**/*", "website/**/*"] } From 641cee08548db4c509155f8a93847037f86a8a91 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 10 Jul 2024 13:21:39 -0500 Subject: [PATCH 29/59] Use `userEvent.dragAndDrop` --- test/column/draggable.test.ts | 40 +++++++++++++---------------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/test/column/draggable.test.ts b/test/column/draggable.test.ts index c01c235e85..49264ed7dd 100644 --- a/test/column/draggable.test.ts +++ b/test/column/draggable.test.ts @@ -1,4 +1,5 @@ -import { fireEvent } from '@testing-library/react'; +import { act } from 'react'; +import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../src'; import { getHeaderCells, setup } from '../utils'; @@ -25,7 +26,7 @@ const columns: readonly Column[] = [ } ]; -test('draggable columns', () => { +test('draggable columns', async () => { const onColumnsReorder = vi.fn(); setup({ columns, rows: [], onColumnsReorder }); const [cell1, cell2, cell3, cell4] = getHeaderCells(); @@ -37,36 +38,25 @@ test('draggable columns', () => { expect(onColumnsReorder).not.toHaveBeenCalled(); - let data: unknown; - let type: unknown; - const event = { - dataTransfer: { - get types() { - return [type]; - }, - setData(_type: unknown, _data: unknown) { - type = _type; - data = _data; - }, - getData() { - return data; - } - } - } as const; - - fireEvent.dragStart(cell2, event); - fireEvent.drop(cell4, event); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + await userEvent.dragAndDrop(cell2, cell4); + }); expect(onColumnsReorder).toHaveBeenCalledWith('col2', 'col4'); onColumnsReorder.mockReset(); // should not call `onColumnsReorder` if drag and drop elements are the same - fireEvent.dragStart(cell2, event); - fireEvent.drop(cell2, event); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + await userEvent.dragAndDrop(cell2, cell2); + }); expect(onColumnsReorder).not.toHaveBeenCalled(); // should not drag a column if it is not specified as draggable - fireEvent.dragStart(cell1, event); - fireEvent.drop(cell2, event); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + await userEvent.dragAndDrop(cell1, cell2); + }); expect(onColumnsReorder).not.toHaveBeenCalled(); }); From 956652d5270c838093d630d212ada6b4036592f8 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 12 Jul 2024 11:03:45 -0500 Subject: [PATCH 30/59] Fix test --- test/column/draggable.test.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/test/column/draggable.test.ts b/test/column/draggable.test.ts index 49264ed7dd..1f1419b5a6 100644 --- a/test/column/draggable.test.ts +++ b/test/column/draggable.test.ts @@ -7,21 +7,25 @@ import { getHeaderCells, setup } from '../utils'; const columns: readonly Column[] = [ { key: 'col1', - name: 'col1' + name: 'col1', + width: 100 }, { key: 'col2', name: 'col2', + width: 100, draggable: true }, { key: 'col3', name: 'col3', + width: 100, draggable: true }, { key: 'col4', name: 'col4', + width: 100, draggable: true } ]; From 26c206bf46971a2e9fc8922a1639ac219a9e8c50 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 12 Jul 2024 11:33:52 -0500 Subject: [PATCH 31/59] Test report --- test/column/resizable.test.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 955d61df54..ff7b33d73f 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -60,7 +60,8 @@ test('should not resize column if resizable is not specified', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); }); -test('should resize column when dragging the handle', async () => { +// biome-ignore lint/suspicious/noSkippedTests: +test.skip('should resize column when dragging the handle', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); @@ -68,7 +69,8 @@ test('should resize column when dragging the handle', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 150px' }); }); -test('should use the maxWidth if specified', async () => { +// biome-ignore lint/suspicious/noSkippedTests: +test.skip('should use the maxWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); @@ -76,7 +78,8 @@ test('should use the maxWidth if specified', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); -test('should use the minWidth if specified', async () => { +// biome-ignore lint/suspicious/noSkippedTests: +test.skip('should use the minWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); From a413b7f3f7fdfcdffe86b65d5ad2bd196741760f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 12 Jul 2024 11:40:19 -0500 Subject: [PATCH 32/59] revert --- src/HeaderCell.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 9756e87d78..e0003cccaf 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -123,7 +123,7 @@ export default function HeaderCell({ const { right, left } = headerCell.getBoundingClientRect(); const offset = isRtl ? event.clientX - left : right - event.clientX; - function onPointerMove(event: PointerEvent | MouseEvent) { + function onPointerMove(event: PointerEvent) { const { right, left } = headerCell.getBoundingClientRect(); const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left; if (width > 0) { @@ -137,14 +137,9 @@ export default function HeaderCell({ } // TODO: remove? user-event cannot simulate native user interactions in real browsers - if (process.env.NODE_ENV === 'test') { - currentTarget.addEventListener('mousemove', onPointerMove); - currentTarget.addEventListener('pointerup', onLostPointerCapture); - } else { - currentTarget.setPointerCapture(pointerId); - currentTarget.addEventListener('pointermove', onPointerMove); - currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); - } + currentTarget.setPointerCapture(pointerId); + currentTarget.addEventListener('pointermove', onPointerMove); + currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); } function onSort(ctrlClick: boolean) { From 677bc29db21e137ab771ae2ee18ee0f9bdff7c44 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Fri, 12 Jul 2024 13:36:56 -0500 Subject: [PATCH 33/59] Test auto resize --- test/column/resizable.test.tsx | 47 +++++++++++++++++++++++++++++----- test/utils.tsx | 2 +- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index ff7b33d73f..123c0aac6f 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -1,4 +1,3 @@ -import { waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import type { Column } from '../../src'; @@ -17,11 +16,6 @@ interface ResizeArgs { } async function resize({ column, resizeBy, startOffset = 0 }: ResizeArgs) { - // wait for layout to settle - await waitFor(() => { - expect(column.getBoundingClientRect().right % 100).not.toBe(0); - }); - const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); if (resizeHandle === null) return; @@ -34,6 +28,13 @@ async function resize({ column, resizeBy, startOffset = 0 }: ResizeArgs) { ]); } +async function autoResize(column: HTMLElement) { + const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); + if (resizeHandle === null) return; + + await userEvent.dblClick(resizeHandle); +} + const columns: readonly Column[] = [ { key: 'col1', @@ -73,7 +74,7 @@ test.skip('should resize column when dragging the handle', async () => { test.skip('should use the maxWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px ' }); await resize({ column: col2, resizeBy: 1000 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); @@ -86,3 +87,35 @@ test.skip('should use the minWidth if specified', async () => { await resize({ column: col2, resizeBy: -150 }); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); + +test('should auto resize column when resize handle is double clicked', async () => { + setup({ + columns, + rows: [ + { + col1: 1, + col2: 'a'.repeat(50) + } + ] + }); + const [, col2] = getHeaderCells(); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col2); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 327.703px' }); +}); + +test('should use the maxWidth if specified on auto resize', async () => { + setup({ + columns, + rows: [ + { + col1: 1, + col2: 'a'.repeat(500) + } + ] + }); + const [, col2] = getHeaderCells(); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col2); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); +}); diff --git a/test/utils.tsx b/test/utils.tsx index 8febd240fb..7e29429aff 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -5,7 +5,7 @@ import DataGrid from '../src/'; import type { DataGridProps } from '../src/'; export function setup(props: DataGridProps) { - return render( + render( Date: Fri, 12 Jul 2024 13:40:57 -0500 Subject: [PATCH 34/59] ESLint --- test/virtualization.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/virtualization.test.ts b/test/virtualization.test.ts index 0718a44fae..299bbfc675 100644 --- a/test/virtualization.test.ts +++ b/test/virtualization.test.ts @@ -35,7 +35,7 @@ function setupGrid( }); } - return setup({ + setup({ columns, rows, topSummaryRows, From 3e225795ddcdbf89c3518509d65d96fc11e02303 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:14:47 -0500 Subject: [PATCH 35/59] Fix remaining tests --- package.json | 1 - test/column/resizable.test.tsx | 59 +++++++++++++++++++++++----------- vite.config.ts | 18 ++++++++++- 3 files changed, 57 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 8ab5dd4ef1..d24508e650 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,6 @@ "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-sonarjs": "^1.0.3", "eslint-plugin-testing-library": "^6.2.0", - "jsdom": "^24.1.0", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "lodash-es": "^4.17.21", diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 123c0aac6f..92b9259b1b 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -1,4 +1,6 @@ -import userEvent from '@testing-library/user-event'; +import { act } from 'react'; +import { waitFor } from '@testing-library/react'; +import { commands, userEvent } from '@vitest/browser/context'; import type { Column } from '../../src'; import { resizeHandleClassname } from '../../src/HeaderCell'; @@ -12,27 +14,30 @@ interface Row { interface ResizeArgs { readonly column: HTMLElement; readonly resizeBy: number; - readonly startOffset?: number; } -async function resize({ column, resizeBy, startOffset = 0 }: ResizeArgs) { +async function resize({ column, resizeBy }: ResizeArgs) { + // wait for layout to settle + await waitFor(() => { + expect(column.getBoundingClientRect().right % 100).not.toBe(0); + }); const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); if (resizeHandle === null) return; - const clientXStart = column.getBoundingClientRect().right + startOffset; - - await userEvent.pointer([ - { keys: '[TouchA>]', target: column, coords: { clientX: clientXStart } }, - { pointerName: 'TouchA', coords: { clientX: clientXStart + resizeBy } }, - { keys: '[/TouchA]' } - ]); + await act(async () => { + // @ts-expect-error + await commands.resizeColumn(resizeBy); + }); } async function autoResize(column: HTMLElement) { const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); if (resizeHandle === null) return; - await userEvent.dblClick(resizeHandle); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + await userEvent.dblClick(resizeHandle); + }); } const columns: readonly Column[] = [ @@ -61,17 +66,18 @@ test('should not resize column if resizable is not specified', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); }); -// biome-ignore lint/suspicious/noSkippedTests: -test.skip('should resize column when dragging the handle', async () => { +test('should resize column when dragging the handle', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + const grid = getGrid(); + expect(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); await resize({ column: col2, resizeBy: -50 }); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 150px' }); + // TODO: why does toHaveStyle not work here? + // eslint-disable-next-line jest-dom/prefer-to-have-style + expect(grid.style.gridTemplateColumns).toBe('100px 150.004px'); }); -// biome-ignore lint/suspicious/noSkippedTests: -test.skip('should use the maxWidth if specified', async () => { +test('should use the maxWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px ' }); @@ -79,8 +85,7 @@ test.skip('should use the maxWidth if specified', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); -// biome-ignore lint/suspicious/noSkippedTests: -test.skip('should use the minWidth if specified', async () => { +test('should use the minWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); @@ -88,6 +93,22 @@ test.skip('should use the minWidth if specified', async () => { expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); +test('should not auto resize column if resizable is not specified', async () => { + setup({ + columns, + rows: [ + { + col1: 1, + col2: 'a'.repeat(50) + } + ] + }); + const [col1] = getHeaderCells(); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col1); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); +}); + test('should auto resize column when resize handle is double clicked', async () => { setup({ columns, diff --git a/vite.config.ts b/vite.config.ts index 4ba7924d59..a18671cb40 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,25 @@ import react from '@vitejs/plugin-react'; import wyw from '@wyw-in-js/vite'; 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 + 0, y); + await page.mouse.up(); +}; + export default defineConfig({ base: isCI ? '/react-data-grid/' : '/', build: { @@ -45,7 +60,8 @@ export default defineConfig({ browser: { enabled: true, name: 'chromium', - provider: 'playwright' + provider: 'playwright', + commands: { resizeColumn } }, restoreMocks: true, sequence: { From 9413d5026eaeabbb347b64cfb8af8c3fca461392 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:19:07 -0500 Subject: [PATCH 36/59] Fix last test --- test/column/resizable.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 92b9259b1b..6daf2a008f 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -74,7 +74,7 @@ test('should resize column when dragging the handle', async () => { await resize({ column: col2, resizeBy: -50 }); // TODO: why does toHaveStyle not work here? // eslint-disable-next-line jest-dom/prefer-to-have-style - expect(grid.style.gridTemplateColumns).toBe('100px 150.004px'); + expect(grid.style.gridTemplateColumns).toBe('100px 150'); }); test('should use the maxWidth if specified', async () => { From 75687c498728ca1e837a78171c8aa954a9317922 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:22:40 -0500 Subject: [PATCH 37/59] Add `px` --- test/column/resizable.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 6daf2a008f..4ed4c25d4a 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -74,7 +74,7 @@ test('should resize column when dragging the handle', async () => { await resize({ column: col2, resizeBy: -50 }); // TODO: why does toHaveStyle not work here? // eslint-disable-next-line jest-dom/prefer-to-have-style - expect(grid.style.gridTemplateColumns).toBe('100px 150'); + expect(grid.style.gridTemplateColumns).toBe('100px 150px'); }); test('should use the maxWidth if specified', async () => { From 5fee7597d9da0ad92fdb503dbb34c92cefaab5be Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:31:10 -0500 Subject: [PATCH 38/59] -1 TODO --- src/HeaderCell.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index e0003cccaf..2dde6d2fe0 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -136,7 +136,6 @@ export default function HeaderCell({ currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture); } - // TODO: remove? user-event cannot simulate native user interactions in real browsers currentTarget.setPointerCapture(pointerId); currentTarget.addEventListener('pointermove', onPointerMove); currentTarget.addEventListener('lostpointercapture', onLostPointerCapture); From 8be6552f55439875db28d659f758f5022802cc0f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:33:24 -0500 Subject: [PATCH 39/59] Move comments --- test/column/draggable.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/column/draggable.test.ts b/test/column/draggable.test.ts index 1f1419b5a6..cb27368b59 100644 --- a/test/column/draggable.test.ts +++ b/test/column/draggable.test.ts @@ -50,17 +50,17 @@ test('draggable columns', async () => { 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); }); + // should not call `onColumnsReorder` if drag and drop elements are the same 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); }); + // should not drag a column if it is not specified as draggable expect(onColumnsReorder).not.toHaveBeenCalled(); }); From 3e8cbfb9c71ab873ba763e4cc763feedd337daa7 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 09:51:11 -0500 Subject: [PATCH 40/59] Revert "Move comments" This reverts commit 8be6552f55439875db28d659f758f5022802cc0f. --- test/column/draggable.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/column/draggable.test.ts b/test/column/draggable.test.ts index cb27368b59..1f1419b5a6 100644 --- a/test/column/draggable.test.ts +++ b/test/column/draggable.test.ts @@ -50,17 +50,17 @@ test('draggable columns', async () => { 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); }); - // should not call `onColumnsReorder` if drag and drop elements are the same 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); }); - // should not drag a column if it is not specified as draggable expect(onColumnsReorder).not.toHaveBeenCalled(); }); From 84b8070e7115ecabca73da6fa295fa03f58334e4 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 10:19:09 -0500 Subject: [PATCH 41/59] bump vitest --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d24508e650..a5eaebf190 100644 --- a/package.json +++ b/package.json @@ -79,8 +79,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.1", "@typescript-eslint/parser": "^7.0.1", "@vitejs/plugin-react": "^4.3.1", - "@vitest/browser": "^2.0.1", - "@vitest/coverage-istanbul": "^2.0.1", + "@vitest/browser": "^2.0.3", + "@vitest/coverage-istanbul": "^2.0.3", "@wyw-in-js/rollup": "^0.5.0", "@wyw-in-js/vite": "^0.5.0", "babel-plugin-optimize-clsx": "^2.6.2", @@ -108,7 +108,7 @@ "rollup-plugin-postcss": "^4.0.2", "typescript": "~5.5.2", "vite": "^5.3.3", - "vitest": "^2.0.1" + "vitest": "^2.0.3" }, "peerDependencies": { "react": "^18.0", From 6fa2e78d32d83fe6ad3e5798f1c9b3cbc358d9ce Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 10:41:42 -0500 Subject: [PATCH 42/59] Test scroll to the editor --- test/column/renderEditCell.test.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index 9d8b21374a..0cfa5e5aad 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'; import DataGrid from '../../src'; import type { Column, DataGridProps } from '../../src'; -import { getCellsAtRowIndex, getSelectedCell, scrollGrid } from '../utils'; +import { getCellsAtRowIndex, getRows, getSelectedCell, scrollGrid } from '../utils'; interface Row { col1: number; @@ -100,13 +100,15 @@ describe('Editor', () => { render(); await userEvent.click(getCellsAtRowIndex(0)[0]); expect(getCellsAtRowIndex(0)).toHaveLength(2); - await scrollGrid({ scrollTop: 2000 }); expect(getCellsAtRowIndex(0)).toHaveLength(1); expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); + expect(getRows()[1]).toHaveTextContent('5353'); await userEvent.keyboard('123'); - expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230); - await userEvent.keyboard('{enter}'); + expect(getCellsAtRowIndex(0)).toHaveLength(2); + expect(getRows()[1]).toHaveTextContent('11'); + const editor = screen.getByRole('spinbutton', { name: 'col1-editor' }); + expect(editor).toHaveValue(1230); }); describe('editable', () => { From 544dbfe07e37103f9a874022867ac4763b87c1d1 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 10:55:13 -0500 Subject: [PATCH 43/59] Works now --- test/column/resizable.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index 4ed4c25d4a..a150f1d867 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -72,9 +72,7 @@ test('should resize column when dragging the handle', async () => { const grid = getGrid(); expect(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); await resize({ column: col2, resizeBy: -50 }); - // TODO: why does toHaveStyle not work here? - // eslint-disable-next-line jest-dom/prefer-to-have-style - expect(grid.style.gridTemplateColumns).toBe('100px 150px'); + expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 150px' }); }); test('should use the maxWidth if specified', async () => { From 081cb12a4a1dc1c9655aaecd8c9bf95f035ff2b9 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 10:57:11 -0500 Subject: [PATCH 44/59] No need to wait for layout to settle --- test/column/resizable.test.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/test/column/resizable.test.tsx b/test/column/resizable.test.tsx index a150f1d867..4cbfa2468c 100644 --- a/test/column/resizable.test.tsx +++ b/test/column/resizable.test.tsx @@ -1,5 +1,4 @@ import { act } from 'react'; -import { waitFor } from '@testing-library/react'; import { commands, userEvent } from '@vitest/browser/context'; import type { Column } from '../../src'; @@ -17,10 +16,6 @@ interface ResizeArgs { } async function resize({ column, resizeBy }: ResizeArgs) { - // wait for layout to settle - await waitFor(() => { - expect(column.getBoundingClientRect().right % 100).not.toBe(0); - }); const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); if (resizeHandle === null) return; From c6eaa278b0b255c70e6ac84655861e1b3faba72c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 11:37:54 -0500 Subject: [PATCH 45/59] Speed up ci --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 59e335ff1d..c156da9aa8 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,7 +49,7 @@ jobs: - name: Build website run: node --run build:website - name: Install Playwright Browsers - run: npx playwright install --with-deps + run: npx playwright install chromium - name: Test run: npm --run test timeout-minutes: 4 From 02046276bdafa926d94fc7676d13383850d27390 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 11:49:53 -0500 Subject: [PATCH 46/59] Try ` scrollbar-width: none` --- test/utils.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/utils.tsx b/test/utils.tsx index 7e29429aff..6f996da451 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -11,9 +11,7 @@ export function setup(props: DataGridPro className={css` width: 1920px; height: 1080px; - &::-webkit-scrollbar { - display: none; - } + scrollbar-width: none; `} /> ); From 9a21141cdf8af5b634f5dc27af64847c127d0f30 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 12:42:31 -0500 Subject: [PATCH 47/59] Address comments --- test/virtualization.test.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/test/virtualization.test.ts b/test/virtualization.test.ts index 299bbfc675..966c75d0c5 100644 --- a/test/virtualization.test.ts +++ b/test/virtualization.test.ts @@ -99,11 +99,10 @@ test('virtualization is enabled', async () => { assertHeaderCells(18, 0, 17); assertRows(34, 0, 33); assertCells(0, 18, 0, 17); + await scrollGrid({ scrollTop: 244 }); + assertRows(39, 2, 40); - await scrollGrid({ scrollTop: 249 }); - assertRows(38, 3, 40); - - await scrollGrid({ scrollTop: 250 }); + await scrollGrid({ scrollTop: 245 }); assertRows(38, 3, 40); await scrollGrid({ scrollTop: 419 }); @@ -112,10 +111,10 @@ test('virtualization is enabled', async () => { await scrollGrid({ scrollTop: 420 }); assertRows(38, 8, 45); - await scrollGrid({ scrollTop: 529 }); - assertRows(38, 11, 48); + await scrollGrid({ scrollTop: 524 }); + assertRows(39, 10, 48); - await scrollGrid({ scrollTop: 530 }); + await scrollGrid({ scrollTop: 525 }); assertRows(38, 11, 48); await scrollGrid({ scrollTop: 1000 }); From 5e56d369f0780ba6d7fdad0551138389c39e630e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 12:54:21 -0500 Subject: [PATCH 48/59] Test scrolling --- test/rowHeight.test.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index 2548c90d7b..7dbd124c80 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -1,4 +1,5 @@ import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import type { Column, DataGridProps } from '../src'; import { getRows, setup } from './utils'; @@ -20,7 +21,7 @@ function setupGrid(rowHeight: DataGridProps['rowHeight']) { setup({ columns, rows, rowHeight }); } -test('rowHeight is number', () => { +test('rowHeight is number', async () => { setupGrid(40); const grid = screen.getByRole('grid'); @@ -29,9 +30,14 @@ test('rowHeight is number', () => { '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' }); expect(getRows()).toHaveLength(30); + + await userEvent.tab(); + expect(grid.scrollTop).toBe(0); + await userEvent.keyboard('{Control>}{end}'); + expect(grid.scrollTop + grid.clientHeight).toBe(grid.scrollHeight); }); -test('rowHeight is function', () => { +test('rowHeight is function', async () => { setupGrid((row) => [40, 60, 80][row % 3]); const grid = screen.getByRole('grid'); @@ -40,4 +46,9 @@ test('rowHeight is function', () => { '35px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px' }); expect(getRows()).toHaveLength(22); + + await userEvent.tab(); + expect(grid.scrollTop).toBe(0); + await userEvent.keyboard('{Control>}{end}'); + expect(grid.scrollTop + grid.clientHeight).toBe(grid.scrollHeight); }); From 3d33aeaf639e2e111fe48a2127696b3e2e841b85 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 13:02:44 -0500 Subject: [PATCH 49/59] Address comments --- test/virtualization.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/virtualization.test.ts b/test/virtualization.test.ts index 966c75d0c5..3d314d3481 100644 --- a/test/virtualization.test.ts +++ b/test/virtualization.test.ts @@ -125,13 +125,13 @@ test('virtualization is enabled', async () => { await scrollGrid({ scrollTop: rowHeight + rowHeight * 100 - 1080 }); assertRows(34, 66, 99); - await scrollGrid({ scrollLeft: 90 }); + await scrollGrid({ scrollLeft: 92 }); assertHeaderCells(18, 0, 17); assertCells(66, 18, 0, 17); - await scrollGrid({ scrollLeft: 91 }); - assertHeaderCells(18, 0, 17); - assertCells(66, 18, 0, 17); + await scrollGrid({ scrollLeft: 93 }); + assertHeaderCells(19, 0, 18); + assertCells(66, 19, 0, 18); await scrollGrid({ scrollLeft: 209 }); assertHeaderCells(19, 0, 18); From 31e4756a6b1a0348c7e9f3f31605e30852988ab3 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 14:17:57 -0500 Subject: [PATCH 50/59] Check actual direction using arrow navigation --- test/direction.test.ts | 22 ++++++++++++++++++---- test/dragFill.test.tsx | 15 +-------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/test/direction.test.ts b/test/direction.test.ts index 8e2dc8d12e..ad558a3c5e 100644 --- a/test/direction.test.ts +++ b/test/direction.test.ts @@ -1,5 +1,7 @@ +import userEvent from '@testing-library/user-event'; + import type { Column } from '../src'; -import { getGrid, setup } from './utils'; +import { getGrid, getSelectedCell, setup } from './utils'; interface Row { id: number; @@ -19,17 +21,29 @@ const columns: readonly Column[] = [ const rows: readonly Row[] = []; -test('should use left to right direction by default', () => { +test('should use left to right direction by default', async () => { setup({ rows, columns }); expect(getGrid()).toHaveAttribute('dir', 'ltr'); + await userEvent.tab(); + expect(getSelectedCell()).toHaveTextContent('ID'); + await userEvent.keyboard('{ArrowRight}'); + expect(getSelectedCell()).toHaveTextContent('Name'); }); -test('should use left to right direction if direction prop is set to ltr', () => { +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'); + await userEvent.tab(); + expect(getSelectedCell()).toHaveTextContent('ID'); + await userEvent.keyboard('{ArrowRight}'); + expect(getSelectedCell()).toHaveTextContent('Name'); }); -test('should use right to left direction if direction prop is set to rtl', () => { +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'); + await userEvent.tab(); + expect(getSelectedCell()).toHaveTextContent('ID'); + await userEvent.keyboard('{ArrowLeft}'); + expect(getSelectedCell()).toHaveTextContent('Name'); }); diff --git a/test/dragFill.test.tsx b/test/dragFill.test.tsx index 5c863871bc..4d1c7e11a0 100644 --- a/test/dragFill.test.tsx +++ b/test/dragFill.test.tsx @@ -21,20 +21,7 @@ const columns: readonly Column[] = [ } ]; -const initialRows: readonly Row[] = [ - { - col: 'a1' - }, - { - col: 'a2' - }, - { - col: 'a3' - }, - { - col: 'a4' - } -]; +const initialRows: readonly Row[] = [{ col: 'a1' }, { col: 'a2' }, { col: 'a3' }, { col: 'a4' }]; function setup(allowDragFill = true) { render(); From 48335e4c4389cebe6fb7a12439ef0730c0c7a25f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 15 Jul 2024 17:32:20 -0500 Subject: [PATCH 51/59] Revert "Check actual direction using arrow navigation" This reverts commit 31e4756a6b1a0348c7e9f3f31605e30852988ab3. --- test/direction.test.ts | 22 ++++------------------ test/dragFill.test.tsx | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/test/direction.test.ts b/test/direction.test.ts index ad558a3c5e..8e2dc8d12e 100644 --- a/test/direction.test.ts +++ b/test/direction.test.ts @@ -1,7 +1,5 @@ -import userEvent from '@testing-library/user-event'; - import type { Column } from '../src'; -import { getGrid, getSelectedCell, setup } from './utils'; +import { getGrid, setup } from './utils'; interface Row { id: number; @@ -21,29 +19,17 @@ const columns: readonly Column[] = [ const rows: readonly Row[] = []; -test('should use left to right direction by default', async () => { +test('should use left to right direction by default', () => { setup({ rows, columns }); expect(getGrid()).toHaveAttribute('dir', 'ltr'); - await userEvent.tab(); - expect(getSelectedCell()).toHaveTextContent('ID'); - await userEvent.keyboard('{ArrowRight}'); - expect(getSelectedCell()).toHaveTextContent('Name'); }); -test('should use left to right direction if direction prop is set to ltr', async () => { +test('should use left to right direction if direction prop is set to ltr', () => { setup({ rows, columns, direction: 'ltr' }); expect(getGrid()).toHaveAttribute('dir', 'ltr'); - await userEvent.tab(); - expect(getSelectedCell()).toHaveTextContent('ID'); - await userEvent.keyboard('{ArrowRight}'); - expect(getSelectedCell()).toHaveTextContent('Name'); }); -test('should use right to left direction if direction prop is set to rtl', async () => { +test('should use right to left direction if direction prop is set to rtl', () => { setup({ rows, columns, direction: 'rtl' }); expect(getGrid()).toHaveAttribute('dir', 'rtl'); - await userEvent.tab(); - expect(getSelectedCell()).toHaveTextContent('ID'); - await userEvent.keyboard('{ArrowLeft}'); - expect(getSelectedCell()).toHaveTextContent('Name'); }); diff --git a/test/dragFill.test.tsx b/test/dragFill.test.tsx index 4d1c7e11a0..5c863871bc 100644 --- a/test/dragFill.test.tsx +++ b/test/dragFill.test.tsx @@ -21,7 +21,20 @@ const columns: readonly Column[] = [ } ]; -const initialRows: readonly Row[] = [{ col: 'a1' }, { col: 'a2' }, { col: 'a3' }, { col: 'a4' }]; +const initialRows: readonly Row[] = [ + { + col: 'a1' + }, + { + col: 'a2' + }, + { + col: 'a3' + }, + { + col: 'a4' + } +]; function setup(allowDragFill = true) { render(); From e9224b836680af1376b6eb15d269787413f470bf Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 08:02:39 -0500 Subject: [PATCH 52/59] Add `browser.viewport` --- test/column/draggable.test.ts | 6 +----- test/utils.tsx | 1 - vite.config.ts | 3 ++- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/test/column/draggable.test.ts b/test/column/draggable.test.ts index 1f1419b5a6..49264ed7dd 100644 --- a/test/column/draggable.test.ts +++ b/test/column/draggable.test.ts @@ -7,25 +7,21 @@ import { getHeaderCells, setup } from '../utils'; const columns: readonly Column[] = [ { key: 'col1', - name: 'col1', - width: 100 + name: 'col1' }, { key: 'col2', name: 'col2', - width: 100, draggable: true }, { key: 'col3', name: 'col3', - width: 100, draggable: true }, { key: 'col4', name: 'col4', - width: 100, draggable: true } ]; diff --git a/test/utils.tsx b/test/utils.tsx index 6f996da451..7660e522bd 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -9,7 +9,6 @@ export function setup(props: DataGridPro Date: Tue, 16 Jul 2024 08:03:39 -0500 Subject: [PATCH 53/59] Update vite.config.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- vite.config.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index d11950f7d8..fe680b8a51 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -43,8 +43,7 @@ export default defineConfig({ wyw({ preprocessor: 'none' }) ], server: { - // TODO: open bug - open: !isTest + open: true }, test: { root: '.', From e796eebb5c4b5851dea3154c325de261ba744237 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 08:03:54 -0500 Subject: [PATCH 54/59] Remove `0` Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index fe680b8a51..cc9fead6c0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,7 +16,7 @@ const resizeColumn: BrowserCommand<[resizeBy: number]> = async (context, resizeB position: { x: 5, y: 5 } }); await page.mouse.down(); - await page.mouse.move(x + resizeBy + 5 + 0, y); + await page.mouse.move(x + resizeBy + 5, y); await page.mouse.up(); }; From 8ec5203ea2ab5ec2d795f86dd0a5b384a47f7220 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 08:11:11 -0500 Subject: [PATCH 55/59] `headless: true` --- ...when-selected-cell-not-in-the-viewport-1.png | Bin 0 -> 21470 bytes vite.config.ts | 1 + 2 files changed, 1 insertion(+) create mode 100644 test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png diff --git a/test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png b/test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png new file mode 100644 index 0000000000000000000000000000000000000000..11d83f77911a0e32518fa466542c8113bab2a6ff GIT binary patch literal 21470 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 literal 0 HcmV?d00001 diff --git a/vite.config.ts b/vite.config.ts index cc9fead6c0..823f8fd098 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -58,6 +58,7 @@ export default defineConfig({ setupFiles: ['test/setup.ts'], browser: { enabled: true, + headless: true, name: 'chromium', provider: 'playwright', commands: { resizeColumn }, From 8035aa6575d4cebff0b44b8342446288d7a1f1c7 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 08:55:09 -0500 Subject: [PATCH 56/59] Use headless in CI --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 823f8fd098..4e944c0276 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -58,7 +58,7 @@ export default defineConfig({ setupFiles: ['test/setup.ts'], browser: { enabled: true, - headless: true, + headless: isCI, name: 'chromium', provider: 'playwright', commands: { resizeColumn }, From dc7b6909ec7989125db214b8c01b90e1ca1eacb2 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 09:11:55 -0500 Subject: [PATCH 57/59] Test `scrollTop` --- test/column/renderEditCell.test.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index 0cfa5e5aad..a639015697 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'; import DataGrid from '../../src'; import type { Column, DataGridProps } from '../../src'; -import { getCellsAtRowIndex, getRows, getSelectedCell, scrollGrid } from '../utils'; +import { getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils'; interface Row { col1: number; @@ -103,12 +103,10 @@ describe('Editor', () => { await scrollGrid({ scrollTop: 2000 }); expect(getCellsAtRowIndex(0)).toHaveLength(1); expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); - expect(getRows()[1]).toHaveTextContent('5353'); await userEvent.keyboard('123'); expect(getCellsAtRowIndex(0)).toHaveLength(2); - expect(getRows()[1]).toHaveTextContent('11'); - const editor = screen.getByRole('spinbutton', { name: 'col1-editor' }); - expect(editor).toHaveValue(1230); + expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230); + expect(getGrid().scrollTop).toBe(0); }); describe('editable', () => { From 51b1f308ea9f4e222c0a6f21f19b699473ac3aed Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 09:18:35 -0500 Subject: [PATCH 58/59] Delete screenshots --- ...when-selected-cell-not-in-the-viewport-1.png | Bin 21470 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png diff --git a/test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png b/test/__screenshots__/keyboardNavigation.test.tsx/navigation-when-selected-cell-not-in-the-viewport-1.png deleted file mode 100644 index 11d83f77911a0e32518fa466542c8113bab2a6ff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 21470 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 From 0e17bfcfd77bc6016e601b1625f6a20bd17bd4db Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 16 Jul 2024 09:46:27 -0500 Subject: [PATCH 59/59] Check scrollTop before typing --- test/column/renderEditCell.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx index a639015697..cbb198b9a6 100644 --- a/test/column/renderEditCell.test.tsx +++ b/test/column/renderEditCell.test.tsx @@ -103,6 +103,7 @@ describe('Editor', () => { await scrollGrid({ scrollTop: 2000 }); expect(getCellsAtRowIndex(0)).toHaveLength(1); expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument(); + expect(getGrid().scrollTop).toBe(2000); await userEvent.keyboard('123'); expect(getCellsAtRowIndex(0)).toHaveLength(2); expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230);