@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
236 lines (234 loc) • 8.45 kB
JavaScript
//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { IdeFilter } from '../IdeFilter';
import { options, untypedOptions } from './__fixtures__/options';
import { Idea16 } from '@carbon/icons-react';
describe('IdeFilter', function () {
it('Renders as expected', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
light: true,
onChange: function onChange() {},
placeholderText: "Search..."
}));
expect(wrapper).toBeDefined();
expect(wrapper.find('.ide-filter--select').at(0).text()).toBe('Search...');
});
it('Renders options with filter tags by default', function () {
var error = jest.spyOn(console, 'error').mockImplementation(function () {});
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: untypedOptions,
onChange: function onChange() {},
value: [{
label: options[0].options[0].label,
value: options[0].options[0].value
}]
}));
// IdeFilter component does not use filter with buttons because they dont work with the react-select MultiValueRemove
expect(wrapper.find('.ide-filter--tag').at(0).props().type).toEqual('filter');
// Known issue with invalid prop being passed to Tag component
expect(error).toBeCalledWith(expect.stringContaining('Invalid prop `type` of value `filter` supplied to `Tag`'));
error.mockRestore();
});
it('Renders options in menu', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
onChange: function onChange() {}
}));
wrapper.find('input').props().onFocus();
expect(wrapper).toBeDefined();
var optionLabels = wrapper.find('.ide-filter__option').map(function (option) {
return option.text();
});
var expectedOptionLabels = [];
options.forEach(function (category) {
expectedOptionLabels = expectedOptionLabels.concat(category.options.map(function (option) {
return option.label;
}));
});
expectedOptionLabels.forEach(function (expectedOption) {
expect(optionLabels.includes(expectedOption)).toBe(true);
});
});
it('Triggers on change', function () {
var changeSpy = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
onChange: changeSpy
}));
act(function () {
return wrapper.find('.ide-filter__option').at(0).props().onClick();
});
expect(changeSpy).toHaveBeenCalledWith([options[0].options[0]], {
action: 'select-option',
name: undefined,
option: options[0].options[0]
});
});
it('Triggers on input change', function () {
var changeSpy = jest.fn();
var inputChangeSpy = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
onChange: changeSpy,
onInputChange: inputChangeSpy
}));
var input = wrapper.find('input');
input.instance().value = 'my new value';
input.simulate('change');
expect(inputChangeSpy).toHaveBeenCalledWith('my new value', {
action: 'input-change',
prevInputValue: ''
});
});
it('Creates new options', function () {
var changeSpy = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
inputValue: 'something',
onChange: changeSpy
}));
wrapper.find('input').simulate('change', {
target: {
value: 'something'
}
});
expect(wrapper.find('.ide-filter__option').at(0).text()).toEqual('Search for "something"');
act(function () {
return wrapper.find('.ide-filter__option').at(0).props().onClick();
});
var expectedOption = {
label: 'something',
value: 'something',
__plaintext__: true
};
expect(changeSpy).toHaveBeenCalledWith([expectedOption], {
action: 'create-option',
name: undefined,
option: expectedOption
});
});
it('isLoading passed to component', function () {
var isLoading = true;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
isLoading: isLoading,
onChange: function onChange() {}
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().isLoading).toEqual(true);
});
it('isLoading false by default', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
onChange: function onChange() {}
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().isLoading).toEqual(false);
});
it('allowCreateWhileLoading passed to component', function () {
var allowCreateWhileLoading = false;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
onChange: function onChange() {},
options: options,
menuIsOpen: true,
allowCreateWhileLoading: allowCreateWhileLoading
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().allowCreateWhileLoading).toEqual(false);
});
it('allowCreateWhileLoading true by default', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
onChange: function onChange() {},
options: options,
menuIsOpen: true
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().allowCreateWhileLoading).toEqual(true);
});
it('loadingMessage passed to component', function () {
var loadingMessage = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
onChange: function onChange() {},
options: options,
menuIsOpen: true,
loadingMessage: loadingMessage
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().loadingMessage).toBe(loadingMessage);
});
it('searchForText passed to component', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
onChange: function onChange() {},
options: options,
menuIsOpen: true,
searchForText: 'custom text'
}));
var select = wrapper.find('.ide-filter--select').at(0);
expect(select.props().formatCreateLabel()).toContain('custom text');
});
it('Renders custom icon', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
light: true,
onChange: function onChange() {},
placeholderText: "Search...",
searchIcon: function searchIcon(_ref) {
var className = _ref.className;
return /*#__PURE__*/React.createElement("span", {
className: "custom-icon"
}, /*#__PURE__*/React.createElement(Idea16, {
className: className
}));
}
}));
expect(wrapper).toBeDefined();
expect(wrapper.find('svg.ide-filter--search-icon')).toHaveLength(1);
expect(wrapper.find('.custom-icon')).toHaveLength(1);
});
it('Triggers on input change', function () {
var changeSpy = jest.fn();
var inputChangeSpy = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
menuIsOpen: true,
onChange: changeSpy,
onInputChange: inputChangeSpy
}));
var input = wrapper.find('input');
input.instance().value = 'my new value';
input.simulate('change');
expect(inputChangeSpy).toHaveBeenCalledWith('my new value', {
action: 'input-change',
prevInputValue: ''
});
});
it('Can disable creation of plaintext options with allowPlaintext false', function () {
var changeSpy = jest.fn();
var wrapper = mount(/*#__PURE__*/React.createElement(IdeFilter, {
options: options,
inputValue: 'something',
onChange: changeSpy,
allowPlaintext: false
}));
wrapper.find('input').simulate('change', {
target: {
value: 'something'
}
});
// disable searching for custom fields
expect(wrapper.find('.ide-filter__option')).toHaveLength(0);
});
});