@react-magma/dropzone 13.0.0 → 13.0.1-next.0

package/src/components/dropzone/Dropzone.test.js

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { cleanup, render, fireEvent, waitFor } from '@testing-library/react';
+import {
+  cleanup,
+  render,
+  act,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { I18nContext, defaultI18n, magma } from 'react-magma-dom';
 
@@ -15,6 +21,7 @@ describe('File Uploader', () => {
   window.URL.revokeObjectURL = jest.fn();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     files = [createFile('file1.pdf', 1111, 'application/pdf')];
     images = [
       createFile('cats.png', 1234, 'image/png'),
@@ -23,6 +30,7 @@ describe('File Uploader', () => {
   });
 
   afterEach(() => {
+    jest.useRealTimers();
     window.URL.createObjectURL.mockReset();
     cleanup();
   });
@@ -48,7 +56,6 @@ describe('File Uploader', () => {
 
   it('should find element by testId', () => {
     const testId = 'test-id';
-
     const { getByTestId } = render(<Dropzone testId={testId} />);
 
     expect(getByTestId(testId)).toBeInTheDocument();
@@ -58,16 +65,21 @@ describe('File Uploader', () => {
     const { getByRole, getByTestId } = render(<Dropzone testId="testId" />);
 
     const fileInputClickFn = jest.fn();
+
     const fileInput = getByTestId('file-input');
 
     fileInput.click = fileInputClickFn;
 
-    await userEvent.click(getByRole('button'));
+    userEvent.click(getByRole('button'));
 
-    expect(fileInputClickFn).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(fileInputClickFn).toHaveBeenCalled();
+    });
   });
 
   it('Does not violate accessibility standards', () => {
+    jest.useRealTimers();
+
     const { container } = render(<Dropzone />);
 
     return axe(container.innerHTML).then(result => {
@@ -77,7 +89,6 @@ describe('File Uploader', () => {
 
   it('Supports i18n', () => {
     const browseFiles = 'find those files';
-
     const { getByText } = render(
       <I18nContext.Provider
         value={{
@@ -97,11 +108,9 @@ describe('File Uploader', () => {
 
   it('sets {accept} prop on the <input>', () => {
     const accept = 'image/jpeg';
-
     const { container } = render(<Dropzone accept={accept} />);
 
     const input = container.querySelector('input');
-
     expect(input).toHaveAttribute('accept', accept);
   });
 
@@ -109,7 +118,6 @@ describe('File Uploader', () => {
     const { container } = render(<Dropzone multiple />);
 
     const input = container.querySelector('input');
-
     expect(input).toHaveAttribute('multiple');
   });
 
@@ -117,45 +125,35 @@ describe('File Uploader', () => {
     const { container } = render(<Dropzone />);
 
     const dropzone = container.querySelector('div');
+
     const dropEvt = new Event('drop', { bubbles: true });
     const dropEvtPreventDefaultSpy = jest.spyOn(dropEvt, 'preventDefault');
 
     fireEvent(dropzone, dropEvt);
-
     expect(dropEvtPreventDefaultSpy).toHaveBeenCalled();
   });
 
   it('border color changes for success', async () => {
     const data = createDtWithFiles(files);
     const testId = 'testId';
-
     const ui = <Dropzone testId={testId} />;
-
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     expect(dropzone).toHaveStyle(
       `border: 1px dashed ${magma.colors.neutral400}`
     );
 
     fireDragEnter(dropzone, data);
+    await flushPromises(rerender, ui);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(dropzone).toHaveStyle(
-        `border: 1px dashed ${magma.colors.success}`
-      );
-    });
+    expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.success}`);
   });
 
   it('border color changes for rejection', async () => {
     const data = createDtWithFiles(files);
     const testId = 'testId';
-
     const ui = <Dropzone accept="image/*" testId={testId} />;
-
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
@@ -164,17 +162,13 @@ describe('File Uploader', () => {
     );
 
     fireDragEnter(dropzone, data);
+    await flushPromises(rerender, ui);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.danger}`);
-    });
+    expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.danger}`);
   });
 
   it('calls onSendFiles for a single file added via the input', async () => {
     const onSendFileSpy = jest.fn();
-
     const ui = <Dropzone sendFiles onSendFile={onSendFileSpy} />;
 
     const { container, rerender } = render(ui);
@@ -183,19 +177,15 @@ describe('File Uploader', () => {
     Object.defineProperty(input, 'files', { value: files });
 
     dispatchEvt(input, 'change');
+    await flushPromises(rerender, ui);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: files[0] })
-      );
-    });
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: files[0] })
+    );
   });
 
   it('calls onSendFiles for multiple files added via the input', async () => {
     const onSendFileSpy = jest.fn();
-
     const ui = <Dropzone sendFiles onSendFile={onSendFileSpy} />;
 
     const { container, rerender } = render(ui);
@@ -204,17 +194,14 @@ describe('File Uploader', () => {
     Object.defineProperty(input, 'files', { value: images });
 
     dispatchEvt(input, 'change');
+    await flushPromises(rerender, ui);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: images[0] })
-      );
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: images[1] })
-      );
-    });
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: images[0] })
+    );
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: images[1] })
+    );
   });
 
   it('calls onSendFiles for a single file added via drop', async () => {
@@ -225,20 +212,16 @@ describe('File Uploader', () => {
     const ui = (
       <Dropzone sendFiles onSendFile={onSendFileSpy} testId={testId} />
     );
-
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: files[0] })
-      );
-    });
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: files[0] })
+    );
   });
 
   it('calls onSendFiles for a multiple files added via drop', async () => {
@@ -249,23 +232,19 @@ describe('File Uploader', () => {
     const ui = (
       <Dropzone sendFiles onSendFile={onSendFileSpy} testId={testId} />
     );
-
     const { getByTestId, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: images[0] })
-      );
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: images[1] })
-      );
-    });
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: images[0] })
+    );
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: images[1] })
+    );
   });
 
   it('delays calling onSendFiles until sendFiles is true', async () => {
@@ -280,26 +259,20 @@ describe('File Uploader', () => {
         testId={testId}
       />
     );
-
     const { getByTestId, rerender } = render(ui(false));
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui(false));
+    await flushPromises(rerender, ui(false));
 
-    await waitFor(() => {
-      expect(onSendFileSpy).not.toHaveBeenCalled();
-    });
+    expect(onSendFileSpy).not.toHaveBeenCalled();
 
-    rerender(ui(true));
+    await flushPromises(rerender, ui(true));
 
-    await waitFor(() => {
-      expect(onSendFileSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ file: files[0] })
-      );
-    });
+    expect(onSendFileSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ file: files[0] })
+    );
   });
 
   it('adds files to the file list', async () => {
@@ -311,14 +284,11 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(getByText(files[0].name)).toBeInTheDocument();
-    });
+    expect(getByText(files[0].name)).toBeInTheDocument();
   });
 
   it('preview for image files in the file list by default', async () => {
@@ -331,14 +301,11 @@ describe('File Uploader', () => {
     const { getByTestId, getByRole, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(getByRole('img')).toBeInTheDocument();
-    });
+    expect(getByRole('img')).toBeInTheDocument();
   });
 
   it('previews for image files can be disabled', async () => {
@@ -353,14 +320,11 @@ describe('File Uploader', () => {
     const { getByTestId, queryByRole, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(queryByRole('img')).not.toBeInTheDocument();
-    });
+    expect(queryByRole('img')).not.toBeInTheDocument();
   });
 
   it('shows errors on invalid file types in the file list', async () => {
@@ -372,14 +336,11 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(getByText('Invalid File Type')).toBeInTheDocument();
-    });
+    expect(getByText('Invalid File Type')).toBeInTheDocument();
   });
 
   it('shows errors on too many files in the file list', async () => {
@@ -391,16 +352,13 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(
-        getByText('You must upload a maximum of 1 files.')
-      ).toBeInTheDocument();
-    });
+    expect(
+      getByText('You must upload a maximum of 1 files.')
+    ).toBeInTheDocument();
   });
 
   it('shows errors on too few files in the file list', async () => {
@@ -414,13 +372,11 @@ describe('File Uploader', () => {
     const dropzone = getByTestId(testId);
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(
-        getByText('You must upload a minimum of 6 files.')
-      ).toBeInTheDocument();
-    });
+    expect(
+      getByText('You must upload a minimum of 6 files.')
+    ).toBeInTheDocument();
   });
 
   it('shows errors on too large of a file in the file list', async () => {
@@ -432,16 +388,13 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(
-        getByText('Upload only files with a maximum size of 1 Bytes.')
-      ).toBeInTheDocument();
-    });
+    expect(
+      getByText('Upload only files with a maximum size of 1 Bytes.')
+    ).toBeInTheDocument();
   });
 
   it('shows errors on too small of a file in the file list', async () => {
@@ -453,16 +406,13 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(
-        getByText('Upload only files with a minimum size of 9.77 KB.')
-      ).toBeInTheDocument();
-    });
+    expect(
+      getByText('Upload only files with a minimum size of 9.77 KB.')
+    ).toBeInTheDocument();
   });
 
   it('adds a Spinner to files in progress', async () => {
@@ -477,16 +427,13 @@ describe('File Uploader', () => {
     const { getByTestId, getByLabelText, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(getByText(files[0].name)).toBeInTheDocument();
-      expect(getByText('25%')).toBeInTheDocument();
-      expect(getByLabelText('Loading')).toBeInTheDocument();
-    });
+    expect(getByText(files[0].name)).toBeInTheDocument();
+    expect(getByText('25%')).toBeInTheDocument();
+    expect(getByLabelText('Loading')).toBeInTheDocument();
   });
 
   it('shows an error in the file list on error', async () => {
@@ -510,18 +457,14 @@ describe('File Uploader', () => {
     const { getByTestId, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(getByText('error from the processor')).toBeInTheDocument();
-    });
+    expect(getByText('error from the processor')).toBeInTheDocument();
   });
 
-  // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('changes to delete file on finish', async () => {
+  it('changes to delete file on finish', async () => {
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });
     };
@@ -533,23 +476,19 @@ describe('File Uploader', () => {
     const { getByTestId, getByLabelText, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
+    act(() => fireDrop(dropzone, data));
 
-    fireDrop(dropzone, data);
-
-    rerender(ui);
+    await flushPromises(rerender, ui);
+    await act(() => waitFor(() => getByLabelText('Delete file')));
 
-    await waitFor(() => {
-      expect(getByText(files[0].name)).toBeInTheDocument();
-      expect(getByLabelText('Delete file')).toBeInTheDocument();
-    });
+    expect(getByText(files[0].name)).toBeInTheDocument();
+    expect(getByLabelText('Delete file')).toBeInTheDocument();
   });
 
-  // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('deletes the file when the Delete File icon is clicked', async () => {
+  it('deletes the file when the Delete File icon is clicked', async () => {
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });
     };
-
     const data = createDtWithFiles(files);
     const testId = 'testId';
 
@@ -559,27 +498,21 @@ describe('File Uploader', () => {
       render(ui);
 
     const dropzone = getByTestId(testId);
-    fireDrop(dropzone, data);
-
-    rerender(ui);
+    act(() => fireDrop(dropzone, data));
 
-    await waitFor(() => {
-      expect(getByText(files[0].name)).toBeInTheDocument();
-    });
+    await flushPromises(rerender, ui);
+    await act(() => waitFor(() => getByLabelText('Delete file')));
 
+    expect(getByText(files[0].name)).toBeInTheDocument();
     const deleteIcon = getByLabelText('Delete file');
 
-    await userEvent.click(deleteIcon);
+    userEvent.click(deleteIcon);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(queryByText(files[0].name)).not.toBeInTheDocument();
-    });
+    await flushPromises(rerender, ui);
+    expect(queryByText(files[0].name)).not.toBeInTheDocument();
   });
 
-  // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('calls onDeleteFile when the Delete File icon is clicked', async () => {
+  it('calls onDeleteFile when the Delete File icon is clicked', async () => {
     const onDeleteFileSpy = jest.fn();
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });
@@ -599,24 +532,18 @@ describe('File Uploader', () => {
     const { getByTestId, getByLabelText, getByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
+    act(() => fireDrop(dropzone, data));
 
-    fireDrop(dropzone, data);
-
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(getByText(files[0].name)).toBeInTheDocument();
-    });
+    await flushPromises(rerender, ui);
+    await act(() => waitFor(() => getByLabelText('Delete file')));
 
+    expect(getByText(files[0].name)).toBeInTheDocument();
     const deleteIcon = getByLabelText('Delete file');
 
-    await userEvent.click(deleteIcon);
+    userEvent.click(deleteIcon);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(onDeleteFileSpy).toHaveBeenCalledTimes(1);
-    });
+    await flushPromises(rerender, ui);
+    expect(onDeleteFileSpy).toHaveBeenCalledTimes(1);
   });
 
   it('removes the file when the Remove File icon is clicked', async () => {
@@ -628,24 +555,16 @@ describe('File Uploader', () => {
     const { getByTestId, getByLabelText, queryByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(queryByText(files[0].name)).toBeInTheDocument();
-    });
-
+    await flushPromises(rerender, ui);
+    expect(queryByText(files[0].name)).toBeInTheDocument();
     const removeIcon = getByLabelText('Remove file');
 
-    await userEvent.click(removeIcon);
+    userEvent.click(removeIcon);
 
-    rerender(ui);
-
-    await waitFor(() => {
-      expect(queryByText(files[0].name)).not.toBeInTheDocument();
-    });
+    await flushPromises(rerender, ui);
+    expect(queryByText(files[0].name)).not.toBeInTheDocument();
   });
 
   it('calls onRemoveFile when the Remove File icon is clicked', async () => {
@@ -655,23 +574,18 @@ describe('File Uploader', () => {
 
     const ui = <Dropzone onRemoveFile={onRemoveFileSpy} testId={testId} />;
 
-    const { getByTestId, findByLabelText, rerender } = render(ui);
+    const { getByTestId, getByLabelText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
-
-    const removeIcon = await findByLabelText('Remove file');
-
-    await userEvent.click(removeIcon);
+    await flushPromises(rerender, ui);
+    const removeIcon = getByLabelText('Remove file');
 
-    rerender(ui);
+    userEvent.click(removeIcon);
 
-    await waitFor(() => {
-      expect(onRemoveFileSpy).toHaveBeenCalledTimes(1);
-    });
+    await flushPromises(rerender, ui);
+    expect(onRemoveFileSpy).toHaveBeenCalledTimes(1);
   });
 
   it('dropzoneOptions should be passed to Dropzone', async () => {
@@ -683,19 +597,20 @@ describe('File Uploader', () => {
     const { getByTestId, getAllByText, rerender } = render(ui);
 
     const dropzone = getByTestId(testId);
-
     fireDrop(dropzone, data);
 
-    rerender(ui);
+    await flushPromises(rerender, ui);
 
-    await waitFor(() => {
-      expect(
-        getAllByText(/You must upload a maximum of/i)[0]
-      ).toBeInTheDocument();
-    });
+    expect(
+      getAllByText(/You must upload a maximum of/i)[0]
+    ).toBeInTheDocument();
   });
 });
 
+async function flushPromises(rerender, ui) {
+  await act(() => waitFor(() => rerender(ui)));
+}
+
 function createDtWithFiles(files = []) {
   return {
     dataTransfer: {

package/src/components/dropzone/Dropzone.tsx

@@ -187,14 +187,13 @@ const Wrapper = styled.div<{ isInverse?: boolean }>`
   font-weight: 500;
   padding: ${({ theme }) => theme.spaceScale.spacing01};
 `;
-
 export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
   (props, ref) => {
     const {
       accept,
       containerStyle,
       disabled,
-
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       dropzoneOptions = {
         multiple: true,
       },
@@ -350,7 +349,6 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
     ) => {
       if (code === null) return null;
       const error = i18n.dropzone.errors[code];
-
       switch (code) {
         case 'too-many-files':
           return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;
@@ -397,7 +395,6 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
                 onFinish: setFinished,
                 onProgress: setProgress,
               });
-
             return file;
           });
         });