/** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ /* eslint-disable no-unused-expressions */ import React from 'react'; import sinon from 'sinon'; import { shallow } from 'enzyme'; import { Select, OnPasteSelect, CreatableSelect } from 'src/components/Select'; const defaultProps = { onChange: sinon.spy(), isMulti: true, isValidNewOption: sinon.spy(s => !!s.label), value: [], options: [ { value: 'United States', label: 'United States' }, { value: 'China', label: 'China' }, { value: 'India', label: 'India' }, { value: 'Canada', label: 'Canada' }, { value: 'Russian Federation', label: 'Russian Federation' }, { value: 'Japan', label: 'Japan' }, { value: 'Mexico', label: 'Mexico' }, ], }; const defaultEvt = { preventDefault: sinon.spy(), clipboardData: { getData: sinon.spy(() => ' United States, China , India, Canada, '), }, }; describe('OnPasteSelect', () => { let wrapper; let props; let evt; let expected; beforeEach(() => { props = { ...defaultProps }; wrapper = shallow(); evt = { ...defaultEvt }; }); it('renders the supplied selectWrap component', () => { const select = wrapper.findWhere(x => x.type() === Select); expect(select).toHaveLength(1); }); it('renders custom selectWrap components', () => { props.selectWrap = CreatableSelect; wrapper = shallow(); expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength( 1, ); }); describe('onPaste', () => { it('calls onChange with pasted comma separated values', () => { wrapper.instance().onPaste(evt); expected = props.options.slice(0, 4); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(5); }); it('calls onChange with pasted new line separated values', () => { evt.clipboardData.getData = sinon.spy( () => 'United States\nChina\nRussian Federation\nIndia', ); wrapper.instance().onPaste(evt); expected = [ props.options[0], props.options[1], props.options[4], props.options[2], ]; expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(9); }); it('calls onChange with pasted tab separated values', () => { evt.clipboardData.getData = sinon.spy( () => 'Russian Federation\tMexico\tIndia\tCanada', ); wrapper.instance().onPaste(evt); expected = [ props.options[4], props.options[6], props.options[2], props.options[3], ]; expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(13); }); it('calls onChange without duplicate values and adds new comma separated values', () => { evt.clipboardData.getData = sinon.spy( () => 'China, China, China, China, Mexico, Mexico, Chi na, Mexico, ', ); expected = [ props.options[1], props.options[6], { label: 'Chi na', value: 'Chi na' }, ]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(17); expect(props.options[0].value).toBe(expected[2].value); props.options.splice(0, 1); }); it('calls onChange without duplicate values and parses new line separated values', () => { evt.clipboardData.getData = sinon.spy( () => 'United States\nCanada\nMexico\nUnited States\nCanada', ); expected = [props.options[0], props.options[3], props.options[6]]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(20); }); it('calls onChange without duplicate values and parses tab separated values', () => { evt.clipboardData.getData = sinon.spy( () => 'China\tIndia\tChina\tRussian Federation\tJapan\tJapan', ); expected = [ props.options[1], props.options[2], props.options[4], props.options[5], ]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(24); }); it('calls onChange with currently selected values and new comma separated values', () => { props.value = ['United States', 'Canada', 'Mexico']; evt.clipboardData.getData = sinon.spy( () => 'United States, Canada, Japan, India', ); wrapper = shallow(); expected = [ props.options[0], props.options[3], props.options[6], props.options[5], props.options[2], ]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(26); }); it('calls onChange with currently selected values and new "new line" separated values', () => { props.value = ['China', 'India', 'Japan']; evt.clipboardData.getData = sinon.spy(() => 'Mexico\nJapan\nIndia'); wrapper = shallow(); expected = [ props.options[1], props.options[2], props.options[5], props.options[6], ]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(27); }); it('calls onChange with currently selected values and new tab separated values', () => { props.value = ['United States', 'Canada', 'Mexico', 'Russian Federation']; evt.clipboardData.getData = sinon.spy( () => 'United States\tCanada\tJapan\tIndia', ); wrapper = shallow(); expected = [ props.options[0], props.options[3], props.options[6], props.options[4], props.options[5], props.options[2], ]; wrapper.instance().onPaste(evt); expect(props.onChange.calledWith(expected)).toBe(true); expect(evt.preventDefault.called).toBe(true); expect(props.isValidNewOption.callCount).toBe(29); }); }); });