@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts

Applicaster Zapp React Native utilities package

import { renderHook } from "@testing-library/react-hooks";
import { Dimensions, StatusBar } from "react-native";
import { useDimensions } from "../useDimensions";
import { usePickFromState } from "@applicaster/zapp-react-native-redux";

import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";

jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
  return {
    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
    usePickFromState: jest.fn(),
  };
});

jest.mock(
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
  () => ({
    useIsScreenActive: jest.fn().mockReturnValue(true),
  })
);

jest.doMock("../helpers", () => ({
  getInitialDimensions: jest
    .fn()
    .mockReturnValue({ width: 100, height: 200, scale: 1, fontScale: 1 }),
}));

jest.mock("../../getDeviceInfo", () => ({
  getDeviceInfo: jest.fn().mockReturnValue({ deviceInfo: "testDeviceInfo" }),
}));

const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };

Dimensions.get = jest.fn().mockReturnValue(mockDimensions);

Dimensions.addEventListener = jest.fn().mockReturnValue({
  remove: jest.fn(),
});

describe("useDimensions", () => {
  const mockAppData = { someData: "test" };

  beforeEach(() => {
    StatusBar.currentHeight = 20;
    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
  });

  it("returns correct initial dimensions", () => {
    const { result } = renderHook(() =>
      useDimensions("window", { fullDimensions: false })
    );

    expect(result.current).toMatchObject({
      statusBarHeight: StatusBar.currentHeight,
    });
  });

  it("calls handler on mount", () => {
    renderHook(() => useDimensions("window", { fullDimensions: false }));

    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
      "change",
      expect.any(Function)
    );
  });

  it("calls handler on isActive change", () => {
    const { rerender } = renderHook(() =>
      useDimensions("window", { fullDimensions: false })
    );

    (useIsScreenActive as jest.Mock).mockReturnValue(false);
    rerender();

    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
      "change",
      expect.any(Function)
    );
  });

  it("handles fullDimensions option", () => {
    const { result } = renderHook(() =>
      useDimensions("window", { fullDimensions: true })
    );

    expect(result.current).toMatchObject({
      scale: 1,
      fontScale: 1,
      statusBarHeight: StatusBar.currentHeight,
    });
  });

  it("handles excludeStatusBar option", () => {
    const { result } = renderHook(() =>
      useDimensions("window", { excludeStatusBar: true })
    );

    expect(result.current.height).toBe(
      mockDimensions.height - (StatusBar?.currentHeight ?? 0)
    );
  });

  it("handles rounded option", () => {
    const { result } = renderHook(() =>
      useDimensions("window", { rounded: true })
    );

    expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
    expect(result.current.height).toBe(Math.ceil(mockDimensions.height));
  });

  it("handles deviceInfo option", () => {
    const { result } = renderHook(() =>
      useDimensions("window", { deviceInfo: true })
    );

    expect(result.current.deviceInfo).toMatchObject({
      deviceInfo: "testDeviceInfo",
    });
  });

  it("logs deprecation warning when fullDimensions is boolean", () => {
    const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
    renderHook(() => useDimensions("window", true));

    expect(consoleWarnSpy).toHaveBeenCalledWith(
      "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"
    );

    consoleWarnSpy.mockRestore();
  });
});