From 8539e30888e7efaa9ca1d51d736d0306feb79371 Mon Sep 17 00:00:00 2001 From: Satoshi Qazi Muhammed Date: Sat, 10 Oct 2026 07:34:30 +0400 Subject: [PATCH] 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 | 2 +- .../react-components/src/Modal/Modal.spec.tsx | 47 ++++++++----------- .../react-components/src/Popup/Popup.spec.tsx | 32 ++++++------- 3 files changed, 34 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index b6dcd55..6981c9f 100644 --- a/package.json +++ b/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'" diff --git a/packages/react-components/src/Modal/Modal.spec.tsx b/packages/react-components/src/Modal/Modal.spec.tsx index 37b97e1..d7a752e 100644 --- a/packages/react-components/src/Modal/Modal.spec.tsx +++ b/packages/react-components/src/Modal/Modal.spec.tsx @@ -3,7 +3,7 @@ /// -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 openModal(); - await expectModalToBeOpen(); - await closeModal(); - await expectModalToBeClosed(); - }); + await expectModalToBeClosed(); + await openModal(); + await expectModalToBeOpen(); + await closeModal(); + await expectModalToBeClosed(); }); // eslint-disable-next-line jest/expect-expect it('renders all modal sections', async () => { renderModal(); - await waitFor(async () => { - await expectModalToBeClosed(); - await openModal(); - await expectModalToBeOpen(); + await expectModalToBeClosed(); + await openModal(); + await expectModalToBeOpen(); - await screen.findByText('Test Modal'); - await screen.findAllByText('Test Modal Content'); - await screen.findByRole('button', { name: 'Submit Modal' }); - }); + await screen.findByText('Test Modal'); + await screen.findAllByText('Test Modal Content'); + 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 openModal(); - await expectModalToBeOpen(); - }); + await expectModalToBeClosed(); + await openModal(); + 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' }); - - expect(screen.queryAllByTestId('test-modal')).toHaveLength(0); + await waitFor(() => expect(screen.queryAllByTestId('test-modal')).toHaveLength(0)); } async function expectModalToBeOpen () { - await new Promise((resolve) => setTimeout(resolve, 1000)); await screen.findByTestId('test-modal'); } diff --git a/packages/react-components/src/Popup/Popup.spec.tsx b/packages/react-components/src/Popup/Popup.spec.tsx index e336ef9..ba5ef72 100644 --- a/packages/react-components/src/Popup/Popup.spec.tsx +++ b/packages/react-components/src/Popup/Popup.spec.tsx @@ -3,7 +3,7 @@ /// -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 togglePopup(); - await expectPopupToBeOpen(); - await togglePopup(); - await expectPopupToBeClosed(); - }); + await expectPopupToBeClosed(); + await togglePopup(); + await expectPopupToBeOpen(); + await togglePopup(); + await expectPopupToBeClosed(); }); // eslint-disable-next-line jest/expect-expect it('closes popup with outside click', async () => { renderPopup(); - await waitFor(async () => { - await expectPopupToBeClosed(); - await togglePopup(); - await expectPopupToBeOpen(); - await clickOutside(); - await expectPopupToBeClosed(); - }); + await expectPopupToBeClosed(); + await togglePopup(); + await expectPopupToBeOpen(); + await clickOutside(); + 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'); }