54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
|
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();
|
||
|
|
});
|
||
|
|
});
|