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

beforeEach(cleanup);

describe('Drop Down Item', () => {
    test('01 - Minimal props show a simple value', () => {
        const wrapper = shallow(<DropDownItem
            focused={false}
            onClick={(value: string) => { }}
            value={'Chicago'}
        />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-item-container').length).toBe(1);
        expect(wrapper.find('.drop-down-item-value').length).toBe(1);
        expect(wrapper.find('.drop-down-item-highlighted-value').length).toBe(0);
    });
    test('02 - Highlighted chunk highlights every chunk that matches in the value', () => {
        const wrapper = shallow(<DropDownItem
            focused={true}
            highlightedChunk={'c'}
            onClick={(value: string) => { }}
            value={'Chicago'}
        />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find('.drop-down-item-container').length).toBe(1);
        expect(wrapper.find('.drop-down-item-value').length).toBe(2);
        expect(wrapper.find('.drop-down-item-highlighted-value').length).toBe(2);
    });
});