import { renderHook } from "@testing-library/react";

import { setMockedMatchedMedia } from "../../set-mocked-matched-media";
import { mediaQueries } from "../../../theme/breakpoints";
import { useBreakpoints } from ".";

describe("use-breakpoints", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("should return true for a matching breakpoint and false for any other breakpoint.", () => {
    setMockedMatchedMedia([mediaQueries[0]]); // Sets the matched media to be the phone media query.
    const { result } = renderHook(() => useBreakpoints());
    expect(result.current.s).toBe(true);
    expect(result.current.m).toBe(false);
    expect(result.current.l).toBe(false);
    expect(result.current.xl).toBe(false);
  });

  it("should return false for all breakpoints if none is matched.", () => {
    setMockedMatchedMedia(undefined);
    const { result } = renderHook(() => useBreakpoints());
    expect(result.current.s).toBe(false);
    expect(result.current.m).toBe(false);
    expect(result.current.l).toBe(false);
    expect(result.current.xl).toBe(false);
  });
});