extract hook and add tests

Author: b-yogesh

chartlets.js/packages/lib/src/plugins/vega/VegaChart.tsx

@@ -4,7 +4,7 @@ import type { TopLevelSpec } from "vega-lite";
 import type { ComponentProps, ComponentState } from "@/index";
 import { useSignalListeners } from "./hooks/useSignalListeners";
 import { useVegaTheme, type VegaTheme } from "./hooks/useVegaTheme";
-import { useCallback, useRef, useState } from "react";
+import { useResizeObserver } from "./hooks/useResizeObserver";
 
 interface VegaChartState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
@@ -25,24 +25,7 @@ export function VegaChart({
 }: VegaChartProps) {
   const signalListeners = useSignalListeners(chart, type, id, onChange);
   const vegaTheme = useVegaTheme(theme);
-  const containerRef = useRef<ResizeObserver | null>(null);
-  const [containerSizeKey, setContainerSizeKey] = useState(0);
-  const containerCallbackRef = useCallback((node: Element | null) => {
-    if (containerRef.current) {
-      containerRef.current.disconnect();
-      containerRef.current = null;
-    }
-    if (node !== null) {
-      const resizeObserver = new ResizeObserver((_entries) => {
-        // We only need to know that a resize happened because it triggers a
-        // re-render allowing vega to get the latest layout.
-        setContainerSizeKey(Date.now());
-      });
-
-      resizeObserver.observe(node);
-      containerRef.current = resizeObserver;
-    }
-  }, []);
+  const { containerSizeKey, containerCallbackRef } = useResizeObserver();
   if (chart) {
     return (
       <div id="chart-container" ref={containerCallbackRef} style={style}>

chartlets.js/packages/lib/src/plugins/vega/hooks/useResizeObserver.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from "vitest";
+import { useResizeObserver } from "./useResizeObserver";
+import { act, render } from "@testing-library/react";
+import { useEffect } from "react";
+
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe("useResizeObserver", () => {
+  it("should observe a node", () => {
+    let callbackRef: (node: Element | null) => void;
+
+    const TestComponent = () => {
+      const { containerCallbackRef } = useResizeObserver();
+      callbackRef = containerCallbackRef;
+      return <div ref={containerCallbackRef} />;
+    };
+
+    render(<TestComponent />);
+
+    const observeSpy = vi.spyOn(global.ResizeObserver.prototype, "observe");
+
+    const node = document.createElement("div");
+    act(() => {
+      if (callbackRef) {
+        callbackRef(node);
+      }
+    });
+
+    expect(observeSpy).toHaveBeenCalledWith(node);
+  });
+
+  it("should disconnect previous observer when node changes", () => {
+    let callbackRef: (node: Element | null) => void;
+
+    const TestComponent = () => {
+      const { containerCallbackRef } = useResizeObserver();
+      callbackRef = containerCallbackRef;
+      return null;
+    };
+
+    render(<TestComponent />);
+
+    const disconnectSpy = vi.spyOn(
+      global.ResizeObserver.prototype,
+      "disconnect",
+    );
+
+    const observeSpy = vi.spyOn(global.ResizeObserver.prototype, "observe");
+
+    const node1 = document.createElement("div");
+    const node2 = document.createElement("div");
+
+    act(() => {
+      if (callbackRef) {
+        callbackRef(node1);
+        callbackRef(node2);
+      }
+    });
+
+    expect(disconnectSpy).toHaveBeenCalled();
+    expect(observeSpy).toHaveBeenCalledWith(node2);
+  });
+
+  it("should update containerSizeKey on resize", () => {
+    let observerCallback: ResizeObserverCallback | null = null;
+
+    global.ResizeObserver = class {
+      constructor(cb: ResizeObserverCallback) {
+        observerCallback = cb;
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+
+    let lastKey = 0;
+
+    const TestComponent = () => {
+      const { containerCallbackRef, containerSizeKey } = useResizeObserver();
+
+      useEffect(() => {
+        lastKey = containerSizeKey;
+      }, [containerSizeKey]);
+
+      return <div ref={containerCallbackRef} />;
+    };
+
+    render(<TestComponent />);
+    const initialKey = lastKey;
+
+    act(() => {
+      if (observerCallback) {
+        observerCallback([], {} as ResizeObserver);
+      }
+    });
+
+    expect(lastKey).not.toBe(initialKey);
+  });
+});

chartlets.js/packages/lib/src/plugins/vega/hooks/useResizeObserver.ts

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+
+export interface ResizeObserverResult {
+  containerSizeKey: number;
+  containerCallbackRef: (node: Element | null) => void;
+}
+
+export function useResizeObserver(): ResizeObserverResult {
+  const containerRef = useRef<ResizeObserver | null>(null);
+  const [containerSizeKey, setContainerSizeKey] = useState(0);
+  const containerCallbackRef = useCallback((node: Element | null) => {
+    if (containerRef.current) {
+      containerRef.current.disconnect();
+      containerRef.current = null;
+    }
+    if (node !== null) {
+      const resizeObserver = new ResizeObserver((_entries) => {
+        // We only need to know that a resize happened because it triggers a
+        // re-render allowing vega to get the latest layout.
+        setContainerSizeKey(Date.now());
+      });
+
+      resizeObserver.observe(node);
+      containerRef.current = resizeObserver;
+    }
+  }, []);
+
+  return { containerSizeKey, containerCallbackRef };
+}