diff --git a/test/browser/column/renderEditCell.test.tsx b/test/browser/column/renderEditCell.test.tsx index 6cdc712ccc..bf2f716a79 100644 --- a/test/browser/column/renderEditCell.test.tsx +++ b/test/browser/column/renderEditCell.test.tsx @@ -1,6 +1,6 @@ import { useMemo, useState } from 'react'; import { createPortal } from 'react-dom'; -import { page, userEvent } from 'vitest/browser'; +import { page, server, userEvent } from 'vitest/browser'; import { DataGrid } from '../../../src'; import type { Column, DataGridProps } from '../../../src'; @@ -96,7 +96,7 @@ describe('Editor', () => { await userEvent.click(getCellsAtRowIndex(0).nth(0)); const activeRowCells = getRowWithCell(page.getActiveCell()).getCell(); await testCount(activeRowCells, 2); - await scrollGrid({ top: 2001 }); + scrollGrid({ top: 2001 }); await testCount(activeRowCells, 1); await expect.element(col1Editor).not.toBeInTheDocument(); await expect.element(grid).toHaveProperty('scrollTop', 2001); @@ -258,11 +258,19 @@ describe('Editor', () => { await userEvent.dblClick(page.getCell({ name: 'name0' })); await userEvent.keyboard('abc'); - - await scrollGrid({ top: 1500 }); + if (server.browser === 'firefox') { + // When typing, Firefox scroll to the caret asynchronously, + // but does not to cancel the scroll task when calling `.scroll()` on the grid + // https://github.com/mozilla-firefox/firefox/blob/287c6cf323492ae0cc031e468c1d87f623413f50/dom/html/TextControlElement.cpp#L330 + // https://github.com/mozilla-firefox/firefox/blob/287c6cf323492ae0cc031e468c1d87f623413f50/dom/base/Selection.cpp#L3828 + await new Promise(requestAnimationFrame); + // Alternatively, configuring playwright's launchOptions.slowMo to 1 works, + // but slows down the tests. + } + scrollGrid({ top: 1500 }); await userEvent.click(page.getCell({ name: 'name43' })); await expect.element(page.getActiveCell()).toHaveTextContent(/^name43$/); - await scrollGrid({ top: 0 }); + scrollGrid({ top: 0 }); await expect.element(page.getCell({ name: 'name0abc' })).toBeVisible(); }); diff --git a/test/browser/keyboardNavigation.test.tsx b/test/browser/keyboardNavigation.test.tsx index 46806e1f4d..36adb910b5 100644 --- a/test/browser/keyboardNavigation.test.tsx +++ b/test/browser/keyboardNavigation.test.tsx @@ -279,13 +279,13 @@ test('navigation when active cell not in the viewport', async () => { await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}'); await validateCellPosition(99, 100); await expect.element(activeRowCells).not.toHaveLength(1); - await scrollGrid({ top: 0 }); + scrollGrid({ top: 0 }); await testCount(activeRowCells, 1); await userEvent.keyboard('{arrowup}'); await validateCellPosition(99, 99); await expect.element(activeRowCells).not.toHaveLength(1); - await scrollGrid({ left: 0 }); + scrollGrid({ left: 0 }); await userEvent.keyboard('{arrowdown}'); await validateCellPosition(99, 100); @@ -293,7 +293,7 @@ test('navigation when active cell not in the viewport', async () => { '{home}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}' ); await validateCellPosition(7, 100); - await scrollGrid({ left: 2000 }); + scrollGrid({ left: 2000 }); await userEvent.keyboard('{arrowleft}'); await validateCellPosition(6, 100); }); diff --git a/test/browser/utils.tsx b/test/browser/utils.tsx index 381a80d023..6860786170 100644 --- a/test/browser/utils.tsx +++ b/test/browser/utils.tsx @@ -25,15 +25,9 @@ export async function validateCellPosition(columnIdx: number, rowIdx: number) { await expect.element(row).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); } -export async function scrollGrid(options: ScrollToOptions) { - await new Promise((resolve) => { - // wait for browser state to stablize before scrolling, to avoid flaky scroll-related tests - requestAnimationFrame(() => { - const gridElement = page.getGrid().element(); - gridElement.addEventListener('scrollend', resolve, { once: true }); - gridElement.scroll(options); - }); - }); +export function scrollGrid(options: ScrollToOptions) { + const grid = page.getGrid().element(); + grid.scroll(options); } export function testCount(locator: Locator, expectedCount: number) { diff --git a/test/browser/virtualization.test.ts b/test/browser/virtualization.test.ts index d39bbf578f..01fa277812 100644 --- a/test/browser/virtualization.test.ts +++ b/test/browser/virtualization.test.ts @@ -102,50 +102,50 @@ test('virtualization is enabled', async () => { await assertHeaderCells(18, 0, 17); await assertRows(34, 0, 33); await assertCells(0, 18, 0, 17); - await scrollGrid({ top: 244 }); + scrollGrid({ top: 244 }); await assertRows(39, 2, 40); - await scrollGrid({ top: 245 }); + scrollGrid({ top: 245 }); await assertRows(38, 3, 40); - await scrollGrid({ top: 419 }); + scrollGrid({ top: 419 }); await assertRows(39, 7, 45); - await scrollGrid({ top: 420 }); + scrollGrid({ top: 420 }); await assertRows(38, 8, 45); - await scrollGrid({ top: 524 }); + scrollGrid({ top: 524 }); await assertRows(39, 10, 48); - await scrollGrid({ top: 525 }); + scrollGrid({ top: 525 }); await assertRows(38, 11, 48); - await scrollGrid({ top: 1000 }); + scrollGrid({ top: 1000 }); await assertRows(39, 24, 62); // scroll height = header height + row height * row count // max top = scroll height - grid height - await scrollGrid({ top: rowHeight + rowHeight * 100 - 1080 }); + scrollGrid({ top: rowHeight + rowHeight * 100 - 1080 }); await assertRows(34, 66, 99); - await scrollGrid({ left: 92 }); + scrollGrid({ left: 92 }); await assertHeaderCells(18, 0, 17); await assertCells(66, 18, 0, 17); - await scrollGrid({ left: 93 }); + scrollGrid({ left: 93 }); await assertHeaderCells(19, 0, 18); await assertCells(66, 19, 0, 18); - await scrollGrid({ left: 209 }); + scrollGrid({ left: 209 }); await assertHeaderCells(19, 0, 18); await assertCells(66, 19, 0, 18); - await scrollGrid({ left: 210 }); + scrollGrid({ left: 210 }); await assertHeaderCells(18, 1, 18); await assertCells(66, 18, 1, 18); // max left = row width - grid width - await scrollGrid({ left: 3600 - 1920 }); + scrollGrid({ left: 3600 - 1920 }); await assertHeaderCells(17, 13, 29); await assertCells(66, 17, 13, 29); }); @@ -157,13 +157,13 @@ test('virtualization is enabled with 4 frozen columns', async () => { await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); - await scrollGrid({ left: 1000 }); + scrollGrid({ left: 1000 }); indexes = [0, 1, 2, 3, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]; await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); // max left = row width - grid width - await scrollGrid({ left: 3600 - 1920 }); + scrollGrid({ left: 3600 - 1920 }); indexes = [0, 1, 2, 3, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]; await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); @@ -179,12 +179,12 @@ test('virtualization is enabled with all columns frozen', async () => { await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); - await scrollGrid({ left: 1000 }); + scrollGrid({ left: 1000 }); await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); // max left = row width - grid width - await scrollGrid({ left: 3600 - 1920 }); + scrollGrid({ left: 3600 - 1920 }); await assertHeaderCellIndexes(indexes); await assertCellIndexes(0, indexes); }); @@ -197,7 +197,7 @@ test('virtualization is enabled with 2 summary rows', async () => { 26, 27, 28, 29, 30, 31, 102, 103 ]); - await scrollGrid({ top: 1000 }); + scrollGrid({ top: 1000 }); await assertRowIndexes([ 0, 1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 102, 103