import { DimmerProps } from '../dimmer';
import { SlidingPanelProps } from '../slidingPanel';
import { mockMatchMedia, render, screen, userEvent } from '../test-utils';

import Drawer from './Drawer';

mockMatchMedia();

jest.mock(
  '../dimmer',
  () =>
    function Dimmer({ open, children }: DimmerProps) {
      return open ? <div className="dimmer">{children}</div> : null;
    },
);

jest.mock(
  '../slidingPanel',
  () =>
    function SlidingPanel({ open, children }: SlidingPanelProps) {
      return open ? <div className="sliding-panel">{children}</div> : null;
    },
);

describe('Drawer', () => {
  const props = {
    onClose: jest.fn(),
    open: true,
  };

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('renders content when open', () => {
    const { container } = render(<Drawer {...props}>content</Drawer>);

    expect(container).toMatchSnapshot();
  });

  it("doesn't render content when closed", () => {
    const { container } = render(
      <Drawer {...props} open={false}>
        content
      </Drawer>,
    );

    expect(container).toMatchSnapshot();
  });

  it('calls onClose when user clicks close button', async () => {
    render(<Drawer {...props}>content</Drawer>);
    expect(props.onClose).not.toHaveBeenCalled();
    await userEvent.click(getCloseButton());
    expect(props.onClose).toHaveBeenCalledTimes(1);
  });

  const getCloseButton = () => screen.getByLabelText('Close');
});
