chore: add ability to clear error state and add tests

aragon · Jan 15, 2025 · b849a9e · b849a9e
1 parent fa4d4c4
commit b849a9e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/core/components/forms/inputFileAvatar/inputFileAvatar.test.tsx b/src/core/components/forms/inputFileAvatar/inputFileAvatar.test.tsx
@@ -129,4 +129,26 @@ describe('<InputFileAvatar /> component', () => {
         expect(previewImg).toBeInTheDocument();
         expect(previewImg.src).toEqual(value.url);
     });
+
+    it('renders the cancel button when error is present and clears error on button click', async () => {
+        const user = userEvent.setup();
+        const onChange = jest.fn();
+
+        const { rerender } = render(
+            createTestComponent({
+                onChange,
+                value: { error: InputFileAvatarError.WRONG_DIMENSION },
+            }),
+        );
+
+        const cancelButton = await screen.findByRole('button');
+        expect(cancelButton).toBeInTheDocument();
+
+        await user.click(cancelButton);
+
+        expect(onChange).toHaveBeenCalledWith(undefined);
+
+        rerender(createTestComponent({ onChange }));
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
 });
diff --git a/src/core/components/forms/inputFileAvatar/inputFileAvatar.tsx b/src/core/components/forms/inputFileAvatar/inputFileAvatar.tsx
@@ -127,7 +127,8 @@ export const InputFileAvatar: React.FC<IInputFileAvatarProps> = (props) => {
         <InputContainer id={randomId} useCustomWrapper={true} {...containerProps}>
             <div {...getRootProps()} className={inputAvatarClassNames}>
                 <input {...getInputProps()} id={randomId} />
-                {value?.url ? (
+
+                {value?.url || value?.error ? (
                     <div className="relative">
                         <Avatar src={value.url} size="lg" className="cursor-pointer" data-testid="avatar" />
                         <button