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( <>