@popsure/dirty-swan 0.27.30 → 0.27.31

package/src/lib/components/multiDropzone/index.test.tsx

@@ -1,5 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act, fireEvent, render } from '../../util/testUtils';
 import '@testing-library/jest-dom';
 
 import MultiDropzone, { MultiDropzoneProps } from '.';
@@ -36,13 +35,10 @@ const setup = ({
 
 describe('MultiDropzone component', () => {
   it("should call onFileSelect on files change", async () => {
-    const screen = setup({});
-    const input = screen.getByTestId(inputTestId);
+    const { getByTestId, user } = setup({});
     const files = [file, file];
 
-    await act(async () => {
-      fireEvent.change(input, { target: { files } });
-    });
+    await user.upload(getByTestId(inputTestId), files);
 
     expect(mockOnFileSelect).toHaveBeenCalledWith(files);
   });
@@ -61,46 +57,45 @@ describe('MultiDropzone component', () => {
     });
 
     it("should show max file size error message", async () => {
-      const screen = setup({maxSize: 10 });
-      const input = screen.getByTestId(inputTestId);
+      const { getByTestId, getByText, user } = setup({ maxSize: 10 });
       const bigFile = file;
       Object.defineProperty(bigFile, 'size', { value: 1024 });
 
-      await act(async () => {
-        fireEvent.change(input, { target: { files: [bigFile] } });
-      });
+      await user.upload(getByTestId(inputTestId), [bigFile]);
 
       expect(
-        screen.getByText("File is too large. It must be less than 10 Bytes.")
+        getByText("File is too large. It must be less than 10 Bytes.")
       ).toBeInTheDocument();
     });
 
     it("should show wrong filetype error message", async () => {
-      const screen = setup({ accept: "document" });
-      const input = screen.getByTestId(inputTestId);
-  
+      const { getByTestId, getByText } = setup({ accept: "document" });
+      const input = getByTestId(inputTestId);
+
       await act(async () => {
+        // Keeping fireevent to emulate file change like drop
+        // Using userevent.upload doesn't work since input has an accept/html validation
         fireEvent.change(input, { target: { files: [file] } });
       });
-  
+
       expect(
-        screen.getByText("File type must be one of DOC, DOCX, PDF")
+        getByText("File type must be one of DOC, DOCX, PDF")
       ).toBeInTheDocument();
     });
 
     it("should remove wrong filetype error message", async () => {
-      const screen = setup({ accept: "document" });
-      const input = screen.getByTestId(inputTestId);
-  
+      const { getByAltText, getByTestId, queryByText, user } = setup({ accept: "document" });
+      const input = getByTestId(inputTestId);
+
       await act(async () => {
+        // Keeping fireevent to emulate file change like drop
+        // Using userevent.upload doesn't work since input has an accept/html validation
         fireEvent.change(input, { target: { files: [file] } });
       });
-      
-      screen.getByAltText("remove").click();
 
-      expect(
-        screen.queryByText("File type must be one of DOC, DOCX, PDF")
-      ).not.toBeInTheDocument();
+      await user.click(getByAltText("remove"));
+
+      expect(queryByText("File type must be one of DOC, DOCX, PDF")).not.toBeInTheDocument();
     });
   });
 

package/src/lib/components/segmentedControl/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '../../util/testUtils';
 
 import SegmentedControl from '.';
 
@@ -15,36 +15,30 @@ const setup = (onChange: (selectedIndex: number) => void = () => {}) => {
 describe('SegmentedControl component', () => {
   it('Should provide the index of the clicked button', async () => {
     const callback = jest.fn();
-    const screen = setup(callback);
-    const buttons = screen.getAllByRole('button');
+    const { getAllByRole, user } = setup(callback);
+    const buttons = getAllByRole('button');
 
     // click first button
-    fireEvent.click(buttons[0]);
+    await user.click(buttons[0]);
 
     // click second button
-    fireEvent.click(buttons[1]);
+    await user.click(buttons[1]);
 
     expect(callback.mock.calls).toEqual([[0], [1]]);
   });
 
   it('Should provide the index of the selected button on key down', async () => {
     const callback = jest.fn();
-    const screen = setup(callback);
-    const buttons = screen.getAllByRole('button');
-
-    // select first button on key down
-    fireEvent.keyDown(buttons[0], {
-      key: 'Enter',
-      code: 'Enter',
-      charCode: 13,
-    });
-
-    // select second button on key down
-    fireEvent.keyDown(buttons[1], {
-      key: 'Enter',
-      code: 'Enter',
-      charCode: 13,
-    });
+    const { getAllByRole, user } = setup(callback);
+    const buttons = getAllByRole('button');
+
+    // focus first button and select with keyboard
+    buttons[0].focus();
+    await user.keyboard('{enter}');
+
+    // focus second button and select with keyboard
+    buttons[1].focus();
+    await user.keyboard('{enter}');
 
     expect(callback.mock.calls).toEqual([[0], [1]]);
   });

package/src/lib/util/testUtils/customRender.tsx

@@ -0,0 +1,15 @@
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+
+interface CustomRenderResult extends RenderResult {
+ user: UserEvent;
+}
+
+export const customRender = (
+  ui: JSX.Element,
+  options: RenderOptions = {}
+): CustomRenderResult => ({
+  user: userEvent.setup(),
+  ...render(ui, options),
+});

package/src/lib/util/testUtils/index.ts

@@ -0,0 +1,5 @@
+// Re-export all @testing-library/react exports
+export * from '@testing-library/react';
+
+// Override render method with user-event
+export { customRender as render } from './customRender';