Add unit tests for focus keyboard scroll workaround

cee-chen · cee-chen · commit 99b370fd1ad0 · 2022-01-13T12:40:06.000-08:00
diff --git a/src/components/datagrid/utils/focus.test.ts b/src/components/datagrid/utils/focus.test.ts
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { getParentCellContent } from './focus';
+import { testCustomHook } from '../../../test';
+
+import {
+  getParentCellContent,
+  useKeyboardFocusScrollWorkaround,
+} from './focus';
 
 describe('getParentCellContent', () => {
   const doc = document.createDocumentFragment();
@@ -40,3 +45,75 @@ describe('getParentCellContent', () => {
     expect(getParentCellContent(body)).toBeNull();
   });
 });
+
+describe('useKeyboardFocusScrollWorkaround', () => {
+  const gridRef = {
+    current: {
+      scrollToItem: jest.fn(),
+      scrollTo: jest.fn(),
+    },
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls scrollToItem whenever a new cell is focused via keyboard navigation', () => {
+    testCustomHook(() =>
+      useKeyboardFocusScrollWorkaround({
+        focusedCell: [1, 0], // previous cell is [0, 0], so this is navigating to the right
+        visibleRowCount: 3,
+        gridRef,
+      })
+    );
+
+    expect(gridRef.current.scrollToItem).toHaveBeenCalledWith({
+      columnIndex: 1,
+      rowIndex: 0,
+    });
+  });
+
+  it('does not call scrollToItem when keyboard navigating downwards', () => {
+    testCustomHook(() =>
+      useKeyboardFocusScrollWorkaround({
+        focusedCell: [0, 1], // previous cell is [0, 0]
+        visibleRowCount: 3,
+        gridRef,
+      })
+    );
+
+    expect(gridRef.current.scrollToItem).not.toHaveBeenCalled();
+  });
+
+  it('calls scrollTo with a manual height calculation when navigating on the last row', () => {
+    testCustomHook(() =>
+      useKeyboardFocusScrollWorkaround({
+        focusedCell: [2, 2],
+        visibleRowCount: 3,
+        gridRef: {
+          current: {
+            ...gridRef.current,
+            _outerRef: { clientHeight: 200, firstChild: { clientHeight: 500 } },
+          },
+        },
+      })
+    );
+
+    expect(gridRef.current.scrollToItem).toHaveBeenCalledWith({
+      columnIndex: 2,
+    });
+    expect(gridRef.current.scrollTo).toHaveBeenCalledWith({ scrollTop: 300 });
+  });
+
+  it('does nothing if there is no currently focused cell', () => {
+    testCustomHook(() =>
+      useKeyboardFocusScrollWorkaround({
+        focusedCell: undefined,
+        visibleRowCount: 0,
+        gridRef,
+      })
+    );
+
+    expect(gridRef.current.scrollToItem).not.toHaveBeenCalled();
+  });
+});
