// @flow
import './match-media.mock';
import { testHook } from '../../../utils/tests';
import { _mdQuery, _lgQuery, _xlQuery, useBreakPoint } from '.';

describe('useBreakPoint hook', () => {
  let breakPoint;

  beforeEach(() => {
    _mdQuery.matches = false;
    _lgQuery.matches = false;
    _xlQuery.matches = false;
  });

  it('triggers update with correct break point value', () => {
    const wrapper = testHook(() => {
      breakPoint = useBreakPoint();
    });

    expect(breakPoint).toBe('sm');
    _mdQuery.matches = true;
    expect(breakPoint).toBe('md');
    _lgQuery.matches = true;
    expect(breakPoint).toBe('lg');
    _xlQuery.matches = true;
    expect(breakPoint).toBe('xl');

    wrapper.unmount();
  });

  it('cleans up its listeners on unmount', () => {
    const wrapper = testHook(() => {
      breakPoint = useBreakPoint();
    });

    expect(breakPoint).toBe('sm');

    wrapper.unmount();
    _mdQuery.matches = true;

    expect(breakPoint).toBe('sm');
  });
});
