2019-09-07 10:20:47 +00:00
|
|
|
import React from 'react';
|
2019-09-12 12:22:41 +00:00
|
|
|
import { mount, shallow } from 'enzyme';
|
2019-09-07 10:20:47 +00:00
|
|
|
import ComboBox from '.';
|
2019-09-09 06:48:30 +00:00
|
|
|
import DropDownItem from '../drop-down-item';
|
2019-09-07 10:20:47 +00:00
|
|
|
|
2019-09-12 12:22:41 +00:00
|
|
|
const baseOptions = [
|
|
|
|
{
|
|
|
|
key: 0,
|
|
|
|
label: "Select"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 1,
|
|
|
|
label: "Select"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 2,
|
|
|
|
label: "Select"
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
const advancedOptions = (
|
|
|
|
<>
|
|
|
|
<DropDownItem>
|
|
|
|
<span>Some text</span>
|
|
|
|
</DropDownItem>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
const baseProps = {
|
|
|
|
noBorder: false,
|
|
|
|
isDisabled: false,
|
|
|
|
selectedOption: {
|
|
|
|
key: 0,
|
2019-09-19 06:14:36 +00:00
|
|
|
icon: 'CatalogFolderIcon',
|
2019-09-12 12:22:41 +00:00
|
|
|
label: "Select"
|
|
|
|
},
|
|
|
|
options: baseOptions,
|
|
|
|
opened: false,
|
|
|
|
onSelect: () => jest.fn(),
|
|
|
|
size: 'base',
|
|
|
|
scaled: true
|
|
|
|
};
|
|
|
|
|
2019-09-07 10:20:47 +00:00
|
|
|
describe('<ComboBox />', () => {
|
2019-09-19 12:00:01 +00:00
|
|
|
it('rendered without error', () => {
|
2019-09-12 12:22:41 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<ComboBox {...baseProps} />
|
2019-09-09 06:48:30 +00:00
|
|
|
);
|
|
|
|
|
2019-09-12 12:22:41 +00:00
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('with advanced options', () => {
|
2019-09-07 10:20:47 +00:00
|
|
|
const wrapper = mount(
|
2019-09-12 12:22:41 +00:00
|
|
|
<ComboBox {...baseProps} options={[]} advancedOptions={advancedOptions} />
|
2019-09-07 10:20:47 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
2019-09-12 12:22:41 +00:00
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('disabled', () => {
|
2019-09-12 12:22:41 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} isDisabled={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('isDisabled')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('without borders', () => {
|
2019-09-19 06:14:36 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} noBorder={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('noBorder')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('opened', () => {
|
2019-09-19 06:14:36 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} opened={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('opened')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('with DropDown max height', () => {
|
2019-09-19 06:22:22 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} dropDownMaxHeight={200} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('dropDownMaxHeight')).toEqual(200);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('without scaled', () => {
|
2019-09-19 06:14:36 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={false} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('scaled')).toEqual(false);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('scaled', () => {
|
2019-09-19 06:14:36 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('scaled')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('scaled options', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaledOptions={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop('scaledOptions')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('middle size options', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={false} size='middle' />);
|
2019-09-19 06:14:36 +00:00
|
|
|
|
|
|
|
expect(wrapper.prop('size')).toEqual('middle');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('big size options', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={false} size='big' />);
|
2019-09-19 06:14:36 +00:00
|
|
|
|
|
|
|
expect(wrapper.prop('size')).toEqual('big');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('huge size options', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={false} size='huge' />);
|
2019-09-19 06:14:36 +00:00
|
|
|
|
|
|
|
expect(wrapper.prop('size')).toEqual('huge');
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('by content size options', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} scaled={false} size='content' />);
|
2019-09-19 06:14:36 +00:00
|
|
|
|
|
|
|
expect(wrapper.prop('size')).toEqual('content');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('with children node', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} ><div>demo</div></ComboBox>);
|
|
|
|
|
|
|
|
expect(wrapper.contains(<div>demo</div>)).toBe(true)
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('not re-render', () => {
|
2019-09-12 12:22:41 +00:00
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} />).instance();
|
|
|
|
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props, wrapper.state);
|
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('re-render', () => {
|
2019-09-12 12:22:41 +00:00
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} />).instance();
|
|
|
|
|
2019-09-19 10:45:18 +00:00
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate({ opened: true }, wrapper.state);
|
2019-09-12 12:22:41 +00:00
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
2019-09-19 10:45:18 +00:00
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('causes function comboBoxClick() with disabled prop', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} isDisabled={true} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.comboBoxClick();
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('causes function comboBoxClick()', () => {
|
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} />);
|
2019-09-19 10:45:18 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.comboBoxClick();
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('causes function optionClick()', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const onSelect = jest.fn();
|
|
|
|
const selectedOption = {
|
|
|
|
key: 1,
|
|
|
|
label: "Select"
|
|
|
|
};
|
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} opened={true} onSelect={onSelect} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.optionClick(selectedOption);
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
expect(onSelect).toHaveBeenCalledWith(selectedOption);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('causes function stopAction()', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.stopAction(new Event('click'));
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('causes function handleClick() with opened prop', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} opened={true} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.handleClick(new Event('click'));
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('causes function handleClick()', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.handleClick(new Event('click'));
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('causes function handleClick() with simulate', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} opened={true} />);
|
|
|
|
|
|
|
|
wrapper.simulate('click');
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('causes function handleClick() with simulate and ComboBox not opened', () => {
|
2019-09-19 10:45:18 +00:00
|
|
|
const wrapper = mount(<ComboBox {...baseProps} />);
|
|
|
|
|
|
|
|
wrapper.simulate('click');
|
|
|
|
|
|
|
|
expect(wrapper.state('isOpen')).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
it('componentDidUpdate() state lifecycle test', () => {
|
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
wrapper.setState({ isOpen: false });
|
|
|
|
|
|
|
|
instance.componentDidUpdate(wrapper.props(), wrapper.state());
|
|
|
|
|
|
|
|
expect(wrapper.state()).toBe(wrapper.state());
|
|
|
|
});
|
|
|
|
|
|
|
|
it('componentDidUpdate() props lifecycle test', () => {
|
|
|
|
const wrapper = shallow(<ComboBox {...baseProps} />);
|
2019-09-19 10:45:18 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
instance.componentDidUpdate({
|
|
|
|
opened: true,
|
|
|
|
selectedOption: {
|
|
|
|
key: 1,
|
|
|
|
label: "Select"
|
|
|
|
}
|
|
|
|
}, wrapper.state());
|
2019-09-19 10:45:18 +00:00
|
|
|
|
2019-09-19 12:00:01 +00:00
|
|
|
expect(wrapper.props()).toBe(wrapper.props());
|
2019-09-19 10:45:18 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('componentWillUnmount() lifecycle test', () => {
|
|
|
|
const wrapper = mount(<ComboBox {...baseProps} opened={true} />);
|
|
|
|
const componentWillUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
|
|
|
|
|
|
|
|
wrapper.unmount();
|
|
|
|
expect(componentWillUnmount).toHaveBeenCalled();
|
|
|
|
});
|
2019-09-07 10:20:47 +00:00
|
|
|
});
|