@glideappsfinal/glide-data-grid 6.0.9

package/test/cells.test.tsx

@@ -0,0 +1,122 @@
+import { cleanup, render } from "@testing-library/react";
+import * as React from "react";
+import noop from "lodash/noop.js";
+import type { Rectangle, ImageCell, ImageEditorType } from "../src/index.js";
+import { GridCellKind, getDefaultTheme, isObjectEditorCallbackResult } from "../src/index.js";
+import { assert } from "../src/common/support.js";
+import { imageCellRenderer } from "../src/cells/image-cell.js";
+import { expect, describe, it, afterEach } from "vitest";
+import { mergeAndRealizeTheme } from "../src/common/styles.js";
+
+function getMockEditorTarget(): Rectangle {
+    return {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 32,
+    };
+}
+
+function get2dContext(): CanvasRenderingContext2D {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    if (ctx === null) {
+        throw new Error("Cannot get a 2d context");
+    }
+
+    return ctx;
+}
+
+const getImgCell = (): ImageCell => {
+    return {
+        kind: GridCellKind.Image,
+        data: ["img1.jpg", "img2.jpg"],
+        readonly: false,
+        allowOverlay: true,
+    };
+};
+
+// TODO: We can test the editor _much_ more.
+// Let's do that.
+describe("Image cell", () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it("Renders the right accessibilty string", async () => {
+        const cell = getImgCell();
+        const accessibilityString = imageCellRenderer.getAccessibilityString(cell);
+        expect(accessibilityString).toBe("img1.jpg, img2.jpg");
+    });
+
+    it("Measures a reasonable size", async () => {
+        const cell = getImgCell();
+        const ctx = get2dContext();
+        const autoSize = imageCellRenderer.measure?.(ctx, cell, mergeAndRealizeTheme(getDefaultTheme()));
+        expect(autoSize).toBe(100);
+    });
+
+    it("Renders its editor (smoke test)", async () => {
+        const cell = getImgCell();
+        const Editor = imageCellRenderer.provideEditor?.({
+            ...cell,
+            location: [0, 0],
+        });        
+        const target = getMockEditorTarget();
+
+        assert(!isObjectEditorCallbackResult(Editor));
+
+        assert(Editor !== undefined);
+        const result = render(
+            <Editor
+                onChange={noop}
+                theme={getDefaultTheme()}
+                onFinishedEditing={noop}
+                isHighlighted={false}
+                value={cell}
+                target={target}
+                forceEditMode={false}
+            />
+        );
+
+        // Check if the element is actually there
+        await result.findByTestId("GDG-default-image-overlay-editor");
+    });
+
+    it("Renders a custom editor (smoke test)", async () => {
+        const cell = getImgCell();
+        const Editor = imageCellRenderer.provideEditor?.({
+            ...cell,
+            location: [0, 0],
+        });
+        assert(Editor !== undefined);
+        const target = getMockEditorTarget();
+
+        assert(!isObjectEditorCallbackResult(Editor));
+
+        const CustomEditor: ImageEditorType = () => {
+            return (
+                <div data-testid="GDG-custom-image-overlay-editor">
+                    <p>I am an editor, trust me</p>
+                </div>
+            );
+        };
+
+        const result = render(
+            <Editor
+                imageEditorOverride={CustomEditor}
+                theme={getDefaultTheme()}
+                onChange={noop}
+                onFinishedEditing={noop}
+                isHighlighted={false}
+                value={cell}
+                target={target}
+                forceEditMode={false}
+            />
+        );
+
+        // Check if the element is actually there
+        await result.findByTestId("GDG-custom-image-overlay-editor");
+    });
+});

package/test/click-outside-container.test.tsx

@@ -0,0 +1,62 @@
+import { render, cleanup } from "@testing-library/react";
+import * as React from "react";
+import { userEvent } from "@testing-library/user-event";
+import ClickOutsideContainer from "../src/internal/click-outside-container/click-outside-container.js";
+import { vi, expect, describe, it, afterEach } from "vitest";
+
+// skip this for now because github actions is failing
+describe("click-outside-container", () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it("Triggers onClose when clicking outside", async () => {
+        const onClickOutside = vi.fn();
+
+        const result = render(
+            <main>
+                <div>
+                    <p>I am outside</p>
+                </div>
+
+                <ClickOutsideContainer onClickOutside={onClickOutside}>
+                    <p>I am inside</p>
+                </ClickOutsideContainer>
+            </main>
+        );
+
+        const insideElement = await result.findByText("I am inside");
+        const outsideElement = await result.findByText("I am outside");
+
+        expect(onClickOutside).not.toHaveBeenCalled();
+        await userEvent.click(insideElement);
+        expect(onClickOutside).not.toHaveBeenCalled();
+        await userEvent.click(outsideElement);
+        expect(onClickOutside).toHaveBeenCalledTimes(1);
+    });
+
+    it(`Does not trigger onClose when clicking outside but 'isOutsideClick' returns false`, async () => {
+        const onClickOutside = vi.fn();
+        const isOutsideClick = vi.fn();
+
+        const result = render(
+            <main>
+                <div>
+                    <p>I am outside</p>
+                </div>
+                <ClickOutsideContainer onClickOutside={onClickOutside} isOutsideClick={isOutsideClick} />
+            </main>
+        );
+
+        const outsideElement = await result.findByText("I am outside");
+
+        isOutsideClick.mockReturnValueOnce(true);
+
+        expect(onClickOutside).not.toHaveBeenCalled();
+        await userEvent.click(outsideElement);
+        expect(onClickOutside).toHaveBeenCalledTimes(1);
+        isOutsideClick.mockReturnValueOnce(false);
+        await userEvent.click(outsideElement);
+        expect(onClickOutside).toHaveBeenCalledTimes(1);
+    });
+});

package/test/color-parser.test.ts

@@ -0,0 +1,68 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { describe, expect, test } from "vitest";
+import {
+    blend,
+    getLuminance,
+    interpolateColors,
+    parseToRgba,
+    withAlpha,
+} from "../src/internal/data-grid/color-parser.js";
+
+describe("interpolateColors", () => {
+    test("Smoke test", () => {
+        expect(interpolateColors("rgba(0, 0, 0, 1)", "rgba(255, 255, 255, 1)", 0.5)).toEqual("rgba(127, 127, 127, 1)");
+    });
+
+    test("Fully transparent inputs do not produce NaN (alpha 0)", () => {
+        expect(interpolateColors("rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", 0.5)).toEqual("rgba(0, 0, 0, 0)");
+    });
+
+    test("Pre-multiplied alpha behavior with one side transparent", () => {
+        // Left transparent, right opaque white
+        expect(interpolateColors("rgba(0, 0, 0, 0)", "rgba(255, 255, 255, 1)", 0.5)).toEqual(
+            "rgba(255, 255, 255, 0.5)"
+        );
+        // Right transparent, left opaque white (symmetry check)
+        expect(interpolateColors("rgba(255, 255, 255, 1)", "rgba(0, 0, 0, 0)", 0.5)).toEqual(
+            "rgba(255, 255, 255, 0.5)"
+        );
+    });
+
+    test("Clamp outside range: val <= 0 returns left, val >= 1 returns right", () => {
+        expect(interpolateColors("rgba(10, 20, 30, 1)", "rgba(200, 210, 220, 1)", -0.25)).toEqual(
+            "rgba(10, 20, 30, 1)"
+        );
+        expect(interpolateColors("rgba(10, 20, 30, 1)", "rgba(200, 210, 220, 1)", 1.25)).toEqual(
+            "rgba(200, 210, 220, 1)"
+        );
+    });
+});
+
+describe("parseToRgba", () => {
+    test("Smoke test", () => {
+        expect(parseToRgba("rgba(255, 255, 255, 1)")).toEqual([255, 255, 255, 1]);
+    });
+});
+
+describe("withAlpha", () => {
+    test("Smoke test", () => {
+        expect(withAlpha("rgba(255, 255, 255, 1)", 0.3)).toEqual("rgba(255, 255, 255, 0.3)");
+    });
+});
+
+describe("blend", () => {
+    test("Smoke test", () => {
+        expect(blend("rgba(255, 255, 255, 0.2)", "rgba(123, 123, 123, 1)")).toEqual("rgba(149.4, 149.4, 149.4, 1)");
+    });
+});
+
+describe("getLuminance", () => {
+    test("Smoke test", () => {
+        expect(getLuminance("rgba(255, 255, 255, 1)")).toEqual(1);
+    });
+
+    test("Transparent has zero luminance", () => {
+        expect(getLuminance("rgba(0, 0, 0, 0)")).toEqual(0);
+        expect(getLuminance("transparent")).toEqual(0);
+    });
+});

package/test/common.test.ts

@@ -0,0 +1,74 @@
+import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { useResizeDetector } from "../src/common/resize-detector.js";
+import { maybe, deepEqual } from "../src/common/support.js";
+import { makeAccessibilityStringForArray } from "../src/common/utils.js";
+import { expect, describe, test, it, afterEach } from "vitest";
+
+describe("maybe", () => {
+    test("Returns when not crashing", () => {
+        const result = maybe(() => "success", "fail");
+
+        expect(result).toBe("success");
+    });
+
+    test("Returns default value on error", () => {
+        const result = maybe(() => {
+            throw new Error("Fail");
+        }, "fail");
+
+        expect(result).toBe("fail");
+    });
+});
+
+describe("deepEqual", () => {
+    test("Deep equal smoke tests", () => {
+        expect(deepEqual([1, 2, 3], [1, 2, 3])).toBe(true);
+        expect(deepEqual([1, 2, 3], [1, 23])).toBe(false);
+        expect(deepEqual({ a: "b", c: "d" }, { a: "b", c: "d" })).toBe(true);
+        expect(deepEqual({ a: "b", c: "d" }, [1, 2, 3])).toBe(false);
+        expect(deepEqual({ a: "b", c: { d: "e" } }, { a: "b", c: { d: "e" } })).toBe(true);
+    });
+});
+
+describe("resizeDetector", () => {
+    afterEach(async () => {
+        await cleanup();
+    });
+
+    test("Smoke test", () => {
+        const { result } = renderHook(() => useResizeDetector());
+        expect(result.current.width === undefined && result.current.height === undefined);
+    });
+});
+
+describe("makeAccessibilityStringForArray", () => {
+    it("should return an empty string for an empty array", () => {
+        expect(makeAccessibilityStringForArray([])).toBe("");
+    });
+
+    it("should join array elements with a comma and a space", () => {
+        const input = ["a", "b", "c"];
+        const output = "a, b, c";
+        expect(makeAccessibilityStringForArray(input)).toBe(output);
+    });
+
+    it("should stop joining when total character count exceeds 10,000", () => {
+        const singleStr = "a".repeat(5000); // Each string has 5000 'a' characters
+        const input = [singleStr, singleStr, "b"]; // Two strings of 5000 'a' and one 'b'
+        const output = singleStr + ", " + singleStr; // Only two strings of 5000 'a' should be joined
+        expect(makeAccessibilityStringForArray(input)).toBe(output);
+    });
+
+    it("should handle large arrays without exceeding the 10,000 character limit", () => {
+        const input = Array.from({ length: 10_000 }).fill("a") as string[]; // 10,000 'a' strings
+        const output = Array.from({ length: 10_000 }).fill("a").join(", "); // Should join all since it doesn't exceed the limit
+        expect(makeAccessibilityStringForArray(input)).toBe(output);
+    });
+
+    it("should return a string without trailing comma if limit is hit", () => {
+        const singleStr = "a".repeat(4999); // Each string has 4999 'a' characters
+        const input = [singleStr, singleStr, "b", "c", "d"]; // Two strings of 4999 'a' and one 'b'
+        const output = singleStr + ", " + singleStr + ", b, c"; // Only two strings of 4999 'a' should be joined without the 'b'
+        expect(makeAccessibilityStringForArray(input)).toBe(output);
+    });
+});

package/test/compact-selection.test.ts

@@ -0,0 +1,221 @@
+import { CompactSelection, type CompactSelectionRanges } from "../src/internal/data-grid/data-grid-types.js";
+import { expect, describe, test } from "vitest";
+
+describe("CompactSelection", () => {
+    test("Smoke test compact selection", () => {
+        const sel = CompactSelection.fromSingleSelection([3, 5]);
+
+        expect(sel.length).toBe(2);
+
+        expect(sel.first()).toBe(3);
+
+        expect(sel.last()).toBe(4);
+
+        expect(sel.offset(2).first()).toBe(5);
+
+        expect(sel.hasAll([1, 4])).toBe(false);
+        expect(sel.hasAll([3, 4])).toBe(true);
+
+        expect(sel.remove(4).length).toBe(1);
+
+        expect([...sel]).toEqual([3, 4]);
+        expect([...sel.add([4, 9]).remove(5)]).toEqual([3, 4, 6, 7, 8]);
+
+        expect(CompactSelection.empty().first()).toBeUndefined();
+        expect(CompactSelection.empty().last()).toBeUndefined();
+        expect(CompactSelection.empty().add(5).length).toBe(1);
+    });
+
+    test("Compact selection equals", () => {
+        const sel = CompactSelection.fromSingleSelection([3, 5]);
+        const other = CompactSelection.fromSingleSelection([3, 5]);
+
+        expect(sel.equals(other)).toBe(true);
+        expect(sel.equals(sel)).toBe(true);
+        expect(sel.equals(CompactSelection.fromSingleSelection([3, 6]))).toBe(false);
+        expect(sel.equals(CompactSelection.fromSingleSelection([4, 6]))).toBe(false);
+
+        expect(sel.some(x => x > 3)).toBe(true);
+    });
+
+    test("Compact selection toArray", () => {
+        const sel = CompactSelection.fromSingleSelection([3, 5]);
+        expect(sel.toArray()).toEqual([3, 4]);
+    });
+
+    test("Smoke test compact selection remove", () => {
+        const sel = CompactSelection.fromSingleSelection([3, 8]);
+
+        expect([...sel]).toEqual([3, 4, 5, 6, 7]);
+
+        // Remove entire selection
+
+        expect([...sel.remove([3, 8])]).toEqual([]);
+        expect(sel.remove([3, 8]).length).toBe(0);
+
+        expect([...sel.remove([2, 9])]).toEqual([]);
+        expect(sel.remove([2, 9]).length).toBe(0);
+
+        // Remove ends of selection
+
+        expect([...sel.remove([2, 6])]).toEqual([6, 7]);
+        expect(sel.remove([2, 6]).length).toBe(2);
+
+        expect([...sel.remove([5, 9])]).toEqual([3, 4]);
+        expect(sel.remove([5, 9]).length).toBe(2);
+
+        expect([...sel.remove([2, 3])]).toEqual([3, 4, 5, 6, 7]);
+        expect(sel.remove([2, 3]).length).toBe(5);
+
+        expect([...sel.remove([8, 9])]).toEqual([3, 4, 5, 6, 7]);
+        expect(sel.remove([8, 9]).length).toBe(5);
+
+        expect([...sel.remove(3)]).toEqual([4, 5, 6, 7]);
+        expect(sel.remove(3).length).toBe(4);
+
+        expect([...sel.remove(7)]).toEqual([3, 4, 5, 6]);
+        expect(sel.remove(7).length).toBe(4);
+
+        // Remove end and start of 2 different slices
+        const altSel = CompactSelection.fromSingleSelection([0, 5]).add([8, 12]);
+        expect([...altSel]).toEqual([0, 1, 2, 3, 4, 8, 9, 10, 11]);
+        expect([...altSel.remove([3, 10])]).toEqual([0, 1, 2, 10, 11]);
+
+        // Remove middle of selection
+
+        expect([...sel.remove([4, 7])]).toEqual([3, 7]);
+        expect(sel.remove([4, 7]).length).toBe(2);
+
+        expect([...sel.remove(5)]).toEqual([3, 4, 6, 7]);
+        expect(sel.remove(5).length).toBe(4);
+
+        // Remove nothing from selection
+
+        expect([...sel.remove([1, 2])]).toEqual([3, 4, 5, 6, 7]);
+        expect(sel.remove([1, 2]).length).toBe(5);
+
+        expect([...sel.remove([8, 9])]).toEqual([3, 4, 5, 6, 7]);
+        expect(sel.remove([8, 9]).length).toBe(5);
+    });
+
+    test("Round trip: single range selection", () => {
+        const original = CompactSelection.fromSingleSelection([3, 8]);
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual(original.items);
+        expect([...recreated]).toEqual([3, 4, 5, 6, 7]);
+    });
+
+    test("Round trip: multiple non-overlapping ranges", () => {
+        const original = CompactSelection.empty()
+            .add([1, 3])
+            .add([5, 8])
+            .add([10, 12]);
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual([[1, 3], [5, 8], [10, 12]]);
+        expect([...recreated]).toEqual([1, 2, 5, 6, 7, 10, 11]);
+    });
+
+    test("Round trip: overlapping ranges get merged", () => {
+        const original = CompactSelection.create([[1, 5], [3, 8], [7, 10]]);
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual([[1, 10]]); // Should be merged into a single range
+        expect([...recreated]).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+    });
+
+    test("Round trip: empty selection", () => {
+        const original = CompactSelection.empty();
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual([]);
+        expect([...recreated]).toEqual([]);
+    });
+
+    test("Round trip: single indices", () => {
+        const original = CompactSelection.empty()
+            .add(5)
+            .add(10)
+            .add(15);
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual([[5, 6], [10, 11], [15, 16]]);
+        expect([...recreated]).toEqual([5, 10, 15]);
+    });
+
+    test("Round trip: adjacent ranges get merged", () => {
+        const original = CompactSelection.create([[1, 3], [3, 5], [5, 7]]);
+        expect(original.items).toEqual([[1, 7]]); // Should be merged into a single range
+        
+        const recreated = CompactSelection.create(original.items);
+        expect(recreated.equals(original)).toBe(true);
+    });
+
+    test("Round trip: complex selection with modifications", () => {
+        const original = CompactSelection.fromSingleSelection([0, 20])
+            .remove([5, 10])
+            .remove([15, 18]);
+        const recreated = CompactSelection.create(original.items);
+        
+        expect(recreated.equals(original)).toBe(true);
+        expect(recreated.items).toEqual([[0, 5], [10, 15], [18, 20]]);
+    });
+
+    test("Round trip: JSON serialization persistence", () => {
+        const original = CompactSelection.empty()
+            .add([2, 5])
+            .add([8, 12])
+            .add(15)
+            .add([20, 25]);
+        
+        // Simulate persistence through JSON serialization
+        const serialized = JSON.stringify(original.items);
+        const deserialized = JSON.parse(serialized) as CompactSelectionRanges;
+        const restored = CompactSelection.create(deserialized);
+        
+        expect(restored.equals(original)).toBe(true);
+        expect(restored.items).toEqual(original.items);
+        expect([...restored]).toEqual([...original]);
+    });
+
+    test("CompactSelection.create merges overlapping ranges", () => {
+        // Test automatic merging during creation
+        const sel = CompactSelection.create([[1, 3], [2, 5], [4, 7], [10, 12]]);
+        expect(sel.items).toEqual([[1, 7], [10, 12]]);
+        expect([...sel]).toEqual([1, 2, 3, 4, 5, 6, 10, 11]);
+    });
+
+    test("CompactSelection.create handles edge cases", () => {
+        // Empty array
+        const empty = CompactSelection.create([]);
+        expect(empty.items).toEqual([]);
+        expect(empty.length).toBe(0);
+
+        // Single range
+        const single = CompactSelection.create([[5, 8]]);
+        expect(single.items).toEqual([[5, 8]]);
+        expect([...single]).toEqual([5, 6, 7]);
+
+        // Adjacent ranges
+        const adjacent = CompactSelection.create([[1, 3], [3, 5], [5, 7]]);
+        expect(adjacent.items).toEqual([[1, 7]]);
+        expect([...adjacent]).toEqual([1, 2, 3, 4, 5, 6]);
+    });
+
+    test("Compact selection fromArray", () => {
+        const sel = CompactSelection.fromArray([3, 4, 6]);
+        expect([...sel]).toEqual([3, 4, 6]);
+    });
+
+    test("Compact selection array roundtrip", () => {
+        const sel = CompactSelection.fromSingleSelection([2, 7]).add(8);
+        const altSel = CompactSelection.fromArray(sel.toArray());
+        expect(altSel.equals(sel)).toBe(true);
+    });
+});