inject referenced screenreader alert containers

refs LS-3831
flag=none

test plan:
  - tests pass

qa risk: low

Change-Id: I1c05f6fb2e304784963a02ea68facc89ce32cc7d
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/312005
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Cameron Ray <cameron.ray@instructure.com>
QA-Review: Davis Hyer <dhyer@instructure.com>
Product-Review: Davis Hyer <dhyer@instructure.com>

jest/jest-setup.js

@@ -52,6 +52,7 @@ const ignoredErrors = [
   /Can't perform a React state update on an unmounted component/,
   /Cannot read property 'activeElement' of undefined/,
   /contextType was defined as an instance property on %s/,
+  /Functions are not valid as a React child/, // https://instructure.atlassian.net/browse/LS-3837
   /Function components cannot be given refs/,
   /Invalid prop `children` supplied to `(Option|View)`/,
   /Invalid prop `editorOptions.plugins` of type `string` supplied to `(ForwardRef|RCEWrapper)`/, // https://instructure.atlassian.net/browse/MAT-453
@@ -60,7 +61,6 @@ const ignoredErrors = [
   /Invariant Violation/,
   /Prop `children` should be supplied unless/, // https://instructure.atlassian.net/browse/FOO-3407
   /Render methods should be a pure function of props and state/,
-  /The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'/,
   /The above error occurred in the <.*> component/,
   /The prop `id` is marked as required in `(ColHeader|FormField|Option)`/,
   /WARNING: heuristic fragment matching going on!/,

ui/features/account_course_user_search/react/components/__tests__/SRSearchMessage.test.js

@@ -18,9 +18,10 @@
 
 import React from 'react'
 import {mount} from 'enzyme'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
 import SRSearchMessage from '../SRSearchMessage'
 
-let flashElements
+injectGlobalAlertContainers()
 
 const getProps = () => ({
   collection: {
@@ -38,16 +39,6 @@ const getProps = () => ({
   },
   dataType: 'Course',
 })
-beforeEach(() => {
-  flashElements = document.createElement('div')
-  flashElements.setAttribute('id', 'flash_screenreader_holder')
-  flashElements.setAttribute('role', 'alert')
-  document.body.appendChild(flashElements)
-})
-
-afterEach(() => {
-  document.body.removeChild(flashElements)
-})
 
 it('returns noscript when the collection is loading', () => {
   const props = getProps()

ui/features/assignments_show_student/react/components/__tests__/RubricTab.test.js

@@ -24,6 +24,9 @@ import {RUBRIC_QUERY} from '@canvas/assignments/graphql/student/Queries'
 import {transformRubricData, transformRubricAssessmentData} from '../../helpers/RubricHelpers'
 import store from '../stores'
 import {fillAssessment} from '@canvas/rubrics/react/helpers'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 function gradedOverrides() {
   return {

ui/features/assignments_show_student/react/components/__tests__/StudentContent.test.js

@@ -25,6 +25,9 @@ import StudentContent from '../StudentContent'
 import {AssignmentMocks} from '@canvas/assignments/graphql/student/Assignment'
 import ContextModuleApi from '../../apis/ContextModuleApi'
 import {RUBRIC_QUERY, SUBMISSION_COMMENT_QUERY} from '@canvas/assignments/graphql/student/Queries'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('../AttemptSelect')
 

ui/features/conferences/react/components/ConferenceAddressBook/__tests__/ConferenceAddressBook.test.js

@@ -18,8 +18,11 @@
 
 import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
 import {ConferenceAddressBook} from '../ConferenceAddressBook'
 
+injectGlobalAlertContainers()
+
 describe('ConferenceAddressBook', () => {
   afterEach(() => {
     window.ENV.sections = []

ui/features/conferences/react/components/VideoConferenceModal/__tests__/VideoConferenceModal.test.js

@@ -20,6 +20,9 @@ import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
 import {VideoConferenceModal} from '../VideoConferenceModal'
 import userEvent from '@testing-library/user-event'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 const userList = [
   {displayName: 'Allison Pitler', id: '7', assetCode: '7'},

ui/features/dashboard/react/__tests__/DashboardHeader.test.js

@@ -25,6 +25,9 @@ import {
   SHOW_K5_DASHBOARD_ROUTE,
   showK5DashboardResponse,
 } from '@canvas/observer-picker/react/__tests__/fixtures'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.useFakeTimers()
 

ui/features/discussion_topics_post/react/__tests__/DiscussionsAttachment.test.js

@@ -27,6 +27,9 @@ import {responsiveQuerySizes} from '../utils'
 import {Discussion} from '../../graphql/Discussion'
 import {DiscussionEntry} from '../../graphql/DiscussionEntry'
 import {DiscussionThreadContainer} from '../containers/DiscussionThreadContainer/DiscussionThreadContainer'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('../utils', () => ({
   ...jest.requireActual('../utils'),

ui/features/discussion_topics_post/react/__tests__/DiscussionsIsolatedView.test.js

@@ -27,6 +27,9 @@ import DiscussionTopicManager from '../DiscussionTopicManager'
 import {fireEvent, render, waitFor} from '@testing-library/react'
 import {MockedProvider} from '@apollo/react-testing'
 import React from 'react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('@canvas/rce/RichContentEditor')
 jest.mock('../utils', () => ({

ui/features/discussion_topics_post/react/__tests__/DiscussionsSplitScreenView.test.js

@@ -26,6 +26,9 @@ import DiscussionTopicManager from '../DiscussionTopicManager'
 import {fireEvent, render, waitFor} from '@testing-library/react'
 import {MockedProvider} from '@apollo/react-testing'
 import React from 'react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('@canvas/rce/RichContentEditor')
 jest.mock('../utils', () => ({

ui/features/discussion_topics_post/react/components/DiscussionEdit/__tests__/DiscussionEdit.test.js

@@ -19,6 +19,9 @@ import React from 'react'
 import {DiscussionEdit} from '../DiscussionEdit'
 import {render, fireEvent, waitFor} from '@testing-library/react'
 import $ from '@canvas/rails-flash-notifications'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 const setup = props => {
   return render(<DiscussionEdit {...props} />)

ui/features/discussion_topics_post/react/containers/IsolatedViewContainer/__tests__/IsolatedViewContainer.test.js

@@ -25,6 +25,9 @@ import {IsolatedViewContainer} from '../IsolatedViewContainer'
 import {MockedProvider} from '@apollo/react-testing'
 import {PageInfo} from '../../../../graphql/PageInfo'
 import React from 'react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('../../../utils', () => ({
   ...jest.requireActual('../../../utils'),

ui/features/discussion_topics_post/react/containers/SplitScreenViewContainer/__tests__/SplitScreenViewContainer.test.js

@@ -25,6 +25,9 @@ import {SplitScreenViewContainer} from '../SplitScreenViewContainer'
 import {MockedProvider} from '@apollo/react-testing'
 import {PageInfo} from '../../../../graphql/PageInfo'
 import React from 'react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('../../../utils', () => ({
   ...jest.requireActual('../../../utils'),

ui/features/gradebook/react/default_gradebook/components/__tests__/MultiSelectSearchInput.test.tsx

@@ -19,6 +19,9 @@
 import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import MultiSelectSearchInput from '../MultiSelectSearchInput'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('MultiSelectSearchInput', () => {
   let props

ui/features/inbox/react/containers/ComposeModalContainer/__tests__/ModalBody.test.tsx

@@ -19,6 +19,9 @@
 import React from 'react'
 import {fireEvent, render, waitFor} from '@testing-library/react'
 import ModalBody from '../ModalBody'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 global.URL.createObjectURL = jest.fn().mockReturnValue('')
 

ui/features/jobs_v2/react/__tests__/jobs_v2.test.js

@@ -21,6 +21,9 @@ import {render, act, fireEvent} from '@testing-library/react'
 import JobsIndex from '../index'
 import doFetchApi from '@canvas/do-fetch-api-effect'
 import mockJobsApi from './MockJobsApi'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('@canvas/do-fetch-api-effect')
 jest.useFakeTimers()

ui/features/k5_dashboard/react/__tests__/k5DashboardObserver.test.js

@@ -31,6 +31,9 @@ import {
 import {resetCardCache} from '@canvas/dashboard-card'
 import {MOCK_CARDS, MOCK_CARDS_2} from '@canvas/k5/react/__tests__/fixtures'
 import {fetchShowK5Dashboard} from '@canvas/observer-picker/react/utils'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.useFakeTimers()
 jest.mock('@canvas/observer-picker/react/utils', () => ({

ui/features/outcome_management/react/Management/__tests__/GroupEditForm.test.js

@@ -20,6 +20,9 @@ import {fireEvent, render, act} from '@testing-library/react'
 import React from 'react'
 import GroupEditForm from '../GroupEditForm'
 import {focusChange} from './helpers'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.useFakeTimers()
 

ui/features/outcome_management/react/Management/__tests__/GroupEditModal.test.js

@@ -24,6 +24,9 @@ import GroupEditModal from '../GroupEditModal'
 import OutcomesContext from '@canvas/outcomes/react/contexts/OutcomesContext'
 import {showFlashAlert} from '@canvas/alerts/react/FlashAlert'
 import {updateOutcomeGroupMock} from '@canvas/outcomes/mocks/Management'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.mock('@canvas/alerts/react/FlashAlert')
 jest.useFakeTimers()

ui/features/outcome_management/react/Management/__tests__/OutcomeEditModal.test.js

@@ -29,6 +29,9 @@ import {
   setFriendlyDescriptionOutcomeMock,
 } from '@canvas/outcomes/mocks/Management'
 import {defaultRatings, defaultMasteryPoints} from '@canvas/outcomes/react/hooks/useRatings'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.useFakeTimers()
 

ui/features/outcome_management/react/__tests__/CreateOutcomeModal.test.js

@@ -31,6 +31,9 @@ import {
   createOutcomeGroupMocks,
 } from '@canvas/outcomes/mocks/Management'
 import * as FlashAlert from '@canvas/alerts/react/FlashAlert'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 jest.useFakeTimers()
 

ui/features/permissions/react/components/__tests__/PermissionsIndex.test.js

@@ -20,11 +20,14 @@ import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
 import {Provider} from 'react-redux'
 import {COURSE, ACCOUNT} from '@canvas/permissions/react/propTypes'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
 
 import {DEFAULT_PROPS} from '../../__tests__/examples'
 import {ConnectedPermissionsIndex as Subject} from '../PermissionsIndex'
 import createStore from '../../store'
 
+injectGlobalAlertContainers()
+
 function renderWithRedux(subject, {data, store = createStore(data), ...renderOptions} = {}) {
   const Wrapper = props => <Provider store={store}>{props.children}</Provider>
 

ui/shared/add-people/react/components/__tests__/add_people.spec.js

@@ -19,6 +19,9 @@
 import {mount} from 'enzyme'
 import React from 'react'
 import AddPeople from '../add_people'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('Focus Handling', () => {
   it('sends focus to the modal close button when an api error occurs', () => {

ui/shared/add-people/react/components/__tests__/people_search.spec.js

@@ -19,6 +19,9 @@
 import {mount} from 'enzyme'
 import React from 'react'
 import PeopleSearch from '../people_search'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('PeopleSearch', () => {
   const props = {

ui/shared/alerts/react/__tests__/ExpandableErrorAlert.test.tsx

@@ -20,6 +20,9 @@ import {act, render, waitFor} from '@testing-library/react'
 import {ExpandableErrorAlert} from '../ExpandableErrorAlert'
 import React from 'react'
 import userEvent from '@testing-library/user-event'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('ExpandableErrorAlert', () => {
   it('displays child content', () => {

ui/shared/create-course-modal/react/__tests__/CreateCourseModal.test.js

@@ -21,52 +21,54 @@ import fetchMock from 'fetch-mock'
 import {render, waitFor, fireEvent, act} from '@testing-library/react'
 
 import {CreateCourseModal} from '../CreateCourseModal'
-import {destroyContainer} from '@canvas/alerts/react/FlashAlert'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 const MANAGEABLE_COURSES = [
   {
-    id: 4,
+    id: '4',
     name: 'CPMS',
   },
   {
-    id: 5,
+    id: '5',
     name: 'CS',
   },
   {
-    id: 6,
+    id: '6',
     name: 'Elementary',
   },
 ]
 
 const ENROLLMENTS = [
   {
-    id: 72,
+    id: '72',
     name: 'Algebra Honors',
     account: {
-      id: 6,
+      id: '6',
       name: 'Orange Elementary',
     },
   },
   {
-    id: 74,
+    id: '74',
     name: 'Math',
     account: {
-      id: 6,
+      id: '6',
       name: 'Orange Elementary',
     },
   },
   {
-    id: 105,
+    id: '105',
     name: 'English 11',
     account: {
-      id: 13,
+      id: '13',
       name: 'Clark HS',
     },
   },
 ]
 
 const MCC_ACCOUNT = {
-  id: 3,
+  id: '3',
   name: 'Manually-Created Courses',
   workflow_state: 'active',
 }
@@ -92,9 +94,15 @@ describe('CreateCourseModal', () => {
     ...overrides,
   })
 
+  beforeEach(() => {
+    // mock requests that are made, but not explicitly tested, to clean up console warnings
+    fetchMock.get('/api/v1/users/self/courses?homeroom=true&per_page=100', 200)
+    fetchMock.get('begin:/api/v1/accounts/', 200)
+    fetchMock.post('begin:/api/v1/accounts/', 200)
+  })
+
   afterEach(() => {
     fetchMock.restore()
-    destroyContainer()
   })
 
   it('shows a spinner with correct title while loading accounts', async () => {

ui/shared/groups/react/__tests__/NewStudentGroupModal.test.js

@@ -21,6 +21,9 @@ import stubEnv from '@canvas/stub-env'
 import User from '@canvas/users/backbone/models/User.coffee'
 import UserCollection from '@canvas/users/backbone/collections/UserCollection.coffee'
 import NewStudentGroupModal from '../NewStudentGroupModal'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('NewStudentGroupModal', () => {
   const loadMore = jest.fn()

ui/shared/multi-select/react/__tests__/index.test.js

@@ -19,6 +19,9 @@
 import CanvasMultiSelect from '../index'
 import {fireEvent, render} from '@testing-library/react'
 import React from 'react'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 describe('CanvasMultiSelect', () => {
   let props

ui/shared/observer-picker/react/__tests__/ObserverOptions.test.js

@@ -23,6 +23,9 @@ import getCookie from '@instructure/get-cookie'
 import ObserverOptions from '../ObserverOptions'
 import {OBSERVER_COOKIE_PREFIX} from '../../ObserverGetObservee'
 import {MOCK_OBSERVED_USERS_LIST} from './fixtures'
+import injectGlobalAlertContainers from '@canvas/util/react/testing/injectGlobalAlertContainers'
+
+injectGlobalAlertContainers()
 
 const userId = '13'
 const observedUserCookieName = `${OBSERVER_COOKIE_PREFIX}${userId}`