@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputUpload/input-upload.test.tsx

@@ -0,0 +1,556 @@
+import { composeStories } from '@storybook/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+
+import { InputUpload } from './input-upload';
+import * as InputUploadStories from './input-upload.stories';
+
+const { Default, WithImagePreview, Loading, Disabled, WithError } = composeStories(InputUploadStories);
+
+const mockCreateObjectURL = vi.fn();
+const mockRevokeObjectURL = vi.fn();
+
+Object.defineProperty(URL, 'createObjectURL', {
+  value: mockCreateObjectURL,
+  writable: true,
+});
+
+Object.defineProperty(URL, 'revokeObjectURL', {
+  value: mockRevokeObjectURL,
+  writable: true,
+});
+
+describe('<InputUpload />', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCreateObjectURL.mockReturnValue('mock-url');
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with basic props', () => {
+      render(<Default />);
+
+      expect(screen.getByText('File Upload')).toBeInTheDocument();
+      expect(screen.getByText('Select a file')).toBeInTheDocument();
+      expect(screen.getByText('Importar')).toBeInTheDocument();
+    });
+
+    it('should render without label when not provided', () => {
+      render(
+        <InputUpload
+          placeholder="Select a file"
+          accept=".pdf"
+        />
+      );
+
+      expect(screen.queryByText('File Upload')).not.toBeInTheDocument();
+      expect(screen.getByText('Select a file')).toBeInTheDocument();
+    });
+
+    it('should show preview area when showPreview is true', () => {
+      render(<WithImagePreview />);
+
+      const previewContainer = document.querySelector('[class*="w-[92px]"]');
+      expect(previewContainer).toBeInTheDocument();
+    });
+
+    it('should not show preview area when showPreview is false', () => {
+      render(
+        <InputUpload
+          label="File Upload"
+          showPreview={false}
+        />
+      );
+
+      const previewArea = screen.queryByRole('img', { hidden: true });
+      expect(previewArea).not.toBeInTheDocument();
+    });
+
+    it('should display custom button text', () => {
+      render(
+        <InputUpload
+          buttonText="Choose File"
+        />
+      );
+
+      expect(screen.getByText('Choose File')).toBeInTheDocument();
+    });
+
+    it('should display helper text when provided', () => {
+      render(<Default />);
+
+      expect(screen.getByText('Drag and drop a file or click to select')).toBeInTheDocument();
+    });
+
+    it('should display error message when provided', () => {
+      render(<WithError />);
+
+      expect(screen.getByText('File too large. Maximum size: 5MB')).toBeInTheDocument();
+    });
+
+    it('should display accepted formats and max size when both are provided', () => {
+      render(<Default />);
+
+      expect(screen.getByText('Drag and drop a file or click to select')).toBeInTheDocument();
+    });
+  });
+
+  describe('File Selection', () => {
+    it('should call onFileSelect when a file is selected', async () => {
+      const mockOnFileSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          onFileSelect={mockOnFileSelect}
+          accept="image/*"
+        />
+      );
+
+      const file = new File([ 'test' ], 'test.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file ] } });
+
+      await waitFor(() => {
+        expect(mockOnFileSelect).toHaveBeenCalledWith(file, undefined);
+      });
+    });
+
+    it('should display selected file name', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          placeholder="Select a file"
+        />
+      );
+
+      const file = new File([ 'test' ], 'document.pdf', { type: 'application/pdf' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file ] } });
+
+      await waitFor(() => {
+        expect(screen.getByText('document.pdf')).toBeInTheDocument();
+      });
+    });
+
+    it('should create preview URL for images when showPreview is true', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          showPreview={true}
+          accept="image/*"
+        />
+      );
+
+      const file = new File([ 'test' ], 'image.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file ] } });
+
+      await waitFor(() => {
+        expect(mockCreateObjectURL).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('should not create preview URL for non-image files', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          showPreview={true}
+          accept=".pdf"
+        />
+      );
+
+      const file = new File([ 'test' ], 'document.pdf', { type: 'application/pdf' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file ] } });
+
+      await waitFor(() => {
+        expect(mockCreateObjectURL).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('File Validation', () => {
+    it('should validate file size and call onError for oversized files', async () => {
+      const mockOnError = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          maxSize={1} // 1MB
+          onError={mockOnError}
+          accept="image/*"
+        />
+      );
+
+      const largeFile = new File([ 'x'.repeat(2 * 1024 * 1024) ], 'large.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ largeFile ] } });
+
+      await waitFor(() => {
+        expect(mockOnError).toHaveBeenCalledWith('Arquivo muito grande. Tamanho máximo: 1MB');
+      });
+    });
+
+    it('should validate file type and call onError for unsupported types', async () => {
+      const mockOnError = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          accept=".pdf,.doc"
+          onError={mockOnError}
+        />
+      );
+
+      const invalidFile = new File([ 'test' ], 'test.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ invalidFile ] } });
+
+      await waitFor(() => {
+        expect(mockOnError).toHaveBeenCalledWith('Tipo de arquivo não suportado. Tipos aceitos: .pdf,.doc');
+      });
+    });
+
+    it('should accept files with correct MIME type', async () => {
+      const mockOnFileSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          accept="image/jpeg"
+          onFileSelect={mockOnFileSelect}
+        />
+      );
+
+      const validFile = new File([ 'test' ], 'image.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ validFile ] } });
+
+      await waitFor(() => {
+        expect(mockOnFileSelect).toHaveBeenCalledWith(validFile, undefined);
+      });
+    });
+
+    it('should accept files with correct extension', async () => {
+      const mockOnFileSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          accept=".jpg,.png"
+          onFileSelect={mockOnFileSelect}
+        />
+      );
+
+      const validFile = new File([ 'test' ], 'image.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ validFile ] } });
+
+      await waitFor(() => {
+        expect(mockOnFileSelect).toHaveBeenCalledWith(validFile, undefined);
+      });
+    });
+  });
+
+  describe('Component States', () => {
+    it('should show loading state', () => {
+      render(<Loading />);
+
+      expect(screen.getByText('Upload in Progress')).toBeInTheDocument();
+      expect(screen.getByText('Uploading...')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /importar/i })).toBeDisabled();
+    });
+
+    it('should show disabled state', () => {
+      render(<Disabled />);
+
+      expect(screen.getByText('Upload Disabled')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /importar/i })).toBeDisabled();
+    });
+
+    it('should not allow file selection when disabled', async () => {
+      const mockOnFileSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          disabled={true}
+          onFileSelect={mockOnFileSelect}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: /importar/i });
+      await user.click(button);
+
+      expect(mockOnFileSelect).not.toHaveBeenCalled();
+    });
+
+    it('should not allow file selection when loading', async () => {
+      const mockOnFileSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          loading={true}
+          onFileSelect={mockOnFileSelect}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: /importar/i });
+      await user.click(button);
+
+      expect(mockOnFileSelect).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Drag and Drop', () => {
+    it('should handle drag and drop for valid files', async () => {
+      const mockOnFileSelect = vi.fn();
+
+      render(
+        <InputUpload
+          onFileSelect={mockOnFileSelect}
+          accept="image/*"
+        />
+      );
+
+      const file = new File([ 'test' ], 'test.jpg', { type: 'image/jpeg' });
+      const dropZone = screen.getByText('Selecione um arquivo').closest('div');
+
+      if (dropZone) {
+        fireEvent.dragOver(dropZone);
+        fireEvent.drop(dropZone, {
+          dataTransfer: {
+            files: [ file ],
+          },
+        });
+
+        await waitFor(() => {
+          expect(mockOnFileSelect).toHaveBeenCalledWith(file, undefined);
+        });
+      }
+    });
+
+    it('should not handle drag and drop when disabled', async () => {
+      const mockOnFileSelect = vi.fn();
+
+      render(
+        <InputUpload
+          disabled={true}
+          onFileSelect={mockOnFileSelect}
+          accept="image/*"
+        />
+      );
+
+      const file = new File([ 'test' ], 'test.jpg', { type: 'image/jpeg' });
+      const dropZone = screen.getByText('Selecione um arquivo').closest('div');
+
+      if (dropZone) {
+        fireEvent.dragOver(dropZone);
+        fireEvent.drop(dropZone, {
+          dataTransfer: {
+            files: [ file ],
+          },
+        });
+
+        await waitFor(() => {
+          expect(mockOnFileSelect).not.toHaveBeenCalled();
+        });
+      }
+    });
+
+    it('should not handle drag and drop when loading', async () => {
+      const mockOnFileSelect = vi.fn();
+
+      render(
+        <InputUpload
+          loading={true}
+          onFileSelect={mockOnFileSelect}
+          accept="image/*"
+        />
+      );
+
+      const file = new File([ 'test' ], 'test.jpg', { type: 'image/jpeg' });
+      const dropZone = screen.getByText('Selecione um arquivo').closest('div');
+
+      if (dropZone) {
+        fireEvent.dragOver(dropZone);
+        fireEvent.drop(dropZone, {
+          dataTransfer: {
+            files: [ file ],
+          },
+        });
+
+        await waitFor(() => {
+          expect(mockOnFileSelect).not.toHaveBeenCalled();
+        });
+      }
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should cleanup object URLs when component unmounts', () => {
+      const { unmount } = render(
+        <InputUpload
+          showPreview={true}
+        />
+      );
+
+      const file = new File([ 'test' ], 'image.jpg', { type: 'image/jpeg' });
+      mockCreateObjectURL.mockReturnValue('mock-url');
+
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file ] } });
+
+      unmount();
+
+      expect(mockRevokeObjectURL).toHaveBeenCalled();
+    });
+
+    it('should cleanup previous object URL when new file is selected', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <InputUpload
+          showPreview={true}
+          accept="image/*"
+        />
+      );
+
+      const file1 = new File([ 'test1' ], 'image1.jpg', { type: 'image/jpeg' });
+      const file2 = new File([ 'test2' ], 'image2.jpg', { type: 'image/jpeg' });
+      const button = screen.getByRole('button', { name: /importar/i });
+
+      await user.click(button);
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      fireEvent.change(fileInput, { target: { files: [ file1 ] } });
+
+      await waitFor(() => {
+        expect(mockCreateObjectURL).toHaveBeenCalledWith(file1);
+      });
+
+      fireEvent.change(fileInput, { target: { files: [ file2 ] } });
+
+      await waitFor(() => {
+        expect(mockRevokeObjectURL).toHaveBeenCalled();
+        expect(mockCreateObjectURL).toHaveBeenCalledWith(file2);
+      });
+    });
+  });
+
+  describe('Preview Sizes', () => {
+    it('should apply correct classes for small preview size', () => {
+      render(
+        <InputUpload
+          showPreview={true}
+          previewSize="sm"
+        />
+      );
+
+      const previewContainer = document.querySelector('[class*="w-16"]');
+      expect(previewContainer).toBeInTheDocument();
+    });
+
+    it('should apply correct classes for medium preview size', () => {
+      render(
+        <InputUpload
+          showPreview={true}
+          previewSize="md"
+        />
+      );
+
+      const previewContainer = document.querySelector('[class*="w-[92px]"]');
+      expect(previewContainer).toBeInTheDocument();
+    });
+
+    it('should apply correct classes for large preview size', () => {
+      render(
+        <InputUpload
+          showPreview={true}
+          previewSize="lg"
+        />
+      );
+
+      const previewContainer = document.querySelector('[class*="w-32"]');
+      expect(previewContainer).toBeInTheDocument();
+    });
+  });
+
+  describe('Storybook Stories', () => {
+    it('should render Default story correctly', () => {
+      render(<Default />);
+
+      expect(screen.getByText('File Upload')).toBeInTheDocument();
+      expect(screen.getByText('Select a file')).toBeInTheDocument();
+      expect(screen.getByText('Drag and drop a file or click to select')).toBeInTheDocument();
+    });
+
+    it('should render WithImagePreview story correctly', () => {
+      render(<WithImagePreview />);
+
+      expect(screen.getByText('Profile Picture')).toBeInTheDocument();
+      expect(screen.getByText('Select an image')).toBeInTheDocument();
+      const previewArea = document.querySelector('[class*="w-[92px]"]');
+      expect(previewArea).toBeInTheDocument();
+    });
+
+    it('should render Loading story correctly', () => {
+      render(<Loading />);
+
+      expect(screen.getByText('Upload in Progress')).toBeInTheDocument();
+      expect(screen.getByText('Uploading...')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /importar/i })).toBeDisabled();
+    });
+
+    it('should render Disabled story correctly', () => {
+      render(<Disabled />);
+
+      expect(screen.getByText('Upload Disabled')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /importar/i })).toBeDisabled();
+    });
+
+    it('should render WithError story correctly', () => {
+      render(<WithError />);
+
+      expect(screen.getByText('Document')).toBeInTheDocument();
+      expect(screen.getByText('File too large. Maximum size: 5MB')).toBeInTheDocument();
+    });
+  });
+});