/
customSelect.test.js
143 lines (126 loc) · 5.72 KB
/
customSelect.test.js
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import CustomSelect from './customSelect';
import { findByTestAttr, checkProps } from './../../utils/testUtils';
Enzyme.configure({ adapter: new EnzymeAdapter() });
const defaultProps = {
options: [{'label': 'test', 'value': "1"}, {'label': 'abc', 'value': "2"}],
handleOnSubmit: jest.fn()
};
test('does not throw warning with expected props', () => {
checkProps(CustomSelect, defaultProps);
});
/**
* Factory function to create a ShallowWrapper for the App component.
* @function setup
* @param {object} props - Component props specific to this setup.
* @param {object} state - Initial state for setup.
* @returns {ShallowWrapper}
*/
const setup = (props={}, state=null) => {
const setupProps = { ...defaultProps, ...props };
const wrapper = shallow(<CustomSelect {...setupProps } />);
if (state) wrapper.setState(state);
return wrapper;
}
describe('if props are correctly passed', () => {
let wrapper;
beforeEach(() => {
wrapper = setup();
});
test('renders without error', () => {
const customSelectComponent = findByTestAttr(wrapper, 'component-CustomSelect');
expect(customSelectComponent.length).toBe(1);
});
test('componentDidMount should set state correctly', () => {
const componentInstance = wrapper.instance();
componentInstance.componentDidMount();
const options = wrapper.state('optionsData');
expect(options).toEqual(
expect.arrayContaining([
expect.objectContaining({label: 'test'}),
expect.objectContaining({label: 'abc'})
])
);
});
test('input text box is visible initial', () => {
const customeSelectInput = findByTestAttr(wrapper, 'custom-select-input-box');
expect(customeSelectInput.length).toBe(1);
});
test('options list should not be visisble', () => {
const customeSelectOptionList = findByTestAttr(wrapper, 'custom-select-options-list');
expect(customeSelectOptionList.length).toBe(0);
});
});
describe('select component input text box events', () => {
let wrapper, customSelectInputBox, inputbox;
beforeEach(() => {
wrapper = setup();
customSelectInputBox = findByTestAttr(wrapper, 'custom-select-input-box');
inputbox = customSelectInputBox.shallow();
});
test('show options on focus on text box', () => {
inputbox.simulate('focus');
const customeSelectOptionList = findByTestAttr(wrapper, 'custom-select-options-list');
expect(customeSelectOptionList.length).toBe(1);
});
test('on text box input, update search string', () => {
const matchedOption = [{'label': 'abc', 'value': "2"}];
inputbox.simulate('change', {target: {value: 'abc'} });
const filteredOptions = wrapper.state('filterdOptionData');
expect(matchedOption).toEqual(filteredOptions);
});
});
describe('select component option list events', () => {
test('select option, should update selectedOption state', () => {
const showOption = true;
const wrapper = setup({}, { showOption });
const customSelectOptionList = findByTestAttr(wrapper, 'custom-select-options-list');
const option = [{'label': 'abc', 'value': "2"}];
customSelectOptionList.prop('handleOptionSelection')({target: {value: '2'} });
const selectedOption = wrapper.state('selectedOption');
expect(selectedOption).toEqual(option);
});
test('select option, if option already selected it should remove from ', () => {
const showOption = true;
const selectedOption = [{'label': 'test', 'value': "1"}, {'label': 'abc', 'value': "2"}];
const wrapper = setup({}, { showOption, selectedOption });
const customSelectOptionList = findByTestAttr(wrapper, 'custom-select-options-list');
const option = [{'label': 'test', 'value': "1"}];
customSelectOptionList.prop('handleOptionSelection')({target: {value: '2'} });
const updatedSelectedOption = wrapper.state('selectedOption');
expect(option).toEqual(updatedSelectedOption);
});
});
describe('select component tag list events', () => {
test('removing selected option tag, should update ', () => {
const showOption = true;
const selectedOption = [{'label': 'test', 'value': "1"}, {'label': 'abc', 'value': "2"}];
const wrapper = setup({}, { showOption, selectedOption });
const customSelectTag = findByTestAttr(wrapper, 'customSelect-tag');
customSelectTag.prop('handleTagRemove')('1');
const option = [{'label': 'abc', 'value': "2"}];
const updatedSelectedOption = wrapper.state('selectedOption');
expect(updatedSelectedOption).toEqual(option);
});
});
test('remove selection option on outside click of component', () => {
// const showOption = true;
const wrapper = setup();
// wrapper.instance().handleClickOutside();
// console.info(wrapper.instance());
// console.info(wrapper.getElement().props);
wrapper.getElement().props.onOutsideClick()
// wrapper.simulate('click');
// console.info(wrapper.prop('handleClickOutside')());
// const outsideclick = wrapper.find('customeSelect-outsideclick');
// const { onOutsideClick } = wrapper.instance();
// console.info(onOutsideClick);
// outsideclick.getElement().prop('handleClickOutside')();
// const { onOutsideClick } = outsideclick.instance();
// console.info(onOutsideClick);
// outsideclick.simulate('click');
// expect(document.attachEvent.calledWith('onclick', onOutsideClick)).to.equal(true);
console.info(wrapper.state('showOption'));
});