Modal and Popup specs: wait for states instead of sleeping; run them

Each test wrapped its whole sequence in waitFor() and slept 1s inside
every step, so waitFor's 1s timeout always expired ("Timed out in
waitFor"). Steps are now awaited in order, "open" is findBy* and
"closed" a single-condition waitFor, with an explicit cleanup between
tests. Both now pass (4 and 3) and exit, so they leave the yarn test
exclusions.

package.json

@@ -42,7 +42,7 @@
     "lint": "pezkuwi-dev-run-lint",
     "postinstall": "pezkuwi-dev-yarn-only",
     "start": "yarn clean && cd packages/apps && yarn pezkuwi-exec-webpack serve --config webpack.serve.cjs --port 3000",
-    "test": "pezkuwi-dev-run-test --env browser ^typesBundle ^chainEndpoints ^chainTypes ^:.slow. ^Accounts/index.spec ^modals/Create.spec ^Contacts/index.spec ^Bounties.spec ^AccountSidebar ^Modal/Modal.spec ^Popup/Popup.spec",
+    "test": "pezkuwi-dev-run-test --env browser ^typesBundle ^chainEndpoints ^chainTypes ^:.slow. ^Accounts/index.spec ^modals/Create.spec ^Contacts/index.spec ^Bounties.spec ^AccountSidebar",
     "test:all": "pezkuwi-dev-run-test --env browser ^chainEndpoints ^chainTypes",
     "test:one": "pezkuwi-dev-run-test --env browser",
     "test:skipped": "echo 'tests skipped'"

packages/react-components/src/Modal/Modal.spec.tsx

@@ -3,7 +3,7 @@
 
 /// <reference types="@pezkuwi/dev-test/globals.d.ts" />
 
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { Suspense } from 'react';
 import { ThemeProvider } from 'styled-components';
 
@@ -61,43 +61,39 @@ describe('Modal Component', () => {
     await i18next.changeLanguage('en');
   });
 
+  afterEach(cleanup);
+
   // eslint-disable-next-line jest/expect-expect
   it('opens and closes modal', async () => {
     renderModal();
 
-    await waitFor(async () => {
+    await expectModalToBeClosed();
-      await expectModalToBeClosed();
+    await openModal();
-      await openModal();
+    await expectModalToBeOpen();
-      await expectModalToBeOpen();
+    await closeModal();
-      await closeModal();
+    await expectModalToBeClosed();
-      await expectModalToBeClosed();
-    });
   });
 
   // eslint-disable-next-line jest/expect-expect
   it('renders all modal sections', async () => {
     renderModal();
 
-    await waitFor(async () => {
+    await expectModalToBeClosed();
-      await expectModalToBeClosed();
+    await openModal();
-      await openModal();
+    await expectModalToBeOpen();
-      await expectModalToBeOpen();
 
-      await screen.findByText('Test Modal');
+    await screen.findByText('Test Modal');
-      await screen.findAllByText('Test Modal Content');
+    await screen.findAllByText('Test Modal Content');
-      await screen.findByRole('button', { name: 'Submit Modal' });
+    await screen.findByRole('button', { name: 'Submit Modal' });
-    });
   });
 
   // eslint-disable-next-line jest/expect-expect
   it('closes modal with ESC button', async () => {
     renderModal();
 
-    await waitFor(async () => {
+    await expectModalToBeClosed();
-      await expectModalToBeClosed();
+    await openModal();
-      await openModal();
+    await expectModalToBeOpen();
-      await expectModalToBeOpen();
-    });
 
     fireEvent.keyDown(window, {
       charCode: 27,
@@ -106,21 +102,16 @@ describe('Modal Component', () => {
       keyCode: 27
     });
 
-    await waitFor(async () => {
+    await expectModalToBeClosed();
-      await expectModalToBeClosed();
-    });
   });
 });
 
 async function expectModalToBeClosed () {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   await screen.findByRole('button', { name: 'Open Test Modal' });
-
+  await waitFor(() => expect(screen.queryAllByTestId('test-modal')).toHaveLength(0));
-  expect(screen.queryAllByTestId('test-modal')).toHaveLength(0);
 }
 
 async function expectModalToBeOpen () {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   await screen.findByTestId('test-modal');
 }
 

packages/react-components/src/Popup/Popup.spec.tsx

@@ -3,7 +3,7 @@
 
 /// <reference types="@pezkuwi/dev-test/globals.d.ts" />
 
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { Suspense } from 'react';
 import { ThemeProvider } from 'styled-components';
 
@@ -42,41 +42,37 @@ describe('Popup Component', () => {
     await i18next.changeLanguage('en');
   });
 
+  afterEach(cleanup);
+
   // eslint-disable-next-line jest/expect-expect
   it('opens and closes', async () => {
     renderPopup();
 
-    await waitFor(async () => {
+    await expectPopupToBeClosed();
-      await expectPopupToBeClosed();
+    await togglePopup();
-      await togglePopup();
+    await expectPopupToBeOpen();
-      await expectPopupToBeOpen();
+    await togglePopup();
-      await togglePopup();
+    await expectPopupToBeClosed();
-      await expectPopupToBeClosed();
-    });
   });
 
   // eslint-disable-next-line jest/expect-expect
   it('closes popup with outside click', async () => {
     renderPopup();
 
-    await waitFor(async () => {
+    await expectPopupToBeClosed();
-      await expectPopupToBeClosed();
+    await togglePopup();
-      await togglePopup();
+    await expectPopupToBeOpen();
-      await expectPopupToBeOpen();
+    await clickOutside();
-      await clickOutside();
+    await expectPopupToBeClosed();
-      await expectPopupToBeClosed();
-    });
   });
 });
 
 async function expectPopupToBeClosed () {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   await screen.findByRole('button');
-  expect(screen.queryAllByText('Test popup content')).toHaveLength(0);
+  await waitFor(() => expect(screen.queryAllByText('Test popup content')).toHaveLength(0));
 }
 
 async function expectPopupToBeOpen () {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   await screen.findByText('Test popup content');
 }