@glideappsfinal/glide-data-grid 6.0.9

package/test/test-utils.tsx

@@ -0,0 +1,365 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import * as React from "react";
+import { fireEvent, act, cleanup } from "@testing-library/react";
+import {
+    DataEditor,
+    type DataEditorProps,
+    type GridCell,
+    GridCellKind,
+    type GridSelection,
+    type Item,
+} from "../src/index.js";
+import type { SizedGridColumn } from "../src/internal/data-grid/data-grid-types.js";
+import type { DataEditorRef } from "../src/data-editor/data-editor.js";
+import { vi } from "vitest";
+
+const BOOLEAN_DATA_LOOKUP: (boolean | null | undefined)[] = [true, false, undefined, null];
+function getMockBooleanData(row: number): boolean | null | undefined {
+    return BOOLEAN_DATA_LOOKUP[row % BOOLEAN_DATA_LOOKUP.length];
+}
+
+export function sendClick(el: Element | Node | Document | Window, options?: any, runTimers?: boolean): void {
+    fireEvent.pointerDown(el, options);
+    if (runTimers === true)
+        act(() => {
+            vi.runAllTimers();
+        });
+    fireEvent.pointerUp(el, options);
+    if (runTimers === true)
+        act(() => {
+            vi.runAllTimers();
+        });
+    fireEvent.click(el, options);
+}
+
+export function sendTouchClick(el: Element | Node | Document | Window, options?: any): void {
+    const mouseOptions = {
+        clientX: options?.touches?.[0]?.clientX,
+        clientY: options?.touches?.[0]?.clientY,
+        pointerType: "touch",
+        ...options,
+    }
+    fireEvent.pointerDown(el, mouseOptions);
+    fireEvent.pointerUp(el, mouseOptions);
+    fireEvent.click(el, mouseOptions);
+}
+
+export const makeCell = (cell: Item): GridCell => {
+    const [col, row] = cell;
+    switch (col) {
+        case 0: {
+            return {
+                kind: GridCellKind.RowID,
+                allowOverlay: false,
+                data: `Data: ${col}, ${row}`,
+            };
+        }
+        case 3: {
+            return {
+                kind: GridCellKind.Number,
+                allowOverlay: true,
+                data: 10,
+                displayData: `${row}`,
+            };
+        }
+        case 4: {
+            return {
+                kind: GridCellKind.Drilldown,
+                allowOverlay: false,
+                data: [
+                    {
+                        img: "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_1280.jpg",
+                        text: "Foobar",
+                    },
+                ],
+            };
+        }
+        case 5: {
+            return {
+                kind: GridCellKind.Protected,
+                allowOverlay: false,
+            };
+        }
+        case 6: {
+            return {
+                kind: GridCellKind.Bubble,
+                allowOverlay: false,
+                data: ["Foobar"],
+            };
+        }
+        case 7: {
+            return {
+                kind: GridCellKind.Boolean,
+                allowOverlay: false,
+                data: getMockBooleanData(row),
+                readonly: row === 5,
+            };
+        }
+        case 8: {
+            return {
+                kind: GridCellKind.Text,
+                allowOverlay: true,
+                data: `Data: ${col}, ${row}`,
+                displayData: `שלום ${col}, ${row}`,
+            };
+        }
+        case 9: {
+            return {
+                kind: GridCellKind.Markdown,
+                allowOverlay: true,
+                data: `# Header: ${col}, ${row}`,
+            };
+        }
+        case 10: {
+            return {
+                kind: GridCellKind.Uri,
+                allowOverlay: true,
+                data: `https://example.com/${col}/${row}`,
+            };
+        }
+        // No default
+    }
+    if (col > 10) {
+        throw new Error(`Unexpected column: ${col}`);
+    }
+    return {
+        kind: GridCellKind.Text,
+        allowOverlay: true,
+        data: `Data: ${col}, ${row}`,
+        displayData: `${col}, ${row}`,
+        allowWrapping: true,
+    };
+};
+
+export const basicProps: DataEditorProps = {
+    columns: [
+        {
+            title: "A",
+            width: 150,
+            icon: "headerRowID",
+        },
+        {
+            title: "B",
+            width: 160,
+            icon: "headerCode",
+        },
+        {
+            title: "C",
+            width: 170,
+            icon: "headerNumber",
+        },
+        {
+            title: "D",
+            width: 180,
+            icon: "headerString",
+        },
+        {
+            title: "E",
+            width: 40,
+            icon: "headerBoolean",
+        },
+        {
+            title: "F",
+            width: 50,
+            icon: "headerUri",
+        },
+        {
+            title: "G",
+            width: 60,
+            icon: "headerVideoUri",
+        },
+        {
+            title: "H",
+            width: 70,
+            icon: "headerEmoji",
+        },
+        {
+            title: "I",
+            width: 80,
+            icon: "headerImage",
+        },
+        {
+            title: "J",
+            width: 90,
+            icon: "headerPhone",
+        },
+        {
+            title: "K",
+            width: 90,
+            icon: "headerPhone",
+        },
+    ],
+    getCellContent: makeCell,
+    getCellsForSelection: true,
+    groupHeaderHeight: 32,
+    headerHeight: 36,
+    rowHeight: 32,
+    onRowAppended: () => undefined,
+    trailingRowOptions: {
+        hint: "New row",
+        sticky: true,
+        tint: true,
+    },
+    rows: 1000,
+};
+
+export function getCellCenterPositionForDefaultGrid(cell: Item): [number, number] {
+    const [col, row] = cell;
+
+    const xStart = basicProps.columns.slice(0, col).reduce((acc, curr) => acc + (curr as SizedGridColumn).width, 0);
+    const xOffset = (basicProps.columns[col] as SizedGridColumn).width / 2;
+
+    const yStart = (basicProps.headerHeight as number) + row * (basicProps.rowHeight as number);
+    const yOffset = (basicProps.rowHeight as number) / 2;
+
+    return [xStart + xOffset, yStart + yOffset];
+}
+
+export function prep(resetTimers: boolean = true) {
+    const scroller = document.getElementsByClassName("dvn-scroller").item(0);
+    if (scroller !== null) {
+        vi.spyOn(scroller, "clientWidth", "get").mockImplementation(() => 1000);
+        vi.spyOn(scroller, "clientHeight", "get").mockImplementation(() => 1000);
+        vi.spyOn(scroller, "offsetWidth" as any, "get").mockImplementation(() => 1000);
+        vi.spyOn(scroller, "offsetHeight" as any, "get").mockImplementation(() => 1000);
+    }
+
+    act(() => {
+        vi.runAllTimers();
+    });
+    if (resetTimers) {
+        vi.useRealTimers();
+    } else {
+        act(() => {
+            vi.runAllTimers();
+        });
+    }
+
+    return scroller;
+}
+
+export const Context: React.FC<React.PropsWithChildren> = p => {
+    return (
+        <>
+            {p.children}
+            <div id="portal"></div>
+        </>
+    );
+};
+
+// eslint-disable-next-line react/display-name
+export const EventedDataEditor = React.forwardRef<DataEditorRef, DataEditorProps>((p, ref) => {
+    const [sel, setSel] = React.useState<GridSelection | undefined>(p.gridSelection);
+    const [extraRows, setExtraRows] = React.useState(0);
+    const [extraCols, setExtraCols] = React.useState(0);
+
+    const onGridSelectionChange = React.useCallback(
+        (s: GridSelection) => {
+            setSel(s);
+            p.onGridSelectionChange?.(s);
+        },
+        [p]
+    );
+
+    const onRowAppended = React.useCallback(() => {
+        setExtraRows(cv => cv + 1);
+        void p.onRowAppended?.();
+    }, [p]);
+
+    const onColumnAppended = React.useCallback(() => {
+        setExtraCols(cv => cv + 1);
+        void p.onColumnAppended?.();
+    }, [p]);
+
+    const columns = React.useMemo(() => p.columns.concat(Array.from({ length: extraCols }, (_, i) => ({ title: `Z${i}`, width: 50 }))), [p.columns, extraCols]);
+
+    const getCellContent = React.useCallback(
+        (cell: Item): GridCell => {
+            const [c] = cell;
+            if (c >= p.columns.length) {
+                return { kind: GridCellKind.Text, allowOverlay: true, data: "", displayData: "" };
+            }
+            return p.getCellContent(cell);
+        },
+        [p, p.getCellContent]
+    );
+
+    return (
+        <DataEditor
+            {...p}
+            columns={columns}
+            getCellContent={getCellContent}
+            ref={ref}
+            gridSelection={sel}
+            onGridSelectionChange={onGridSelectionChange}
+            rows={p.rows + extraRows}
+            onRowAppended={p.onRowAppended === undefined ? undefined : onRowAppended}
+            onColumnAppended={p.onColumnAppended === undefined ? undefined : onColumnAppended}
+        />
+    );
+});
+
+export function standardAfterEach() {
+    vi.clearAllTimers();
+    cleanup();
+}
+
+export function standardBeforeEach() {
+    // delete (window as any).ResizeObserver;
+    // window.ResizeObserver = vi.fn().mockImplementation(() => ({
+    //     observe: vi.fn(),
+    //     unobserve: vi.fn(),
+    //     disconnect: vi.fn(),
+    // }));
+
+    // JSDOM does not support PointerEvent
+    // https://github.com/jsdom/jsdom/issues/2527
+    (window as any).PointerEvent = MouseEvent;
+
+    Element.prototype.scrollTo = vi.fn() as any;
+    Element.prototype.scrollBy = vi.fn() as any;
+    Object.assign(navigator, {
+        clipboard: {
+            writeText: vi.fn(() => Promise.resolve()),
+            readText: vi.fn(() =>
+                Promise.resolve(`Sunday	Dogs	https://google.com
+Monday	Cats	https://google.com
+Tuesday	Turtles	https://google.com
+Wednesday	Bears	https://google.com
+Thursday	"L  ions"	https://google.com
+Friday	Pigs	https://google.com
+Saturday	"Turkeys and some ""quotes"" and
+a new line char ""more quotes"" plus a tab  ."	https://google.com`)
+            ),
+        },
+    });
+    Element.prototype.getBoundingClientRect = () => ({
+        bottom: 1000,
+        height: 1000,
+        left: 0,
+        right: 1000,
+        top: 0,
+        width: 1000,
+        x: 0,
+        y: 0,
+        toJSON: () => "",
+    });
+    Object.defineProperties(HTMLElement.prototype, {
+        offsetWidth: {
+            get() {
+                return 1000;
+            },
+        },
+    });
+    Image.prototype.decode = vi.fn();
+
+    vi.spyOn(console, "error").mockImplementation((...args: any) => {
+        const [message] = args;
+        if (/Warning: An update to .* inside a test was not wrapped in act\(...\)/.test(message)) {
+            throw new Error("An update was made outside of act() function: " + message);
+        }
+
+        // If you still want to see the error messages in the console, you can uncomment the next line:
+        // console.warn(...args);
+    });
+}

package/test/uri-cell.test.ts

@@ -0,0 +1,124 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { describe, it, expect, vi } from "vitest";
+import { GridCellKind, type UriCell } from "../src/internal/data-grid/data-grid-types.js";
+import { uriCellRenderer } from "../src/cells/uri-cell.js";
+import type { DrawArgs } from "../src/index.js";
+import { getDataEditorTheme, mergeAndRealizeTheme } from "../src/common/styles.js";
+import type { DrawStateTuple } from "../src/cells/cell-types.js";
+
+const baseDrawArgs = {
+    cellFillColor: "red",
+    col: 0,
+    row: 0,
+    drawState: [undefined, () => undefined] as DrawStateTuple,
+    frameTime: 0,
+    highlighted: false,
+    hoverAmount: 0,
+    hyperWrapping: false,
+    imageLoader: {} as any,
+    overrideCursor: () => undefined,
+    requestAnimationFrame: () => undefined,
+    spriteManager: {} as any,
+};
+
+describe("uriCellRenderer", () => {
+    const theme = mergeAndRealizeTheme(getDataEditorTheme());
+    const mockCanvasContext = {
+        save: vi.fn(),
+        restore: vi.fn(),
+        textBaseline: "top",
+        stroke: vi.fn(),
+        measureText: vi.fn(text => ({ width: text.length * 10, actualBoundingBoxAscent: 16 })),
+        fillText: vi.fn(),
+        beginPath: vi.fn(),
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+    } as any;
+
+    it("getAccessibilityString returns correct string", () => {
+        const cell: UriCell = { kind: GridCellKind.Uri, data: "http://example.com", allowOverlay: true };
+        expect(uriCellRenderer.getAccessibilityString(cell)).toBe("http://example.com");
+    });
+
+    it("draw function applies underline on hover", () => {
+        const cell: UriCell = {
+            kind: GridCellKind.Uri,
+            data: "http://example.com",
+            hoverEffect: true,
+            allowOverlay: true,
+        };
+        const drawArgs: DrawArgs<UriCell> = {
+            ...baseDrawArgs,
+            cell,
+            theme,
+            hoverAmount: 1,
+            ctx: mockCanvasContext,
+            rect: { x: 0, y: 0, width: 100, height: 120 },
+            hoverX: 10,
+            hoverY: 60,
+        };
+        uriCellRenderer.draw(drawArgs, cell);
+        expect(mockCanvasContext.measureText).toHaveBeenCalledWith("http://example.com");
+        expect(mockCanvasContext.stroke).toHaveBeenCalled();
+    });
+
+    it("onClick triggers onClickUri callback when clicked in the right area", () => {
+        const onClickUriMock = vi.fn();
+        const cell: UriCell = {
+            kind: GridCellKind.Uri,
+            data: "http://example.com",
+            hoverEffect: true,
+            onClickUri: onClickUriMock,
+            allowOverlay: true,
+        };
+        const drawArgs: DrawArgs<UriCell> = {
+            ...baseDrawArgs,
+            cell,
+            theme,
+            ctx: mockCanvasContext,
+            rect: { x: 0, y: 0, width: 100, height: 120 },
+            hoverX: 10,
+            hoverY: 10,
+        };
+        uriCellRenderer.draw(drawArgs, cell);
+        uriCellRenderer.onClick?.({
+            cell,
+            bounds: { x: 0, y: 0, width: 100, height: 120 },
+            posX: 10,
+            posY: 60,
+            theme,
+            button: 0,
+            buttons: 0,
+            ctrlKey: false,
+            isEdge: false,
+            isTouch: false,
+            location: [0, 0],
+            metaKey: false,
+            preventDefault: () => undefined,
+            scrollEdge: [0, 0],
+            shiftKey: false,
+        });
+        expect(onClickUriMock).toHaveBeenCalled();
+    });
+
+    it("measure returns correct width", () => {
+        const cell: UriCell = { kind: GridCellKind.Uri, data: "http://example.com", allowOverlay: true };
+        const width = uriCellRenderer.measure?.(mockCanvasContext, cell, theme);
+        expect(width).toBe("http://example.com".length * 10 + theme.cellHorizontalPadding * 2);
+    });
+
+    it("onDelete clears cell data", () => {
+        const cell: UriCell = { kind: GridCellKind.Uri, data: "http://example.com", allowOverlay: true };
+        const updatedCell = uriCellRenderer.onDelete?.(cell);
+        expect(updatedCell?.data).toBe("");
+    });
+
+    it("onPaste updates cell data correctly", () => {
+        const cell: UriCell = { kind: GridCellKind.Uri, data: "http://example.com", allowOverlay: true };
+        const pasteData = "http://newexample.com";
+        const updatedCell = uriCellRenderer.onPaste(pasteData, cell, {
+            rawValue: pasteData,
+        });
+        expect(updatedCell?.data).toBe(pasteData);
+    });
+});

package/test/use-animation-queue.test.ts

@@ -0,0 +1,53 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { useAnimationQueue } from "../src/internal/data-grid/use-animation-queue.js";
+import { vi, expect, describe, it, beforeEach, afterEach } from "vitest";
+import { CellSet } from "../src/internal/data-grid/cell-set.js";
+
+// const OG_RAF = window.requestAnimationFrame;
+// const OG_CAF = window.cancelAnimationFrame;
+
+describe("use-cell-sizer", () => {
+    beforeEach(() => {
+        // Mock rAF with setTimeout. Not perfect by any means, but at least it mocks the asynchronicity.
+        vi.useFakeTimers();
+
+        // window.requestAnimationFrame = f => {
+        //     const timeoutID = setTimeout(() => {
+        //         const timestamp = performance.now();
+        //         f(timestamp);
+        //     }, 0);
+        //     return timeoutID as unknown as number;
+        // };
+
+        // window.cancelAnimationFrame = (rafID: number) => {
+        //     clearTimeout(rafID);
+        // };
+    });
+    afterEach(async () => {
+        vi.useRealTimers();
+
+        await cleanup();
+
+        // window.requestAnimationFrame = OG_RAF;
+        // window.cancelAnimationFrame = OG_CAF;
+    });
+
+    it("Draws when an item is enqueued", async () => {
+        const draw = vi.fn();
+        const { result } = renderHook(() => useAnimationQueue(draw));
+
+        result.current([1, 2]);
+        result.current([2, 3]);
+        result.current([3, 4]);
+
+        vi.runAllTimers();
+
+        expect(draw).toHaveBeenCalledWith(
+            new CellSet([
+                [1, 2],
+                [2, 3],
+                [3, 4],
+            ])
+        );
+    });
+});

package/test/use-autoscroll.test.tsx

@@ -0,0 +1,108 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { useAutoscroll } from "../src/data-editor/use-autoscroll.js";
+import { vi, expect, describe, it, afterEach } from "vitest";
+
+describe("use-auto-scroll", () => {
+    // beforeEach(() => {
+    //     vi.spyOn(window, "requestAnimationFrame").mockImplementation(cb => window.setTimeout(cb, 16));
+    // });
+
+    afterEach(async () => {
+        await cleanup();
+    });
+
+    it("No scroll test", async () => {
+        const scrollBy = vi.fn();
+        vi.useFakeTimers();
+        renderHook(() =>
+            useAutoscroll([0, 0], {
+                current: {
+                    scrollBy,
+                },
+            } as any)
+        );
+
+        vi.advanceTimersByTime(100);
+        expect(scrollBy).not.toBeCalled();
+    });
+
+    it("Scroll left", async () => {
+        const scrollBy = vi.fn();
+        vi.useFakeTimers();
+        renderHook(() =>
+            useAutoscroll([-1, 0], {
+                current: {
+                    scrollBy,
+                },
+            } as any)
+        );
+
+        vi.runOnlyPendingTimers(); // the first one primes the pump
+        vi.runOnlyPendingTimers(); // the second one runs it
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+
+        const [xScroll, yScroll] = scrollBy.mock.calls[0];
+        expect(xScroll).toBeLessThan(0);
+        expect(yScroll).toBe(0);
+    });
+
+    it("Scroll right", async () => {
+        const scrollBy = vi.fn();
+        vi.useFakeTimers();
+        renderHook(() =>
+            useAutoscroll([1, 0], {
+                current: {
+                    scrollBy,
+                },
+            } as any)
+        );
+
+        vi.runOnlyPendingTimers(); // the first one primes the pump
+        vi.runOnlyPendingTimers(); // the second one runs it
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+
+        const [xScroll, yScroll] = scrollBy.mock.calls[0];
+        expect(xScroll).toBeGreaterThan(0);
+        expect(yScroll).toBe(0);
+    });
+
+    it("Scroll down", async () => {
+        const scrollBy = vi.fn();
+        vi.useFakeTimers();
+        renderHook(() =>
+            useAutoscroll([0, 1], {
+                current: {
+                    scrollBy,
+                },
+            } as any)
+        );
+
+        vi.runOnlyPendingTimers(); // the first one primes the pump
+        vi.runOnlyPendingTimers(); // the second one runs it
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+
+        const [xScroll, yScroll] = scrollBy.mock.calls[0];
+        expect(xScroll).toBe(0);
+        expect(yScroll).toBeGreaterThan(0);
+    });
+
+    it("Scroll up", async () => {
+        const scrollBy = vi.fn();
+        vi.useFakeTimers();
+        renderHook(() =>
+            useAutoscroll([0, -1], {
+                current: {
+                    scrollBy,
+                },
+            } as any)
+        );
+
+        vi.runOnlyPendingTimers(); // the first one primes the pump
+        vi.runOnlyPendingTimers(); // the second one runs it
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+
+        const [xScroll, yScroll] = scrollBy.mock.calls[0];
+        expect(xScroll).toBe(0);
+        expect(yScroll).toBeLessThan(0);
+    });
+});