Update input tests

aragon · Dec 11, 2023 · dba5eec · dba5eec
1 parent e4d9aff
commit dba5eec
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/components/input/inputContainer/inputContainer.test.tsx b/src/components/input/inputContainer/inputContainer.test.tsx
@@ -43,6 +43,13 @@ describe('<InputContainer /> component', () => {
         expect(screen.getByText(`[${inputLength}/${maxLength}]`)).toBeInTheDocument();
     });
 
+    it('adds a shake animation when the input length is equal to the max length property', () => {
+        const maxLength = 10;
+        const inputLength = 10;
+        render(createTestComponent({ maxLength, inputLength }));
+        expect(screen.getByText(`[${inputLength}/${maxLength}]`).className).toContain('shake');
+    });
+
     it('renders the input alert when defined', () => {
         const alert = {
             message: 'input-alert-message',

diff --git a/src/components/input/inputContainer/inputContainer.tsx b/src/components/input/inputContainer/inputContainer.tsx
@@ -53,6 +53,10 @@ export const InputContainer: React.FC<IInputContainerProps> = (props) => {
         variantToClassNames[processedVariant],
     );
 
+    const counterClasses = classNames('text-sm font-normal leading-tight text-neutral-600', {
+        'animate-shake': inputLength === maxLength,
+    });
+
     return (
         <div className={classNames('flex grow flex-col gap-2 md:gap-3', className)}>
             {(label != null || helpText != null) && (
@@ -71,11 +75,7 @@ export const InputContainer: React.FC<IInputContainerProps> = (props) => {
             )}
             <div className={containerClasses}>{children}</div>
             {maxLength != null && (
-                <p
-                    className={classNames('text-sm font-normal leading-tight text-neutral-600', {
-                        'animate-shake': inputLength === maxLength,
-                    })}
-                >
+                <p className={counterClasses}>
                     [{inputLength}/{maxLength}]
                 </p>
             )}

diff --git a/src/components/input/useInputProps.test.ts b/src/components/input/useInputProps.test.ts
@@ -1,4 +1,5 @@
-import { renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
+import type { ChangeEvent } from 'react';
 import { useInputProps } from './useInputProps';
 
 describe('useInputProps hook', () => {
@@ -8,14 +9,15 @@ describe('useInputProps hook', () => {
             variant: 'warning' as const,
             helpText: 'help-text',
             isOptional: true,
-            infoText: 'info-text',
             alert: { message: 'alert-message', variant: 'critical' as const },
             className: 'container-classname',
+            maxLength: 10,
         };
 
         const inputProps = {
             placeholder: 'input-placeholder',
             value: 'input-value',
+            maxLength: 10,
         };
 
         const { result } = renderHook(() => useInputProps({ ...containerProps, ...inputProps }));
@@ -36,12 +38,28 @@ describe('useInputProps hook', () => {
         const props = { isDisabled };
         const { result } = renderHook(() => useInputProps(props));
         expect(result.current.inputProps.disabled).toBeTruthy();
-        expect(result.current.inputProps.className).toContain('cursor-not-allowed');
     });
 
     it('sets a random id to the input property when the id prop is not set', () => {
         const { result } = renderHook(() => useInputProps({}));
         expect(result.current.containerProps.id).toBeDefined();
         expect(result.current.inputProps.id).toBeDefined();
     });
+
+    it('tracks the current input length for the container props', () => {
+        const newValue = 'newValue';
+        const changeEvent = { target: { value: newValue } } as ChangeEvent<HTMLInputElement>;
+        const { result } = renderHook(() => useInputProps({}));
+        expect(result.current.containerProps.inputLength).toEqual(0);
+        act(() => result.current.inputProps.onChange?.(changeEvent));
+        expect(result.current.containerProps.inputLength).toEqual(newValue.length);
+    });
+
+    it('calls the onChange property on input value change', () => {
+        const onChange = jest.fn();
+        const { result } = renderHook(() => useInputProps({ onChange }));
+        const changeEvent = { target: { value: '' } } as ChangeEvent<HTMLInputElement>;
+        act(() => result.current.inputProps.onChange?.(changeEvent));
+        expect(onChange).toHaveBeenCalledWith(changeEvent);
+    });
 });