-
Notifications
You must be signed in to change notification settings - Fork 0
/
dropdown.test.jsx
62 lines (52 loc) · 2.16 KB
/
dropdown.test.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React from 'react';
import {mount, shallow} from 'enzyme';
import Dropdown from './index';
const items = [
{
title: 'Apples',
id: 'item1',
}, {
title: 'Rainbows',
id: 'item2',
disabled: true,
}, {
title: 'Ocean',
id: 'item3',
},
];
jest.mock('uuid', () => ({ v4: () => 1 }));
describe('Dropdown component', () => {
test('Matches the snapshot', () => {
const wrapper = shallow(<Dropdown header="Menu header" items={items} />);
expect(wrapper).toMatchSnapshot();
});
test('Sets pre-selected value', () => {
const wrapper = shallow(<Dropdown header="Menu header" selectedItem={{ title: 'Ocean', id: 'item3' }} items={items} />);
expect(wrapper.find('.dropdown-interactive-area').find('button').text()).toEqual('Ocean');
});
test('Searchable dropdown', () => {
const wrapper = shallow(<Dropdown header="Menu header" searchable items={items} placeholder="Search and select" />);
expect(wrapper.find('.dropdown-interactive-area').find('input').props().disabled).toEqual(false);
});
test('Change classname to open on click', () => {
const wrapper = shallow(<Dropdown header="Menu header" items={items} />);
wrapper.find('button').first().simulate('click');
expect(wrapper.find('button').first().hasClass('focused')).toEqual(true);
expect(wrapper.exists('.list-of-options')).toEqual(true);
});
test('Choose first item', () => {
const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
wrapper.find('.list-of-options').find('li').first().simulate('click');
expect(wrapper.find('.dropdown-interactive-area').find('button').text()).toEqual('Apples');
});
test('Verify disabled item', () => {
const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
expect(wrapper.find('.list-of-options').find('li').find({ id: 'item2' }).hasClass('disabled')).toBe(true);
});
test('Triggers filter function on search', () => {
const wrapper = shallow(<Dropdown searchField searchable items={items} open />);
expect(wrapper.find('.option-list-element')).toHaveLength(3);
wrapper.find('input').simulate('change', {target: {value: 'oc'}});
expect(wrapper.find('.option-list-element')).toHaveLength(1);
});
});