2024-01-08 10:37:10 +08:00
import React from 'react' ;
2024-04-08 14:04:08 +08:00
import { ArrowDownOutlined , ArrowUpOutlined } from '@ant-design/icons' ;
2018-03-23 19:19:29 +08:00
import InputNumber from '..' ;
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-07-20 20:47:09 +08:00
import { fireEvent , render } from '../../../tests/utils' ;
2023-05-10 14:56:46 +08:00
import Button from '../../button' ;
2018-03-23 19:19:29 +08:00
2019-02-20 18:18:19 +08:00
describe ( 'InputNumber' , ( ) = > {
2020-04-22 15:58:57 +08:00
focusTest ( InputNumber , { refFocus : true } ) ;
2019-08-26 22:53:20 +08:00
mountTest ( InputNumber ) ;
2020-01-02 19:10:16 +08:00
rtlTest ( InputNumber ) ;
2019-02-20 18:18:19 +08:00
// https://github.com/ant-design/ant-design/issues/13896
it ( 'should return null when blur a empty input number' , ( ) = > {
2023-06-07 21:59:21 +08:00
const onChange = jest . fn ( ) ;
2022-07-20 20:47:09 +08:00
const { container } = render ( < InputNumber defaultValue = "1" onChange = { onChange } / > ) ;
2022-09-05 19:41:32 +08:00
fireEvent . change ( container . querySelector ( 'input' ) ! , { target : { value : '' } } ) ;
2019-02-20 18:18:19 +08:00
expect ( onChange ) . toHaveBeenLastCalledWith ( null ) ;
} ) ;
2020-10-10 17:49:50 +08:00
it ( 'should call onStep when press up or down button' , ( ) = > {
2023-06-07 21:59:21 +08:00
const onStep = jest . fn ( ) ;
2022-07-20 20:47:09 +08:00
const { container } = render ( < InputNumber defaultValue = { 1 } onStep = { onStep } / > ) ;
2022-09-05 19:41:32 +08:00
fireEvent . mouseDown ( container . querySelector ( '.ant-input-number-handler-up' ) ! ) ;
2022-08-30 10:57:13 +08:00
expect ( onStep ) . toHaveBeenCalledTimes ( 1 ) ;
2020-10-10 17:49:50 +08:00
expect ( onStep ) . toHaveBeenLastCalledWith ( 2 , { offset : 1 , type : 'up' } ) ;
2022-07-20 20:47:09 +08:00
2022-09-05 19:41:32 +08:00
fireEvent . mouseDown ( container . querySelector ( '.ant-input-number-handler-down' ) ! ) ;
2022-08-30 10:57:13 +08:00
expect ( onStep ) . toHaveBeenCalledTimes ( 2 ) ;
2020-10-10 17:49:50 +08:00
expect ( onStep ) . toHaveBeenLastCalledWith ( 1 , { offset : 1 , type : 'down' } ) ;
} ) ;
2022-02-09 18:06:36 +08:00
it ( 'renders correctly when controls is boolean' , ( ) = > {
2022-07-20 20:47:09 +08:00
const { asFragment } = render ( < InputNumber controls = { false } / > ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2022-02-09 18:06:36 +08:00
} ) ;
it ( 'renders correctly when controls is {}' , ( ) = > {
2022-07-20 20:47:09 +08:00
const { asFragment } = render ( < InputNumber controls = { { } } / > ) ;
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2022-02-09 18:06:36 +08:00
} ) ;
it ( 'renders correctly when controls has custom upIcon and downIcon' , ( ) = > {
2022-07-20 20:47:09 +08:00
const { asFragment } = render (
2022-02-09 18:06:36 +08:00
< InputNumber
controls = { {
upIcon : < ArrowUpOutlined / > ,
downIcon : < ArrowDownOutlined / > ,
} }
/ > ,
) ;
2022-07-20 20:47:09 +08:00
expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
2022-02-09 18:06:36 +08:00
} ) ;
it ( 'should support className' , ( ) = > {
2022-07-20 20:47:09 +08:00
const { container } = render (
2022-02-09 18:06:36 +08:00
< InputNumber
controls = { {
upIcon : < ArrowUpOutlined className = "my-class-name" / > ,
downIcon : < ArrowDownOutlined className = "my-class-name" / > ,
} }
/ > ,
) ;
2022-07-20 20:47:09 +08:00
expect ( container . querySelector ( '.anticon-arrow-up' ) ? . className . includes ( 'my-class-name' ) ) . toBe (
2022-02-09 18:06:36 +08:00
true ,
) ;
expect (
2022-07-20 20:47:09 +08:00
container . querySelector ( '.anticon-arrow-down' ) ? . className . includes ( 'my-class-name' ) ,
2022-02-09 18:06:36 +08:00
) . toBe ( true ) ;
} ) ;
2023-05-10 14:56:46 +08:00
it ( 'renders correctly when the controlled mode number is out of range' , ( ) = > {
const App : React.FC = ( ) = > {
const [ value , setValue ] = React . useState < number | null > ( 1 ) ;
return (
< >
< InputNumber min = { 1 } max = { 10 } value = { value } onChange = { ( v ) = > setValue ( v ) } / >
< Button
type = "primary"
onClick = { ( ) = > {
setValue ( 99 ) ;
} }
>
Reset
< / Button >
< / >
) ;
} ;
const { container } = render ( < App / > ) ;
fireEvent . click ( container . querySelector ( 'button' ) ! ) ;
expect (
container
. querySelector ( '.ant-input-number' )
? . className . includes ( 'ant-input-number-out-of-range' ) ,
) . toBe ( true ) ;
} ) ;
2023-12-11 15:34:07 +08:00
2024-06-28 23:19:58 +08:00
it ( 'Deprecation and usage tips' , ( ) = > {
2023-12-11 15:34:07 +08:00
const errorSpy = jest . spyOn ( console , 'error' ) . mockImplementation ( ( ) = > { } ) ;
2024-06-28 23:19:58 +08:00
const { container } = render ( < InputNumber bordered = { false } type = "number" changeOnWheel / > ) ;
expect ( errorSpy ) . toHaveBeenNthCalledWith (
1 ,
2023-12-11 15:34:07 +08:00
'Warning: [antd: InputNumber] `bordered` is deprecated. Please use `variant` instead.' ,
) ;
2024-06-28 23:19:58 +08:00
expect ( errorSpy ) . toHaveBeenNthCalledWith (
2 ,
'Warning: [antd: InputNumber] When `type=number` is used together with `changeOnWheel`, changeOnWheel may not work properly. Please delete `type=number` if it is not necessary.' ,
) ;
2023-12-11 15:34:07 +08:00
expect ( container . querySelector ( '.ant-input-number-borderless' ) ) . toBeTruthy ( ) ;
errorSpy . mockRestore ( ) ;
} ) ;
2019-02-20 18:18:19 +08:00
} ) ;