diff --git a/ui/src/components/CustomControl/CustomControl.test.tsx b/ui/src/components/CustomControl/CustomControl.test.tsx index f4c96cb86..f1641d06a 100644 --- a/ui/src/components/CustomControl/CustomControl.test.tsx +++ b/ui/src/components/CustomControl/CustomControl.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react'; +import { act, render, screen, waitFor } from '@testing-library/react'; import React from 'react'; import userEvent from '@testing-library/user-event'; import CustomControl from './CustomControl'; @@ -18,7 +18,7 @@ const mockClearErrorMsg = jest.fn(); const FIELD_NAME = 'testCustomField'; -beforeEach(() => { +const setup = async () => { const mockConfig = getGlobalConfigMock(); setUnifiedConfig(mockConfig); @@ -26,40 +26,50 @@ beforeEach(() => { virtual: true, }); - render( - - ); -}); + await act(async () => { + render( + + ); + + const loading = screen.queryByText('Loading...'); + if (loading) { + await waitFor(() => expect(loading).not.toHaveTextContent('Loading...')); + } + }); +}; it('should render custom component correctly', async () => { + await setup(); const renderedModal = await screen.findByTestId('customSelect'); expect(renderedModal).toBeInTheDocument(); }); it('should try to add validator', async () => { + await setup(); expect(addingCustomValidation).toHaveBeenCalled(); }); it('should correctly call handler on change', async () => { + await setup(); const selectElem = document.querySelector('select'); expect(selectElem).toBeInTheDocument(); const SELECTED_OPTION = 'input_one'; diff --git a/ui/src/components/EntityModal/EntityModal.test.tsx b/ui/src/components/EntityModal/EntityModal.test.tsx index a43d8a556..4f6b46e6b 100644 --- a/ui/src/components/EntityModal/EntityModal.test.tsx +++ b/ui/src/components/EntityModal/EntityModal.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { http, HttpResponse } from 'msw'; import EntityModal, { EntityModalProps } from './EntityModal'; @@ -491,12 +491,12 @@ describe('Oauth - separated endpoint authorization', () => { // triggering manually external oauth window behaviour after success authorization const code = '200'; - window.getMessage({ code, state: stateCodeFromUrl, error: undefined }); - - await waitFor(async () => { - expect(requestHandler).toHaveBeenCalledTimes(1); + await act(async () => { + window.getMessage({ code, state: stateCodeFromUrl, error: undefined }); }); + expect(requestHandler).toHaveBeenCalledTimes(1); + const receivedRequest: Request = requestHandler.mock.calls[0][0]; const receivedBody = await receivedRequest.text(); @@ -534,7 +534,9 @@ describe('Oauth - separated endpoint authorization', () => { // triggering manually external oauth window behaviour after success authorization const code = '200'; const passedState = `tests${stateCodeFromUrl}`; - window.getMessage({ code, state: passedState, error: undefined }); + await act(async () => { + window.getMessage({ code, state: passedState, error: undefined }); + }); expect(screen.getByText(ERROR_STATE_MISSING_TRY_AGAIN)).toBeInTheDocument(); }); diff --git a/ui/src/components/InteractAllStatusButton.test.tsx b/ui/src/components/InteractAllStatusButton.test.tsx index fc67c4f60..5a2e89a2b 100644 --- a/ui/src/components/InteractAllStatusButton.test.tsx +++ b/ui/src/components/InteractAllStatusButton.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; import { InputRowData, InteractAllStatusButtons } from './InteractAllStatusButton'; describe('InteractAllStatusButtons', () => { @@ -95,15 +96,16 @@ describe('InteractAllStatusButtons', () => { }); it('Deactivate All enabled rows correctly', async () => { + const user = userEvent.setup(); const disableBtn = await screen.findByText('Deactivate all'); expect(disableBtn).toBeInTheDocument(); - disableBtn.click(); + await user.click(disableBtn); const yesPopUpBtn = await screen.findByText('Yes'); expect(yesPopUpBtn).toBeInTheDocument(); - yesPopUpBtn.click(); + await user.click(yesPopUpBtn); expect(handleToggleStatusChange).toHaveBeenCalledWith( allDataRowsMockUp.find((x) => x.name === 'aaaaa') @@ -118,15 +120,16 @@ describe('InteractAllStatusButtons', () => { }); it('Activate All disabled rows correctly', async () => { + const user = userEvent.setup(); const enableBtn = await screen.findByText('Activate all'); expect(enableBtn).toBeInTheDocument(); - enableBtn.click(); + await user.click(enableBtn); const yesPopUpBtn = await screen.findByText('Yes'); expect(yesPopUpBtn).toBeInTheDocument(); - yesPopUpBtn.click(); + await user.click(yesPopUpBtn); expect(handleToggleStatusChange).toHaveBeenCalledWith( allDataRowsMockUp.find((x) => x.name === 'cccccc') @@ -141,57 +144,61 @@ describe('InteractAllStatusButtons', () => { }); it('Do not disable status if rejected', async () => { + const user = userEvent.setup(); const disableBtn = await screen.findByText('Deactivate all'); expect(disableBtn).toBeInTheDocument(); - disableBtn.click(); + await user.click(disableBtn); const noPopUpBtn = await screen.findByText('No'); expect(noPopUpBtn).toBeInTheDocument(); - noPopUpBtn.click(); + await user.click(noPopUpBtn); expect(handleToggleStatusChange).toHaveBeenCalledTimes(0); }); it('Do not enable status if rejected', async () => { + const user = userEvent.setup(); const enableBtn = await screen.findByText('Activate all'); expect(enableBtn).toBeInTheDocument(); - enableBtn.click(); + await user.click(enableBtn); const noPopUpBtn = await screen.findByText('No'); expect(noPopUpBtn).toBeInTheDocument(); - noPopUpBtn.click(); + await user.click(noPopUpBtn); expect(handleToggleStatusChange).toHaveBeenCalledTimes(0); }); it('Do not enable status if popup modal closed by X', async () => { + const user = userEvent.setup(); const enableBtn = await screen.findByText('Activate all'); expect(enableBtn).toBeInTheDocument(); - enableBtn.click(); + await user.click(enableBtn); const closeXBtn = screen.getByTestId('close'); expect(closeXBtn).toBeInTheDocument(); - closeXBtn.click(); + await user.click(closeXBtn); expect(handleToggleStatusChange).toHaveBeenCalledTimes(0); }); it('Do not disable status if popup modal closed by X', async () => { + const user = userEvent.setup(); const disableBtn = await screen.findByText('Deactivate all'); expect(disableBtn).toBeInTheDocument(); - disableBtn.click(); + await user.click(disableBtn); const closeXBtn = screen.getByTestId('close'); expect(closeXBtn).toBeInTheDocument(); - closeXBtn.click(); + await user.click(closeXBtn); expect(handleToggleStatusChange).toHaveBeenCalledTimes(0); }); diff --git a/ui/src/components/table/tests/CustomTableRow.test.tsx b/ui/src/components/table/tests/CustomTableRow.test.tsx index 102e279f8..69ea15691 100644 --- a/ui/src/components/table/tests/CustomTableRow.test.tsx +++ b/ui/src/components/table/tests/CustomTableRow.test.tsx @@ -1,4 +1,5 @@ import { render, screen, within } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; import React from 'react'; import { BrowserRouter } from 'react-router-dom'; @@ -52,7 +53,8 @@ it('Render action icons correctly', async () => { }); it('Correctly call action handlers for page dialog', async () => { - (await screen.findAllByRole('button', { name: /edit/i }))[0].click(); + const user = userEvent.setup(); + await user.click((await screen.findAllByRole('button', { name: /edit/i }))[0]); expect(handleOpenPageStyleDialog).toHaveBeenCalledWith(expect.objectContaining({}), 'edit'); @@ -66,8 +68,9 @@ it('Correctly call action handlers for page dialog', async () => { }); it('Correctly render modal for delete action click', async () => { + const user = userEvent.setup(); // Clicking delete renders modal - (await screen.findAllByRole('button', { name: /delete/i }))[0].click(); + await user.click((await screen.findAllByRole('button', { name: /delete/i }))[0]); expect(await screen.findByRole('dialog')).toHaveTextContent('Delete Confirmation'); }); diff --git a/ui/src/components/table/tests/TableExpansionRow.test.tsx b/ui/src/components/table/tests/TableExpansionRow.test.tsx index 0dcca8b66..0d8724ccc 100644 --- a/ui/src/components/table/tests/TableExpansionRow.test.tsx +++ b/ui/src/components/table/tests/TableExpansionRow.test.tsx @@ -103,12 +103,11 @@ function setup() { } async function expectIntervalInExpandedRow(inputRow: HTMLElement, expectedInterval: number) { - const arrow = within(inputRow).getByRole('cell', { name: /expandable/i }); - const isExpanded = arrow.getAttribute('aria-expanded'); - if (isExpanded === 'false') { - await userEvent.click(arrow); + const expandable = within(inputRow).queryByRole('cell', { name: /expand/i }); + if (expandable && expandable.getAttribute('aria-expanded') === 'false') { + await userEvent.click(expandable); + await waitFor(() => expect(expandable.getAttribute('aria-expanded')).not.toBe('false')); } - await waitFor(() => expect(arrow.getAttribute('aria-expanded')).not.toBe('false')); const loading = screen.queryByText('Loading...'); if (loading) { await waitForElementToBeRemoved(loading);