ant-design/components/input/__tests__/index.test.tsx

545 lines
19 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { createPortal } from 'react-dom';
2022-06-22 14:57:09 +08:00
import { fireEvent, render } from '../../../tests/utils';
// eslint-disable-next-line import/no-unresolved
import type { InputProps, InputRef } from '..';
import Input from '..';
2019-08-26 22:53:20 +08:00
import mountTest from '../../../tests/shared/mountTest';
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
import rtlTest from '../../../tests/shared/rtlTest';
import { resetWarned } from '../../_util/warning';
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
import Form from '../../form';
import { triggerFocus } from '../Input';
2017-01-30 20:05:47 +08:00
describe('Input', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
2019-03-07 15:47:43 +08:00
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
2019-08-26 22:53:20 +08:00
mountTest(Input);
2019-08-27 16:13:43 +08:00
mountTest(Input.Group);
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
rtlTest(Input);
rtlTest(Input.Group);
2017-11-16 17:12:36 +08:00
it('should support maxLength', () => {
const { asFragment } = render(<Input maxLength={3} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('select()', () => {
const ref = React.createRef<InputRef>();
render(<Input ref={ref} />);
ref.current?.select();
});
2019-03-07 15:47:43 +08:00
it('should support size', () => {
const { asFragment, container } = render(<Input size="large" />);
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(
<Form size="large">
<Form.Item>
<Input />
</Form.Item>
</Form>,
);
expect(container.querySelector('input')?.classList.contains('ant-input-lg')).toBe(true);
expect(asFragment().firstChild).toMatchSnapshot();
});
2019-03-07 15:47:43 +08:00
describe('focus trigger warning', () => {
it('not trigger', () => {
const { container, rerender } = render(<Input suffix="bamboo" />);
fireEvent.focus(container.querySelector('input')!);
rerender(<Input suffix="light" />);
expect(errorSpy).not.toHaveBeenCalled();
2019-03-07 15:47:43 +08:00
});
it('trigger warning', () => {
const { container, rerender, unmount } = render(<Input />);
container.querySelector('input')?.focus();
rerender(<Input suffix="light" />);
expect(errorSpy).toHaveBeenCalledWith(
2019-03-07 15:47:43 +08:00
'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();
2019-03-07 15:47:43 +08:00
});
});
describe('click focus', () => {
it('click outside should also get focus', () => {
const { container } = render(<Input suffix={<span className="test-suffix" />} />);
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(<span className="popup" />, holder);
const { container } = render(
<Input
suffix={
<span className="test-suffix">
<Popup />
</span>
}
/>,
);
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<InputRef>();
const { container } = render(<Input ref={ref} autoFocus defaultValue={defaultValue} />);
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(<Input.Group />);
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.",
);
});
});
2017-11-01 12:12:16 +08:00
describe('prefix and suffix', () => {
it('should support className when has suffix', () => {
const { container } = render(<Input suffix="suffix" className="my-class-name" />);
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(<Input prefix="prefix" className="my-class-name" />);
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(
<>
<Input prefix="prefix" hidden className="prefix-with-hidden" />
<Input suffix="suffix" hidden className="suffix-with-hidden" />
</>,
);
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(
<>
<Input
hidden
className="input"
showCount
allowClear
prefix="11"
suffix="22"
addonBefore="http://"
addonAfter=".com"
defaultValue="mysite1"
/>
<Input.Search
hidden
className="input-search"
showCount
allowClear
prefix="11"
suffix="22"
addonBefore="http://"
addonAfter=".com"
defaultValue="mysite1"
/>
<Input.TextArea
hidden
className="input-textarea"
showCount
allowClear
prefix="11"
// @ts-ignore
suffix="22"
addonBefore="http://"
addonAfter=".com"
defaultValue="mysite1"
/>
<Input.Password
hidden
className="input-password"
showCount
allowClear
prefix="11"
suffix="22"
addonBefore="http://"
addonAfter=".com"
defaultValue="mysite1"
/>
</>,
);
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', () => {
2017-11-16 17:12:36 +08:00
it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
const Demo = () => {
const [form] = Form.useForm();
const reset = () => {
form.resetFields();
2018-12-07 20:02:01 +08:00
};
return (
<Form form={form}>
<Form.Item name="input">
<Input />
</Form.Item>
<Form.Item name="textarea">
<Input.TextArea />
</Form.Item>
<button type="button" onClick={reset}>
reset
</button>
</Form>
);
};
const { container } = render(<Demo />);
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('');
});
});
2017-11-01 12:12:16 +08:00
describe('should support showCount', () => {
it('maxLength', () => {
const { container } = render(<Input maxLength={5} showCount value="12345" />);
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(<Input maxLength={5} showCount value="12345678" />);
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(<Input maxLength={1} showCount value="👀" />);
expect(container.querySelector('input')?.getAttribute('value')).toBe('👀');
expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 1');
const { container: container1 } = render(<Input maxLength={2} showCount value="👀" />);
expect(container1.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 2');
});
it('slice emoji', () => {
const { container } = render(<Input maxLength={5} showCount value="1234😂" />);
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(
<Input
maxLength={5}
showCount={{
formatter: ({ value, count, maxLength }) => `${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');
});
});
2018-12-26 22:34:29 +08:00
describe('Input allowClear', () => {
it('should change type when click', () => {
const { asFragment, container } = render(<Input allowClear />);
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('');
2018-12-26 22:34:29 +08:00
});
it('should not show icon if value is undefined, null or empty string', () => {
// @ts-ignore
const wrappers = [null, undefined, ''].map((val) => render(<Input allowClear value={val} />));
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(<Input allowClear defaultValue={val} />),
);
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(<Input allowClear defaultValue="111" onChange={onChange} />);
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(<Input allowClear value="111" onChange={onChange} />);
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(argumentEventObjectType).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(container.querySelector('input')?.value).toBe('111');
});
2019-03-05 11:16:13 +08:00
it('should focus input after clear', () => {
2022-06-22 14:57:09 +08:00
const { container, unmount } = render(<Input allowClear defaultValue="111" />, {
container: document.body,
});
fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
expect(document.activeElement).toBe(container.querySelector('input'));
unmount();
2019-03-05 11:16:13 +08:00
});
['disabled', 'readOnly'].forEach((prop) => {
it(`should not support allowClear when it is ${prop}`, () => {
const { container } = render(<Input allowClear defaultValue="111" {...{ [prop]: true }} />);
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(<Input allowClear className="my-class-name" />);
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();
2022-06-22 14:57:09 +08:00
const { container, unmount } = render(
<Input allowClear defaultValue="value" onBlur={onBlur} />,
{
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 (
<Input
allowClear
value={query}
onChange={(e) => {
setQuery(() => e.target.value);
}}
/>
);
};
const { container, unmount } = render(<App />);
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(<Input suffix="Bamboo" value={1} />);
expect(container).toBeTruthy();
});
it('should display boolean value as string', () => {
// @ts-ignore
const { container, rerender } = render(<Input value />);
expect(container.querySelector('input')?.value).toBe('true');
// @ts-ignore
rerender(<Input value={false} />);
expect(container.querySelector('input')?.value).toBe('false');
});
it('should support custom clearIcon', () => {
const { container } = render(<Input allowClear={{ clearIcon: 'clear' }} />);
expect(container.querySelector('.ant-input-clear-icon')?.textContent).toBe('clear');
});
it('should support classNames and styles', () => {
const { container } = render(
<>
<Input
value="123"
showCount
prefixCls="rc-input"
prefix="prefix"
suffix="suffix"
className="custom-class"
style={{ backgroundColor: 'red' }}
classNames={{
input: 'custom-input',
prefix: 'custom-prefix',
suffix: 'custom-suffix',
count: 'custom-count',
}}
styles={{
input: { color: 'red' },
prefix: { color: 'blue' },
suffix: { color: 'yellow' },
count: { color: 'green' },
}}
/>
<Input
value="123"
addonAfter="addon"
showCount
prefixCls="rc-input"
prefix="prefix"
suffix="suffix"
className="custom-class"
style={{ backgroundColor: 'red' }}
classNames={{
input: 'custom-input',
prefix: 'custom-prefix',
suffix: 'custom-suffix',
count: 'custom-count',
}}
styles={{
input: { color: 'red' },
prefix: { color: 'blue' },
suffix: { color: 'yellow' },
count: { color: 'green' },
}}
/>
<Input
value="123"
prefixCls="rc-input"
className="custom-class"
style={{ backgroundColor: 'red' }}
classNames={{
input: 'custom-input',
}}
styles={{
input: { color: 'red' },
}}
/>
<Input
value="123"
prefixCls="rc-input"
className="custom-class"
addonAfter="addon"
style={{ backgroundColor: 'red' }}
classNames={{
input: 'custom-input',
}}
styles={{
input: { color: 'red' },
}}
/>
</>,
);
expect(container).toMatchSnapshot();
});
2018-12-26 22:34:29 +08:00
});
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(<Input {...props} />);
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();
});
});