@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
239 lines (236 loc) • 9.31 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _react = _interopRequireDefault(require("react"));
var _testUtils = require("react-dom/test-utils");
var _enzyme = require("enzyme");
var _IdeFilter = require("../IdeFilter");
var _options = require("./__fixtures__/options");
var _iconsReact = require("@carbon/icons-react");
//
// 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.
//
describe('IdeFilter', function () {
it('Renders as expected', function () {
var wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _options.untypedOptions,
onChange: function onChange() {},
value: [{
label: _options.options[0].options[0].label,
value: _options.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _options.options,
menuIsOpen: true,
onChange: changeSpy
}));
(0, _testUtils.act)(function () {
return wrapper.find('.ide-filter__option').at(0).props().onClick();
});
expect(changeSpy).toHaveBeenCalledWith([_options.options[0].options[0]], {
action: 'select-option',
name: undefined,
option: _options.options[0].options[0]
});
});
it('Triggers on input change', function () {
var changeSpy = jest.fn();
var inputChangeSpy = jest.fn();
var wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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"');
(0, _testUtils.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
onChange: function onChange() {},
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
onChange: function onChange() {},
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
onChange: function onChange() {},
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
onChange: function onChange() {},
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _options.options,
light: true,
onChange: function onChange() {},
placeholderText: "Search...",
searchIcon: function searchIcon(_ref) {
var className = _ref.className;
return /*#__PURE__*/_react.default.createElement("span", {
className: "custom-icon"
}, /*#__PURE__*/_react.default.createElement(_iconsReact.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_IdeFilter.IdeFilter, {
options: _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);
});
});