@@ -5,6 +5,16 @@ import * as InputHooks from '../hooks';
55import { InputNumber , type IInputNumberProps } from './inputNumber' ;
66
77describe ( '<InputNumber /> component' , ( ) => {
8+ const useNumberMaskMock = jest . spyOn ( InputHooks , 'useNumberMask' ) ;
9+
10+ beforeEach ( ( ) => {
11+ useNumberMaskMock . mockReturnValue ( { } as unknown as InputHooks . IUseNumberMaskResult ) ;
12+ } ) ;
13+
14+ afterEach ( ( ) => {
15+ useNumberMaskMock . mockReset ( ) ;
16+ } ) ;
17+
818 const createTestComponent = ( props ?: Partial < IInputNumberProps > ) => {
919 const completeProps : IInputNumberProps = {
1020 ...props ,
@@ -13,6 +23,34 @@ describe('<InputNumber /> component', () => {
1323 return < InputNumber { ...completeProps } /> ;
1424 } ;
1525
26+ const testChangeValueLogic = async ( values ?: {
27+ props ?: Partial < IInputNumberProps > ;
28+ expectedValue ?: string ;
29+ type : 'increment' | 'decrement' ;
30+ } ) => {
31+ const { props, expectedValue, type } = values ?? { } ;
32+ const user = userEvent . setup ( ) ;
33+ const setUnmaskedValue = jest . fn ( ) ;
34+
35+ const hookResult = {
36+ setUnmaskedValue,
37+ unmaskedValue : props ?. value ,
38+ } as unknown as InputHooks . IUseNumberMaskResult ;
39+
40+ useNumberMaskMock . mockReturnValue ( hookResult ) ;
41+ render ( createTestComponent ( { ...props } ) ) ;
42+
43+ const [ decrementButton , incrementButton ] = screen . getAllByRole ( 'button' ) ;
44+
45+ if ( type === 'increment' ) {
46+ await user . click ( incrementButton ) ;
47+ } else {
48+ await user . click ( decrementButton ) ;
49+ }
50+
51+ expect ( setUnmaskedValue ) . toHaveBeenCalledWith ( expectedValue ) ;
52+ } ;
53+
1654 it ( 'renders an input with increment and decrement buttons' , ( ) => {
1755 render ( createTestComponent ( ) ) ;
1856
@@ -42,109 +80,61 @@ describe('<InputNumber /> component', () => {
4280 } ) ;
4381
4482 describe ( 'increment button' , ( ) => {
45- const useNumberMaskMock = jest . spyOn ( InputHooks , 'useNumberMask' ) ;
46-
47- afterEach ( ( ) => {
48- useNumberMaskMock . mockReset ( ) ;
49- } ) ;
50-
51- const testIncrementLogic = async ( {
52- expectedValue,
53- ...props
54- } : Partial < IInputNumberProps > & { expectedValue : string } ) => {
55- const user = userEvent . setup ( ) ;
56- const setValue = jest . fn ( ) ;
57- const hookResult = {
58- setValue,
59- value : props . value ,
60- unmaskedValue : props . value ,
61- } as unknown as InputHooks . IUseNumberMaskResult ;
62- useNumberMaskMock . mockReturnValue ( hookResult ) ;
63-
64- render ( createTestComponent ( { ...props } ) ) ;
65-
66- const [ , incrementButton ] = screen . getAllByRole < HTMLButtonElement > ( 'button' ) ;
67- await user . click ( incrementButton ) ;
68-
69- expect ( setValue ) . toHaveBeenCalledWith ( expectedValue ) ;
70- } ;
71-
7283 it ( 'should increment by one (1) with default parameters' , async ( ) => {
73- await testIncrementLogic ( { expectedValue : '1' } ) ;
84+ await testChangeValueLogic ( { type : 'increment' , expectedValue : '1' } ) ;
7485 } ) ;
7586
7687 it ( 'should return the maximum when the newly generated value exceeds the maximum' , async ( ) => {
7788 const max = 5 ;
7889 const step = 2 ;
7990 const value = '4' ;
80- await testIncrementLogic ( { max, step, value, expectedValue : max . toString ( ) } ) ;
91+ const props = { max, step, value } ;
92+ await testChangeValueLogic ( { type : 'increment' , props, expectedValue : max . toString ( ) } ) ;
8193 } ) ;
8294
8395 it ( 'should increment by floating point value when the step is a float' , async ( ) => {
8496 const value = '1' ;
8597 const step = 0.5 ;
86- await testIncrementLogic ( { step, value, expectedValue : ( Number ( value ) + step ) . toString ( ) } ) ;
98+ const props = { step, value } ;
99+ await testChangeValueLogic ( { type : 'increment' , props, expectedValue : ( Number ( value ) + step ) . toString ( ) } ) ;
87100 } ) ;
88101
89102 it ( 'should round down to the nearest multiple of the step before incrementing by the step value' , async ( ) => {
90103 const value = '1' ;
91104 const step = 0.3 ;
92- await testIncrementLogic ( { step, value, expectedValue : '1.2' } ) ;
105+ const props = { value, step } ;
106+ await testChangeValueLogic ( { type : 'increment' , props, expectedValue : '1.2' } ) ;
93107 } ) ;
94108
95109 it ( 'should increment to the minimum when no value is provided' , async ( ) => {
96110 const step = 6 ;
97111 const min = 5 ;
98112 const max = 10 ;
99- await testIncrementLogic ( { step, min, max, expectedValue : min . toString ( ) } ) ;
113+ const props = { step, min, max } ;
114+ await testChangeValueLogic ( { type : 'increment' , props, expectedValue : min . toString ( ) } ) ;
100115 } ) ;
101116 } ) ;
102117
103118 describe ( 'decrement button' , ( ) => {
104- const useNumberMaskMock = jest . spyOn ( InputHooks , 'useNumberMask' ) ;
105-
106- afterEach ( ( ) => {
107- useNumberMaskMock . mockReset ( ) ;
108- } ) ;
109-
110- const testDecrementLogic = async ( {
111- expectedValue,
112- ...props
113- } : Partial < IInputNumberProps > & { expectedValue : string } ) => {
114- const user = userEvent . setup ( ) ;
115- const setValue = jest . fn ( ) ;
116- const hookResult = {
117- setValue,
118- value : props . value ,
119- unmaskedValue : props . value ,
120- } as unknown as InputHooks . IUseNumberMaskResult ;
121- useNumberMaskMock . mockReturnValue ( hookResult ) ;
122-
123- render ( createTestComponent ( { ...props } ) ) ;
124-
125- const [ decrementButton ] = screen . getAllByRole < HTMLButtonElement > ( 'button' ) ;
126- await user . click ( decrementButton ) ;
127-
128- expect ( setValue ) . toHaveBeenCalledWith ( expectedValue ) ;
129- } ;
130-
131119 it ( 'should decrement by step' , async ( ) => {
132120 const value = '10' ;
133121 const step = 2 ;
134- const expectedValue = ( 10 - 2 ) . toString ( ) ;
135- await testDecrementLogic ( { value , step , expectedValue } ) ;
122+ const props = { value , step } ;
123+ await testChangeValueLogic ( { type : 'decrement' , props , expectedValue : ( 10 - 2 ) . toString ( ) } ) ;
136124 } ) ;
137125
138126 it ( 'should decrement to the minimum when no value provided' , async ( ) => {
139127 const step = 2 ;
140128 const min = 1 ;
141- await testDecrementLogic ( { step, min, expectedValue : min . toString ( ) } ) ;
129+ const props = { step, min } ;
130+ await testChangeValueLogic ( { type : 'decrement' , props, expectedValue : min . toString ( ) } ) ;
142131 } ) ;
143132
144133 it ( 'should decrement to the closest multiple of the step smaller than the value' , async ( ) => {
145134 const value = '10' ;
146135 const step = 3 ;
147- await testDecrementLogic ( { value, step, expectedValue : '9' } ) ;
136+ const props = { value, step } ;
137+ await testChangeValueLogic ( { type : 'decrement' , props, expectedValue : '9' } ) ;
148138 } ) ;
149139 } ) ;
150140} ) ;
0 commit comments