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');
});
});