diff --git a/ui/features/account_grading_settings/components/account_grading_status/__tests__/AccountStatusManagement.test.tsx b/ui/features/account_grading_settings/components/account_grading_status/__tests__/AccountStatusManagement.test.tsx index 796c1adaeba..9ee53172f60 100644 --- a/ui/features/account_grading_settings/components/account_grading_status/__tests__/AccountStatusManagement.test.tsx +++ b/ui/features/account_grading_settings/components/account_grading_status/__tests__/AccountStatusManagement.test.tsx @@ -19,7 +19,7 @@ import React from 'react' import {BrowserRouter, Route, Routes} from 'react-router-dom' import {MockedProvider} from '@apollo/react-testing' -import {render, fireEvent, waitFor} from '@testing-library/react' +import {render, fireEvent, waitFor, act} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {AccountStatusManagement, AccountStatusManagementProps} from '../AccountStatusManagement' import {setupGraphqlMocks} from './fixtures' @@ -57,7 +57,9 @@ describe('Account Grading Status Management', () => { describe('when the account is a root account', () => { it('should render the component and children successfully', async () => { const {getByText, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(getByText('Standard Statuses')).toBeInTheDocument() expect(getByText('Custom Statuses')).toBeInTheDocument() @@ -71,7 +73,9 @@ describe('Account Grading Status Management', () => { isRootAccount: true, isExtendedStatusEnabled: false, }) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(queryAllByTestId(/standard-status-/)).toHaveLength(5) expect(queryByText('Extended')).not.toBeInTheDocument() @@ -80,7 +84,9 @@ describe('Account Grading Status Management', () => { it('should open a single edit popover when clicking on the edit button', async () => { const {getByTestId, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(queryAllByTestId('edit-status-popover')).toHaveLength(0) const standardStatusItem = getByTestId('standard-status-1') @@ -100,7 +106,9 @@ describe('Account Grading Status Management', () => { it('should close popover if edit button clicked again', async () => { const {getByTestId, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(queryAllByTestId('edit-status-popover')).toHaveLength(0) const standardStatusItem = getByTestId('standard-status-1') @@ -113,7 +121,9 @@ describe('Account Grading Status Management', () => { it('should pick new color for status item', async () => { const {getByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const standardStatusItem = getByTestId('standard-status-1') expect(standardStatusItem.firstChild).toHaveStyle('background-color: #E40606') @@ -124,21 +134,27 @@ describe('Account Grading Status Management', () => { const saveButton = getByTestId('save-status-button') userEvent.click(saveButton) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const updatedStatusItem = getByTestId('standard-status-1') expect(updatedStatusItem.firstChild).toHaveStyle('background-color: #F0E8EF') }) it('should delete a custom status item', async () => { const {getByTestId, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(queryAllByTestId(/custom\-status\-[0-9]/)).toHaveLength(2) expect(queryAllByTestId(/custom\-status\-new\-[0-2]/)).toHaveLength(1) const statusToDelete = getByTestId('custom-status-2') const deleteButton = statusToDelete?.querySelectorAll('button')[1] userEvent.click(deleteButton) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const confirmDeleteButton = getByTestId('confirm-button') userEvent.click(confirmDeleteButton) await waitFor(() => expect(queryAllByTestId(/custom\-status\-[0-9]/)).toHaveLength(1)) @@ -149,7 +165,9 @@ describe('Account Grading Status Management', () => { it('should pick edit color & name of custom status item', async () => { const {getByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const customStatusItem = getByTestId('custom-status-1') const customEditButton = customStatusItem?.querySelector('button') as Element @@ -162,7 +180,9 @@ describe('Account Grading Status Management', () => { const saveButton = getByTestId('save-status-button') userEvent.click(saveButton) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const customStatusItemUpdated = getByTestId('custom-status-1') expect(customStatusItemUpdated.textContent).toContain('New Status 10') @@ -172,7 +192,9 @@ describe('Account Grading Status Management', () => { it('should add a new custom status item', async () => { const {getByTestId, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: true}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const newStatusItem = getByTestId('custom-status-new-0').querySelector('span') as Element userEvent.click(newStatusItem) @@ -184,7 +206,9 @@ describe('Account Grading Status Management', () => { const saveButton = getByTestId('save-status-button') userEvent.click(saveButton) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) const customStatusItems = queryAllByTestId(/custom\-status\-[0-9]/) expect(customStatusItems).toHaveLength(3) @@ -199,7 +223,9 @@ describe('Account Grading Status Management', () => { describe('when the account is a sub account', () => { it('should render the component and children successfully', async () => { const {getByText, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: false}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(getByText('Standard Statuses')).toBeInTheDocument() expect(getByText('Custom Statuses')).toBeInTheDocument() @@ -211,7 +237,9 @@ describe('Account Grading Status Management', () => { it('should display status but not allow editing or deleting them', async () => { const {getByTestId, queryAllByTestId} = renderGradingStatusManagement({isRootAccount: false}) - await new Promise(resolve => setTimeout(resolve, 0)) + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 0)) + }) expect(queryAllByTestId('edit-status-popover')).toHaveLength(0) const standardStatusItem = getByTestId('standard-status-1')