import React from 'react';
import { shallow } from 'enzyme';
import { COMPOUND_TYPE } from '../../../constants';
import noop from '../../../utils/noop';
import ArtistDropdownCompoundMessage, { Props } from '../artistDropdownCompoundMessage';

describe('<ArtistDropdownCompoundMessage>', () => {
    const artists = {
        artist: 'Test1&Test2',
        separateArtists: ['Test1', 'Test2'],
    };
    const props = {
        ...artists,
        disabled: false,
        onCancel: noop,
        onConfirm: noop,
    };
    const renderComponent = (testProps?: Partial<Props>) =>
        shallow(<ArtistDropdownCompoundMessage {...props} {...testProps} />);

    describe('when it renders', () => {
        it('displays the expected markup', () => {
            expect(renderComponent()).toMatchSnapshot();
        });
        it('displays disabled layout', () => {
            const testProps = { ...props, disabled: true };
            const component = renderComponent(testProps);
            const layout = component.find('.ArtistDropdownCompoundMessage-disabled');
            expect(layout.exists()).toBeTruthy();
        });
        it('displays compound content', () => {
            const data = { name: 'Test', ...artists };
            const state = { isVisible: true, onValidate: jest.fn() };
            const component = renderComponent();
            const content = component.find('ArtistProfilesPagination').prop<Function>('children');
            expect(content?.(data, state)).toMatchSnapshot();
        });
    });

    describe('with handlers', () => {
        afterEach(() => {
            jest.restoreAllMocks();
        });
        it('calls onConfirm if Group selected', () => {
            const testProps = { onConfirm: jest.fn() };
            const component = renderComponent(testProps);
            const done = component.find('ArtistProfilesPagination').prop<Function>('onDone');
            done({ value: COMPOUND_TYPE.GROUP });
            expect(testProps.onConfirm).toHaveBeenCalled();
        });
        it('calls onCancel if Separate selected', () => {
            const testProps = { onCancel: jest.fn() };
            const component = renderComponent(testProps);
            const done = component.find('ArtistProfilesPagination').prop<Function>('onDone');
            done({ value: COMPOUND_TYPE.SEPARATE });
            expect(testProps.onCancel).toHaveBeenCalled();
        });
        it('calls onValidate for compound component and returns correct data', () => {
            const component = renderComponent().find('ArtistProfilesPagination');
            const onValidate = component
                .find('ArtistProfilesPagination')
                .prop<Function>('onValidate');
            expect(onValidate({ value: COMPOUND_TYPE.GROUP })).toEqual([
                true,
                { value: COMPOUND_TYPE.GROUP },
            ]);
        });
    });
});