+
[{inputLength}/{maxLength}]
)} diff --git a/src/components/input/useInputProps.test.ts b/src/components/input/useInputProps.test.ts index 4b2e8008b..5f1fec2f8 100644 --- 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,7 +38,6 @@ 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', () => { @@ -44,4 +45,21 @@ describe('useInputProps hook', () => { 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