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

@@ -361,11 +361,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
+      });
     });
   });
 

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