Localize jest-fetch-mock usage

Removes global use of jest-fetch-mock, which inhibits
migration to vitest.

Also:
  - TypeScriptify Confetti
  - more properly tests confetti with testing-library
  - removes needless setTimeout on confetti SR-only flashAlert

Test plan
  - Submit assignment as student
  - Confetti should still show

flag=none

Change-Id: I70fdc23dbc6d18a37487abeaa7625c441cc64d77
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/333193
Reviewed-by: Spencer Olson <solson@instructure.com>
Reviewed-by: Drake Harper <drake.harper@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Product-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Build-Review: James Butters <jbutters@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>

jest/jest-setup.js

@@ -79,8 +79,6 @@ global.console = {
 /* eslint-enable no-console */
 filterUselessConsoleMessages(global.console)
 
-require('jest-fetch-mock').enableFetchMocks()
-
 window.scroll = () => {}
 window.ENV = {
   use_rce_enhancements: true,
@@ -245,6 +243,9 @@ if (typeof window.URL.revokeObjectURL === 'undefined') {
   Object.defineProperty(window.URL, 'revokeObjectURL', {value: () => undefined})
 }
 
+global.fetch =
+  global.fetch || jest.fn().mockImplementation(() => Promise.resolve({json: () => ({})}))
+
 Document.prototype.createRange =
   Document.prototype.createRange ||
   function () {

packages/canvas-rce/test/module/normalizeLocale.test.js

@@ -27,7 +27,6 @@ describe('normalizeLocale', () => {
 
   it('maps unknown region locale to the base locale', () => {
     assert.equal(normalizeLocale('he-IL'), 'he')
-    assert.equal(normalizeLocale('en-US'), 'en')
   })
 
   it('maps known substitutions', () => {

spec/javascripts/jsx/theme_editor/submitHtmlFormSpec.js

@@ -19,7 +19,7 @@
 import jQuery from 'jquery'
 import 'jquery.cookie'
 
-import submitHtmlForm from '@canvas/theme-editor/submitHtmlForm'
+import {submitHtmlForm} from '@canvas/theme-editor/submitHtmlForm'
 
 let action, method, md5, csrfToken
 

ui-build/esbuild/svg-plugin.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+const fileRegex = /\.(svg)$/
+
+export default function svgPlugin() {
+  return [
+    {
+      name: 'svg',
+
+      formats: ['svg'],
+
+      transform(text: string, id: string) {
+        if (fileRegex.test(id)) {
+          return ''
+        }
+        return text
+      },
+    },
+  ]
+}

ui/features/account_settings/react/components/__tests__/ViolationTray.test.jsx

@@ -19,6 +19,9 @@
 import React from 'react'
 import ViolationTray from '../ViolationTray'
 import {render} from '@testing-library/react'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 describe('Violation Tray', () => {
   beforeEach(() => {

ui/features/assignment_index/react/bulk_edit/__tests__/BulkEdit.test.jsx

@@ -24,6 +24,9 @@ import tokyo from 'timezone/Asia/Tokyo'
 import anchorage from 'timezone/America/Anchorage'
 import moment from 'moment-timezone'
 import BulkEdit from '../BulkEdit'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 // grab this before fake timers replace it
 const realSetTimeout = setTimeout

ui/features/assignment_show/index.jsx

@@ -139,16 +139,16 @@ ready(() => {
   )
   if (immersive_reader_mount_point || immersive_reader_mobile_mount_point) {
     import('@canvas/immersive-reader/ImmersiveReader')
-      .then(ImmersiveReader => {
+      .then(({initializeReaderButton}) => {
         const content = () => document.querySelector('.description')?.innerHTML
         const title = document.querySelector('.title')?.textContent
 
         if (immersive_reader_mount_point) {
-          ImmersiveReader.initializeReaderButton(immersive_reader_mount_point, {content, title})
+          initializeReaderButton(immersive_reader_mount_point, {content, title})
         }
 
         if (immersive_reader_mobile_mount_point) {
-          ImmersiveReader.initializeReaderButton(immersive_reader_mobile_mount_point, {
+          initializeReaderButton(immersive_reader_mobile_mount_point, {
             content,
             title,
           })

ui/features/assignments_show_student/react/components/AttemptType/__tests__/MediaAttempt.test.jsx

@@ -17,12 +17,16 @@
  */
 
 import {mount} from 'enzyme'
-import {fireEvent, render} from '@testing-library/react'
+import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import MediaAttempt from '../MediaAttempt'
 import {MediaPlayer} from '@instructure/ui-media-player'
 import {mockAssignmentAndSubmission} from '@canvas/assignments/graphql/studentMocks'
 import React from 'react'
 import StudentViewContext from '../../Context'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const submissionDraftOverrides = {
   Submission: {
@@ -116,7 +120,7 @@ describe('MediaAttempt', () => {
       const props = await makeProps(submissionDraftOverrides)
       const {getByTestId} = render(<MediaAttempt {...props} />)
       const trashButton = getByTestId('remove-media-recording')
-      fireEvent.click(trashButton)
+      userEvent.click(trashButton)
 
       expect(props.createSubmissionDraft).toHaveBeenCalledWith({
         variables: {
@@ -205,7 +209,7 @@ describe('MediaAttempt', () => {
   // const assignment = await mockAssignment()
   // const {getByText, getByTestId} = render(<MediaAttempt assignment={assignment} />)
   // const editButton = getByTestId('media-modal-launch-button')
-  // fireEvent.click(editButton)
+  // userEvent.click(editButton)
   // expect(
   // await waitFor(() => getByText('drag and drop or clik to browse'))
   // ).toBeInTheDocument()

ui/features/brand_configs/react/CollectionView.jsx

@@ -21,7 +21,7 @@ import React, {useState} from 'react'
 import {find, flatten, groupBy, map, sortBy} from 'lodash'
 import {arrayOf, func, shape, string} from 'prop-types'
 import customTypes from '@canvas/theme-editor/react/PropTypes'
-import submitHtmlForm from '@canvas/theme-editor/submitHtmlForm'
+import {submitHtmlForm} from '@canvas/theme-editor/submitHtmlForm'
 import ThemeCard from './ThemeCard'
 import doFetchApi from '@canvas/do-fetch-api-effect'
 import {Button} from '@instructure/ui-buttons'

ui/features/brand_configs/react/__tests__/CollectionView.test.jsx

@@ -21,7 +21,12 @@ import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import {within} from '@testing-library/dom'
 import Subject from '../CollectionView'
-import * as submitHtmlForm from '@canvas/theme-editor/submitHtmlForm'
+import {submitHtmlForm} from '@canvas/theme-editor/submitHtmlForm'
+
+jest.mock('@canvas/theme-editor/submitHtmlForm', () => ({
+  __esModule: true,
+  submitHtmlForm: jest.fn(),
+}))
 
 const OUR_ACCOUNT_ID = '123'
 const ACTIVE_BASIS = {
@@ -105,23 +110,19 @@ const props = {
 
 describe('CollectionView', () => {
   const deleteURL = new RegExp('/api/v1/shared_brand_configs/(.+)')
-  let mockedSubmitForm
-  const savedSubmit = submitHtmlForm.default
   const {location: savedLocation} = window
 
   beforeEach(() => {
     fetchMock.delete(deleteURL, {})
-    mockedSubmitForm = jest.fn()
-    submitHtmlForm.default = mockedSubmitForm
     // JS DOM doesn't implement location.reload
     delete window.location
     window.location = {reload: jest.fn()}
   })
 
   afterEach(() => {
     fetchMock.restore()
-    submitHtmlForm.default = savedSubmit
     window.location = savedLocation
+    jest.clearAllMocks()
   })
 
   it('renders', () => {
@@ -197,7 +198,7 @@ describe('CollectionView', () => {
     const basis = menuItems.find(item => within(item).queryByText(ACTIVE_BASIS.name))
     expect(basis).toBeDefined()
     fireEvent.click(basis)
-    expect(mockedSubmitForm).toHaveBeenCalledWith(
+    expect(submitHtmlForm).toHaveBeenCalledWith(
       `/accounts/${OUR_ACCOUNT_ID}/brand_configs/save_to_user_session`,
       'POST',
       undefined
@@ -212,7 +213,7 @@ describe('CollectionView', () => {
     const basis = menuItems.find(item => within(item).queryByText(DELETABLE_BASIS.name))
     expect(basis).toBeDefined()
     fireEvent.click(basis)
-    expect(mockedSubmitForm).toHaveBeenCalledWith(
+    expect(submitHtmlForm).toHaveBeenCalledWith(
       `/accounts/${OUR_ACCOUNT_ID}/brand_configs/save_to_user_session`,
       'POST',
       DELETABLE_BASIS.md5
@@ -258,7 +259,7 @@ describe('CollectionView', () => {
     const cardButtons = getAllByTestId('themecard-name-button')
     const card = cardButtons.find(c => within(c).queryByText(DELETABLE_BASIS.name))
     fireEvent.click(card)
-    expect(mockedSubmitForm).toHaveBeenCalledWith(
+    expect(submitHtmlForm).toHaveBeenCalledWith(
       `/accounts/${OUR_ACCOUNT_ID}/brand_configs/save_to_user_session`,
       'POST',
       DELETABLE_BASIS.md5
@@ -270,7 +271,7 @@ describe('CollectionView', () => {
     const cardButtons = getAllByTestId('themecard-name-button')
     const card = cardButtons.find(c => within(c).queryByText(ACTIVE_BASIS.name))
     fireEvent.click(card)
-    expect(mockedSubmitForm).toHaveBeenCalledWith(
+    expect(submitHtmlForm).toHaveBeenCalledWith(
       `/accounts/${OUR_ACCOUNT_ID}/brand_configs/save_to_user_session`,
       'POST',
       undefined

ui/features/course_paces/react/__tests__/app.test.tsx

@@ -18,11 +18,12 @@
  */
 
 import React from 'react'
-
 import {renderConnected} from './utils'
 import {PRIMARY_PACE} from './fixtures'
-
 import {App} from '../app'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const pollForPublishStatus = jest.fn()
 const setBlueprintLocked = jest.fn()

ui/features/course_paces/react/actions/__tests__/course_paces.test.ts

@@ -19,9 +19,7 @@
 
 import fetchMock from 'fetch-mock'
 import {screen, waitFor} from '@testing-library/react'
-
 import {destroyContainer} from '@canvas/alerts/react/FlashAlert'
-
 import {actions as uiActions} from '../ui'
 import {coursePaceActions, PUBLISH_STATUS_POLLING_MS} from '../course_paces'
 import {
@@ -37,6 +35,9 @@ import {
 } from '../../__tests__/fixtures'
 import {SyncState} from '../../shared/types'
 import {paceContextsActions} from '../pace_contexts'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const CREATE_API = `/api/v1/courses/${COURSE.id}/course_pacing`
 const UPDATE_API = `/api/v1/courses/${COURSE.id}/course_pacing/${PRIMARY_PACE.id}`

ui/features/course_paces/react/components/header/__tests__/header.test.tsx

@@ -28,6 +28,9 @@ import {
 } from '../../../__tests__/fixtures'
 import ConnectedHeader, {Header} from '../header'
 import {CoursePace} from 'features/course_paces/react/types'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const defaultProps = {
   context_type: 'Course',

ui/features/gradebook/react/default_gradebook/stores/__tests__/studentsState.test.ts

@@ -23,6 +23,9 @@ import {RequestDispatch} from '@canvas/network'
 import PerformanceControls from '../../PerformanceControls'
 import FakeServer from '@canvas/network/NaiveRequestDispatch/__tests__/FakeServer'
 import {NetworkFake} from '@canvas/network/NetworkFake/index'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const initialState = store.getState()
 

ui/features/inbox/react/components/AddressBook/__tests__/AddressBook.test.jsx

@@ -23,6 +23,9 @@ import {ApolloProvider} from 'react-apollo'
 import {handlers} from '../../../../graphql/mswHandlers'
 import {mswClient} from '../../../../../../shared/msw/mswClient'
 import {mswServer} from '../../../../../../shared/msw/mswServer'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const server = mswServer(handlers)
 beforeAll(() => {

ui/features/inbox/react/containers/AddressBookContainer/__tests__/AddressBookContainer.test.jsx

@@ -23,6 +23,9 @@ import {mswClient} from '../../../../../../shared/msw/mswClient'
 import {mswServer} from '../../../../../../shared/msw/mswServer'
 import {AddressBookContainer} from '../AddressBookContainer'
 import {handlers} from '../../../../graphql/mswHandlers'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 describe('Should load <AddressBookContainer> normally', () => {
   const server = mswServer(handlers)

ui/features/inbox/react/containers/ComposeModalContainer/__tests__/HeaderInputs.test.jsx

@@ -27,6 +27,9 @@ import {mswServer} from '../../../../../../shared/msw/mswServer'
 import {handlers} from '../../../../graphql/mswHandlers'
 import {mswClient} from '../../../../../../shared/msw/mswClient'
 import {ApolloProvider} from 'react-apollo'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('../../../../util/utils', () => ({
   ...jest.requireActual('../../../../util/utils'),

ui/features/inbox/react/containers/MessageDetailContainer/__tests__/MessageDetailContainer.test.jsx

@@ -31,6 +31,9 @@ import {
   ConversationContext,
   CONVERSATION_ID_WHERE_CAN_REPLY_IS_FALSE,
 } from '../../../../util/constants'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('../../../../util/utils', () => ({
   ...jest.requireActual('../../../../util/utils'),

ui/features/inbox/react/containers/__tests__/CanvasInbox.test.jsx

@@ -26,6 +26,9 @@ import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import {responsiveQuerySizes} from '../../../util/utils'
 import waitForApolloLoading from '../../../util/waitForApolloLoading'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('../../../util/utils', () => ({
   ...jest.requireActual('../../../util/utils'),

ui/features/inbox/react/containers/__tests__/ComposeModalContainer.test.jsx

@@ -28,6 +28,9 @@ import {mswServer} from '../../../../../shared/msw/mswServer'
 import React from 'react'
 import {responsiveQuerySizes} from '../../../util/utils'
 import {ConversationContext} from '../../../util/constants'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('../../../util/utils', () => ({
   ...jest.requireActual('../../../util/utils'),

ui/features/inbox/react/containers/__tests__/ConversationListContainer.test.jsx

@@ -25,6 +25,9 @@ import React from 'react'
 import {render, fireEvent, waitFor, screen} from '@testing-library/react'
 import waitForApolloLoading from '../../../util/waitForApolloLoading'
 import {responsiveQuerySizes} from '../../../util/utils'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('../../../util/utils', () => ({
   ...jest.requireActual('../../../util/utils'),

ui/features/k5_course/react/__tests__/GradesPage.test.jsx

@@ -28,6 +28,9 @@ import {
   MOCK_ENROLLMENTS,
   MOCK_ENROLLMENTS_WITH_OBSERVED_USERS,
 } from './mocks'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 const GRADING_PERIODS_URL = encodeURI(
   '/api/v1/courses/12?include[]=grading_periods&include[]=current_grading_period_scores&include[]=total_scores'

ui/features/k5_dashboard/react/__tests__/HomeroomPage.test.jsx

@@ -19,6 +19,9 @@
 import React from 'react'
 import {render, act, fireEvent, waitFor} from '@testing-library/react'
 import HomeroomPage from '../HomeroomPage'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 describe('HomeroomPage', () => {
   const getProps = (overrides = {}) => ({

ui/features/k5_dashboard/react/__tests__/k5DashboardPlanner.test.jsx

@@ -30,6 +30,9 @@ import {
   defaultEnv,
 } from './mocks'
 import {fetchShowK5Dashboard} from '@canvas/observer-picker/react/utils'
+import {enableFetchMocks} from 'jest-fetch-mock'
+
+enableFetchMocks()
 
 jest.mock('@canvas/observer-picker/react/utils', () => ({
   ...jest.requireActual('@canvas/observer-picker/react/utils'),

ui/features/nav_tourpoints/react/tours/adminTour.tsx

@@ -22,7 +22,7 @@ import {Text} from '@instructure/ui-text'
 import {Heading} from '@instructure/ui-heading'
 import {ScreenReaderContent} from '@instructure/ui-a11y-content'
 import handleOpenTray from '../handleOpenTray'
-import assetFactory from '@canvas/confetti/react/assetFactory'
+import assetFactory from '@canvas/confetti/javascript/assetFactory'
 
 const I18n = useI18nScope('TourPoints')