Fix unit tests not properly checking if widgets have been removed or hidden

Author: wojtekmaj

package.json

@@ -51,6 +51,7 @@
     "@babel/preset-react": "^7.14.0",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.0",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.7.1",
     "husky": "^8.0.0",

src/DateTimePicker.spec.jsx

@@ -1,8 +1,23 @@
 import React, { createRef } from 'react';
-import { act, fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import DateTimePicker from './DateTimePicker';
 
+async function waitForElementToBeRemovedOrHidden(callback) {
+  const element = callback();
+
+  if (element) {
+    try {
+      await waitFor(() =>
+        expect(element).toHaveAttribute('class', expect.stringContaining('--closed')),
+      );
+    } catch (error) {
+      await waitForElementToBeRemoved(element);
+    }
+  }
+}
+
 describe('DateTimePicker', () => {
   it('passes default name to DateTimeInput', () => {
     const { container } = render(<DateTimePicker />);
@@ -409,68 +424,82 @@ describe('DateTimePicker', () => {
     });
   });
 
-  it('closes Calendar component when clicked outside', () => {
+  it('closes Calendar component when clicked outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isCalendarOpen />, { attachTo: root });
 
-    fireEvent.mouseDown(document.body);
+    userEvent.click(document.body);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__calendar'),
+    );
   });
 
-  it('closes Calendar component when focused outside', () => {
+  it('closes Calendar component when focused outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isCalendarOpen />, { attachTo: root });
 
     fireEvent.focusIn(document.body);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__calendar'),
+    );
   });
 
-  it('closes Calendar component when tapped outside', () => {
+  it('closes Calendar component when tapped outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isCalendarOpen />, { attachTo: root });
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
+    fireEvent.touchStart(document.body);
+
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__calendar'),
+    );
   });
 
-  it('closes Clock component when clicked outside', () => {
+  it('closes Clock component when clicked outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isClockOpen />, { attachTo: root });
 
-    fireEvent.mouseDown(document.body);
+    userEvent.click(document.body);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__clock'),
+    );
   });
 
-  it('closes Clock component when focused outside', () => {
+  it('closes Clock component when focused outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isClockOpen />, { attachTo: root });
 
     fireEvent.focusIn(document.body);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__clock'),
+    );
   });
 
-  it('closes Clock component when tapped outside', () => {
+  it('closes Clock component when tapped outside', async () => {
     const root = document.createElement('div');
     document.body.appendChild(root);
 
     const { container } = render(<DateTimePicker isClockOpen />, { attachTo: root });
 
     fireEvent.touchStart(document.body);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__clock'),
+    );
   });
 
   it('does not close Calendar component when focused within date inputs', () => {
@@ -503,7 +532,7 @@ describe('DateTimePicker', () => {
     expect(clock).toBeInTheDocument();
   });
 
-  it('closes Clock when Calendar is opened by a click on the calendar icon', () => {
+  it('closes Clock when Calendar is opened by a click on the calendar icon', async () => {
     const { container } = render(<DateTimePicker isClockOpen />);
 
     const clock = container.querySelector('.react-clock');
@@ -513,10 +542,12 @@ describe('DateTimePicker', () => {
 
     fireEvent.click(button);
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__clock'),
+    );
   });
 
-  it('closes Calendar when calling internal onChange by default', () => {
+  it('closes Calendar when calling internal onChange by default', async () => {
     const instance = createRef();
 
     const { container } = render(<DateTimePicker isCalendarOpen ref={instance} />);
@@ -527,7 +558,9 @@ describe('DateTimePicker', () => {
       onChangeInternal(new Date());
     });
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__calendar'),
+    );
   });
 
   it('does not close Calendar when calling internal onChange with prop closeWidgets = false', () => {
@@ -564,7 +597,7 @@ describe('DateTimePicker', () => {
     expect(calendar).toBeInTheDocument();
   });
 
-  it('closes Clock when calling internal onChange by default', () => {
+  it('closes Clock when calling internal onChange by default', async () => {
     const instance = createRef();
 
     const { container } = render(<DateTimePicker isClockOpen ref={instance} />);
@@ -575,7 +608,9 @@ describe('DateTimePicker', () => {
       onChangeInternal(new Date());
     });
 
-    waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
+    await waitForElementToBeRemovedOrHidden(() =>
+      container.querySelector('.react-datetime-picker__clock'),
+    );
   });
 
   it('does not close Clock when calling internal onChange with prop closeWidgets = false', () => {

yarn.lock

@@ -1888,6 +1888,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^14.4.0":
+  version: 14.4.3
+  resolution: "@testing-library/user-event@npm:14.4.3"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 852c48ea6db1c9471b18276617c84fec4320771e466cd58339a732ca3fd73ad35e5a43ae14f51af51a8d0a150dcf60fcaab049ef367871207bea8f92c4b8195e
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -6019,6 +6028,7 @@ __metadata:
     "@babel/preset-react": ^7.14.0
     "@testing-library/jest-dom": ^5.15.0
     "@testing-library/react": ^13.4.0
+    "@testing-library/user-event": ^14.4.0
     "@wojtekmaj/date-utils": ^1.0.3
     clsx: ^1.2.1
     eslint: ^8.26.0