2021-08-30 13:25:32 +08:00
import React , { useState } from 'react' ;
2022-05-06 11:48:18 +08:00
import { createPortal } from 'react-dom' ;
2022-06-22 14:57:09 +08:00
import { fireEvent , render } from '../../../tests/utils' ;
2019-08-06 15:02:05 +08:00
// eslint-disable-next-line import/no-unresolved
2022-05-07 14:31:54 +08:00
import type { InputProps , InputRef } from '..' ;
import Input from '..' ;
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' ;
2023-03-09 21:26:56 +08:00
import { resetWarned } from '../../_util/warning' ;
2023-06-07 11:54:50 +08:00
import Form from '../../form' ;
2022-09-30 15:58:34 +08:00
import { triggerFocus } from '../Input' ;
2017-01-30 20:05:47 +08:00
2017-09-27 09:56:30 +08:00
describe ( 'Input' , ( ) = > {
2023-06-07 21:59:21 +08:00
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 ) ;
2017-11-19 01:41:40 +08:00
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' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { asFragment } = render ( < Input maxLength = { 3 } / > ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2017-09-27 09:56:30 +08:00
} ) ;
2018-08-28 18:54:21 +08:00
it ( 'select()' , ( ) = > {
2022-03-10 19:26:01 +08:00
const ref = React . createRef < InputRef > ( ) ;
2022-06-02 16:28:22 +08:00
render ( < Input ref = { ref } / > ) ;
2022-03-01 14:17:48 +08:00
ref . current ? . select ( ) ;
2018-08-28 18:54:21 +08:00
} ) ;
2019-03-07 15:47:43 +08:00
2020-02-09 11:57:42 +08:00
it ( 'should support size' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { asFragment , container } = render ( < Input size = "large" / > ) ;
expect ( container . querySelector ( 'input' ) ? . classList . contains ( 'ant-input-lg' ) ) . toBe ( true ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2020-02-09 11:57:42 +08:00
} ) ;
it ( 'should support size in form' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { asFragment , container } = render (
2020-02-09 11:57:42 +08:00
< Form size = "large" >
< Form.Item >
< Input / >
< / Form.Item >
< / Form > ,
) ;
2022-06-02 16:28:22 +08:00
expect ( container . querySelector ( 'input' ) ? . classList . contains ( 'ant-input-lg' ) ) . toBe ( true ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2020-02-09 11:57:42 +08:00
} ) ;
2019-03-07 15:47:43 +08:00
describe ( 'focus trigger warning' , ( ) = > {
it ( 'not trigger' , ( ) = > {
2022-04-06 11:07:15 +08:00
const { container , rerender } = render ( < Input suffix = "bamboo" / > ) ;
fireEvent . focus ( container . querySelector ( 'input' ) ! ) ;
rerender ( < Input suffix = "light" / > ) ;
2019-04-03 15:54:26 +08:00
expect ( errorSpy ) . not . toHaveBeenCalled ( ) ;
2019-03-07 15:47:43 +08:00
} ) ;
it ( 'trigger warning' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { container , rerender , unmount } = render ( < Input / > ) ;
container . querySelector ( 'input' ) ? . focus ( ) ;
rerender ( < Input suffix = "light" / > ) ;
2019-04-03 15:54:26 +08:00
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' ,
) ;
2022-06-02 16:28:22 +08:00
unmount ( ) ;
2019-03-07 15:47:43 +08:00
} ) ;
} ) ;
2020-11-06 11:48:50 +08:00
2022-05-06 11:48:18 +08:00
describe ( 'click focus' , ( ) = > {
it ( 'click outside should also get focus' , ( ) = > {
const { container } = render ( < Input suffix = { < span className = "test-suffix" / > } / > ) ;
2023-06-07 21:59:21 +08:00
const onFocus = jest . spyOn ( container . querySelector ( 'input' ) ! , 'focus' ) ;
2022-10-26 14:47:33 +08:00
fireEvent . click ( container . querySelector ( '.test-suffix' ) ! ) ;
2022-05-06 11:48:18 +08:00
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 >
}
/ > ,
) ;
2023-06-07 21:59:21 +08:00
const onFocus = jest . spyOn ( container . querySelector ( 'input' ) ! , 'focus' ) ;
2022-05-06 11:48:18 +08:00
fireEvent . mouseDown ( document . querySelector ( '.popup' ) ! ) ;
fireEvent . mouseUp ( document . querySelector ( '.popup' ) ! ) ;
expect ( onFocus ) . not . toHaveBeenCalled ( ) ;
document . body . removeChild ( holder ) ;
} ) ;
} ) ;
2020-11-06 11:48:50 +08:00
it ( 'set mouse cursor position' , ( ) = > {
const defaultValue = '11111' ;
const valLength = defaultValue . length ;
2022-03-10 19:26:01 +08:00
const ref = React . createRef < InputRef > ( ) ;
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input ref = { ref } autoFocus defaultValue = { defaultValue } / > ) ;
2022-03-01 14:17:48 +08:00
ref . current ? . setSelectionRange ( valLength , valLength ) ;
2022-06-02 16:28:22 +08:00
expect ( container . querySelector ( 'input' ) ? . selectionStart ) . toEqual ( 5 ) ;
expect ( container . querySelector ( 'input' ) ? . selectionEnd ) . toEqual ( 5 ) ;
2020-11-06 11:48:50 +08:00
} ) ;
2023-03-09 21:26:56 +08:00
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-09-27 09:56:30 +08:00
} ) ;
2017-11-01 12:12:16 +08:00
2020-10-30 15:27:37 +08:00
describe ( 'prefix and suffix' , ( ) = > {
it ( 'should support className when has suffix' , ( ) = > {
2022-04-15 23:33:10 +08:00
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 ) ;
2020-10-30 15:27:37 +08:00
} ) ;
it ( 'should support className when has prefix' , ( ) = > {
2022-04-15 23:33:10 +08:00
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 ) ;
2020-10-30 15:27:37 +08:00
} ) ;
2022-01-13 16:23:27 +08:00
it ( 'should support hidden when has prefix or suffix' , ( ) = > {
2022-04-15 23:33:10 +08:00
const { container } = render (
2022-01-13 16:23:27 +08:00
< >
< Input prefix = "prefix" hidden className = "prefix-with-hidden" / >
< Input suffix = "suffix" hidden className = "suffix-with-hidden" / >
< / > ,
) ;
2022-04-15 23:33:10 +08:00
expect ( container . querySelector ( '.prefix-with-hidden' ) ? . getAttribute ( 'hidden' ) ) . toBe ( '' ) ;
expect ( container . querySelector ( '.suffix-with-hidden' ) ? . getAttribute ( 'hidden' ) ) . toBe ( '' ) ;
2022-01-13 16:23:27 +08:00
} ) ;
2020-10-30 15:27:37 +08:00
} ) ;
2022-01-15 22:08:19 +08:00
describe ( 'Input setting hidden' , ( ) = > {
it ( 'should support hidden when has prefix or suffix or showCount or allowClear or addonBefore or addonAfter' , ( ) = > {
2022-04-15 23:33:10 +08:00
const { container } = render (
2022-01-15 22:08:19 +08:00
< >
< 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"
2022-03-10 19:26:01 +08:00
// @ts-ignore
2022-01-15 22:08:19 +08:00
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"
/ >
< / > ,
) ;
2022-04-15 23:33:10 +08:00
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 ( '' ) ;
2022-01-15 22:08:19 +08:00
} ) ;
} ) ;
2017-07-16 15:39:21 +08:00
describe ( 'As Form Control' , ( ) = > {
2017-11-16 17:12:36 +08:00
it ( 'should be reset when wrapped in form.getFieldDecorator without initialValue' , ( ) = > {
2019-07-03 20:14:39 +08:00
const Demo = ( ) = > {
const [ form ] = Form . useForm ( ) ;
const reset = ( ) = > {
2018-06-22 21:05:13 +08:00
form . resetFields ( ) ;
2018-12-07 20:02:01 +08:00
} ;
2018-06-22 21:05:13 +08:00
2019-07-03 20:14:39 +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 >
) ;
} ;
2022-06-02 16:28:22 +08:00
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-07-16 15:39:21 +08:00
} ) ;
} ) ;
2017-11-01 12:12:16 +08:00
2021-10-15 16:23:47 +08:00
describe ( 'should support showCount' , ( ) = > {
it ( 'maxLength' , ( ) = > {
2022-06-02 16:28:22 +08:00
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' ) ;
2021-10-15 16:23:47 +08:00
} ) ;
it ( 'control exceed maxLength' , ( ) = > {
2022-06-02 16:28:22 +08:00
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' ) ;
2021-10-15 16:23:47 +08:00
} ) ;
describe ( 'emoji' , ( ) = > {
it ( 'should minimize value between emoji length and maxLength' , ( ) = > {
2022-06-02 16:28:22 +08:00
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' ) ;
2021-10-15 16:23:47 +08:00
2022-06-02 16:28:22 +08:00
const { container : container1 } = render ( < Input maxLength = { 2 } showCount value = "👀" / > ) ;
expect ( container1 . querySelector ( '.ant-input-show-count-suffix' ) ? . innerHTML ) . toBe ( '1 / 2' ) ;
2021-10-15 16:23:47 +08:00
} ) ;
it ( 'slice emoji' , ( ) = > {
2022-06-02 16:28:22 +08:00
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' ) ;
2021-10-15 16:23:47 +08:00
} ) ;
} ) ;
it ( 'count formatter' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { container } = render (
2021-10-15 16:23:47 +08:00
< Input
maxLength = { 5 }
2022-08-01 17:39:57 +08:00
showCount = { {
formatter : ( { value , count , maxLength } ) = > ` ${ value } , ${ count } , ${ maxLength } ` ,
} }
2021-10-15 16:23:47 +08:00
value = "12345"
/ > ,
) ;
2022-06-02 16:28:22 +08:00
expect ( container . querySelector ( 'input' ) ? . getAttribute ( 'value' ) ) . toBe ( '12345' ) ;
2022-08-01 17:39:57 +08:00
expect ( container . querySelector ( '.ant-input-show-count-suffix' ) ? . innerHTML ) . toBe ( '12345, 5, 5' ) ;
2021-10-15 16:23:47 +08:00
} ) ;
} ) ;
2018-12-26 22:34:29 +08:00
describe ( 'Input allowClear' , ( ) = > {
it ( 'should change type when click' , ( ) = > {
2022-06-02 16:28:22 +08:00
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
} ) ;
2018-12-28 15:48:05 +08:00
2019-02-07 11:39:16 +08:00
it ( 'should not show icon if value is undefined, null or empty string' , ( ) = > {
2022-03-10 19:26:01 +08:00
// @ts-ignore
2022-11-19 13:47:33 +08:00
const wrappers = [ null , undefined , '' ] . map ( ( val ) = > render ( < Input allowClear value = { val } / > ) ) ;
2022-06-02 16:28:22 +08:00
wrappers . forEach ( ( { asFragment , container } ) = > {
expect ( container . querySelector ( 'input' ) ? . value ) . toEqual ( '' ) ;
expect ( container . querySelector ( '.ant-input-clear-icon-hidden' ) ) . toBeTruthy ( ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2019-02-07 11:39:16 +08:00
} ) ;
} ) ;
it ( 'should not show icon if defaultValue is undefined, null or empty string' , ( ) = > {
2022-11-19 13:47:33 +08:00
const wrappers = [ null , undefined , '' ] . map ( ( val ) = >
2022-03-10 19:26:01 +08:00
// @ts-ignore
2022-06-02 16:28:22 +08:00
render ( < Input allowClear defaultValue = { val } / > ) ,
2019-02-07 11:39:16 +08:00
) ;
2022-06-02 16:28:22 +08:00
wrappers . forEach ( ( { asFragment , container } ) = > {
expect ( container . querySelector ( 'input' ) ? . value ) . toEqual ( '' ) ;
expect ( container . querySelector ( '.ant-input-clear-icon-hidden' ) ) . toBeTruthy ( ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2019-02-07 11:39:16 +08:00
} ) ;
} ) ;
2018-12-28 15:48:05 +08:00
it ( 'should trigger event correctly' , ( ) = > {
2022-06-02 16:28:22 +08:00
let argumentEventObjectType ;
2018-12-28 15:48:05 +08:00
let argumentEventObjectValue ;
2022-11-19 13:47:33 +08:00
const onChange : InputProps [ 'onChange' ] = ( e ) = > {
2022-06-02 16:28:22 +08:00
argumentEventObjectType = e . type ;
2018-12-28 15:48:05 +08:00
argumentEventObjectValue = e . target . value ;
} ;
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input allowClear defaultValue = "111" onChange = { onChange } / > ) ;
fireEvent . click ( container . querySelector ( '.ant-input-clear-icon' ) ! ) ;
expect ( argumentEventObjectType ) . toBe ( 'click' ) ;
2018-12-28 15:48:05 +08:00
expect ( argumentEventObjectValue ) . toBe ( '' ) ;
2022-06-02 16:28:22 +08:00
expect ( container . querySelector ( 'input' ) ? . value ) . toBe ( '' ) ;
2018-12-28 15:48:05 +08:00
} ) ;
it ( 'should trigger event correctly on controlled mode' , ( ) = > {
2022-06-02 16:28:22 +08:00
let argumentEventObjectType ;
2018-12-28 15:48:05 +08:00
let argumentEventObjectValue ;
2022-11-19 13:47:33 +08:00
const onChange : InputProps [ 'onChange' ] = ( e ) = > {
2022-06-02 16:28:22 +08:00
argumentEventObjectType = e . type ;
2018-12-28 15:48:05 +08:00
argumentEventObjectValue = e . target . value ;
} ;
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input allowClear value = "111" onChange = { onChange } / > ) ;
fireEvent . click ( container . querySelector ( '.ant-input-clear-icon' ) ! ) ;
expect ( argumentEventObjectType ) . toBe ( 'click' ) ;
2018-12-28 15:48:05 +08:00
expect ( argumentEventObjectValue ) . toBe ( '' ) ;
2022-06-02 16:28:22 +08:00
expect ( container . querySelector ( 'input' ) ? . value ) . toBe ( '111' ) ;
2018-12-28 15:48:05 +08:00
} ) ;
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 ,
} ) ;
2022-06-02 16:28:22 +08:00
fireEvent . click ( container . querySelector ( '.ant-input-clear-icon' ) ! ) ;
expect ( document . activeElement ) . toBe ( container . querySelector ( 'input' ) ) ;
unmount ( ) ;
2019-03-05 11:16:13 +08:00
} ) ;
2019-08-26 22:58:00 +08:00
2022-11-19 13:47:33 +08:00
[ 'disabled' , 'readOnly' ] . forEach ( ( prop ) = > {
2020-02-20 19:56:22 +08:00
it ( ` should not support allowClear when it is ${ prop } ` , ( ) = > {
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input allowClear defaultValue = "111" { ... { [ prop ] : true }} / > ) ;
expect ( container . querySelector ( '.ant-input-clear-icon-hidden' ) ) . toBeTruthy ( ) ;
2020-02-20 19:56:22 +08:00
} ) ;
2019-08-26 22:58:00 +08:00
} ) ;
2020-10-30 15:27:37 +08:00
// https://github.com/ant-design/ant-design/issues/27444
it ( 'should support className' , ( ) = > {
2022-04-15 23:33:10 +08:00
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 ) ;
2020-10-30 15:27:37 +08:00
} ) ;
2021-06-30 13:48:22 +08:00
// https://github.com/ant-design/ant-design/issues/31200
it ( 'should not lost focus when clear input' , ( ) = > {
2023-06-07 21:59:21 +08:00
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 ,
} ,
) ;
2022-06-02 16:28:22 +08:00
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' ) ! ) ;
2022-08-30 10:57:13 +08:00
expect ( onBlur ) . not . toHaveBeenCalled ( ) ;
2022-06-02 16:28:22 +08:00
unmount ( ) ;
2021-06-30 13:48:22 +08:00
} ) ;
2021-08-30 13:25:32 +08:00
// https://github.com/ant-design/ant-design/issues/31927
it ( 'should correctly when useState' , ( ) = > {
2023-07-06 23:54:03 +08:00
const App : React.FC = ( ) = > {
2021-08-30 13:25:32 +08:00
const [ query , setQuery ] = useState ( '' ) ;
return (
< Input
allowClear
value = { query }
2022-11-19 13:47:33 +08:00
onChange = { ( e ) = > {
2021-08-30 13:25:32 +08:00
setQuery ( ( ) = > e . target . value ) ;
} }
/ >
) ;
} ;
2022-06-02 16:28:22 +08:00
const { container , unmount } = render ( < App / > ) ;
2021-08-30 13:25:32 +08:00
2022-06-02 16:28:22 +08:00
container . querySelector ( 'input' ) ? . focus ( ) ;
fireEvent . change ( container . querySelector ( 'input' ) ! , { target : { value : '111' } } ) ;
expect ( container . querySelector ( 'input' ) ? . value ) . toEqual ( '111' ) ;
2021-08-30 13:25:32 +08:00
2022-06-02 16:28:22 +08:00
fireEvent . click ( container . querySelector ( '.ant-input-clear-icon' ) ! ) ;
expect ( container . querySelector ( 'input' ) ? . value ) . toEqual ( '' ) ;
2021-08-30 13:25:32 +08:00
2022-06-02 16:28:22 +08:00
unmount ( ) ;
2021-08-30 13:25:32 +08:00
} ) ;
2021-12-29 11:32:49 +08:00
it ( 'not crash when value is number' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input suffix = "Bamboo" value = { 1 } / > ) ;
expect ( container ) . toBeTruthy ( ) ;
2021-12-29 11:32:49 +08:00
} ) ;
2022-03-07 13:09:07 +08:00
it ( 'should display boolean value as string' , ( ) = > {
2022-03-10 19:26:01 +08:00
// @ts-ignore
2022-06-02 16:28:22 +08:00
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' ) ;
2022-03-07 13:09:07 +08:00
} ) ;
2022-03-08 01:40:24 +08:00
it ( 'should support custom clearIcon' , ( ) = > {
2022-06-02 16:28:22 +08:00
const { container } = render ( < Input allowClear = { { clearIcon : 'clear' } } / > ) ;
expect ( container . querySelector ( '.ant-input-clear-icon' ) ? . textContent ) . toBe ( 'clear' ) ;
2022-03-08 01:40:24 +08:00
} ) ;
2023-03-28 09:57:55 +08:00
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
} ) ;
2022-03-10 19:26:01 +08:00
2022-09-30 15:58:34 +08:00
describe ( 'typescript types' , ( ) = > {
2022-03-10 19:26:01 +08:00
it ( 'InputProps type should support data-* attributes' , ( ) = > {
const props : InputProps = {
value : 123 ,
// expect no ts error here
'data-testid' : 'test-id' ,
'data-id' : '12345' ,
} ;
2022-06-02 16:28:22 +08:00
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' ) ;
2022-03-10 19:26:01 +08:00
} ) ;
} ) ;
2022-09-30 15:58:34 +08:00
describe ( 'triggerFocus' , ( ) = > {
it ( 'triggerFocus correctly run when element is null' , ( ) = > {
expect ( ( ) = > {
triggerFocus ( ) ;
} ) . not . toThrow ( ) ;
} ) ;
} ) ;