test: create input character counter test

nginformatica · Feb 29, 2024 · 8567c4e · 8567c4e
1 parent bc5e989
commit 8567c4e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/src/core/inputs/text-field/text-field.spec.tsx b/src/core/inputs/text-field/text-field.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { act } from 'react-dom/test-utils'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import TextField from '@/test/mocks/text-field-mock'
 import TextFieldOptions from '@/test/mocks/text-field-options-mock'
@@ -134,4 +134,15 @@ describe('TextField', () => {
 
         expect(textField.value).toBe('')
     })
+
+    it.only('should render character counter', () => {
+        render(
+            <TextField characters inputProps={{ placeholder: 'Description' }} />
+        )
+        const counter = screen.getByTestId('characters-counter')
+
+        waitFor(() => {
+            expect(counter).toBeDefined()
+        })
+    })
 })
diff --git a/src/test/mocks/text-field-mock.tsx b/src/test/mocks/text-field-mock.tsx
@@ -6,6 +6,7 @@ import { TextField } from '@/core/inputs/text-field'
 interface IProps {
     initialOption?: string
     inputProps?: TextFieldProps
+    characters?: boolean
 }
 
 const LIST = [
@@ -16,7 +17,7 @@ const LIST = [
     { label: 'Fable', value: 'fable' }
 ]
 
-const Default = ({ inputProps, initialOption }: IProps) => {
+const Default = ({ inputProps, initialOption, characters }: IProps) => {
     const [value, setValue] = React.useState(initialOption ? initialOption : '')
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -28,19 +29,28 @@ const Default = ({ inputProps, initialOption }: IProps) => {
     }
 
     return (
-        <TextField
-            value={value}
-            onChange={handleChange}
-            onClear={handleClear}
-            {...inputProps}>
-            {inputProps?.select
-                ? LIST.map(({ label, value }) => (
-                      <ListItem key={value} value={value}>
-                          {label}
-                      </ListItem>
-                  ))
-                : undefined}
-        </TextField>
+        <>
+            <TextField
+                value={value}
+                characters={characters}
+                onChange={handleChange}
+                onClear={handleClear}
+                {...inputProps}>
+                {inputProps?.select
+                    ? LIST.map(({ label, value }) => (
+                          <ListItem key={value} value={value}>
+                              {label}
+                          </ListItem>
+                      ))
+                    : undefined}
+            </TextField>
+            {characters && (
+                <span data-testid='characters-counter'>
+                    {value.toString().length}/
+                    {inputProps?.inputProps?.maxLength}
+                </span>
+            )}
+        </>
     )
 }