Bump @testing-library/user-event from 13.5.0 to 14.0.4 (#1458)

* Bump @testing-library/user-event from 13.5.0 to 14.0.0 Bumps [@testing-library/user-event](https://github.com/testing-library/user-event) from 13.5.0 to 14.0.0. - [Release notes](https://github.com/testing-library/user-event/releases) - [Changelog](https://github.com/testing-library/user-event/blob/main/CHANGELOG.md) - [Commits](testing-library/user-event@v13.5.0...v14.0.0) --- updated-dependencies: - dependency-name: "@testing-library/user-event" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * Add new userEvent support * Remove regenerator-runtime * Bump to 14.0.3 * Remove async handling of DIalogModal test Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Michael Altamirano <[email protected]>
curology · Mar 31, 2022 · b5fee36 · b5fee36
1 parent 9a26ebf
commit b5fee36
Show file tree

Hide file tree

Showing 22 changed files with 138 additions and 153 deletions.
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -20,10 +20,6 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>tests/setupTests.ts'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/__snapshots__',
-    '/dist*',
-  ],
-  timers: 'modern',
+  testPathIgnorePatterns: ['/node_modules/', '/__snapshots__', '/dist*'],
+  timers: 'real',
 };
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1,12 @@
+p1 
+red FF5E4D --> wasabi DEFAAB
+nude F2D6C7 --> cool 2 E6E3ED
+racing green 254233 --> warm base 212121
+Green CAD1B4 --> Warm 1 F7F2EE
+Burnt Orange AC6A27 --> E0D9CF
+
+p2
+Secondary 1 A6A1E2 --> 939BF0 (still secondary, etc.)
+Secondary 2 B8B4E8 --> B8BCFF
+Secondary 3 CAC7EE --> DCDEFF
+Secondary 4 F7F6FD --> F5F5FF
diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.0.7",
+    "@testing-library/user-event": "^14.0.3",
     "@types/jest": "^27.0.0",
     "@types/lodash.round": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
@@ -150,7 +150,6 @@
     "lint-staged": "^12.1.2",
     "prettier": "2.6.1",
     "react-is": "^17.0.1",
-    "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.11",
     "tslib": "^2.3.0",

diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 
 import { Accordion } from './index';
 
@@ -11,10 +11,6 @@ const testAccordionProps = {
 };
 
 describe('<Accordion />', () => {
-  /**
-   * TODO: Fix Emotion 11 CI snapshot serializer order issue
-   */
-  // eslint-disable-next-line jest/no-disabled-tests
   describe('UI snapshots', () => {
     it('renders regular accordion', () => {
       const { container } = render(<Accordion {...testAccordionProps} />);
@@ -39,14 +35,14 @@ describe('<Accordion />', () => {
     });
   });
 
-  it('invokes onClick when title is clicked', () => {
+  it('invokes onClick when title is clicked', async () => {
     const spy = jest.fn();
 
-    const { getByRole } = render(
+    const { getByRole, user } = render(
       <Accordion {...testAccordionProps} onClick={spy} />,
     );
 
-    userEvent.click(getByRole('button'));
+    await user.click(getByRole('button'));
 
     expect(spy).toHaveBeenCalled();
   });

diff --git a/src/shared-components/alert/test.tsx b/src/shared-components/alert/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { act, render } from 'src/tests/testingLibraryHelpers';
 import { assert } from 'src/utils/assert';
 
 import { Alert } from './index';
@@ -50,19 +50,20 @@ describe('Alert UI snapshots', () => {
     expect(container.firstElementChild).toMatchSnapshot();
   });
 
-  it('alert onExit is triggered on click', () => {
+  it('alert onExit is triggered on click', async () => {
     jest.useFakeTimers();
     const spy = jest.fn();
-    const { container } = render(
+    const { container, user } = render(
       <Alert
         content={<CustomContentComponent />}
         onExit={spy}
         duration="sticky"
       />,
+      { userEventOptions: { delay: null } },
     );
 
     assert(container.firstElementChild);
-    userEvent.click(container.firstElementChild);
+    await user.click(container.firstElementChild);
 
     act(() => {
       jest.runAllTimers();
@@ -71,20 +72,21 @@ describe('Alert UI snapshots', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  it('alert with custom CTA', () => {
+  it('alert with custom CTA', async () => {
     jest.useFakeTimers();
     const spy = jest.fn();
-    const { container } = render(
+    const { container, user } = render(
       <Alert
         content={<CustomContentComponent />}
         type="error"
         ctaContent="Update Payment Method"
         onExit={spy}
       />,
+      { userEventOptions: { delay: null } },
     );
 
     assert(container.firstElementChild);
-    userEvent.click(container.firstElementChild);
+    await user.click(container.firstElementChild);
 
     act(() => {
       jest.runAllTimers();

diff --git a/src/shared-components/banner/test.tsx b/src/shared-components/banner/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 
 import { Banner } from './index';
 
@@ -26,13 +26,13 @@ describe('Banner UI snapshots', () => {
     expect(container.firstElementChild).toMatchSnapshot();
   });
 
-  it('banner with click handler', () => {
+  it('banner with click handler', async () => {
     const spy = jest.fn();
-    const { getByRole } = render(
+    const { getByRole, user } = render(
       <Banner content="Banner with click handler" onClick={spy} />,
     );
 
-    userEvent.click(getByRole('button'));
+    await user.click(getByRole('button'));
     expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/src/shared-components/button/components/button/test.tsx b/src/shared-components/button/components/button/test.tsx
@@ -1,16 +1,12 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 import { assert } from 'src/utils/assert';
 
 import { CameraIcon } from '../../../../icons';
 
 import { Button } from './index';
 
 describe('<Button />', () => {
-  /**
-   * TODO: Fix Emotion 11 CI snapshot serializer order issue
-   */
-  // eslint-disable-next-line jest/no-disabled-tests
   describe('UI snapshots', () => {
     it('renders with props', () => {
       const { container } = render(
@@ -24,40 +20,42 @@ describe('<Button />', () => {
   });
 
   describe('onClick callback', () => {
-    it('should be invoked onClick', () => {
+    it('should be invoked onClick', async () => {
       const spy = jest.fn();
-      const { container } = render(<Button onClick={spy}>Button Text</Button>);
+      const { container, user } = render(
+        <Button onClick={spy}>Button Text</Button>,
+      );
 
       assert(container.firstElementChild);
-      userEvent.click(container.firstElementChild);
+      await user.click(container.firstElementChild);
 
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should not be invoked if disabled', () => {
+    it('should not be invoked if disabled', async () => {
       const spy = jest.fn();
-      const { container } = render(
+      const { container, user } = render(
         <Button disabled onClick={spy}>
           Button Text
         </Button>,
       );
 
       assert(container.firstElementChild);
-      userEvent.click(container.firstElementChild);
+      await user.click(container.firstElementChild);
 
       expect(spy).not.toHaveBeenCalled();
     });
 
-    it('should not be invoked if loading', () => {
+    it('should not be invoked if loading', async () => {
       const spy = jest.fn();
-      const { container } = render(
+      const { container, user } = render(
         <Button isLoading onClick={spy}>
           Button Text
         </Button>,
       );
 
       assert(container.firstElementChild);
-      userEvent.click(container.firstElementChild);
+      await user.click(container.firstElementChild);
 
       expect(spy).not.toHaveBeenCalled();
     });

diff --git a/src/shared-components/button/components/linkButton/test.tsx b/src/shared-components/button/components/linkButton/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 import { assert } from 'src/utils/assert';
 
 import { LinkButton } from './index';
@@ -31,28 +31,30 @@ describe('<LinkButton/>', () => {
   });
 
   describe('onClick callback', () => {
-    it('should be invoked onClick', () => {
+    it('should be invoked onClick', async () => {
       const spy = jest.fn();
 
-      const { container } = render(<LinkButton onClick={spy}>text</LinkButton>);
+      const { container, user } = render(
+        <LinkButton onClick={spy}>text</LinkButton>,
+      );
 
       assert(container.firstElementChild);
-      userEvent.click(container.firstElementChild);
+      await user.click(container.firstElementChild);
 
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should not be invoked if disabled', () => {
+    it('should not be invoked if disabled', async () => {
       const spy = jest.fn();
 
-      const { container } = render(
+      const { container, user } = render(
         <LinkButton disabled href="#" onClick={spy}>
           text
         </LinkButton>,
       );
 
       assert(container.firstElementChild);
-      userEvent.click(container.firstElementChild);
+      await user.click(container.firstElementChild);
 
       expect(spy).not.toHaveBeenCalled();
     });

diff --git a/src/shared-components/button/components/roundButton/test.tsx b/src/shared-components/button/components/roundButton/test.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 
 import { CameraIcon } from '../../../../icons';
 
 import { RoundButton } from './index';
 
 describe('<RoundButton />', () => {
-  /**
-   * TODO: Fix Emotion 11 CI snapshot serializer order issue
-   */
-  // eslint-disable-next-line jest/no-disabled-tests
   describe('UI snapshots', () => {
     it('renders with props', () => {
       const { container } = render(
@@ -23,39 +19,39 @@ describe('<RoundButton />', () => {
   });
 
   describe('onClick callback', () => {
-    it('should be invoked onClick', () => {
+    it('should be invoked onClick', async () => {
       const spy = jest.fn();
-      const { getByRole } = render(
+      const { getByRole, user } = render(
         <RoundButton onClick={spy} icon={<CameraIcon />}>
           Button Text
         </RoundButton>,
       );
 
-      userEvent.click(getByRole('button'));
+      await user.click(getByRole('button'));
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should not be invoked if disabled', () => {
+    it('should not be invoked if disabled', async () => {
       const spy = jest.fn();
-      const { getByRole } = render(
+      const { getByRole, user } = render(
         <RoundButton disabled onClick={spy} icon={<CameraIcon />}>
           Button Text
         </RoundButton>,
       );
 
-      userEvent.click(getByRole('button'));
+      await user.click(getByRole('button'));
       expect(spy).not.toHaveBeenCalled();
     });
 
-    it('should not be invoked if loading', () => {
+    it('should not be invoked if loading', async () => {
       const spy = jest.fn();
-      const { getByRole } = render(
+      const { getByRole, user } = render(
         <RoundButton isLoading onClick={spy} icon={<CameraIcon />}>
           Button Text
         </RoundButton>,
       );
 
-      userEvent.click(getByRole('button'));
+      await user.click(getByRole('button'));
       expect(spy).not.toHaveBeenCalled();
     });
   });

diff --git a/src/shared-components/button/components/textButton/test.tsx b/src/shared-components/button/components/textButton/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, userEvent } from 'src/tests/testingLibraryHelpers';
+import { render } from 'src/tests/testingLibraryHelpers';
 
 import { TextButton } from './index';
 
@@ -20,26 +20,26 @@ describe('<TextButton />', () => {
   });
 
   describe('onClick callback', () => {
-    it('should invoke onClick', () => {
+    it('should invoke onClick', async () => {
       const spy = jest.fn();
-      const { getByRole } = render(
+      const { getByRole, user } = render(
         <TextButton onClick={spy}>Button Text</TextButton>,
       );
 
-      userEvent.click(getByRole('button'));
+      await user.click(getByRole('button'));
 
       expect(spy).toHaveBeenCalled();
     });
 
-    it('should not be clickable if disabled', () => {
+    it('should not be clickable if disabled', async () => {
       const spy = jest.fn();
-      const { getByRole } = render(
+      const { getByRole, user } = render(
         <TextButton disabled onClick={spy}>
           Button Text
         </TextButton>,
       );
 
-      userEvent.click(getByRole('button'));
+      await user.click(getByRole('button'));
 
       expect(spy).not.toHaveBeenCalled();
     });

diff --git a/src/shared-components/carousel/test.tsx b/src/shared-components/carousel/test.tsx
@@ -11,10 +11,6 @@ const cards = [
 ];
 
 describe('<Carousel />', () => {
-  /**
-   * TODO: Fix Emotion 11 CI snapshot serializer order issue
-   */
-  // eslint-disable-next-line jest/no-disabled-tests
   describe('UI snapshots', () => {
     it('renders with props', () => {
       const { container } = render(