import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import Button from '../../button'; import type { InputRef } from '../Input'; import Search from '../Search'; describe('Input.Search', () => { focusTest(Search, { refFocus: true }); mountTest(Search); rtlTest(Search); it('should support custom button', () => { const { asFragment } = render(ok} />); expect(asFragment().firstChild).toMatchSnapshot(); }); it('should support custom Button', () => { const { asFragment } = render(ok} />); expect(asFragment().firstChild).toMatchSnapshot(); }); it('should support enterButton null', () => { expect(() => { render(); }).not.toThrow(); }); it('should support ReactNode suffix without error', () => { const { asFragment } = render(ok} />); expect(asFragment().firstChild).toMatchSnapshot(); }); it('should disable enter button when disabled prop is true', () => { const { container } = render(); expect(container.querySelectorAll('.ant-btn-primary[disabled]')).toHaveLength(1); }); it('should disable search icon when disabled prop is true', () => { const onSearch = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(0); }); it('should trigger onSearch when click search icon', () => { const onSearch = jest.fn(); const { container } = render(); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button', () => { const onSearch = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button with text', () => { const onSearch = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button with customize button', () => { const onSearch = jest.fn(); const { container } = render( antd button} onSearch={onSearch} />, ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); it('should trigger onSearch when click search button of native', () => { const onSearch = jest.fn(); const onButtonClick = jest.fn(); const { container } = render( antd button } onSearch={onSearch} />, ); fireEvent.click(container.querySelector('button')!); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); expect(onButtonClick).toHaveBeenCalledTimes(1); }); it('should trigger onSearch when press enter', () => { const onSearch = jest.fn(); const { container } = render(); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); // https://github.com/ant-design/ant-design/issues/34844 it('should not trigger onSearch when press enter using chinese inputting method', () => { const onSearch = jest.fn(); const { container } = render(); fireEvent.compositionStart(container.querySelector('input')!); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).not.toHaveBeenCalled(); fireEvent.compositionEnd(container.querySelector('input')!); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith('search text', expect.anything(), { source: 'input' }); }); // https://github.com/ant-design/ant-design/issues/14785 it('should support addonAfter', () => { const addonAfter = Addon After; const { asFragment } = render(); const { asFragment: asFragmentWithEnterButton } = render( , ); expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/18729 it('should trigger onSearch when click clear icon', () => { const onSearch = jest.fn(); const onChange = jest.fn(); const { container } = render( , ); fireEvent.click(container.querySelector('.ant-input-clear-icon')!); expect(onSearch).toHaveBeenLastCalledWith('', expect.anything(), { source: 'clear' }); expect(onChange).toHaveBeenCalled(); }); it('should support loading', () => { const { asFragment } = render(); const { asFragment: asFragmentWithEnterButton } = render(); expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot(); }); it('should not trigger onSearch when press enter while loading', () => { const onSearch = jest.fn(); const { container } = render(); fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 }); expect(onSearch).not.toHaveBeenCalled(); }); it('should support addonAfter and suffix for loading', () => { const { asFragment } = render(); const { asFragment: asFragmentWithEnterButton } = render( , ); expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot(); }); it('should support invalid suffix', () => { const { asFragment } = render(); expect(asFragment().firstChild).toMatchSnapshot(); }); it('should support invalid addonAfter', () => { const { asFragment } = render(); expect(asFragment().firstChild).toMatchSnapshot(); }); it('should prevent search button mousedown event', () => { const ref = React.createRef(); const { container } = render(, { container: document.body, }); ref.current?.focus(); expect(document.activeElement).toBe(container.querySelector('input')); fireEvent.mouseDown(container.querySelector('button')!); expect(document.activeElement).toBe(container.querySelector('input')); }); it('not crash when use function ref', () => { const ref = jest.fn(); const { container } = render(); expect(() => { fireEvent.mouseDown(container.querySelector('button')!); }).not.toThrow(); }); // https://github.com/ant-design/ant-design/issues/27258 it('Search with allowClear should have one className only', () => { const { container } = render(); expect( container.querySelector('.ant-input-group-wrapper')?.classList.contains('className'), ).toBe(true); expect( container.querySelector('.ant-input-affix-wrapper')?.classList.contains('className'), ).toBe(false); }); });