resolve act error for AccountStatusManagement tests

flag=none

test plan:
  **BEFORE PULLING**
  - remove the error suppression for /An update to %s inside a test.../
    from the jest-setup
  - run the altered test file
    - you should get failures referencing the removed error
  - pull down this change and rerun the test file
    - all tests should now pass

qa risk: low

Change-Id: I462270a2de533cc9701c637449385b4d41b84eb3
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/333171
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Davis Hyer <dhyer@instructure.com>
Product-Review: Davis Hyer <dhyer@instructure.com>
This commit is contained in:
Davis Hyer 2023-11-17 12:22:53 -07:00
parent a1b1f2c49e
commit 0b5ac4ffc4
1 changed files with 43 additions and 15 deletions

View File

@ -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')