Add and migrate all tests to use new locators (#3954)

* Add and migrate all tests to use new locators

* remove commands.scrollGrid

* tweak prefer-destructuring config

* tweak commands to use `iframe`

* tweak ScrollToCell, hopefully resolve test issues

* should we add headerAndTopSummaryRowsCount?

* is it a timeout issue?

* simpler implementation?

* revert actionTimeout

* tweak platform

* small nit

* rename, this may be rows instead of cells

Author: nstepien

eslint.config.js

@@ -25,9 +25,11 @@ export default defineConfig([
 
     plugins: {
       react,
+      // @ts-expect-error
       'react-hooks': reactHooks,
       'react-x': reactX,
       sonarjs,
+      // @ts-expect-error
       '@typescript-eslint': typescriptEslint
     },
 
@@ -762,7 +764,7 @@ export default defineConfig([
       '@typescript-eslint/non-nullable-type-assertion-style': 1,
       '@typescript-eslint/parameter-properties': 1,
       '@typescript-eslint/prefer-as-const': 1,
-      '@typescript-eslint/prefer-destructuring': [1, { array: false }],
+      '@typescript-eslint/prefer-destructuring': [1, { array: false, object: true }],
       '@typescript-eslint/prefer-enum-initializers': 0,
       '@typescript-eslint/prefer-find': 1,
       '@typescript-eslint/prefer-for-of': 1,

rolldown.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     sourcemap: true,
     cleanDir: true
   },
-  platform: 'browser',
+  platform: 'neutral',
   external: (id) => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
     ecij({

src/DataGrid.tsx

@@ -541,7 +541,9 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
             ? idx
             : undefined;
         const scrollToRowIdx =
-          rowIdx !== undefined && isRowIdxWithinViewportBounds(rowIdx) ? rowIdx : undefined;
+          rowIdx !== undefined && isRowIdxWithinViewportBounds(rowIdx)
+            ? rowIdx + headerAndTopSummaryRowsCount
+            : undefined;
 
         if (scrollToIdx !== undefined || scrollToRowIdx !== undefined) {
           setScrollToPosition({ idx: scrollToIdx, rowIdx: scrollToRowIdx });

src/GroupedColumnHeaderRow.tsx

@@ -23,13 +23,13 @@ function GroupedColumnHeaderRow<R, SR>({
   const renderedParents = new Set<CalculatedColumnParent<R, SR>>();
 
   for (const column of columns) {
-    let { parent } = column;
+    if (column.parent === undefined) continue;
 
-    if (parent === undefined) continue;
+    let { parent } = column;
 
     while (parent.level > level) {
       if (parent.parent === undefined) break;
-      parent = parent.parent;
+      ({ parent } = parent);
     }
 
     if (parent.level === level && !renderedParents.has(parent)) {

src/ScrollToCell.tsx

@@ -19,35 +19,23 @@ export default function ScrollToCell({
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
+    const grid = gridRef.current!;
+    const { scrollLeft, scrollTop } = grid;
     // scroll until the cell is completely visible
     // this is needed if the grid has auto-sized columns
     // setting the behavior to auto so it can be overridden
     scrollIntoView(ref.current, 'auto');
-  });
-
-  useLayoutEffect(() => {
-    function removeScrollToCell() {
+    if (grid.scrollLeft === scrollLeft && grid.scrollTop === scrollTop) {
       setScrollToCellPosition(null);
     }
-
-    const observer = new IntersectionObserver(removeScrollToCell, {
-      root: gridRef.current!,
-      threshold: 1.0
-    });
-
-    observer.observe(ref.current!);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [gridRef, setScrollToCellPosition]);
+  });
 
   return (
     <div
       ref={ref}
       style={{
         gridColumn: idx === undefined ? '1/-1' : idx + 1,
-        gridRow: rowIdx === undefined ? '1/-1' : rowIdx + 2
+        gridRow: rowIdx === undefined ? '1/-1' : rowIdx + 1
       }}
     />
   );

src/utils/selectedCellUtils.ts

@@ -146,19 +146,19 @@ export function getNextSelectedCellPosition<R, SR>({
     if (moveNext) {
       // find the parent at the same row level
       const nextColumn = columns[nextIdx];
-      let parent = nextColumn.parent;
+      let { parent } = nextColumn;
       while (parent !== undefined) {
         const parentRowIdx = getParentRowIdx(parent);
         if (nextRowIdx === parentRowIdx) {
           nextIdx = parent.idx + parent.colSpan;
           break;
         }
-        parent = parent.parent;
+        ({ parent } = parent);
       }
     } else if (moveUp) {
       // find the first reachable parent
       const nextColumn = columns[nextIdx];
-      let parent = nextColumn.parent;
+      let { parent } = nextColumn;
       let found = false;
       while (parent !== undefined) {
         const parentRowIdx = getParentRowIdx(parent);
@@ -168,7 +168,7 @@ export function getNextSelectedCellPosition<R, SR>({
           found = true;
           break;
         }
-        parent = parent.parent;
+        ({ parent } = parent);
       }
 
       // keep the current position if there is no parent matching the new row position
@@ -212,7 +212,7 @@ export function getNextSelectedCellPosition<R, SR>({
     // This check is needed when navigating to a column
     // that does not have a parent matching the new rowIdx
     const nextColumn = columns[nextIdx];
-    let parent = nextColumn.parent;
+    let { parent } = nextColumn;
     const nextParentRowIdx = nextRowIdx;
     nextRowIdx = mainHeaderRowIdx;
     while (parent !== undefined) {
@@ -221,7 +221,7 @@ export function getNextSelectedCellPosition<R, SR>({
         nextRowIdx = parentRowIdx;
         nextIdx = parent.idx;
       }
-      parent = parent.parent;
+      ({ parent } = parent);
     }
   }