agent-desktop/console/src/os/useElementWidth.test.ts

import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { renderHook, act } from "@testing-library/react";
import { useElementWidth } from "./useElementWidth";

type ROCallback = (entries: { contentRect: { width: number } }[]) => void;

let lastCallback: ROCallback | null = null;
const observe = vi.fn();
const disconnect = vi.fn();

beforeEach(() => {
  lastCallback = null;
  observe.mockClear();
  disconnect.mockClear();
  vi.stubGlobal(
    "ResizeObserver",
    class {
      constructor(cb: ROCallback) {
        lastCallback = cb;
      }
      observe = observe;
      disconnect = disconnect;
    },
  );
});

afterEach(() => {
  vi.unstubAllGlobals();
});

describe("useElementWidth", () => {
  it("returns null before any measurement", () => {
    const { result } = renderHook(() => useElementWidth(null));
    expect(result.current).toBeNull();
  });

  it("observes the element and reports rounded widths", () => {
    const el = document.createElement("div");
    const { result } = renderHook(() => useElementWidth(el));
    expect(observe).toHaveBeenCalledWith(el);
    act(() => {
      lastCallback?.([{ contentRect: { width: 733.6 } }]);
    });
    expect(result.current).toBe(734);
  });

  it("disconnects on unmount", () => {
    const el = document.createElement("div");
    const { unmount } = renderHook(() => useElementWidth(el));
    unmount();
    expect(disconnect).toHaveBeenCalled();
  });
});