fix: added error param, test, story (#2488)

trussworks · Jul 11, 2023 · 42da85d · 42da85d
1 parent 54b5cc4
commit 42da85d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx
@@ -167,6 +167,8 @@ export const customText = (): React.ReactElement => (
       name="file-input-single"
       dragText="Arrastre el archivo aquí o "
       chooseText="elija de una carpeta"
+      errorText="Este no es un tipo de archivo válido."
+      accept=".no"
     />
   </FormGroup>
 )
diff --git a/src/components/forms/FileInput/FileInput.test.tsx b/src/components/forms/FileInput/FileInput.test.tsx
@@ -96,6 +96,8 @@ describe('FileInput component', () => {
       ...testProps,
       dragText: 'Custom dragText',
       chooseText: 'Custom chooseText',
+      errorText: 'Custom errorText',
+      accept: '.no',
     }
     const { getByTestId } = render(<FileInput {...customProps} />)
 
@@ -110,6 +112,18 @@ describe('FileInput component', () => {
     )
     expect(chooseText).toBeInTheDocument()
     expect(chooseText).toHaveClass('usa-file-input__choose')
+
+    const targetEl = getByTestId('file-input-droptarget')
+    fireEvent.drop(targetEl, {
+      dataTransfer: {
+        files: [TEST_PNG_FILE],
+      },
+    })
+    const errorText = within(getByTestId('file-input-error')).getByText(
+      customProps.errorText
+    )
+    expect(errorText).toBeInTheDocument()
+    expect(errorText).toHaveClass('usa-file-input__accepted-files-message')
   })
 
   describe('when disabled', () => {

diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx
@@ -15,6 +15,7 @@ type FileInputProps = {
   name: string
   dragText?: string
   chooseText?: string
+  errorText?: string
   disabled?: boolean
   multiple?: boolean
   accept?: string
@@ -37,6 +38,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     id,
     dragText,
     chooseText,
+    errorText,
     disabled,
     multiple,
     className,
@@ -90,6 +92,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     ? 'Drag files here or '
     : 'Drag file here or '
   const defaultChooseText = 'choose from folder'
+  const defaultErrorText = 'This is not a valid file type.'
 
   const filePreviews = []
   if (files) {
@@ -210,7 +213,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
           <div
             data-testid="file-input-error"
             className="usa-file-input__accepted-files-message">
-            This is not a valid file type.
+            {errorText || defaultErrorText}
           </div>
         )}
         <input