@glideappsfinal/glide-data-grid 6.0.9

package/test/data-grid.test.tsx

@@ -0,0 +1,399 @@
+import * as React from "react";
+import { render, fireEvent, screen, cleanup } from "@testing-library/react";
+import DataGrid, { type DataGridProps, type DataGridRef } from "../src/internal/data-grid/data-grid.js";
+import { CompactSelection, GridCellKind } from "../src/internal/data-grid/data-grid-types.js";
+import { getDefaultTheme } from "../src/index.js";
+import { AllCellRenderers } from "../src/cells/index.js";
+import { vi, expect, describe, test, beforeEach, afterEach } from "vitest";
+import ImageWindowLoaderImpl from "../src/common/image-window-loader.js";
+import { mergeAndRealizeTheme } from "../src/common/styles.js";
+import { standardBeforeEach } from "./test-utils.js";
+
+const basicProps: DataGridProps = {
+    cellXOffset: 0,
+    cellYOffset: 0,
+    drawGroupHeader: undefined,
+    headerIcons: undefined,
+    isDraggable: undefined,
+    onCanvasBlur: () => undefined,
+    onCanvasFocused: () => undefined,
+    onCellFocused: () => undefined,
+    onContextMenu: () => undefined,
+    onDragEnd: () => undefined,
+    onDragLeave: () => undefined,
+    onDragOverCell: () => undefined,
+    onDragStart: () => undefined,
+    onDrop: () => undefined,
+    onHeaderIndicatorClick: () => undefined,
+    onItemHovered: () => undefined,
+    onKeyDown: () => undefined,
+    onKeyUp: () => undefined,
+    onMouseDown: () => undefined,
+    onMouseMoveRaw: () => undefined,
+    onMouseUp: () => undefined,
+    smoothScrollX: undefined,
+    smoothScrollY: undefined,
+    allowResize: undefined,
+    canvasRef: undefined,
+    disabledRows: undefined,
+    eventTargetRef: undefined,
+    fillHandle: undefined,
+    fixedShadowX: undefined,
+    fixedShadowY: undefined,
+    getGroupDetails: undefined,
+    getRowThemeOverride: undefined,
+    highlightRegions: undefined,
+    imageWindowLoader: new ImageWindowLoaderImpl(),
+    onHeaderMenuClick: undefined,
+    prelightCells: undefined,
+    translateX: undefined,
+    translateY: undefined,
+    dragAndDropState: undefined,
+    drawFocusRing: true,
+    drawHeader: undefined,
+    drawCell: undefined,
+    isFocused: true,
+    experimental: undefined,
+    columns: [
+        {
+            title: "A",
+            width: 150,
+        },
+        {
+            title: "B",
+            width: 160,
+        },
+        {
+            title: "C",
+            width: 170,
+        },
+        {
+            title: "D",
+            width: 180,
+        },
+        {
+            title: "E",
+            width: 190,
+        },
+    ],
+    isFilling: false,
+    enableGroups: false,
+    theme: mergeAndRealizeTheme(getDefaultTheme()),
+    freezeColumns: 0,
+    selection: {
+        current: undefined,
+        rows: CompactSelection.empty(),
+        columns: CompactSelection.empty(),
+    },
+    firstColAccessible: true,
+    onMouseMove: () => undefined,
+    getCellContent: cell => ({
+        kind: GridCellKind.Text,
+        allowOverlay: false,
+        data: `${cell[0]},${cell[1]}`,
+        displayData: `${cell[0]},${cell[1]}`,
+    }),
+    groupHeaderHeight: 0,
+    headerHeight: 36,
+    accessibilityHeight: 50,
+    height: 1000,
+    width: 1000,
+    isDragging: false,
+    isResizing: false,
+    resizeColumn: undefined,
+    freezeTrailingRows: 0,
+    hasAppendRow: false,
+    rowHeight: 32,
+    rows: 1000,
+    verticalBorder: () => true,
+    getCellRenderer: cell => {
+        if (cell.kind === GridCellKind.Custom) return undefined;
+        return AllCellRenderers.find(x => x.kind === cell.kind) as any;
+    },
+    resizeIndicator: "full",
+};
+
+const dataGridCanvasId = "data-grid-canvas";
+describe("data-grid", () => {
+    beforeEach(() => {
+        standardBeforeEach();
+
+        Element.prototype.getBoundingClientRect = () => ({
+            bottom: 1000,
+            height: 1000,
+            left: 0,
+            right: 1000,
+            top: 0,
+            width: 1000,
+            x: 0,
+            y: 0,
+            toJSON: () => "",
+        });
+        Image.prototype.decode = vi.fn();
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+
+    test("Emits mouse down", () => {
+        const spy = vi.fn();
+        render(<DataGrid {...basicProps} onMouseDown={spy} />);
+
+        fireEvent.pointerDown(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+        });
+
+        fireEvent.pointerUp(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+        });
+
+        fireEvent.click(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+        });
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                location: [1, 1],
+                kind: "cell",
+            })
+        );
+    });
+
+    test("OOB mouse down", () => {
+        const spy = vi.fn();
+        render(<DataGrid {...basicProps} onMouseDown={spy} />);
+
+        fireEvent.pointerDown(screen.getByTestId(dataGridCanvasId), {
+            clientX: 990, // Col B
+            clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+        });
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                kind: "out-of-bounds",
+            })
+        );
+    });
+
+    test("Emits mouse up", () => {
+        const spy = vi.fn();
+        render(<DataGrid {...basicProps} onMouseUp={spy} />);
+
+        fireEvent.pointerDown(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        fireEvent.pointerUp(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        fireEvent.click(screen.getByTestId(dataGridCanvasId), {
+            clientX: 300, // Col B
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                location: [1, 5],
+                kind: "cell",
+                localEventX: 150,
+                localEventY: 16,
+            }),
+            false
+        );
+    });
+
+    test("Does not emit mousedown/up over header menu", () => {
+        const downSpy = vi.fn();
+        const upSpy = vi.fn();
+
+        render(
+            <DataGrid
+                {...basicProps}
+                columns={basicProps.columns.map(c => ({ ...c, hasMenu: true }))}
+                onMouseUp={upSpy}
+                onMouseDown={downSpy}
+            />
+        );
+
+        const el = screen.getByTestId(dataGridCanvasId);
+        fireEvent.pointerDown(el, {
+            clientX: 140,
+            clientY: 18,
+        });
+
+        fireEvent.pointerUp(el, {
+            clientX: 140,
+            clientY: 18,
+        });
+
+        expect(downSpy).not.toBeCalled();
+        expect(upSpy).not.toBeCalled();
+    });
+
+    test("Cell hovered", () => {
+        const spy = vi.fn();
+
+        render(<DataGrid {...basicProps} onItemHovered={spy} />);
+
+        const el = screen.getByTestId(dataGridCanvasId);
+        fireEvent.pointerMove(el, {
+            clientX: 350, // Col C
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        expect(spy).toBeCalledWith(
+            expect.objectContaining({
+                kind: "cell",
+                location: [2, 5],
+            })
+        );
+    });
+
+    test("Cell is not hovered when target is not data grid", () => {
+        const spy = vi.fn();
+
+        render(
+            <>
+                <DataGrid {...basicProps} onItemHovered={spy} />
+                <div
+                    data-testid="outside-element"
+                    style={{
+                        position: "absolute",
+                        width: "100vh",
+                        height: "100vh",
+                    }}
+                />
+            </>
+        );
+
+        const outsideElement = screen.getByTestId("outside-element");
+        fireEvent.pointerMove(outsideElement, {
+            clientX: 350, // Col C
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        expect(spy).not.toHaveBeenCalled();
+    });
+
+    test("Header hovered", () => {
+        const spy = vi.fn();
+
+        render(<DataGrid {...basicProps} onItemHovered={spy} />);
+
+        const el = screen.getByTestId(dataGridCanvasId);
+        fireEvent.pointerMove(el, {
+            clientX: 350, // Col C
+            clientY: 16, // Header
+        });
+
+        expect(spy).toBeCalledWith(
+            expect.objectContaining({
+                kind: "header",
+                location: [2, -1],
+            })
+        );
+    });
+
+    test("Header hovered when scrolled", () => {
+        const spy = vi.fn();
+
+        render(
+            <DataGrid {...basicProps} groupHeaderHeight={32} enableGroups={true} cellYOffset={10} onItemHovered={spy} />
+        );
+
+        const el = screen.getByTestId(dataGridCanvasId);
+        fireEvent.pointerMove(el, {
+            clientX: 350, // Col C
+            clientY: 46, // Header
+        });
+
+        expect(spy).toBeCalledWith(
+            expect.objectContaining({
+                kind: "header",
+                location: [2, -1],
+            })
+        );
+    });
+
+    test("Group header hovered", () => {
+        const spy = vi.fn();
+
+        render(<DataGrid {...basicProps} onItemHovered={spy} enableGroups={true} groupHeaderHeight={28} />);
+
+        const el = screen.getByTestId(dataGridCanvasId);
+        fireEvent.pointerMove(el, {
+            clientX: 350, // Col C
+            clientY: 14, // Header
+        });
+
+        expect(spy).toBeCalledWith(
+            expect.objectContaining({
+                kind: "group-header",
+                location: [2, -2],
+            })
+        );
+    });
+
+    test("Simple damage", () => {
+        const spy = vi.fn(basicProps.getCellContent);
+        const ref = React.createRef<DataGridRef>();
+
+        render(<DataGrid ref={ref} {...basicProps} getCellContent={spy} enableGroups={true} groupHeaderHeight={28} />);
+
+        spy.mockClear();
+        expect(spy).not.toBeCalled();
+        ref.current?.damage([{ cell: [1, 1] }]);
+        expect(spy).toBeCalled();
+    });
+
+    test("Out of bounds damage", () => {
+        const spy = vi.fn(basicProps.getCellContent);
+        const ref = React.createRef<DataGridRef>();
+
+        render(<DataGrid ref={ref} {...basicProps} getCellContent={spy} enableGroups={true} groupHeaderHeight={28} />);
+
+        spy.mockClear();
+        expect(spy).not.toBeCalled();
+        ref.current?.damage([{ cell: [1, 900] }]);
+        expect(spy).not.toBeCalled();
+    });
+
+    test("Freeze column simple check", () => {
+        const spy = vi.fn();
+        render(<DataGrid {...basicProps} freezeColumns={1} cellXOffset={3} onMouseUp={spy} />);
+
+        fireEvent.pointerDown(screen.getByTestId(dataGridCanvasId), {
+            clientX: 50, // Col A
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        fireEvent.pointerUp(screen.getByTestId(dataGridCanvasId), {
+            clientX: 50, // Col A
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        fireEvent.click(screen.getByTestId(dataGridCanvasId), {
+            clientX: 50, // Col A
+            clientY: 36 + 32 * 5 + 16, // Row 5 (0 indexed)
+        });
+
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                location: [0, 5],
+                kind: "cell",
+                localEventX: 50,
+                localEventY: 16,
+            }),
+            false
+        );
+    });
+});

package/test/image-window-loader.test.ts

@@ -0,0 +1,211 @@
+import ImageWindowLoaderImpl from "../src/common/image-window-loader.js";
+import { vi, expect, describe, it, beforeEach } from "vitest";
+import { packColRowToNumber } from "../src/common/render-state-provider.js";
+
+describe("ImageWindowLoaderImpl", () => {
+    let loader: ImageWindowLoaderImpl;
+
+    beforeEach(() => {
+        loader = new ImageWindowLoaderImpl();
+    });
+
+    describe("setWindow()", () => {
+        it("should set the new visible window and freezeCols", () => {
+            const newWindow = {
+                x: 10,
+                y: 10,
+                width: 100,
+                height: 100,
+            };
+            const freezeCols = 5;
+
+            loader.setWindow(newWindow, freezeCols, []);
+
+            // Assuming you modify your class to expose `visibleWindow` and `freezeCols` for testing
+            expect(loader.visibleWindow).toEqual(newWindow);
+            expect(loader.freezeCols).toBe(freezeCols);
+        });
+
+        it("should call clearOutOfWindow() if the window or freezeCols changes", () => {
+            const spyClearOutOfWindow = vi.spyOn(loader, "clearOutOfWindow" as any); // Private method, so using 'as any'
+
+            const window1 = {
+                x: 10,
+                y: 10,
+                width: 100,
+                height: 100,
+            };
+            const window2 = {
+                x: 15,
+                y: 15,
+                width: 100,
+                height: 100,
+            };
+            const freezeCols1 = 5;
+            const freezeCols2 = 10;
+
+            loader.setWindow(window1, freezeCols1, []);
+            expect(spyClearOutOfWindow).toHaveBeenCalledTimes(1);
+
+            loader.setWindow(window2, freezeCols1, []);
+            expect(spyClearOutOfWindow).toHaveBeenCalledTimes(2);
+
+            loader.setWindow(window2, freezeCols2, []);
+            expect(spyClearOutOfWindow).toHaveBeenCalledTimes(3);
+
+            // Cleanup
+            spyClearOutOfWindow.mockRestore();
+        });
+
+        it("should not call clearOutOfWindow() if the window and freezeCols stay the same", () => {
+            const spyClearOutOfWindow = vi.spyOn(loader, "clearOutOfWindow" as any);
+
+            const newWindow = {
+                x: 10,
+                y: 10,
+                width: 100,
+                height: 100,
+            };
+            const freezeCols = 5;
+
+            loader.setWindow(newWindow, freezeCols, []);
+            loader.setWindow(newWindow, freezeCols, []);
+
+            expect(spyClearOutOfWindow).toHaveBeenCalledTimes(1);
+
+            // Cleanup
+            spyClearOutOfWindow.mockRestore();
+        });
+    });
+
+    describe("loadOrGetImage()", () => {
+        // Define image data that might be used across tests
+        const url = "http://example.com/image.png";
+        const col = 1;
+        const row = 1;
+
+        it("should return the image if it is in the cache", () => {
+            // Setup: Mock the cache to contain the image
+            const img = new Image();
+            const key = url;
+            (loader as any).cache[key] = {
+                img,
+                url,
+                cells: [],
+                cancel: vi.fn(),
+            };
+
+            // Act: Retrieve the image
+            const result = loader.loadOrGetImage(url, col, row);
+
+            // Assert: Ensure the returned image is what we expect
+            expect(result).toBe(img);
+        });
+
+        it("should trigger image loading if the image is not in the cache", () => {
+            // Setup: Spy on `loadImage` method and clear the cache
+            const spyLoadImage = vi.spyOn(loader, "loadImage" as any);
+            (loader as any).cache = {};
+
+            // Act: Try to retrieve an image that's not in the cache
+            loader.loadOrGetImage(url, col, row);
+
+            // Assert: Ensure `loadImage` was called to fetch the image
+            expect(spyLoadImage).toHaveBeenCalledWith(url, col, row, url);
+
+            // Cleanup: Restore the spy
+            spyLoadImage.mockRestore();
+        });
+
+        it("should not trigger image loading if the image is in the cache but not yet loaded", () => {
+            // Setup: Mock the cache with a non-loaded image and spy on `loadImage` method
+            const key = url;
+            (loader as any).cache[key] = {
+                img: undefined,
+                url,
+                cells: [],
+                cancel: vi.fn(),
+            };
+            const spyLoadImage = vi.spyOn(loader, "loadImage" as any);
+
+            // Act: Try to retrieve an image that's in the cache but not loaded
+            const result = loader.loadOrGetImage(url, col, row);
+
+            // Assert: Ensure the image isn't returned and `loadImage` wasn't called
+            expect(result).toBeUndefined();
+            expect(spyLoadImage).not.toHaveBeenCalled();
+
+            // Cleanup: Restore the spy
+            spyLoadImage.mockRestore();
+        });
+    });
+
+    describe("loadImage()", () => {
+        // Define image data that might be used across tests
+        const url = "http://example.com/image.png";
+        const col = 1;
+        const row = 1;
+        const key = url;
+
+        it("should add a loading image to the cache", () => {
+            // Act: Load an image
+            (loader as any).loadImage(url, col, row, key);
+
+            // Assert: Ensure the cache was updated with an entry for the loading image
+            expect((loader as any).cache[key]).toBeDefined();
+            expect((loader as any).cache[key].url).toBe(url);
+            expect((loader as any).cache[key].img).toBeUndefined();
+            expect((loader as any).cache[key].cells).toEqual([packColRowToNumber(col, row)]);
+        });
+
+        it("should handle image loading and decoding successfully", async () => {
+            // Setup: Spy on `Image` constructor and `decode` method
+            const img = new Image();
+            img.addEventListener = vi.fn((_kind: string, cb: any) => cb());
+            vi.useFakeTimers();
+
+            const spyConstructor = vi.spyOn(window, "Image").mockImplementation(() => img);
+            img.decode = vi.fn().mockResolvedValue(undefined);
+
+            // Act: Load an image and simulate its successful loading
+            (loader as any).loadImage(url, col, row, key);
+
+            vi.runAllTimers();
+
+            vi.useRealTimers();
+            await new Promise(r => setTimeout(r, 100));
+
+            // Assert: Ensure `decode` was called and the image data is updated in the cache
+            expect(img.decode).toHaveBeenCalled();
+            expect((loader as any).cache[key].img).toBe(img);
+
+            // Cleanup: Restore the spies
+            spyConstructor.mockRestore();
+        });
+
+        it("should handle image loading failure gracefully", async () => {
+            // Setup: Spy on `Image` constructor and `decode` method
+            const img = new Image();
+            img.addEventListener = vi.fn((_kind: string, cb: any) => cb());
+            vi.useFakeTimers();
+
+            const spyConstructor = vi.spyOn(window, "Image").mockImplementation(() => img);
+            img.decode = vi.fn().mockRejectedValue(new Error("Decoding failed"));
+
+            // Act: Load an image and simulate its successful loading but decoding failure
+            (loader as any).loadImage(url, col, row, key);
+
+            vi.runAllTimers();
+
+            vi.useRealTimers();
+            await new Promise(r => setTimeout(r, 100));
+
+            // Assert: Ensure `decode` was called and the image data remains undefined in the cache
+            expect(img.decode).toHaveBeenCalled();
+            expect((loader as any).cache[key].img).toBeUndefined();
+
+            // Cleanup: Restore the spies
+            spyConstructor.mockRestore();
+        });
+    });
+});