paseo/packages/app/src/hooks/use-container-width.test.ts

// @vitest-environment jsdom

import { act, renderHook } from "@testing-library/react";
import type { LayoutChangeEvent } from "react-native";
import { describe, expect, it } from "vitest";
import { readMeasuredWidth, useContainerWidthBelow } from "./use-container-width";

function layoutEvent(width: number): LayoutChangeEvent {
  return {
    nativeEvent: {
      layout: {
        width,
        height: 48,
        x: 0,
        y: 0,
      },
    },
  } as LayoutChangeEvent;
}

describe("readMeasuredWidth", () => {
  it("returns the width of a rendered container", () => {
    expect(readMeasuredWidth(layoutEvent(650))).toBe(650);
  });

  it("returns null for the zero width a hidden retained panel reports", () => {
    expect(readMeasuredWidth(layoutEvent(0))).toBeNull();
  });
});

describe("useContainerWidthBelow", () => {
  it("does not re-render for width changes that stay in the same threshold bucket", () => {
    let renderCount = 0;
    const { result } = renderHook(() => {
      renderCount += 1;
      return useContainerWidthBelow(700);
    });

    expect(result.current.isBelow).toBe(true);
    expect(renderCount).toBe(1);

    act(() => {
      result.current.onLayout(layoutEvent(650));
      result.current.onLayout(layoutEvent(620));
      result.current.onLayout(layoutEvent(699));
    });

    expect(result.current.isBelow).toBe(true);
    expect(renderCount).toBe(1);
  });

  it("re-renders when the width crosses the threshold", () => {
    let renderCount = 0;
    const { result } = renderHook(() => {
      renderCount += 1;
      return useContainerWidthBelow(700);
    });

    act(() => {
      result.current.onLayout(layoutEvent(760));
    });

    expect(result.current.isBelow).toBe(false);
    expect(renderCount).toBe(2);
  });

  it("ignores zero-width measurements from hidden mounted content", () => {
    let renderCount = 0;
    const { result } = renderHook(() => {
      renderCount += 1;
      return useContainerWidthBelow(700, { initialIsBelow: false });
    });

    expect(result.current.isBelow).toBe(false);

    act(() => {
      result.current.onLayout(layoutEvent(0));
    });

    expect(result.current.isBelow).toBe(false);
    expect(renderCount).toBe(1);

    act(() => {
      result.current.onLayout(layoutEvent(650));
    });

    expect(result.current.isBelow).toBe(true);
    expect(renderCount).toBe(2);
  });
});