import React from 'react'; import { mount } from 'enzyme'; // eslint-disable-next-line import/no-unresolved import Form from '../../form'; import Input from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; describe('Input', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); afterEach(() => { errorSpy.mockReset(); }); afterAll(() => { errorSpy.mockRestore(); }); focusTest(Input); mountTest(Input); mountTest(Input.Group); rtlTest(Input); rtlTest(Input.Group); it('should support maxLength', () => { const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); it('select()', () => { const wrapper = mount(); wrapper.instance().select(); }); it('should support size', () => { const wrapper = mount(); expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true); expect(wrapper.render()).toMatchSnapshot(); }); it('should support size in form', () => { const wrapper = mount(
, ); expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true); expect(wrapper.render()).toMatchSnapshot(); }); describe('focus trigger warning', () => { it('not trigger', () => { const wrapper = mount(); wrapper.find('input').instance().focus(); wrapper.setProps({ suffix: 'light', }); expect(errorSpy).not.toHaveBeenCalled(); }); it('trigger warning', () => { const wrapper = mount(, { attachTo: document.body }); wrapper.find('input').instance().focus(); wrapper.setProps({ suffix: 'light', }); expect(errorSpy).toHaveBeenCalledWith( 'Warning: [antd: Input] When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ', ); wrapper.unmount(); }); }); it('set mouse cursor position', () => { const defaultValue = '11111'; const valLength = defaultValue.length; const wrapper = mount(); wrapper.instance().setSelectionRange(valLength, valLength); expect(wrapper.instance().input.selectionStart).toEqual(5); expect(wrapper.instance().input.selectionEnd).toEqual(5); }); }); describe('prefix and suffix', () => { it('should support className when has suffix', () => { const wrapper = mount(); expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true); expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false); }); it('should support className when has prefix', () => { const wrapper = mount(); expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true); expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false); }); }); describe('As Form Control', () => { it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => { const Demo = () => { const [form] = Form.useForm(); const reset = () => { form.resetFields(); }; return (
); }; const wrapper = mount(); wrapper.find('input').simulate('change', { target: { value: '111' } }); wrapper.find('textarea').simulate('change', { target: { value: '222' } }); expect(wrapper.find('input').prop('value')).toBe('111'); expect(wrapper.find('textarea').prop('value')).toBe('222'); wrapper.find('button').simulate('click'); expect(wrapper.find('input').prop('value')).toBe(''); expect(wrapper.find('textarea').prop('value')).toBe(''); }); }); describe('Input allowClear', () => { it('should change type when click', () => { const wrapper = mount(); wrapper.find('input').simulate('change', { target: { value: '111' } }); expect(wrapper.find('input').getDOMNode().value).toEqual('111'); expect(wrapper.render()).toMatchSnapshot(); wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.find('input').getDOMNode().value).toEqual(''); }); it('should not show icon if value is undefined, null or empty string', () => { const wrappers = [null, undefined, ''].map(val => mount()); wrappers.forEach(wrapper => { expect(wrapper.find('input').getDOMNode().value).toEqual(''); expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy(); expect(wrapper.render()).toMatchSnapshot(); }); }); it('should not show icon if defaultValue is undefined, null or empty string', () => { const wrappers = [null, undefined, ''].map(val => mount(), ); wrappers.forEach(wrapper => { expect(wrapper.find('input').getDOMNode().value).toEqual(''); expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy(); expect(wrapper.render()).toMatchSnapshot(); }); }); it('should trigger event correctly', () => { let argumentEventObject; let argumentEventObjectValue; const onChange = e => { argumentEventObject = e; argumentEventObjectValue = e.target.value; }; const wrapper = mount(); wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); expect(argumentEventObject.type).toBe('click'); expect(argumentEventObjectValue).toBe(''); expect(wrapper.find('input').at(0).getDOMNode().value).toBe(''); }); it('should trigger event correctly on controlled mode', () => { let argumentEventObject; let argumentEventObjectValue; const onChange = e => { argumentEventObject = e; argumentEventObjectValue = e.target.value; }; const wrapper = mount(); wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); expect(argumentEventObject.type).toBe('click'); expect(argumentEventObjectValue).toBe(''); expect(wrapper.find('input').at(0).getDOMNode().value).toBe('111'); }); it('should focus input after clear', () => { const wrapper = mount(, { attachTo: document.body }); wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode()); wrapper.unmount(); }); ['disabled', 'readOnly'].forEach(prop => { it(`should not support allowClear when it is ${prop}`, () => { const wrapper = mount(); expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy(); }); }); // https://github.com/ant-design/ant-design/issues/27444 it('should support className', () => { const wrapper = mount(); expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true); expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false); }); // https://github.com/ant-design/ant-design/issues/31200 it('should not lost focus when clear input', () => { const onBlur = jest.fn(); const wrapper = mount(, { attachTo: document.body, }); wrapper.find('input').getDOMNode().focus(); wrapper.find('.ant-input-clear-icon').at(0).simulate('mouseDown'); wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); wrapper.find('.ant-input-clear-icon').at(0).simulate('mouseUp'); wrapper.find('.ant-input-clear-icon').at(0).simulate('focus'); wrapper.find('.ant-input-clear-icon').at(0).getDOMNode().click(); expect(onBlur).not.toBeCalled(); wrapper.unmount(); }); });