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();
});
});