import React from 'react';
import { render } from 'enzyme';
import CallToAction from './index';

jest.mock('@material-ui/core/Popper', () => {
    return {
        __esModule: true,
        // eslint-disable-next-line react/prop-types,react/display-name
        default: ({ children, placement }) => {
            return <div data-placement={placement}>{children}</div>;
        },
    };
});

const anchorHelper = () => <div />;
const label = 'I am a call to action label';

describe('Shared/Components/CallToAction', () => {
    it('renders with top offset', () => {
        const tree = render(<CallToAction offsetDirection={'top'} anchorRef={anchorHelper} label={label} />);
        expect(tree).toMatchSnapshot();
    });

    it('renders with right offset', () => {
        const tree = render(
            <CallToAction offsetDirection={'right'} anchorRef={anchorHelper} label={label} />
        );
        expect(tree).toMatchSnapshot();
    });

    it('renders with bottom offset', () => {
        const tree = render(
            <CallToAction offsetDirection={'bottom'} anchorRef={anchorHelper} label={label} />
        );
        expect(tree).toMatchSnapshot();
    });

    it('renders with left offset', () => {
        const tree = render(<CallToAction offsetDirection={'left'} anchorRef={anchorHelper} label={label} />);
        expect(tree).toMatchSnapshot();
    });

    it('does not render without an anchorRef', () => {
        const tree = render(<CallToAction offsetDirection={'left'} anchorRef={null} label={label} />);
        expect(tree).toMatchSnapshot();
    });
});
