@shopgate/pwa-common/components/Input/spec.js

Common library for the Shopgate Connect PWA.

import React from'react';import{mount,shallow}from'enzyme';import Input from"./index";describe('<Input />',function(){it('should render a simple input field',function(){var wrapper=mount(React.createElement(Input,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input').length).toBe(1);});it('should render the input as password',function(){var wrapper=mount(React.createElement(Input,{password:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[type="password"]').length).toBe(1);});it('should render the input with a default value',function(){var wrapper=mount(React.createElement(Input,{value:"FooBar"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('input[value="FooBar"]').length).toBe(1);});it('should trigger the onChange callback',function(){var onChangeMock=jest.fn();var wrapper=mount(React.createElement(Input,{onChange:onChangeMock}));wrapper.find('input').simulate('change',{target:{value:'a'}});expect(onChangeMock).toHaveBeenCalledTimes(2);expect(wrapper.find('input').props().value).toEqual('a');});it('should receive the correct value while typing',function(){var wrapper=mount(React.createElement(Input,null));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');});it('should sanitize the input',function(){var wrapper=mount(React.createElement(Input,{onSanitize:function onSanitize(value){return value.toUpperCase();}}));var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('FOOBAR');});it('should validate the input',function(){var wrapper=mount(React.createElement(Input,{onValidate:function onValidate(){return false;}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().isValid).toBe(false);});it('should focus the input',function(){var onFocusMock=jest.fn();var wrapper=mount(React.createElement(Input,{onFocusChange:onFocusMock}));var input=wrapper.find('input');expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);input.simulate('focus');expect(wrapper.find('SimpleInput').instance().isFocused).toBe(true);input.simulate('blur');expect(wrapper.find('SimpleInput').instance().isFocused).toBe(false);});it('should change the value on user input',function(){var wrapper=mount(React.createElement(Input,{value:"My initial value"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('SimpleInput').instance().value).toBe('My initial value');var input=wrapper.find('input');input.simulate('change',{target:{value:'foobar'}});expect(wrapper.find('SimpleInput').instance().value).toBe('foobar');});it('should render a multiline input with empty content and react on change',function(){var multiLineValue="dfsdsdf\n    sdfdsff\n    dsf";var wrapper=mount(React.createElement(Input,{value:"",multiLine:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('MultiLineInput').instance().value).toEqual('');wrapper.setProps({value:multiLineValue});expect(wrapper.find('textarea').getDOMNode().innerHTML).toEqual(multiLineValue);});it('should render additional html attributes',function(){var wrapper=shallow(React.createElement(Input,{type:"date",attributes:{min:'1970-01-01',max:'2010-01-01'}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.prop('min')).toEqual('1970-01-01');expect(wrapper.prop('max')).toEqual('2010-01-01');});});