@glideappsfinal/glide-data-grid 6.0.9

package/test/use-column-sizer.test.tsx

@@ -0,0 +1,414 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { type GridCell, GridCellKind, type GridColumn, type Rectangle } from "../src/index.js";
+import { getDataEditorTheme, mergeAndRealizeTheme } from "../src/common/styles.js";
+import type { DataGridSearchProps } from "../src/internal/data-grid-search/data-grid-search.js";
+import { AllCellRenderers } from "../src/cells/index.js";
+import type { GetCellRendererCallback } from "../src/cells/cell-types.js";
+import type { CellArray, CustomCell } from "../src/internal/data-grid/data-grid-types.js";
+import { useColumnSizer } from "../src/data-editor/use-column-sizer.js";
+import { vi, expect, describe, it, beforeEach, afterEach } from "vitest";
+
+const COLUMNS: GridColumn[] = [
+    {
+        title: "A",
+        id: "ColumnA",
+    },
+    {
+        title: "B",
+        width: 160,
+        icon: "headerCode",
+    },
+];
+
+const A_COPY_OF_COLUMNS_THAT_ALSO_HAS_A_NEW_COLUMN_TITLED_C_THAT_WE_WILL_MEASURE_SOON_ENOUGH: GridColumn[] = [
+    ...COLUMNS,
+    {
+        title: "C",
+        id: "ColumnC",
+    },
+];
+
+const A_BUNCH_OF_COLUMNS_THAT_ALREADY_HAVE_SIZES_WE_DONT_WANT_TO_MEASURE_THESE: GridColumn[] = [
+    {
+        title: "A",
+        width: 120,
+    },
+    {
+        title: "B",
+        width: 160,
+        icon: "headerCode",
+    },
+];
+
+type DataBuilder = (x: number, y: number) => string;
+
+function buildCellsForSelectionGetter(dataBuilder: DataBuilder): DataGridSearchProps["getCellsForSelection"] {
+    return (selection: Rectangle): CellArray => {
+        const result: GridCell[][] = [];
+
+        for (let y = selection.y; y < selection.y + selection.height; y++) {
+            const row: GridCell[] = [];
+            for (let x = selection.x; x < selection.x + selection.width; x++) {
+                const data = dataBuilder(x, y);
+                row.push({
+                    allowOverlay: false,
+                    kind: GridCellKind.Text,
+                    displayData: data,
+                    data,
+                });
+            }
+            result.push(row);
+        }
+
+        return result;
+    };
+}
+
+const getShortCellsForSelection = vi.fn(buildCellsForSelectionGetter((x, y) => `column ${x} row ${y}`) as any);
+const getLongCellsForSelection = vi.fn(
+    buildCellsForSelectionGetter((x, y) => `This cell is in column number ${x} and row number ${y}`) as any
+);
+
+const theme = getDataEditorTheme();
+
+const abortController = new AbortController();
+
+const SINGLE_COLUMN = [
+    {
+        title: "A",
+        id: "ColumnA",
+    },
+];
+
+const getCellRenderer: GetCellRendererCallback = cell => {
+    if (cell.kind === GridCellKind.Custom) return undefined;
+    return AllCellRenderers.find(x => x.kind === cell.kind) as any;
+};
+
+describe("use-column-sizer", () => {
+    beforeEach(() => {
+        getShortCellsForSelection.mockClear();
+        getLongCellsForSelection.mockClear();
+    });
+
+    afterEach(async () => {
+        await cleanup();
+    });
+
+    it("Measures a simple cell", async () => {
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                COLUMNS,
+                1000,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        const columnA = result.current.sizedColumns.find(col => col.title === "A");
+        const columnB = result.current.sizedColumns.find(col => col.title === "B");
+
+        expect(columnA).toBeDefined();
+        expect(columnB).toBeDefined();
+
+        // Keep in sync with the `displayData` up there.
+        expect(columnA?.width).toBe(32);
+        expect(columnB?.width).toBe(160);
+    });
+
+    //a test to see that it can measure a custom cell
+    it("Measures a custom cell", async () => {
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                SINGLE_COLUMN,
+                1000,
+                (selection: Rectangle): CellArray => {
+                    const r: GridCell[][] = [];
+
+                    for (let y = selection.y; y < selection.y + selection.height; y++) {
+                        const row: GridCell[] = [];
+                        for (let x = selection.x; x < selection.x + selection.width; x++) {
+                            const data = `${x} ${y}`;
+                            row.push({
+                                allowOverlay: false,
+                                kind: GridCellKind.Custom,
+                                data,
+                                copyData: data,
+                            });
+                        }
+                        r.push(row);
+                    }
+
+                    return r;
+                },
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                () => {
+                    return {
+                        draw: () => true,
+                        kind: GridCellKind.Custom,
+                        measure: () => 212,
+                        isMatch: (_cell: CustomCell): _cell is CustomCell => true,
+                    } as any;
+                },
+                abortController
+            )
+        );
+
+        expect(result.current.sizedColumns[0].width).toBe(212);
+    });
+
+    it("Measures column width based on title if longer than data", async () => {
+        const columns: GridColumn[] = [
+            {
+                title: "Some very very long title that exceeds displayData width",
+                id: "ColumnA",
+            },
+            {
+                title: "Short title",
+                id: "ColumnB",
+            },
+        ];
+
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                columns,
+                500,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme, {cellHorizontalPadding: 12}),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        const columnA = result.current.sizedColumns.find(col => col.title === "Some very very long title that exceeds displayData width");
+        const columnB = result.current.sizedColumns.find(col => col.title === "Short title");
+
+        expect(columnA).toBeDefined();
+        expect(columnB).toBeDefined();
+
+        // Width of column title plus twice the cellHorizontalPadding
+        expect(columnA?.width).toBe(80);
+        // Maximum width of cell data
+        expect(columnB?.width).toBe(40);
+    });
+
+    it("Measures the last row", async () => {
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        renderHook(() =>
+            useColumnSizer(
+                COLUMNS,
+                1000,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        expect(getShortCellsForSelection).toBeCalledTimes(2);
+        expect(getShortCellsForSelection).toHaveBeenNthCalledWith(
+            1,
+            {
+                x: 0,
+                y: 0,
+                width: 2,
+                height: 9,
+            },
+            expect.anything()
+        );
+        expect(getShortCellsForSelection).toHaveBeenLastCalledWith(
+            {
+                x: 0,
+                y: 999,
+                width: 2,
+                height: 1,
+            },
+            expect.anything()
+        );
+    });
+
+    it("Measures new columns when they arrive, doesn't re-measure existing ones", async () => {
+        const { result, rerender } = renderHook(
+            ({ getCellsForSelection, columns }) =>
+                useColumnSizer(
+                    columns,
+                    1000,
+                    getCellsForSelection,
+                    400,
+                    20,
+                    500,
+                    mergeAndRealizeTheme(theme),
+                    getCellRenderer,
+                    abortController
+                ),
+            {
+                initialProps: {
+                    getCellsForSelection: getShortCellsForSelection,
+                    columns: COLUMNS,
+                },
+            }
+        );
+
+        const shortColumnA = result.current.sizedColumns.find(col => col.title === "A");
+        const shortColumnB = result.current.sizedColumns.find(col => col.title === "B");
+        const shortColumnC = result.current.sizedColumns.find(col => col.title === "C");
+
+        expect(shortColumnA).toBeDefined();
+        expect(shortColumnB).toBeDefined();
+        expect(shortColumnC).not.toBeDefined();
+
+        // Keep in sync with getShortCellsForSelection up there.
+        expect(shortColumnA?.width).toBe(32);
+        expect(shortColumnB?.width).toBe(160);
+
+        // Re render with longer text and a new column with title C
+        rerender({
+            getCellsForSelection: getLongCellsForSelection,
+            columns: A_COPY_OF_COLUMNS_THAT_ALSO_HAS_A_NEW_COLUMN_TITLED_C_THAT_WE_WILL_MEASURE_SOON_ENOUGH, // I told you!
+        });
+
+        const longColumnA = result.current.sizedColumns.find(col => col.title === "A");
+        const longColumnB = result.current.sizedColumns.find(col => col.title === "B");
+        const longColumnC = result.current.sizedColumns.find(col => col.title === "C");
+
+        expect(longColumnA).toBeDefined();
+        expect(longColumnB).toBeDefined();
+        expect(longColumnC).toBeDefined();
+
+        // Keep in sync with getLongCellsForSelection up there.
+        expect(longColumnA?.width).toBe(32);
+        expect(longColumnB?.width).toBe(160);
+        expect(longColumnC?.width).toBe(66);
+    });
+
+    it("Returns the default sizes if getCellsForSelection is not provided", async () => {
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                COLUMNS,
+                1000,
+                undefined,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        const columnA = result.current.sizedColumns.find(col => col.title === "A");
+        const columnB = result.current.sizedColumns.find(col => col.title === "B");
+
+        expect(columnA).toBeDefined();
+        expect(columnB).toBeDefined();
+
+        // The default is 150, keep in sync with `defaultSize` in use-cell-sizer.ts
+        expect(columnA?.width).toBe(150);
+        expect(columnB?.width).toBe(160);
+    });
+
+    it("Does not measure anything if every column is sized", async () => {
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                A_BUNCH_OF_COLUMNS_THAT_ALREADY_HAVE_SIZES_WE_DONT_WANT_TO_MEASURE_THESE,
+                1000,
+                undefined,
+                400,
+                50,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        expect(result.current.sizedColumns).toBe(
+            A_BUNCH_OF_COLUMNS_THAT_ALREADY_HAVE_SIZES_WE_DONT_WANT_TO_MEASURE_THESE
+        );
+    });
+
+    it("Removes the canvas from the DOM when unmounted", async () => {
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        const { unmount } = renderHook(() =>
+            useColumnSizer(
+                COLUMNS,
+                1000,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        expect(document.querySelector("canvas")).toBeDefined();
+
+        unmount();
+
+        expect(document.querySelector("canvas")).toBeNull();
+    });
+
+    it("Distributes extra width among columns if total column width is less than client width", async () => {
+        // Setup columns with a known total width smaller than the clientWidth
+        const SMALL_COLUMNS: GridColumn[] = [
+            {
+                title: "A",
+                id: "ColumnA",
+                width: 100,
+            },
+            {
+                title: "B",
+                id: "ColumnB",
+                width: 150,
+            },
+            {
+                title: "C",
+                id: "ColumnC",
+                grow: 1,
+            },
+        ];
+
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                SMALL_COLUMNS,
+                500,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        const columnA = result.current.sizedColumns.find(col => col.title === "A");
+        const columnB = result.current.sizedColumns.find(col => col.title === "B");
+        const columnC = result.current.sizedColumns.find(col => col.title === "C");
+
+        expect(columnA).toBeDefined();
+        expect(columnB).toBeDefined();
+        expect(columnC).toBeDefined();
+
+        // The original widths
+        expect(columnA?.width).toBe(100);
+        expect(columnB?.width).toBe(150);
+        expect(columnC?.width).toBe(150);
+    });
+});

package/test/use-deep-memo.test.ts

@@ -0,0 +1,41 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { useDeepMemo } from "../src/common/utils.js";
+import { expect, describe, it, afterEach } from "vitest";
+
+describe("useDeepMemo", () => {
+    afterEach(cleanup);
+
+    it("returns the initial value", () => {
+        const initialValue = { a: 1 };
+        const { result } = renderHook(() => useDeepMemo(initialValue));
+        expect(result.current).toEqual(initialValue);
+    });
+
+    it("updates the value on deep change", () => {
+        const initialValue = { a: 1 };
+        const changedValue = { a: 2 };
+        const { result, rerender } = renderHook(({ value }) => useDeepMemo(value), {
+            initialProps: { value: initialValue },
+        });
+
+        expect(result.current).toEqual(initialValue);
+
+        // Change the value deeply
+        rerender({ value: changedValue });
+        expect(result.current).toEqual(changedValue);
+    });
+
+    it("does not update the value on shallow/no change", () => {
+        const initialValue = { a: 1 };
+        const sameValue = { a: 1 };
+        const { result, rerender } = renderHook(({ value }) => useDeepMemo(value), {
+            initialProps: { value: initialValue },
+        });
+
+        expect(result.current).toEqual(initialValue);
+
+        // Re-render with the same value (shallow change)
+        rerender({ value: sameValue });
+        expect(result.current).toEqual(initialValue);
+    });
+});

package/test/use-kinetic-scroll.test.ts

@@ -0,0 +1,57 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import useKineticScroll from "../src/internal/scrolling-data-grid/use-kinetic-scroll.js";
+import { vi, expect, describe, it, afterEach, beforeEach } from "vitest";
+import { fireEvent } from "@testing-library/react";
+
+describe("useKineticScroll", () => {
+    let targetScroller: { current: HTMLDivElement };
+    let callback: () => void;
+
+    beforeEach(() => {
+        targetScroller = { current: document.createElement("div") };
+        callback = vi.fn();
+
+        vi.spyOn(targetScroller.current, "addEventListener");
+        vi.spyOn(targetScroller.current, "removeEventListener");
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+        vi.runOnlyPendingTimers();
+        vi.useRealTimers();
+    });
+
+    it("registers and unregisters event listeners based on isEnabled", () => {
+        const { rerender } = renderHook(({ isEnabled }) => useKineticScroll(isEnabled, callback, targetScroller), {
+            initialProps: { isEnabled: false },
+        });
+
+        expect(targetScroller.current.addEventListener).not.toHaveBeenCalled();
+        expect(targetScroller.current.removeEventListener).not.toHaveBeenCalled();
+
+        rerender({ isEnabled: true });
+
+        expect(targetScroller.current.addEventListener).toHaveBeenCalledTimes(2);
+        expect(targetScroller.current.removeEventListener).not.toHaveBeenCalled();
+
+        rerender({ isEnabled: false });
+
+        expect(targetScroller.current.removeEventListener).toHaveBeenCalledTimes(2);
+    });
+
+    it("handles scroll events and triggers callback", () => {
+        renderHook(() => useKineticScroll(true, callback, targetScroller));
+
+        act(() => {
+            targetScroller.current.dispatchEvent(new Event("touchstart"));
+            vi.advanceTimersByTime(1000);
+            fireEvent.touchEnd(targetScroller.current, {
+                touches: [],
+            });
+            vi.advanceTimersByTime(1000 / 120);
+        });
+
+        expect(callback).toHaveBeenCalled();
+    });
+});

package/test/use-rem-adjuster.test.ts

@@ -0,0 +1,69 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { useRemAdjuster } from "../src/data-editor/use-rem-adjuster.js";
+import { expect, describe, it, afterEach } from "vitest";
+
+describe("useDataEditorDimensions", () => {
+    afterEach(async () => {
+        await cleanup();
+    });
+
+    it("should return default dimensions when no props are passed", () => {
+        const { result } = renderHook(() =>
+            useRemAdjuster({
+                remSize: 16,
+                groupHeaderHeight: 30,
+                headerHeight: 30,
+                rowHeight: 30,
+                scaleToRem: false,
+            })
+        );
+        expect(result.current).toEqual({
+            rowHeight: 30,
+            headerHeight: 30,
+            groupHeaderHeight: 30,
+            theme: undefined,
+            overscrollX: undefined,
+            overscrollY: undefined,
+        });
+    });
+
+    it("should scale dimensions to rem units when scaleToRem is true", () => {
+        const { result } = renderHook(() =>
+            useRemAdjuster({
+                remSize: 20,
+                groupHeaderHeight: 30,
+                headerHeight: 30,
+                rowHeight: 30,
+                scaleToRem: true,
+            })
+        );
+        expect(result.current).toEqual({
+            rowHeight: 37.5,
+            headerHeight: 38,
+            groupHeaderHeight: 38,
+            theme: {
+                headerIconSize: 22.5,
+                cellHorizontalPadding: 10,
+                cellVerticalPadding: 3.75,
+            },
+            overscrollX: 0,
+            overscrollY: 0,
+        });
+    });
+
+    it("should preserve the sticky property of the columns", () => {
+        const { result } = renderHook(() =>
+            useRemAdjuster({
+                scaleToRem: true,
+                remSize: 20,
+                theme: {
+                    bgCell: "red",
+                },
+                groupHeaderHeight: 30,
+                headerHeight: 30,
+                rowHeight: 30,
+            })
+        );
+        expect(result.current.theme?.bgCell).toBe("red");
+    });
+});

package/test/utils.test.ts

@@ -0,0 +1,127 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { act } from "react-dom/test-utils";
+import { useStateWithReactiveInput } from "../src/common/utils.js";
+import { expect, describe, test, afterEach } from "vitest";
+
+describe("useStateWithReactiveInput", () => {
+    afterEach(async () => {
+        await cleanup();
+    });
+
+    test("initial state", () => {
+        const { result } = renderHook(() => useStateWithReactiveInput(20));
+        expect(result.current[0]).toBe(20);
+    });
+
+    test("set state", () => {
+        const { result } = renderHook(() => useStateWithReactiveInput(20));
+
+        act(() => {
+            result.current[1](30);
+        });
+
+        expect(result.current[0]).toBe(30);
+    });
+
+    test("set state then render with new initial", () => {
+        const { result, rerender } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        act(() => {
+            result.current[1](30);
+        });
+
+        rerender({ initialValue: 50 });
+
+        expect(result.current[0]).toBe(50);
+    });
+
+    test("set state then render with new initial then set state", () => {
+        const { result, rerender } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        act(() => {
+            result.current[1](30);
+        });
+
+        rerender({ initialValue: 50 });
+
+        act(() => {
+            result.current[1](30);
+        });
+
+        expect(result.current[0]).toBe(30);
+    });
+
+    test("set state then render with new initial then set state should get re-render value", () => {
+        const { result, rerender } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        act(() => {
+            result.current[1](30);
+        });
+
+        rerender({ initialValue: 50 });
+
+        act(() => {
+            result.current[1](pv => {
+                expect(pv).toBe(50);
+                return 30;
+            });
+        });
+
+        expect(result.current[0]).toBe(30);
+    });
+
+    test("set state with identity does not re-render", () => {
+        const { result } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        expect(result.all.length).toBe(1);
+
+        act(() => {
+            result.current[1](x => x);
+        });
+
+        expect(result.all.length).toBe(1);
+    });
+
+    test("set state with increment re-render", () => {
+        const { result } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        expect(result.all.length).toBe(1);
+
+        act(() => {
+            result.current[1](x => x + 1);
+        });
+
+        expect(result.all.length).toBe(2);
+    });
+
+    test("set state with identity does not re-render after state change", () => {
+        const { result, rerender } = renderHook(({ initialValue }) => useStateWithReactiveInput(initialValue), {
+            initialProps: { initialValue: 20 },
+        });
+
+        expect(result.all.length).toBe(1);
+
+        rerender({ initialValue: 50 });
+
+        expect(result.current[0]).toBe(50);
+
+        expect(result.all.length).toBe(2);
+
+        act(() => {
+            result.current[1](x => x);
+        });
+
+        expect(result.current[0]).toBe(50);
+        expect(result.all.length).toBe(2);
+    });
+});