import React, { useState } from 'react';
import { createPortal } from 'react-dom';
import { fireEvent, render } from '../../../tests/utils';
// eslint-disable-next-line import/no-unresolved
import type { InputProps, InputRef } from '..';
import Input from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { resetWarned } from '../../_util/warning';
import Form from '../../form';
import { triggerFocus } from '../Input';
describe('Input', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
mountTest(Input);
mountTest(Input.Group);
rtlTest(Input);
rtlTest(Input.Group);
it('should support maxLength', () => {
const { asFragment } = render();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('select()', () => {
const ref = React.createRef();
render();
ref.current?.select();
});
it('should support size', () => {
const { asFragment, container } = render();
expect(container.querySelector('input')?.classList.contains('ant-input-lg')).toBe(true);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support size in form', () => {
const { asFragment, container } = render(
,
);
expect(container.querySelector('input')?.classList.contains('ant-input-lg')).toBe(true);
expect(asFragment().firstChild).toMatchSnapshot();
});
describe('focus trigger warning', () => {
it('not trigger', () => {
const { container, rerender } = render();
fireEvent.focus(container.querySelector('input')!);
rerender();
expect(errorSpy).not.toHaveBeenCalled();
});
it('trigger warning', () => {
const { container, rerender, unmount } = render();
container.querySelector('input')?.focus();
rerender();
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',
);
unmount();
});
});
describe('click focus', () => {
it('click outside should also get focus', () => {
const { container } = render(} />);
const onFocus = jest.spyOn(container.querySelector('input')!, 'focus');
fireEvent.click(container.querySelector('.test-suffix')!);
expect(onFocus).toHaveBeenCalled();
});
it('not get focus if out of component', () => {
const holder = document.createElement('span');
document.body.appendChild(holder);
const Popup = () => createPortal(, holder);
const { container } = render(
}
/>,
);
const onFocus = jest.spyOn(container.querySelector('input')!, 'focus');
fireEvent.mouseDown(document.querySelector('.popup')!);
fireEvent.mouseUp(document.querySelector('.popup')!);
expect(onFocus).not.toHaveBeenCalled();
document.body.removeChild(holder);
});
});
it('set mouse cursor position', () => {
const defaultValue = '11111';
const valLength = defaultValue.length;
const ref = React.createRef();
const { container } = render();
ref.current?.setSelectionRange(valLength, valLength);
expect(container.querySelector('input')?.selectionStart).toEqual(5);
expect(container.querySelector('input')?.selectionEnd).toEqual(5);
});
it('warning for Input.Group', () => {
resetWarned();
render();
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.",
);
});
});
describe('prefix and suffix', () => {
it('should support className when has suffix', () => {
const { container } = render();
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
it('should support className when has prefix', () => {
const { container } = render();
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
});
it('should support hidden when has prefix or suffix', () => {
const { container } = render(
<>
>,
);
expect(container.querySelector('.prefix-with-hidden')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.suffix-with-hidden')?.getAttribute('hidden')).toBe('');
});
});
describe('Input setting hidden', () => {
it('should support hidden when has prefix or suffix or showCount or allowClear or addonBefore or addonAfter', () => {
const { container } = render(
<>
>,
);
expect(container.querySelector('.input')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-search')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-textarea')?.getAttribute('hidden')).toBe('');
expect(container.querySelector('.input-password')?.getAttribute('hidden')).toBe('');
});
});
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 { container } = render();
fireEvent.change(container.querySelector('input')!, { target: { value: '111' } });
fireEvent.change(container.querySelector('textarea')!, { target: { value: '222' } });
expect(container.querySelector('input')?.value).toBe('111');
expect(container.querySelector('textarea')?.value).toBe('222');
fireEvent.click(container.querySelector('button')!);
expect(container.querySelector('input')?.value).toBe('');
expect(container.querySelector('textarea')?.value).toBe('');
});
});
describe('should support showCount', () => {
it('maxLength', () => {
const { container } = render();
expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5 / 5');
});
it('control exceed maxLength', () => {
const { container } = render();
expect(container.querySelector('input')?.getAttribute('value')).toBe('12345678');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('8 / 5');
});
describe('emoji', () => {
it('should minimize value between emoji length and maxLength', () => {
const { container } = render();
expect(container.querySelector('input')?.getAttribute('value')).toBe('👀');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 1');
const { container: container1 } = render();
expect(container1.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 2');
});
it('slice emoji', () => {
const { container } = render();
expect(container.querySelector('input')?.getAttribute('value')).toBe('1234😂');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5 / 5');
});
});
it('count formatter', () => {
const { container } = render(
`${value}, ${count}, ${maxLength}`,
}}
value="12345"
/>,
);
expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
});
});
describe('Input allowClear', () => {
it('should change type when click', () => {
const { asFragment, container } = render();
fireEvent.change(container.querySelector('input')!, { target: { value: '111' } });
expect(container.querySelector('input')?.value).toEqual('111');
expect(asFragment().firstChild).toMatchSnapshot();
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(asFragment().firstChild).toMatchSnapshot();
expect(container.querySelector('input')?.value).toEqual('');
});
it('should not show icon if value is undefined, null or empty string', () => {
// @ts-ignore
const wrappers = [null, undefined, ''].map((val) => render());
wrappers.forEach(({ asFragment, container }) => {
expect(container.querySelector('input')?.value).toEqual('');
expect(container.querySelector('.ant-input-clear-icon-hidden')).toBeTruthy();
expect(asFragment().firstChild).toMatchSnapshot();
});
});
it('should not show icon if defaultValue is undefined, null or empty string', () => {
const wrappers = [null, undefined, ''].map((val) =>
// @ts-ignore
render(),
);
wrappers.forEach(({ asFragment, container }) => {
expect(container.querySelector('input')?.value).toEqual('');
expect(container.querySelector('.ant-input-clear-icon-hidden')).toBeTruthy();
expect(asFragment().firstChild).toMatchSnapshot();
});
});
it('should trigger event correctly', () => {
let argumentEventObjectType;
let argumentEventObjectValue;
const onChange: InputProps['onChange'] = (e) => {
argumentEventObjectType = e.type;
argumentEventObjectValue = e.target.value;
};
const { container } = render();
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(argumentEventObjectType).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(container.querySelector('input')?.value).toBe('');
});
it('should trigger event correctly on controlled mode', () => {
let argumentEventObjectType;
let argumentEventObjectValue;
const onChange: InputProps['onChange'] = (e) => {
argumentEventObjectType = e.type;
argumentEventObjectValue = e.target.value;
};
const { container } = render();
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(argumentEventObjectType).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(container.querySelector('input')?.value).toBe('111');
});
it('should focus input after clear', () => {
const { container, unmount } = render(, {
container: document.body,
});
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(document.activeElement).toBe(container.querySelector('input'));
unmount();
});
['disabled', 'readOnly'].forEach((prop) => {
it(`should not support allowClear when it is ${prop}`, () => {
const { container } = render();
expect(container.querySelector('.ant-input-clear-icon-hidden')).toBeTruthy();
});
});
// https://github.com/ant-design/ant-design/issues/27444
it('should support className', () => {
const { container } = render();
expect((container.firstChild as Element).className.includes('my-class-name')).toBe(true);
expect(container.querySelector('input')?.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 { container, unmount } = render(
,
{
container: document.body,
},
);
container.querySelector('input')?.focus();
fireEvent.mouseDown(container.querySelector('.ant-input-clear-icon')!);
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
fireEvent.mouseUp(container.querySelector('.ant-input-clear-icon')!);
fireEvent.focus(container.querySelector('.ant-input-clear-icon')!);
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(onBlur).not.toHaveBeenCalled();
unmount();
});
// https://github.com/ant-design/ant-design/issues/31927
it('should correctly when useState', () => {
const App: React.FC = () => {
const [query, setQuery] = useState('');
return (
{
setQuery(() => e.target.value);
}}
/>
);
};
const { container, unmount } = render();
container.querySelector('input')?.focus();
fireEvent.change(container.querySelector('input')!, { target: { value: '111' } });
expect(container.querySelector('input')?.value).toEqual('111');
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(container.querySelector('input')?.value).toEqual('');
unmount();
});
it('not crash when value is number', () => {
const { container } = render();
expect(container).toBeTruthy();
});
it('should display boolean value as string', () => {
// @ts-ignore
const { container, rerender } = render();
expect(container.querySelector('input')?.value).toBe('true');
// @ts-ignore
rerender();
expect(container.querySelector('input')?.value).toBe('false');
});
it('should support custom clearIcon', () => {
const { container } = render();
expect(container.querySelector('.ant-input-clear-icon')?.textContent).toBe('clear');
});
it('should support classNames and styles', () => {
const { container } = render(
<>
>,
);
expect(container).toMatchSnapshot();
});
});
describe('typescript types', () => {
it('InputProps type should support data-* attributes', () => {
const props: InputProps = {
value: 123,
// expect no ts error here
'data-testid': 'test-id',
'data-id': '12345',
};
const { container } = render();
const input = container.querySelector('input');
expect(input?.getAttribute('data-testid')).toBe('test-id');
expect(input?.getAttribute('data-id')).toBe('12345');
});
});
describe('triggerFocus', () => {
it('triggerFocus correctly run when element is null', () => {
expect(() => {
triggerFocus();
}).not.toThrow();
});
});