import React from 'react'; import {mount} from 'enzyme'; import DropdownAutoCompleteMenu from 'app/components/dropdownAutoCompleteMenu'; describe('DropdownAutoCompleteMenu', function() { const routerContext = TestStubs.routerContext(); const items = [ { value: 'apple', label:
Apple
, }, { value: 'bacon', label:
Bacon
, }, { value: 'corn', label:
Corn
, }, ]; it('renders without a group', function() { const wrapper = mount( {() => 'Click Me!'} , routerContext ); expect(wrapper).toMatchSnapshot(); }); it('renders with a group', function() { const wrapper = mount( New Zealand, }, { value: 'australia', label:
Australia
, }, ], }, ]} > {() => 'Click Me!'}
, routerContext ); expect(wrapper).toMatchSnapshot(); }); it('selects', function() { const mock = jest.fn(); const wrapper = mount( New Zealand, }, { value: 'australia', label:
Australia
, }, ], }, ]} > {({selectedItem}) => (selectedItem ? selectedItem.label : 'Click me!')}
, routerContext ); wrapper .find('AutoCompleteItem') .last() .simulate('click'); expect(mock).toMatchSnapshot(); }); it('shows empty message when there are no items', function() { const wrapper = mount( {({selectedItem}) => (selectedItem ? selectedItem.label : 'Click me!')} , routerContext ); expect(wrapper.find('EmptyMessage')).toHaveLength(1); expect(wrapper.find('EmptyMessage').text()).toBe('No items!'); // No input because there are no items expect(wrapper.find('StyledInput')).toHaveLength(0); }); it('shows default empty results message when there are no items found in search', function() { const wrapper = mount( {({selectedItem}) => (selectedItem ? selectedItem.label : 'Click me!')} , routerContext ); wrapper.find('StyledInput').simulate('change', {target: {value: 'U-S-A'}}); expect(wrapper.find('EmptyMessage')).toHaveLength(1); expect(wrapper.find('EmptyMessage').text()).toBe('No items! found'); }); it('overrides default empty results message', function() { const wrapper = mount( {({selectedItem}) => (selectedItem ? selectedItem.label : 'Click me!')} , routerContext ); wrapper.find('StyledInput').simulate('change', {target: {value: 'U-S-A'}}); expect(wrapper.find('EmptyMessage').text()).toBe('No search results'); }); it('hides filter with `hideInput` prop', function() { const wrapper = mount( {() => 'Click Me!'} , routerContext ); expect(wrapper.find('StyledInput')).toHaveLength(0); }); it('filters using a value from prop instead of input', function() { const wrapper = mount( {() => 'Click Me!'} , routerContext ); wrapper.find('StyledInput').simulate('change', {target: {value: 'U-S-A'}}); expect(wrapper.find('EmptyMessage')).toHaveLength(0); expect(wrapper.find('AutoCompleteItem')).toHaveLength(1); expect(wrapper.find('AutoCompleteItem').text()).toBe('Apple'); }); });