import { Responsive, ResponsiveProvider } from '../src';
import { breakpoints, breakpointsMax } from './__fixtures__/mockBreakpoints';
import { cleanup, render } from '@testing-library/react';
import {
    mockMatchMedia,
    unmockMatchMedia,
} from './__fixtures__/mockMatchMedia';
import React from 'react';
import mockContextContent from './__fixtures__/mockContextContent';

const props = { breakpoints, breakpointsMax };

describe('<Responsive />', () => {
    beforeEach(() => {
        mockMatchMedia();
    });

    afterEach(() => {
        unmockMatchMedia();
        cleanup();
    });

    test('should render correctly', () => {
        window.resizeTo(1024, 768);
        const mockRenderProp = jest.fn(() => <h1>Mock test</h1>);

        const { asFragment } = render(
            <ResponsiveProvider {...props}>
                <Responsive>{mockRenderProp}</Responsive>
            </ResponsiveProvider>
        );

        expect(asFragment()).toMatchSnapshot();
    });

    test('should return the context values to the render prop correctly', () => {
        window.resizeTo(1024, 768);
        const mockRenderProp = jest.fn(() => null);

        render(
            <ResponsiveProvider {...props}>
                <Responsive>{mockRenderProp}</Responsive>
            </ResponsiveProvider>
        );

        expect(mockRenderProp).toHaveBeenCalledTimes(2);
        expect(mockRenderProp).toHaveBeenLastCalledWith(mockContextContent);
    });
});