import * as React from 'react';
import { shallow } from 'enzyme';
import { cleanup } from 'react-testing-library';
import 'jest-styled-components';
import { DropDownEmptyState } from '../../../../../components/InputDropDownDrawer/DropDownDrawer/DropDownEmptyState';

beforeEach(cleanup);

describe('Empty State', () => {
    test('01 - No props shows empty component', () => {
        const wrapper = shallow(<DropDownEmptyState />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-empty-state-container').length).toBe(1);
        expect(wrapper.find('.drop-down-empty-state-message').length).toBe(0);
    });
    test('02 - Passing a message shows the message with default styling', () => {
        const message = 'There are no valid options';
        const wrapper = shallow(<DropDownEmptyState message={message} />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-empty-state-container').length).toBe(1);
        expect(wrapper.find('.drop-down-empty-state-message').length).toBe(1);

    });
    test('03 - Passing a custom message shows the component passed', () => {
        const customMessage = (
            <div>
                There are no valid options, but you can add more by clicking <a>here</a>
            </div>
        );
        const wrapper = shallow(<DropDownEmptyState customMessage={customMessage} />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-empty-state-container').length).toBe(1);
        expect(wrapper.find('.drop-down-empty-state-message').length).toBe(0);
    });
});