import { render, mount } from 'enzyme';
import React from 'react';
import OptionDetail from './index';
import { mockedProps, optionData } from './index.test.mocks';
import Button from '@material-ui/core/Button';

jest.mock('Shared/Components/CustomDialog', () => {
    return {
        __esModule: true,
        // eslint-disable-next-line react/prop-types,react/display-name
        default: ({ children }) => {
            return <div>{children}</div>;
        },
    };
});

describe('Screens/Components/ImageEditDialog/MessageBox', () => {
    it('renders as full screen on smaller screens', () => {
        const tree = render(<OptionDetail {...{ ...mockedProps, width: 'sm' }} />);
        expect(tree).toMatchSnapshot();
    });

    it('renders as a modal screen on larger screens', () => {
        const tree = render(<OptionDetail {...{ ...mockedProps, width: 'md' }} />);
        expect(tree).toMatchSnapshot();
    });

    it('renders with previous and next navigation buttons', () => {
        const tree = render(<OptionDetail {...{ ...mockedProps, width: 'md', options: [{}, {}] }} />);
        expect(tree).toMatchSnapshot();
    });
});

describe('Creator/Components/Optiondetails', () => {
    it('calls onSelect with amount=1 if the amount is any falsy value (api delivers it with null)', () => {
        const onSelect = jest.fn();
        const wrapper = mount(<OptionDetail {...mockedProps} onSelect={onSelect} />);
        wrapper.find(Button).simulate('click');
        expect(onSelect).toBeCalledWith(
            expect.objectContaining({
                amount: 1,
            })
        );
    });
    it('does not call onSelect if the amount is already bigger than 0', () => {
        const onSelect = jest.fn();
        const props = { ...mockedProps, options: [{ ...optionData, amount: 3 }] };
        const wrapper = mount(<OptionDetail {...props} onSelect={onSelect} />);
        wrapper.find(Button).simulate('click');
        expect(onSelect).not.toBeCalled();
    });
});
