Fix tests

Author: cgero-eth

src/core/components/forms/inputNumber/inputNumber.test.tsx

@@ -5,6 +5,16 @@ import * as InputHooks from '../hooks';
 import { InputNumber, type IInputNumberProps } from './inputNumber';
 
 describe('<InputNumber /> component', () => {
+    const useNumberMaskMock = jest.spyOn(InputHooks, 'useNumberMask');
+
+    beforeEach(() => {
+        useNumberMaskMock.mockReturnValue({} as unknown as InputHooks.IUseNumberMaskResult);
+    });
+
+    afterEach(() => {
+        useNumberMaskMock.mockReset();
+    });
+
     const createTestComponent = (props?: Partial<IInputNumberProps>) => {
         const completeProps: IInputNumberProps = {
             ...props,
@@ -13,6 +23,34 @@ describe('<InputNumber /> component', () => {
         return <InputNumber {...completeProps} />;
     };
 
+    const testChangeValueLogic = async (values?: {
+        props?: Partial<IInputNumberProps>;
+        expectedValue?: string;
+        type: 'increment' | 'decrement';
+    }) => {
+        const { props, expectedValue, type } = values ?? {};
+        const user = userEvent.setup();
+        const setUnmaskedValue = jest.fn();
+
+        const hookResult = {
+            setUnmaskedValue,
+            unmaskedValue: props?.value,
+        } as unknown as InputHooks.IUseNumberMaskResult;
+
+        useNumberMaskMock.mockReturnValue(hookResult);
+        render(createTestComponent({ ...props }));
+
+        const [decrementButton, incrementButton] = screen.getAllByRole('button');
+
+        if (type === 'increment') {
+            await user.click(incrementButton);
+        } else {
+            await user.click(decrementButton);
+        }
+
+        expect(setUnmaskedValue).toHaveBeenCalledWith(expectedValue);
+    };
+
     it('renders an input with increment and decrement buttons', () => {
         render(createTestComponent());
 
@@ -42,109 +80,61 @@ describe('<InputNumber /> component', () => {
     });
 
     describe('increment button', () => {
-        const useNumberMaskMock = jest.spyOn(InputHooks, 'useNumberMask');
-
-        afterEach(() => {
-            useNumberMaskMock.mockReset();
-        });
-
-        const testIncrementLogic = async ({
-            expectedValue,
-            ...props
-        }: Partial<IInputNumberProps> & { expectedValue: string }) => {
-            const user = userEvent.setup();
-            const setValue = jest.fn();
-            const hookResult = {
-                setValue,
-                value: props.value,
-                unmaskedValue: props.value,
-            } as unknown as InputHooks.IUseNumberMaskResult;
-            useNumberMaskMock.mockReturnValue(hookResult);
-
-            render(createTestComponent({ ...props }));
-
-            const [, incrementButton] = screen.getAllByRole<HTMLButtonElement>('button');
-            await user.click(incrementButton);
-
-            expect(setValue).toHaveBeenCalledWith(expectedValue);
-        };
-
         it('should increment by one (1) with default parameters', async () => {
-            await testIncrementLogic({ expectedValue: '1' });
+            await testChangeValueLogic({ type: 'increment', expectedValue: '1' });
         });
 
         it('should return the maximum when the newly generated value exceeds the maximum', async () => {
             const max = 5;
             const step = 2;
             const value = '4';
-            await testIncrementLogic({ max, step, value, expectedValue: max.toString() });
+            const props = { max, step, value };
+            await testChangeValueLogic({ type: 'increment', props, expectedValue: max.toString() });
         });
 
         it('should increment by floating point value when the step is a float', async () => {
             const value = '1';
             const step = 0.5;
-            await testIncrementLogic({ step, value, expectedValue: (Number(value) + step).toString() });
+            const props = { step, value };
+            await testChangeValueLogic({ type: 'increment', props, expectedValue: (Number(value) + step).toString() });
         });
 
         it('should round down to the nearest multiple of the step before incrementing by the step value', async () => {
             const value = '1';
             const step = 0.3;
-            await testIncrementLogic({ step, value, expectedValue: '1.2' });
+            const props = { value, step };
+            await testChangeValueLogic({ type: 'increment', props, expectedValue: '1.2' });
         });
 
         it('should increment to the minimum when no value is provided', async () => {
             const step = 6;
             const min = 5;
             const max = 10;
-            await testIncrementLogic({ step, min, max, expectedValue: min.toString() });
+            const props = { step, min, max };
+            await testChangeValueLogic({ type: 'increment', props, expectedValue: min.toString() });
         });
     });
 
     describe('decrement button', () => {
-        const useNumberMaskMock = jest.spyOn(InputHooks, 'useNumberMask');
-
-        afterEach(() => {
-            useNumberMaskMock.mockReset();
-        });
-
-        const testDecrementLogic = async ({
-            expectedValue,
-            ...props
-        }: Partial<IInputNumberProps> & { expectedValue: string }) => {
-            const user = userEvent.setup();
-            const setValue = jest.fn();
-            const hookResult = {
-                setValue,
-                value: props.value,
-                unmaskedValue: props.value,
-            } as unknown as InputHooks.IUseNumberMaskResult;
-            useNumberMaskMock.mockReturnValue(hookResult);
-
-            render(createTestComponent({ ...props }));
-
-            const [decrementButton] = screen.getAllByRole<HTMLButtonElement>('button');
-            await user.click(decrementButton);
-
-            expect(setValue).toHaveBeenCalledWith(expectedValue);
-        };
-
         it('should decrement by step', async () => {
             const value = '10';
             const step = 2;
-            const expectedValue = (10 - 2).toString();
-            await testDecrementLogic({ value, step, expectedValue });
+            const props = { value, step };
+            await testChangeValueLogic({ type: 'decrement', props, expectedValue: (10 - 2).toString() });
         });
 
         it('should decrement to the minimum when no value provided', async () => {
             const step = 2;
             const min = 1;
-            await testDecrementLogic({ step, min, expectedValue: min.toString() });
+            const props = { step, min };
+            await testChangeValueLogic({ type: 'decrement', props, expectedValue: min.toString() });
         });
 
         it('should decrement to the closest multiple of the step smaller than the value', async () => {
             const value = '10';
             const step = 3;
-            await testDecrementLogic({ value, step, expectedValue: '9' });
+            const props = { value, step };
+            await testChangeValueLogic({ type: 'decrement', props, expectedValue: '9' });
         });
     });
 });

src/core/components/forms/inputNumberMax/inputNumberMax.test.tsx

@@ -10,7 +10,7 @@ describe('<InputNumberMax /> component', () => {
     beforeEach(() => {
         const numberMaskResult = {
             ref: createRef(),
-            setValue: jest.fn(),
+            setUnmaskedValue: jest.fn(),
         } as unknown as InputHooks.IUseNumberMaskResult;
         useNumberMaskMock.mockReturnValue(numberMaskResult);
     });
@@ -37,12 +37,12 @@ describe('<InputNumberMax /> component', () => {
     it('updates the mask value with the max property on max button click', async () => {
         const user = userEvent.setup();
         const max = 1_000_000;
-        const setValue = jest.fn();
-        const hookResult = { setValue } as unknown as InputHooks.IUseNumberMaskResult;
+        const setUnmaskedValue = jest.fn();
+        const hookResult = { setUnmaskedValue } as unknown as InputHooks.IUseNumberMaskResult;
         useNumberMaskMock.mockReturnValue(hookResult);
         render(createTestComponent({ max }));
         await user.click(screen.getByRole('button'));
-        expect(setValue).toHaveBeenCalledWith(max.toString());
+        expect(setUnmaskedValue).toHaveBeenCalledWith(max.toString());
     });
 
     it('does not render the max button when input is disabled', () => {

src/core/components/forms/inputNumberMax/inputNumberMax.tsx

@@ -22,11 +22,11 @@ export const InputNumberMax: React.FC<IInputNumberMaxProps> = (props) => {
     const { variant, ...otherContainerProps } = containerProps;
     const { className: inputClassName, value, min, disabled, ...otherInputProps } = inputProps;
 
-    const { ref, setValue } = useNumberMask({ min, max, value, onChange });
+    const { ref, setUnmaskedValue } = useNumberMask({ min, max, value, onChange });
 
     const { copy } = useOdsCoreContext();
 
-    const handleMaxClick = () => setValue(max.toString());
+    const handleMaxClick = () => setUnmaskedValue(max.toString());
 
     return (
         <InputContainer variant={variant} {...otherContainerProps}>