@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/dropzone/__test__/FileDropzone.test.js

@@ -0,0 +1,382 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-styled-components';
+import FileDropzone from '../FileDropzone';
+
+describe('Test FileDropzone Component', () => {
+  const CHUNK_SIZE = 6;
+  let dropzoneState = {
+    isUploading: false,
+    isRemoving: false,
+  };
+  const handleAddedFile = jest.fn();
+  const handleRemovedFile = jest.fn();
+  const handleCancelFile = jest.fn();
+  const handleUploading = jest.fn();
+  const handleComplete = jest.fn();
+  const handleError = jest.fn();
+  const file1 = new File(['File content'], 'file.zip', {
+    type: 'application/x-zip-compressed',
+  });
+  const file2 = new File(['File content'], 'file.zip', {
+    type: 'application/x-zip-compressed',
+  });
+
+  // dropzone component template
+  const renderComponent = (chunkSize) => {
+    return (
+      <FileDropzone
+        message='Drop or click to upload an APK file or zip file.'
+        accept='.apk, .zip'
+        translation={{
+          Cancel: 'Cancel',
+          FileIcon: 'FileIcon',
+          Pause: 'Pause',
+          RemoveFile: 'RemoveFile',
+          Resume: 'Resume',
+          Retry: 'Retry',
+        }}
+        state={dropzoneState}
+        chunkSize={chunkSize}
+        onAddedFile={handleAddedFile}
+        onRemovedFile={handleRemovedFile}
+        onCanceledFile={handleCancelFile}
+        onUploading={handleUploading}
+        onCompleted={handleComplete}
+        onError={handleError}
+      />
+    );
+  };
+
+  afterEach(() => {
+    dropzoneState = {
+      isUploading: false,
+      isRemoving: false,
+    };
+
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  test('render component', () => {
+    const { container } = render(renderComponent());
+
+    const dropzoneElement = container.firstChild;
+    expect(dropzoneElement).toBeInTheDocument();
+    expect(dropzoneElement).toHaveStyle('cursor: pointer');
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    expect(fileInputElement).toBeInTheDocument();
+    expect(fileInputElement).toHaveAttribute('type', 'file');
+    expect(fileInputElement).toHaveAttribute('accept', '.apk, .zip');
+
+    const messageContainer = screen.getByTestId('message-container');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+
+    const uploadIcon = screen.getByRole('img', { hidden: true });
+    expect(uploadIcon).toBeVisible();
+    expect(uploadIcon).toHaveAttribute('data-icon', 'upload');
+
+    const message = screen.getByText(
+      'Drop or click to upload an APK file or zip file.',
+    );
+    expect(message).toBeVisible();
+  });
+
+  test('add file via file selector', async () => {
+    render(renderComponent());
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file1);
+    expect(handleAddedFile).toHaveBeenCalledTimes(1);
+    expect(handleAddedFile).toHaveBeenLastCalledWith(file1);
+
+    const fileIcon = screen.getByRole('img', { hidden: true });
+    expect(fileIcon).toBeInTheDocument();
+    expect(fileIcon).toHaveAttribute('src', 'file.svg');
+    expect(fileIcon).toHaveAttribute('alt', 'FileIcon');
+
+    expect(screen.getByText('12.00 bytes')).toBeInTheDocument();
+    expect(screen.getByText('file.zip')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: 'RemoveFile' });
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  test('add file via drag and drop', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+
+    fireEvent.dragEnter(dropzoneElement);
+    fireEvent.dragOver(dropzoneElement);
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: [file1],
+      },
+    });
+    fireEvent.dragLeave(dropzoneElement);
+    expect(handleAddedFile).toHaveBeenCalledTimes(1);
+    expect(handleAddedFile).toHaveBeenLastCalledWith(file1);
+
+    const fileIcon = screen.getByRole('img', { hidden: true });
+    expect(fileIcon).toBeInTheDocument();
+    expect(fileIcon).toHaveAttribute('src', 'file.svg');
+    expect(fileIcon).toHaveAttribute('alt', 'FileIcon');
+
+    expect(screen.getByText('12.00 bytes')).toBeInTheDocument();
+    expect(screen.getByText('file.zip')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: 'RemoveFile' });
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  test('upload file', async () => {
+    handleAddedFile.mockImplementation(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+
+    const { rerender } = render(renderComponent());
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file1);
+    rerender(renderComponent());
+
+    await waitFor(() => {
+      expect(handleUploading).toHaveBeenCalledTimes(1);
+    });
+
+    const progressBar = screen.getByTestId('progress-bar');
+    const progressBarValue = screen.getByText('100%');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveStyleRule('width', '100%', {
+      modifier: '::before',
+    });
+    expect(progressBarValue).toBeInTheDocument();
+
+    expect(handleComplete).toHaveBeenCalledTimes(1);
+  });
+
+  test('remove file', async () => {
+    handleAddedFile.mockImplementation(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+    handleComplete.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: false };
+    });
+    handleRemovedFile.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: false };
+    });
+
+    const { rerender } = render(renderComponent());
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file2);
+    rerender(renderComponent());
+
+    await waitFor(() => {
+      expect(handleComplete).toHaveBeenCalledTimes(1);
+    });
+    rerender(renderComponent());
+
+    const removeButton = screen.getByRole('button', { name: 'RemoveFile' });
+    expect(removeButton).toBeInTheDocument();
+    userEvent.click(removeButton);
+    expect(handleRemovedFile).toHaveBeenCalledTimes(1);
+    expect(handleRemovedFile).toHaveBeenLastCalledWith(file2);
+  });
+
+  test('pause and resume uplaod', async () => {
+    handleAddedFile.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+    handleUploading.mockImplementation(() => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      });
+    });
+
+    const { rerender } = render(renderComponent(CHUNK_SIZE));
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file1);
+    rerender(renderComponent());
+
+    await waitFor(() => {
+      expect(handleUploading).toHaveBeenCalledTimes(1);
+    });
+
+    const pauseButton = screen.getByRole('button', { name: 'Pause' });
+    userEvent.click(pauseButton);
+    expect(pauseButton).not.toBeInTheDocument();
+
+    const resumeButton = screen.getByRole('button', { name: 'Resume' });
+    userEvent.click(resumeButton);
+    expect(resumeButton).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(handleUploading).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  test('error and retry upload', async () => {
+    handleAddedFile.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+    handleUploading
+      .mockImplementationOnce(() => {
+        return new Promise((resolve, reject) => {
+          reject(new Error());
+        });
+      })
+      .mockImplementation(() => {
+        return new Promise((resolve) => {
+          resolve();
+        });
+      });
+    handleError.mockImplementation(() => {
+      dropzoneState = { ...dropzoneState, isUploading: false };
+    });
+
+    const { rerender } = render(renderComponent());
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file1);
+    rerender(renderComponent());
+
+    await waitFor(() => {
+      expect(handleError).toHaveBeenCalledTimes(1);
+    });
+    rerender(renderComponent());
+
+    const retryButton = screen.getByRole('button', { name: 'Retry' });
+    userEvent.click(retryButton);
+
+    await waitFor(() => {
+      expect(handleComplete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('cancel file', async () => {
+    jest.useFakeTimers();
+    handleAddedFile.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+    handleUploading.mockImplementation(() => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      });
+    });
+    handleCancelFile.mockImplementationOnce(() => {
+      dropzoneState = { ...dropzoneState, isUploading: false };
+    });
+
+    const { rerender } = render(renderComponent(CHUNK_SIZE));
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    expect(fileInputElement).toBeInTheDocument();
+
+    userEvent.upload(fileInputElement, file1);
+    rerender(renderComponent(CHUNK_SIZE));
+
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => null);
+
+    const progressBar = screen.getByTestId('progress-bar');
+    const progressBarValue = screen.getByText('50%');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveStyleRule('width', '50%', {
+      modifier: '::before',
+    });
+    expect(progressBarValue).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    userEvent.click(cancelButton);
+    expect(handleCancelFile).toHaveBeenCalledTimes(1);
+    expect(handleCancelFile).toHaveBeenLastCalledWith(file1);
+
+    rerender(renderComponent());
+    expect(cancelButton).not.toBeInTheDocument();
+    const uploadIcon = screen.getByRole('img', { hidden: true });
+    expect(uploadIcon).toBeVisible();
+    expect(uploadIcon).toHaveAttribute('data-icon', 'upload');
+
+    const message = screen.getByText(
+      'Drop or click to upload an APK file or zip file.',
+    );
+    expect(message).toBeVisible();
+  });
+
+  test('drag interactive', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+    const messageContainer = screen.getByTestId('message-container');
+
+    fireEvent.dragEnter(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--color-primary)');
+    expect(messageContainer).toHaveStyle('opacity: 0.5');
+
+    fireEvent.dragOver(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--color-primary)');
+    expect(messageContainer).toHaveStyle('opacity: 0.5');
+
+    fireEvent.dragLeave(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+  });
+
+  test('drop not file data', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+
+    fireEvent.dragEnter(dropzoneElement);
+    fireEvent.dragOver(dropzoneElement);
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: [],
+      },
+    });
+
+    fireEvent.dragLeave(dropzoneElement);
+
+    expect(handleAddedFile).toHaveBeenCalledTimes(0);
+  });
+
+  test('exceed max files limit', async () => {
+    handleAddedFile.mockImplementation(() => {
+      dropzoneState = { ...dropzoneState, isUploading: true };
+    });
+
+    const { container, rerender } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+    const messageContainer = screen.getByTestId('message-container');
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, file1);
+    rerender(renderComponent());
+
+    await waitFor(() => {
+      expect(handleComplete).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.dragEnter(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+
+    fireEvent.dragOver(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: [file1],
+      },
+    });
+    fireEvent.dragLeave(dropzoneElement);
+
+    expect(handleAddedFile).toHaveBeenCalledTimes(1);
+  });
+});

package/src/dropzone/__test__/ImageDropzone.test.js

@@ -0,0 +1,290 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { dataURLtoFile } from '@cashub/utils';
+import ImageDropzone from '../ImageDropzone';
+
+describe('Test ImageDropzone Component', () => {
+  const handleRemovedFile = jest.fn();
+  const handleAddedFile = jest.fn();
+  const handleCropImage = jest.fn();
+  const setDropzoneFunc = jest.fn();
+  const croppper = {
+    handler: jest.fn(({ onCrop }) => {
+      onCrop('data:image/png;base64,fakeImageContent');
+    }),
+    onCrop: jest.fn(),
+  };
+  const handleBlur = jest.fn();
+  const files = [
+    new File(['File content1'], 'file1.png', {
+      type: 'image/png',
+    }),
+    new File(['File content2'], 'file2.png', {
+      type: 'image/png',
+    }),
+    new File(['File content3'], 'file3.png', {
+      type: 'image/png',
+    }),
+    new File(['File content4'], 'file4.png', {
+      type: 'image/png',
+    }),
+    new File(['File content5'], 'file5.png', {
+      type: 'image/png',
+    }),
+    new File(['File content6'], 'file6.png', {
+      type: 'image/png',
+    }),
+  ];
+  const fakeFile = dataURLtoFile('data:image/png;base64,fakeImageContent');
+  fakeFile.url = 'data:image/png;base64,fakeImageContent';
+
+  beforeEach(() => {
+    window.URL.createObjectURL = jest.fn(() => 'screenshot');
+  });
+
+  afterEach(() => {
+    window.URL.createObjectURL.mockReset();
+    jest.clearAllMocks();
+  });
+
+  // dropzone component template
+  const renderComponent = () => {
+    return (
+      <ImageDropzone
+        maxFiles='5'
+        message='Drop or click to upload at least 1-5 screenshots.'
+        accept='.jpeg, .bmp, .jpg, .png'
+        onRemovedFile={handleRemovedFile}
+        onAddedFile={handleAddedFile}
+        onCrop={handleCropImage}
+        setDropzoneFunc={setDropzoneFunc}
+        cropper={croppper}
+        onBlur={handleBlur}
+      />
+    );
+  };
+
+  test('render component', () => {
+    const { container } = render(renderComponent());
+
+    const dropzoneElement = container.firstChild;
+    expect(dropzoneElement).toBeInTheDocument();
+    expect(dropzoneElement).toHaveStyle('cursor: pointer');
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    expect(fileInputElement).toBeInTheDocument();
+    expect(fileInputElement).toHaveAttribute('type', 'file');
+    expect(fileInputElement).toHaveAttribute('multiple');
+    expect(fileInputElement).toHaveAttribute(
+      'accept',
+      '.jpeg, .bmp, .jpg, .png',
+    );
+
+    const messageContainer = screen.getByTestId('message-container');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+
+    const uploadIcon = screen.getByRole('img', { hidden: true });
+    expect(uploadIcon).toBeVisible();
+    expect(uploadIcon).toHaveAttribute('data-icon', 'upload');
+
+    const message = screen.getByText(
+      'Drop or click to upload at least 1-5 screenshots.',
+    );
+    expect(message).toBeVisible();
+  });
+
+  test('add file via file selector', () => {
+    const { container } = render(renderComponent());
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    userEvent.upload(fileInputElement, files.slice(0, 3));
+    expect(handleAddedFile).toHaveBeenCalledTimes(3);
+    expect(handleAddedFile).toHaveBeenLastCalledWith(files[2], 2);
+
+    let previewImage = screen.getAllByRole('img');
+    expect(previewImage).toHaveLength(3);
+    expect(previewImage[0]).toHaveAttribute('src', 'screenshot');
+    expect(previewImage[0]).toHaveAttribute('alt', 'file1.png');
+
+    // upload 3 more image and only 2 image should be accept
+    userEvent.upload(fileInputElement, files.slice(3, 6));
+    expect(handleAddedFile).toHaveBeenCalledTimes(5);
+
+    previewImage = screen.getAllByRole('img');
+    expect(previewImage).toHaveLength(5);
+    expect(previewImage[4]).toHaveAttribute('src', 'screenshot');
+    expect(previewImage[4]).toHaveAttribute('alt', 'file5.png');
+
+    const dropzoneElement = container.firstChild;
+    expect(dropzoneElement).toHaveStyle('cursor: default');
+  });
+
+  test('add file via drag and drop', () => {
+    const { container } = render(renderComponent());
+
+    const dropzoneElement = container.firstChild;
+
+    fireEvent.dragEnter(dropzoneElement);
+    fireEvent.dragOver(dropzoneElement);
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: files.slice(0, 3),
+      },
+    });
+    fireEvent.dragLeave(dropzoneElement);
+    expect(handleAddedFile).toHaveBeenCalledTimes(3);
+    expect(handleAddedFile).toHaveBeenLastCalledWith(files[2], 2);
+
+    let previewImage = screen.getAllByRole('img');
+    expect(previewImage).toHaveLength(3);
+    expect(previewImage[0]).toHaveAttribute('src', 'screenshot');
+    expect(previewImage[0]).toHaveAttribute('alt', 'file1.png');
+
+    // upload 3 more image and only 2 image should be accept
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: files.slice(3, 6),
+      },
+    });
+    fireEvent.dragLeave(dropzoneElement);
+    expect(handleAddedFile).toHaveBeenCalledTimes(5);
+
+    previewImage = screen.getAllByRole('img');
+    expect(previewImage).toHaveLength(5);
+    expect(previewImage[4]).toHaveAttribute('src', 'screenshot');
+    expect(previewImage[4]).toHaveAttribute('alt', 'file5.png');
+
+    expect(dropzoneElement).toHaveStyle('cursor: default');
+  });
+
+  test('programmatically add images', () => {
+    let dropzoneFunc = {};
+    setDropzoneFunc.mockImplementation((method) => {
+      dropzoneFunc = method;
+    });
+
+    render(renderComponent());
+
+    act(() => {
+      dropzoneFunc.addFiles(files.slice(0, 3));
+    });
+    expect(handleAddedFile).toHaveBeenCalledTimes(3);
+    expect(handleAddedFile).toHaveBeenLastCalledWith(files[2], 2);
+
+    const previewImage = screen.getAllByRole('img');
+    expect(previewImage).toHaveLength(3);
+    expect(previewImage[0]).toHaveAttribute('src', 'screenshot');
+    expect(previewImage[0]).toHaveAttribute('alt', 'file1.png');
+  });
+
+  test('remove image', () => {
+    let dropzoneFunc = {};
+    setDropzoneFunc.mockImplementation((method) => {
+      dropzoneFunc = method;
+    });
+
+    render(renderComponent());
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    userEvent.upload(fileInputElement, files.slice(0, 3));
+
+    let removeButton = screen.getAllByRole('button', { name: 'Remove' });
+    expect(removeButton).toHaveLength(3);
+    expect(screen.getAllByRole('img')).toHaveLength(3);
+
+    userEvent.click(removeButton[0]);
+    removeButton = screen.getAllByRole('button', { name: 'Remove' });
+    expect(removeButton).toHaveLength(2);
+    expect(screen.getAllByRole('img')).toHaveLength(2);
+    expect(handleRemovedFile).toHaveBeenCalledTimes(1);
+
+    // upload 3 more image and all image should be accept
+    userEvent.upload(fileInputElement, files.slice(3, 6));
+    expect(handleAddedFile).toHaveBeenCalledTimes(6);
+    expect(screen.getAllByRole('img')).toHaveLength(5);
+
+    // remove file by programmatically call remove
+    act(() => {
+      dropzoneFunc.remove(0);
+    });
+    removeButton = screen.getAllByRole('button', { name: 'Remove' });
+    expect(removeButton).toHaveLength(4);
+    expect(screen.getAllByRole('img')).toHaveLength(4);
+    expect(handleRemovedFile).toHaveBeenCalledTimes(2);
+  });
+
+  test('crop image', () => {
+    render(renderComponent());
+
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+    userEvent.upload(fileInputElement, files.slice(0, 3));
+
+    const cropButton = screen.getAllByRole('button', { name: 'Crop' });
+    expect(cropButton).toHaveLength(3);
+    userEvent.click(cropButton[0]);
+
+    expect(croppper.handler).toHaveBeenCalledTimes(1);
+    expect(croppper.onCrop).toHaveBeenCalledTimes(1);
+    expect(croppper.onCrop).toHaveBeenLastCalledWith(0, fakeFile);
+
+    const previewImage = screen.getAllByRole('img');
+    expect(previewImage[0]).toHaveAttribute(
+      'src',
+      'data:image/png;base64,fakeImageContent',
+    );
+  });
+
+  test('drag interactive', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+    const messageContainer = screen.getByTestId('message-container');
+
+    fireEvent.dragEnter(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--color-primary)');
+    expect(messageContainer).toHaveStyle('opacity: 0.5');
+
+    fireEvent.dragOver(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--color-primary)');
+    expect(messageContainer).toHaveStyle('opacity: 0.5');
+
+    fireEvent.dragLeave(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+    expect(messageContainer).not.toHaveStyle('opacity: 0.5');
+  });
+
+  test('exceed max files limit', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+    const fileInputElement = screen.getByTestId('hiddenFileInput');
+
+    userEvent.upload(fileInputElement, files.slice(0, 5));
+    expect(handleAddedFile).toHaveBeenCalledTimes(5);
+
+    fireEvent.dragEnter(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+
+    fireEvent.dragOver(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+
+    fireEvent.drop(dropzoneElement, {
+      dataTransfer: {
+        files: files.slice(5, 6),
+      },
+    });
+    fireEvent.dragLeave(dropzoneElement);
+    expect(handleAddedFile).toHaveBeenCalledTimes(5);
+  });
+
+  test('blur', () => {
+    const { container } = render(renderComponent());
+    const dropzoneElement = container.firstChild;
+
+    fireEvent.focus(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--color-primary)');
+
+    fireEvent.blur(dropzoneElement);
+    expect(dropzoneElement).toHaveStyle('border-color: var(--border-color)');
+
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
+});

package/src/dropzone/__test__/Message.test.js

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import Message from '../subComponent/Message';
+
+describe('Test Message Component', () => {
+  test('render', () => {
+    const { rerender } = render(<Message>Message</Message>);
+
+    const messageElement = screen.getByText('Message');
+    expect(messageElement).toHaveTextContent('Message');
+
+    rerender(<Message dragging>Message</Message>);
+    expect(messageElement).toHaveStyle('opacity: 0.5');
+  });
+});

package/src/dropzone/index.js

@@ -0,0 +1,2 @@
+export { default as FileDropzone } from './FileDropzone';
+export { default as ImageDropzone } from './ImageDropzone';