2022-04-17 22:36:36 +08:00
|
|
|
import { fireEvent, render } from '@testing-library/react';
|
2022-06-22 14:57:09 +08:00
|
|
|
import React from 'react';
|
2017-12-01 19:39:32 +08:00
|
|
|
import focusTest from '../../../tests/shared/focusTest';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-06-22 14:57:09 +08:00
|
|
|
import Button from '../../button';
|
2022-09-05 19:41:32 +08:00
|
|
|
import type { InputRef } from '../Input';
|
2022-06-22 14:57:09 +08:00
|
|
|
import Search from '../Search';
|
2017-12-01 19:39:32 +08:00
|
|
|
|
|
|
|
describe('Input.Search', () => {
|
2020-06-12 18:50:36 +08:00
|
|
|
focusTest(Search, { refFocus: true });
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Search);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Search);
|
2018-03-12 20:51:04 +08:00
|
|
|
|
|
|
|
it('should support custom button', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search enterButton={<button type="button">ok</button>} />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2018-03-12 20:51:04 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should support custom Button', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search enterButton={<Button>ok</Button>} />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2018-03-12 20:51:04 +08:00
|
|
|
});
|
2018-04-15 13:14:26 +08:00
|
|
|
|
2020-11-06 10:41:51 +08:00
|
|
|
it('should support enterButton null', () => {
|
|
|
|
expect(() => {
|
2022-06-02 16:28:22 +08:00
|
|
|
render(<Search enterButton={null} />);
|
2020-11-06 10:41:51 +08:00
|
|
|
}).not.toThrow();
|
|
|
|
});
|
|
|
|
|
2018-11-16 20:05:04 +08:00
|
|
|
it('should support ReactNode suffix without error', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search suffix={<div>ok</div>} />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2018-11-16 20:05:04 +08:00
|
|
|
});
|
|
|
|
|
2018-04-15 13:14:26 +08:00
|
|
|
it('should disable enter button when disabled prop is true', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search placeholder="input search text" enterButton disabled />);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-primary[disabled]')).toHaveLength(1);
|
2018-04-15 13:14:26 +08:00
|
|
|
});
|
2018-05-26 16:52:33 +08:00
|
|
|
|
2019-09-19 17:19:22 +08:00
|
|
|
it('should disable search icon when disabled prop is true', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Search defaultValue="search text" onSearch={onSearch} disabled />,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2019-09-19 17:19:22 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(0);
|
|
|
|
});
|
|
|
|
|
2018-05-26 16:52:33 +08:00
|
|
|
it('should trigger onSearch when click search icon', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2018-05-26 16:52:33 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2018-05-26 16:52:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should trigger onSearch when click search button', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Search defaultValue="search text" enterButton onSearch={onSearch} />,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2018-05-26 16:52:33 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2018-05-26 16:52:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should trigger onSearch when click search button with text', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Search defaultValue="search text" enterButton="button text" onSearch={onSearch} />,
|
2018-05-26 16:52:33 +08:00
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2018-05-26 16:52:33 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2018-05-26 16:52:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should trigger onSearch when click search button with customize button', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Search
|
|
|
|
defaultValue="search text"
|
|
|
|
enterButton={<Button>antd button</Button>}
|
|
|
|
onSearch={onSearch}
|
|
|
|
/>,
|
2018-05-26 16:52:33 +08:00
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2018-05-26 16:52:33 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2018-05-26 16:52:33 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should trigger onSearch when click search button of native', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
|
|
|
const onButtonClick = jest.fn();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Search
|
|
|
|
defaultValue="search text"
|
2021-11-24 13:23:51 +08:00
|
|
|
enterButton={
|
|
|
|
<button type="button" onClick={onButtonClick}>
|
|
|
|
antd button
|
|
|
|
</button>
|
|
|
|
}
|
2018-12-07 16:17:45 +08:00
|
|
|
onSearch={onSearch}
|
|
|
|
/>,
|
2018-05-26 16:52:33 +08:00
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('button')!);
|
2018-05-26 16:52:33 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2021-11-24 13:23:51 +08:00
|
|
|
expect(onButtonClick).toHaveBeenCalledTimes(1);
|
2018-05-26 16:52:33 +08:00
|
|
|
});
|
2018-05-26 17:03:07 +08:00
|
|
|
|
|
|
|
it('should trigger onSearch when press enter', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
|
2018-05-26 17:03:07 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2018-05-26 17:03:07 +08:00
|
|
|
});
|
2019-02-12 21:39:36 +08:00
|
|
|
|
2022-04-26 15:00:48 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/34844
|
|
|
|
it('should not trigger onSearch when press enter using chinese inputting method', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.compositionStart(container.querySelector('input')!);
|
|
|
|
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
|
2022-04-26 15:00:48 +08:00
|
|
|
expect(onSearch).not.toHaveBeenCalled();
|
|
|
|
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.compositionEnd(container.querySelector('input')!);
|
|
|
|
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
|
2022-04-26 15:00:48 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
2022-09-05 19:41:32 +08:00
|
|
|
expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
|
2022-04-26 15:00:48 +08:00
|
|
|
});
|
|
|
|
|
2019-02-12 21:39:36 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/14785
|
|
|
|
it('should support addonAfter', () => {
|
|
|
|
const addonAfter = <span>Addon After</span>;
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search addonAfter={addonAfter} />);
|
2022-06-22 14:57:09 +08:00
|
|
|
const { asFragment: asFragmentWithEnterButton } = render(
|
|
|
|
<Search enterButton addonAfter={addonAfter} />,
|
|
|
|
);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot();
|
2019-02-12 21:39:36 +08:00
|
|
|
});
|
2019-09-12 15:47:02 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/18729
|
|
|
|
it('should trigger onSearch when click clear icon', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
|
|
|
const onChange = jest.fn();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(
|
2019-09-13 13:04:43 +08:00
|
|
|
<Search allowClear defaultValue="value" onSearch={onSearch} onChange={onChange} />,
|
|
|
|
);
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
|
2019-09-13 13:04:43 +08:00
|
|
|
expect(onSearch).toHaveBeenLastCalledWith('', expect.anything());
|
|
|
|
expect(onChange).toHaveBeenCalled();
|
2019-09-12 15:47:02 +08:00
|
|
|
});
|
2019-09-14 15:40:33 +08:00
|
|
|
|
2019-09-12 22:32:29 +08:00
|
|
|
it('should support loading', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search loading />);
|
2022-06-22 14:57:09 +08:00
|
|
|
const { asFragment: asFragmentWithEnterButton } = render(<Search loading enterButton />);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot();
|
2019-09-12 22:32:29 +08:00
|
|
|
});
|
2019-10-22 21:33:19 +08:00
|
|
|
|
2022-11-15 18:40:04 +08:00
|
|
|
it('should not trigger onSearch when press enter while loading', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onSearch = jest.fn();
|
2022-11-17 14:04:31 +08:00
|
|
|
const { container } = render(<Search loading onSearch={onSearch} />);
|
2022-11-15 18:40:04 +08:00
|
|
|
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
|
|
|
|
expect(onSearch).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2019-10-22 21:33:19 +08:00
|
|
|
it('should support addonAfter and suffix for loading', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search loading suffix="suffix" addonAfter="addonAfter" />);
|
2022-06-22 14:57:09 +08:00
|
|
|
const { asFragment: asFragmentWithEnterButton } = render(
|
2019-10-30 16:28:28 +08:00
|
|
|
<Search loading enterButton suffix="suffix" addonAfter="addonAfter" />,
|
|
|
|
);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
expect(asFragmentWithEnterButton().firstChild).toMatchSnapshot();
|
2019-10-23 11:40:09 +08:00
|
|
|
});
|
2019-10-22 21:33:19 +08:00
|
|
|
|
2019-10-23 11:40:09 +08:00
|
|
|
it('should support invalid suffix', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search suffix={[]} />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2019-10-23 11:40:09 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should support invalid addonAfter', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { asFragment } = render(<Search addonAfter={[]} enterButton />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
2019-10-23 11:40:09 +08:00
|
|
|
});
|
2020-06-12 18:50:36 +08:00
|
|
|
|
2020-06-16 11:51:01 +08:00
|
|
|
it('should prevent search button mousedown event', () => {
|
2022-09-05 19:41:32 +08:00
|
|
|
const ref = React.createRef<InputRef>();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search ref={ref} enterButton="button text" />, {
|
|
|
|
container: document.body,
|
2020-06-12 18:50:36 +08:00
|
|
|
});
|
2022-09-05 19:41:32 +08:00
|
|
|
ref.current?.focus();
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(document.activeElement).toBe(container.querySelector('input'));
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.mouseDown(container.querySelector('button')!);
|
2022-06-02 16:28:22 +08:00
|
|
|
expect(document.activeElement).toBe(container.querySelector('input'));
|
2020-06-12 18:50:36 +08:00
|
|
|
});
|
2020-06-17 13:35:12 +08:00
|
|
|
|
|
|
|
it('not crash when use function ref', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const ref = jest.fn();
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search ref={ref} enterButton />);
|
2020-06-17 13:35:12 +08:00
|
|
|
expect(() => {
|
2022-09-05 19:41:32 +08:00
|
|
|
fireEvent.mouseDown(container.querySelector('button')!);
|
2020-06-17 13:35:12 +08:00
|
|
|
}).not.toThrow();
|
|
|
|
});
|
2020-10-20 21:44:37 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/27258
|
|
|
|
it('Search with allowClear should have one className only', () => {
|
2022-06-02 16:28:22 +08:00
|
|
|
const { container } = render(<Search allowClear className="className" />);
|
2022-06-22 14:57:09 +08:00
|
|
|
expect(
|
2022-09-05 19:41:32 +08:00
|
|
|
container.querySelector('.ant-input-group-wrapper')?.classList.contains('className'),
|
2022-06-22 14:57:09 +08:00
|
|
|
).toBe(true);
|
|
|
|
expect(
|
2022-09-05 19:41:32 +08:00
|
|
|
container.querySelector('.ant-input-affix-wrapper')?.classList.contains('className'),
|
2022-06-22 14:57:09 +08:00
|
|
|
).toBe(false);
|
2020-10-20 21:44:37 +08:00
|
|
|
});
|
2017-12-01 19:39:32 +08:00
|
|
|
});
|