Add more tests

Author: bvaughn

lib/components/grid/Grid.tsx

@@ -13,8 +13,6 @@ import type { Align } from "../../types";
 import { arePropsEqual } from "../../utils/arePropsEqual";
 import type { GridProps } from "./types";
 
-// TODO Handle scrollbar sizes (add width/height if necessary)
-
 export function Grid<CellProps extends object>({
   cellComponent: CellComponentProp,
   cellProps: cellPropsUnstable,

lib/components/list/List.test.tsx

@@ -1,5 +1,5 @@
 import { act, render, screen } from "@testing-library/react";
-import { createRef, useLayoutEffect, type CSSProperties } from "react";
+import { createRef, useLayoutEffect } from "react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { EMPTY_OBJECT } from "../../../src/constants";
 import {
@@ -8,12 +8,10 @@ import {
 } from "../../utils/test/mockResizeObserver";
 import { List } from "./List";
 import { type ListImperativeAPI, type RowComponentProps } from "./types";
+import { useListCallbackRef } from "./useListCallbackRef";
 
 describe("List", () => {
-  const RowComponent = vi.fn(function Row(props: {
-    index: number;
-    style: CSSProperties;
-  }) {
+  const RowComponent = vi.fn(function Row(props: RowComponentProps<object>) {
     const { index, style } = props;
 
     useLayoutEffect(() => {
@@ -361,11 +359,12 @@ describe("List", () => {
       expect(HTMLElement.prototype.scrollTo).not.toHaveBeenCalled();
 
       listRef.current?.scrollToRow({ index: 8 });
+
       expect(HTMLElement.prototype.scrollTo).toHaveBeenCalledTimes(1);
-      expect(HTMLElement.prototype.scrollTo).not.toHaveBeenLastCalledWith(
-        8,
-        "auto"
-      );
+      expect(HTMLElement.prototype.scrollTo).toHaveBeenLastCalledWith({
+        behavior: "auto",
+        top: 125
+      });
     });
   });
 
@@ -421,7 +420,7 @@ describe("List", () => {
   });
 
   describe("edge cases", () => {
-    test("should restore scroll indicates if rowProps changes", () => {
+    test("should restore scroll indices if rowProps changes", () => {
       const listRef = createRef<ListImperativeAPI>();
       const onRowsRendered = vi.fn();
 
@@ -528,5 +527,30 @@ describe("List", () => {
       );
       expect(container.textContent).toEqual("AB");
     });
+
+    test("should not cause a cycle of List callback ref is passed in rowProps", () => {
+      function RowComponentWithRowProps({
+        index,
+        style
+      }: RowComponentProps<{ listRef: ListImperativeAPI | null }>) {
+        return <div style={style}>{index}</div>;
+      }
+
+      function Test() {
+        const [listRef, setListRef] = useListCallbackRef(null);
+
+        return (
+          <List
+            listRef={setListRef}
+            rowComponent={RowComponentWithRowProps}
+            rowCount={10}
+            rowHeight={25}
+            rowProps={{ listRef }}
+          />
+        );
+      }
+
+      render(<Test />);
+    });
   });
 });

lib/core/createCachedBounds.test.ts

@@ -1,7 +1,69 @@
-import { describe, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
+import { createCachedBounds } from "./createCachedBounds";
 
 describe("createCachedBounds", () => {
-  test("have tests", () => {
-    // TODO Write tests
+  test("should lazily measure items before the requested index", () => {
+    const itemSize = vi.fn((index: number) => 10 + index);
+    const cachedBounds = createCachedBounds({
+      itemCount: 10,
+      itemProps: {},
+      itemSize
+    });
+
+    expect(itemSize).not.toHaveBeenCalled();
+    expect(cachedBounds.size).toBe(0);
+
+    expect(cachedBounds.get(2)).toEqual({
+      scrollOffset: 21,
+      size: 12
+    });
+    expect(itemSize).toHaveBeenCalledTimes(3);
+    expect(cachedBounds.size).toBe(3);
+
+    expect(cachedBounds.get(3)).toEqual({
+      scrollOffset: 33,
+      size: 13
+    });
+    expect(itemSize).toHaveBeenCalledTimes(4);
+    expect(cachedBounds.size).toBe(4);
+  });
+
+  test("should cached measured sizes", () => {
+    const itemSize = vi.fn(() => 10);
+
+    const cachedBounds = createCachedBounds({
+      itemCount: 10,
+      itemProps: {},
+      itemSize
+    });
+
+    expect(itemSize).not.toHaveBeenCalled();
+    expect(cachedBounds.size).toBe(0);
+
+    cachedBounds.get(9);
+
+    expect(itemSize).toHaveBeenCalledTimes(10);
+    expect(cachedBounds.size).toBe(10);
+
+    for (let index = 0; index < 10; index++) {
+      cachedBounds.get(index);
+    }
+
+    expect(itemSize).toHaveBeenCalledTimes(10);
+    expect(cachedBounds.size).toBe(10);
+  });
+
+  test("should gracefully handle an empty cache", () => {
+    const cachedBounds = createCachedBounds({
+      itemCount: 0,
+      itemProps: {},
+      itemSize: 10
+    });
+
+    expect(cachedBounds.size).toBe(0);
+
+    expect(() => {
+      cachedBounds.get(1);
+    }).toThrow("Invalid index 1");
   });
 });

lib/core/getOffsetForIndex.test.ts

@@ -32,7 +32,7 @@ describe("getOffsetForIndex", () => {
     function createTestHelper(align: Align) {
       return function testHelperAuto(
         index: number,
-        expectedIndex: number,
+        expectedOffset: number,
         containerScrollOffset: number = 0
       ) {
         expect(
@@ -42,7 +42,7 @@ describe("getOffsetForIndex", () => {
             index,
             containerScrollOffset
           })
-        ).toBe(expectedIndex);
+        ).toBe(expectedOffset);
       };
     }
 
@@ -112,8 +112,10 @@ describe("getOffsetForIndex", () => {
 
       // Shouldn't scroll if already visible
       testHelper(0, 0);
-      testHelper(2, 0);
-      testHelper(7, 50, 100);
+      testHelper(3, 0);
+      testHelper(3, 30, 30);
+      testHelper(7, 30, 30);
+      testHelper(7, 50, 50);
       testHelper(9, 50, 100);
 
       // Should center align if not visible

lib/core/getStartStopIndices.test.ts

@@ -7,12 +7,14 @@ describe("getStartStopIndices", () => {
     containerScrollOffset,
     containerSize,
     itemCount,
-    itemSize
+    itemSize,
+    overscanCount = 0
   }: {
     containerScrollOffset: number;
     containerSize: number;
     itemCount: number;
     itemSize: number;
+    overscanCount?: number;
   }) {
     const cachedBounds = createCachedBounds({
       itemCount: itemCount,
@@ -25,7 +27,7 @@ describe("getStartStopIndices", () => {
       containerScrollOffset,
       containerSize,
       itemCount,
-      overscanCount: 0
+      overscanCount
     });
   }
 
@@ -40,7 +42,7 @@ describe("getStartStopIndices", () => {
     ).toEqual([0, -1]);
   });
 
-  test("not enough rows to fill available height", () => {
+  test("edge case: not enough rows to fill available height", () => {
     expect(
       getIndices({
         containerScrollOffset: 0,
@@ -106,5 +108,53 @@ describe("getStartStopIndices", () => {
     ).toEqual([8, 9]);
   });
 
-  // TODO Test overscanCount
+  describe("with overscan", () => {
+    test("edge case: not enough rows to fill available height", () => {
+      expect(
+        getIndices({
+          containerScrollOffset: 0,
+          containerSize: 100,
+          itemCount: 2,
+          itemSize: 25,
+          overscanCount: 2
+        })
+      ).toEqual([0, 1]);
+    });
+
+    test("edge case: no rows before", () => {
+      expect(
+        getIndices({
+          containerScrollOffset: 0,
+          containerSize: 100,
+          itemCount: 100,
+          itemSize: 25,
+          overscanCount: 2
+        })
+      ).toEqual([0, 5]);
+    });
+
+    test("edge case: no rows after", () => {
+      expect(
+        getIndices({
+          containerScrollOffset: 2400,
+          containerSize: 100,
+          itemCount: 100,
+          itemSize: 25,
+          overscanCount: 2
+        })
+      ).toEqual([94, 99]);
+    });
+
+    test("rows before and after", () => {
+      expect(
+        getIndices({
+          containerScrollOffset: 100,
+          containerSize: 100,
+          itemCount: 100,
+          itemSize: 25,
+          overscanCount: 2
+        })
+      ).toEqual([2, 9]);
+    });
+  });
 });

lib/core/useCachedBounds.test.ts

@@ -1,7 +1,43 @@
-import { describe, test } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { EMPTY_OBJECT } from "../../src/constants";
+import { useCachedBounds } from "./useCachedBounds";
 
 describe("useCachedBounds", () => {
-  test("have tests", () => {
-    // TODO Write tests
+  test("should cache the CachedBounds unless props change", () => {
+    const { result, rerender } = renderHook(
+      (props?: Partial<Parameters<typeof useCachedBounds>>[0]) =>
+        useCachedBounds({
+          itemCount: 1,
+          itemProps: EMPTY_OBJECT,
+          itemSize: 10,
+          ...props
+        })
+    );
+
+    const cachedBoundsA = result.current;
+
+    rerender({
+      itemCount: 1,
+      itemProps: EMPTY_OBJECT,
+      itemSize: 10
+    });
+    expect(result.current).toBe(cachedBoundsA);
+
+    rerender({
+      itemCount: 1,
+      itemProps: EMPTY_OBJECT,
+      itemSize: 5
+    });
+    expect(result.current).not.toBe(cachedBoundsA);
+
+    const cachedBoundsB = result.current;
+
+    rerender({
+      itemCount: 1,
+      itemProps: EMPTY_OBJECT,
+      itemSize: 5
+    });
+    expect(result.current).toBe(cachedBoundsB);
   });
 });