import React from 'react';
import OptionAmount from './index';
import { mount, render } from 'enzyme';
import { act } from 'react-dom/test-utils';
import TextField from '@material-ui/core/TextField';

describe('OptionAmount', () => {
    it('renders correctly', () => {
        const option = {
            amount: 0,
        };
        const tree = render(<OptionAmount option={option} />);
        expect(tree).toMatchSnapshot();
    });

    it('correct amount value set in input field', () => {
        const option = {
            amount: 45,
        };
        const tree = mount(<OptionAmount option={option} />);
        const txt = tree.find(TextField);
        expect(txt.props().value).toEqual(45);
    });

    it('should call plus/minus function after clicking over the plus/minus symbol', () => {
        const mockedChange = jest.fn(step => step);
        const option = {
            amount: 3,
        };
        const tree = mount(<OptionAmount option={option} onAmountChange={mockedChange} />);
        const svgs = tree.find('svg');
        const plus = svgs.first();
        const minus = svgs.last();

        plus.simulate('click');
        minus.simulate('click');

        expect(mockedChange).toHaveBeenCalledTimes(2);
    });

    it('should update input value without manipulation', async () => {
        const mockedSelect = jest.fn(step => step);
        const option = {
            amount: 3,
        };
        const tree = mount(<OptionAmount option={option} onSelect={mockedSelect} />);
        await act(() =>
            tree
                .find(TextField)
                .at(0)
                .props()
                .onChange({ target: { value: 20 } })
        );
        tree.update();
        expect(tree.find(TextField).props().value).toEqual(20);
    });
});
