Tests: simplify scrollGrid (#4016)

* Tests: simplify `scrollGrid`

* fix lints

---------

Co-authored-by: Aman Mahajan <amahajan@stratag.com>

Author: nstepien

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();
     });
 

test/browser/keyboardNavigation.test.tsx

@@ -279,21 +279,21 @@ 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);
 
   await userEvent.keyboard(
     '{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);
 });

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) {

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