@marimo-team/frontend 0.14.18-dev5 → 0.14.18-dev50

package/src/hooks/__tests__/usePackageMetadata.test.tsx

@@ -0,0 +1,219 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { renderHook, waitFor } from "@testing-library/react";
+import * as msw from "msw";
+import { setupServer } from "msw/node";
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import {
+  type PyPiPackageResponse,
+  usePackageMetadata,
+} from "../usePackageMetadata";
+
+function createPackageMock(options: {
+  extras?: string[] | null;
+  versions: string[];
+}): PyPiPackageResponse {
+  return {
+    info: {
+      provides_extra: options.extras ?? null,
+    },
+    releases: Object.fromEntries(options.versions.map((v) => [v, []])),
+  };
+}
+
+describe("usePackageMetadata", () => {
+  // https://mswjs.io/docs/api/setup-server/#usage
+  const server = setupServer();
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added in individual tests (runtime handlers).
+    server.resetHandlers();
+  });
+
+  afterAll(() => {
+    // Disable request interception and clean up.
+    server.close();
+  });
+
+  it("should return loading state initially", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/numpy/json", async () => {
+        msw.delay();
+        return msw.HttpResponse.json(
+          createPackageMock({
+            extras: ["test", "dev"],
+            versions: ["1.21.0", "1.20.0"],
+          }),
+        );
+      }),
+    );
+    const { result } = renderHook(() => usePackageMetadata("numpy"));
+    expect(result.current.isPending).toBe(true);
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("should fetch and return package metadata successfully", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/pandas/json", () => {
+        return msw.HttpResponse.json(
+          createPackageMock({
+            extras: ["test", "performance", "plotting"],
+            versions: ["2.0.0", "1.5.3", "1.4.0"],
+          }),
+        );
+      }),
+    );
+
+    const { result } = renderHook(() => usePackageMetadata("pandas"));
+
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toEqual({
+      versions: ["2.0.0", "1.5.3", "1.4.0"],
+      extras: ["test", "performance", "plotting"],
+    });
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("should handle packages with no extras", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/requests/json", () =>
+        msw.HttpResponse.json(
+          createPackageMock({
+            extras: null,
+            versions: ["2.28.0", "2.27.1"],
+          }),
+        ),
+      ),
+    );
+
+    const { result } = renderHook(() => usePackageMetadata("requests"));
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toEqual({
+      versions: ["2.28.0", "2.27.1"],
+      extras: [],
+    });
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("should handle network errors", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/nonexistent/json", () =>
+        msw.HttpResponse.error(),
+      ),
+    );
+
+    const { result } = renderHook(() => usePackageMetadata("nonexistent"));
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.error).toBeInstanceOf(Error);
+  });
+
+  it("should clean package names with extras syntax", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/package-name/json", () =>
+        msw.HttpResponse.json(
+          createPackageMock({
+            extras: ["extra1", "extra2"],
+            versions: ["1.0.0"],
+          }),
+        ),
+      ),
+    );
+
+    const { result } = renderHook(() =>
+      usePackageMetadata("package-name[extra1,extra2]"),
+    );
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toEqual({
+      versions: ["1.0.0"],
+      extras: ["extra1", "extra2"],
+    });
+  });
+
+  it("should sort versions in reverse semver order", async () => {
+    server.use(
+      msw.http.get("https://pypi.org/pypi/scipy/json", () =>
+        msw.HttpResponse.json(
+          createPackageMock({
+            extras: [],
+            versions: ["1.9.0", "1.10.1", "1.8.1", "2.0.0"],
+          }),
+        ),
+      ),
+    );
+
+    const { result } = renderHook(() => usePackageMetadata("scipy"));
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toMatchInlineSnapshot(`
+      {
+        "extras": [],
+        "versions": [
+          "2.0.0",
+          "1.10.1",
+          "1.9.0",
+          "1.8.1",
+        ],
+      }
+    `);
+  });
+
+  it("should handle 404 package not found error", async () => {
+    server.use(
+      msw.http.get(
+        "https://pypi.org/pypi/package-not-found/json",
+        () => new msw.HttpResponse(null, { status: 404 }),
+      ),
+    );
+
+    const { result } = renderHook(() =>
+      usePackageMetadata("package-not-found"),
+    );
+    await waitFor(() => expect(result.current.isPending).toBe(false));
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.error).toBeInstanceOf(Error);
+  });
+
+  it("should use cached data on subsequent calls", async () => {
+    let callCount = 0;
+    server.use(
+      msw.http.get("https://pypi.org/pypi/cached-package/json", () => {
+        callCount++;
+        return msw.HttpResponse.json(
+          createPackageMock({
+            extras: ["test"],
+            versions: ["1.0.0"],
+          }),
+        );
+      }),
+    );
+
+    // First
+    const { result: result1 } = renderHook(() =>
+      usePackageMetadata("cached-package"),
+    );
+
+    await waitFor(() => expect(result1.current.isPending).toBe(false));
+    expect(result1.current.data).toEqual({
+      versions: ["1.0.0"],
+      extras: ["test"],
+    });
+    expect(callCount).toBe(1);
+
+    // Second
+    const { result: result2 } = renderHook(() =>
+      usePackageMetadata("cached-package"),
+    );
+    await waitFor(() => expect(result2.current.isPending).toBe(false));
+    expect(result2.current.data).toEqual({
+      versions: ["1.0.0"],
+      extras: ["test"],
+    });
+    expect(callCount).toBe(1);
+  });
+});

package/src/hooks/__tests__/useResizeHandle.test.tsx

@@ -0,0 +1,240 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { act, render, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useResizeHandle } from "../useResizeHandle";
+
+describe("useResizeHandle", () => {
+  it("should initialize with correct refs and style", () => {
+    const { result } = renderHook(() =>
+      useResizeHandle({
+        startingWidth: 500,
+        onResize: vi.fn(),
+      }),
+    );
+
+    expect(result.current.resizableDivRef.current).toBeNull();
+    expect(result.current.handleRefs.left.current).toBeNull();
+    expect(result.current.handleRefs.right.current).toBeNull();
+    expect(result.current.style).toEqual({ width: "500px" });
+  });
+
+  it("should handle contentWidth starting width", () => {
+    const { result } = renderHook(() =>
+      useResizeHandle({
+        startingWidth: "contentWidth",
+        onResize: vi.fn(),
+      }),
+    );
+
+    // Defaults to medium width
+    expect(result.current.style).toEqual({
+      width: "var(--content-width-medium)",
+    });
+  });
+
+  it("should call onResize when resizing", () => {
+    const onResize = vi.fn();
+
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRefs } = useResizeHandle({
+        startingWidth: 500,
+        onResize,
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRefs.left} data-testid="left-handle" />
+          <div ref={handleRefs.right} data-testid="right-handle" />
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<TestComponent />);
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const rightHandle = getByTestId("right-handle") as HTMLDivElement;
+
+    // Simulate resize
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      rightHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: 100 });
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("600px"); // 500px + 100px movement
+    expect(onResize).toHaveBeenCalledWith(600);
+
+    // Resize left handle
+    const leftHandle = getByTestId("left-handle") as HTMLDivElement;
+
+    // Simulate resize
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      leftHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: -100 });
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("700px"); // 600px - (-100px) movement
+    expect(onResize).toHaveBeenCalledWith(700);
+  });
+
+  it("should handle resizing with only left handle", () => {
+    const onResize = vi.fn();
+
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRefs } = useResizeHandle({
+        startingWidth: 500,
+        onResize,
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRefs.left} data-testid="left-handle" />
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<TestComponent />);
+
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const leftHandle = getByTestId("left-handle") as HTMLDivElement;
+
+    // Simulate resize
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      leftHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: -100 });
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("600px"); // 500px - (-100px) movement
+    expect(onResize).toHaveBeenCalledWith(600);
+  });
+
+  it("should handle resizing with only right handle", () => {
+    const onResize = vi.fn();
+
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRefs } = useResizeHandle({
+        startingWidth: 500,
+        onResize,
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRefs.right} data-testid="right-handle" />
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<TestComponent />);
+
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const rightHandle = getByTestId("right-handle") as HTMLDivElement;
+
+    // Simulate resize
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      rightHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: 100 });
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("600px"); // 500px + 100px movement
+    expect(onResize).toHaveBeenCalledWith(600);
+  });
+
+  it("should handle min and max width", () => {
+    const onResize = vi.fn();
+
+    // Create a test component that uses the hook
+    const TestComponent = () => {
+      const { resizableDivRef, handleRefs } = useResizeHandle({
+        startingWidth: 500,
+        minWidth: 400,
+        maxWidth: 600,
+        onResize,
+      });
+
+      return (
+        <div>
+          <div
+            ref={resizableDivRef}
+            style={{ width: "500px" }}
+            data-testid="resizable-div"
+          />
+          <div ref={handleRefs.right} data-testid="right-handle" />
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<TestComponent />);
+    const resizableDiv = getByTestId("resizable-div") as HTMLDivElement;
+    const rightHandle = getByTestId("right-handle") as HTMLDivElement;
+
+    // Test min width
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      rightHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: -200 }); // Try to resize below min
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("400px"); // Should be clamped to min width
+    expect(onResize).toHaveBeenCalledWith(400);
+
+    // Test max width
+    act(() => {
+      const mousedownEvent = new MouseEvent("mousedown", { clientX: 0 });
+      rightHandle.dispatchEvent(mousedownEvent);
+
+      const mousemoveEvent = new MouseEvent("mousemove", { clientX: 200 }); // Try to resize above max
+      document.dispatchEvent(mousemoveEvent);
+
+      const mouseupEvent = new MouseEvent("mouseup");
+      document.dispatchEvent(mouseupEvent);
+    });
+
+    expect(resizableDiv.style.width).toBe("600px"); // Should be clamped to max width
+    expect(onResize).toHaveBeenCalledWith(600);
+  });
+});

package/src/hooks/__tests__/useResizeObserver.test.tsx

@@ -0,0 +1,86 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { renderHook } from "@testing-library/react";
+import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { useResizeObserver } from "../useResizeObserver";
+
+describe("useResizeObserver", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should call observe when ref is provided", () => {
+    const observeSpy = vi.fn();
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = observeSpy;
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+    };
+
+    renderHook(() =>
+      useResizeObserver({
+        ref: { current: document.createElement("div") },
+      }),
+    );
+
+    expect(observeSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call observe when ref is not provided", () => {
+    const observeSpy = vi.fn();
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = observeSpy;
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+    };
+
+    renderHook(() =>
+      useResizeObserver({
+        ref: { current: null },
+      }),
+    );
+
+    expect(observeSpy).not.toHaveBeenCalled();
+  });
+
+  it("should not call observe when skipped", () => {
+    const observeSpy = vi.fn();
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = observeSpy;
+      unobserve = vi.fn();
+      disconnect = vi.fn();
+    };
+
+    renderHook(() =>
+      useResizeObserver({
+        ref: { current: document.createElement("div") },
+        skip: true,
+      }),
+    );
+
+    expect(observeSpy).not.toHaveBeenCalled();
+  });
+
+  it("disconnect should be called once unmounted", () => {
+    const disconnectSpy = vi.fn();
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = vi.fn();
+      unobserve = vi.fn();
+      disconnect = disconnectSpy;
+    };
+
+    const { unmount } = renderHook(() =>
+      useResizeObserver({
+        ref: { current: document.createElement("div") },
+      }),
+    );
+
+    unmount();
+
+    expect(disconnectSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/__tests__/useTimer.test.tsx

@@ -0,0 +1,62 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useTimer } from "../useTimer";
+
+describe("useTimer", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("should start at 0", () => {
+    const { result } = renderHook(() => useTimer());
+    expect(result.current.time).toBe("0.0");
+  });
+
+  it("should increment time when started", () => {
+    const { result } = renderHook(() => useTimer());
+
+    act(() => {
+      result.current.start();
+      vi.runOnlyPendingTimers();
+    });
+
+    expect(result.current.time).toBe("0.1");
+  });
+
+  it("should stop incrementing when stopped", () => {
+    const { result } = renderHook(() => useTimer());
+
+    act(() => {
+      result.current.start();
+      vi.runOnlyPendingTimers();
+    });
+
+    act(() => {
+      result.current.stop();
+      vi.runOnlyPendingTimers();
+    });
+
+    expect(result.current.time).toBe("0.1");
+  });
+
+  it("should reset to 0 when cleared", () => {
+    const { result } = renderHook(() => useTimer());
+    act(() => result.current.clear());
+    expect(result.current.time).toBe("0.0");
+  });
+
+  it("should cleanup interval on unmount", () => {
+    const { result, unmount } = renderHook(() => useTimer());
+    act(() => result.current.start());
+    unmount();
+    vi.advanceTimersByTime(100);
+    expect(result.current.time).toBe("0.0");
+  });
+});