import React from 'react';
import { shallow, mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { COMPOUND_TYPE } from '../../../../constants';
import ArtistCompoundPage, { Props } from '../artistCompoundPage';

describe('<ArtistCompoundPage>', () => {
    const getProps = () => ({
        name: 'Test',
        artist: 'Test1&Test2',
        separateArtists: ['Test1', 'Test2'],
        isVisible: true,
        onValidate: jest.fn(),
    });
    const renderComponent = (props?: Partial<Props>) =>
        shallow(<ArtistCompoundPage {...getProps()} {...props} />);
    const mountComponent = (props?: Partial<Props>) =>
        mount(<ArtistCompoundPage {...getProps()} {...props} />);

    it('renders the expected markup', () => {
        expect(renderComponent()).toMatchSnapshot();
    });

    it('expects validation call on change', () => {
        const onValidate = jest.fn();
        const testComponent = mountComponent({ onValidate });
        const changeProp = testComponent.find('ArtistProfileCheckable#Test_group').prop('onChange');
        act(() => {
            changeProp?.({} as React.FormEvent);
        });
        expect(onValidate).toHaveBeenCalledWith(COMPOUND_TYPE.GROUP);
    });
    it('skips validation call if not defined', () => {
        const testComponent = mountComponent({ onValidate: undefined });
        const checkable = testComponent.find('ArtistProfileCheckable#Test_group');
        expect(checkable.exists()).toBeTruthy();
    });
});