import React from 'react';
import { shallow } from 'enzyme';
import { ArtistStoreProfile } from '../../../types';
import ProfilesPopover, { Props } from '../profilesPopover';

describe('<ProfilesPopover>', () => {
    const profiles: ArtistStoreProfile[] = [
        {
            id: 1,
            store: 1,
            name: "Luk, I'm your delivery manager.",
            url: 'http://someTestLink',
        },
        { id: 2, store: 2, name: 'Lifetime' },
        null as unknown as ArtistStoreProfile,
    ];

    const defaultProps: Props = {
        id: 'TestId',
        profileComponent: () => <div>ProfileComponent</div>,
        profileLoadingComponent: () => <div>LoadingComponent</div>,
        profileEmptyComponent: () => <div>EmptyComponent</div>,
        title: 'Test Title',
        titleTooltip: 'This is test title tooltip',
        profiles,
        loadingProfiles: 1,
        isLoading: false,
        footer: <div>Footer</div>,
        componentProps: undefined,
        emptyProps: undefined,
        rootClose: false,
        trigger: 'hover',
        onOpen: jest.fn(),
        onClose: jest.fn(),
    };

    const renderComponent = (props = defaultProps) =>
        shallow(
            <ProfilesPopover {...props}>
                <div>Test Content</div>
            </ProfilesPopover>
        );

    describe('when it renders', () => {
        it('displays correct layout', () => {
            expect(renderComponent()).toMatchSnapshot();
        });
        it('does not render footer if not defined', () => {
            const testProps = { ...defaultProps, footer: undefined };
            const testComponent = renderComponent(testProps);
            expect(testComponent.find('.ProfilesPopover-footer').exists()).toBeFalsy();
        });

        // TODO: Fix this test
        // eslint-disable-next-line jest/no-disabled-tests
        it.skip('displays correct loading state', () => {
            const testProps = { ...defaultProps, isLoading: true };
            const testComponent = renderComponent(testProps);

            const message = testComponent.find('.ProfilesPopover-loader-container');

            expect(message).toMatchSnapshot();
        });

        it('does not render title if not defined', () => {
            const testProps = { ...defaultProps, title: undefined };
            const testComponent = renderComponent(testProps);
            expect(testComponent.find('.ProfilesPopover-header-title').exists()).toBeFalsy();
        });
        it('does not render header tooltip if not defined', () => {
            const testProps = { ...defaultProps, titleTooltip: undefined };
            const testComponent = renderComponent(testProps);
            expect(testComponent.find('.ProfilesPopover-header-tooltip').exists()).toBeFalsy();
        });
    });
});