Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx

@@ -120,9 +120,16 @@ describe('<AddEmailInput/>', function () {
     describe('when there is a domain match', function () {
       beforeEach(async function () {
         fetchMock.get('express:/institutions/domains', testInstitutionData)
-        fireEvent.change(screen.getByTestId('affiliations-email'), {
-          target: { value: 'user@d' },
-        })
+        const input = await screen.findByTestId('affiliations-email')
+        fireEvent.change(input, { target: { value: 'user@d' } })
+
+        // Wait for the request to complete and the domain cache to pouplate
+        await waitFor(
+          () =>
+            expect(
+              fetchMock.callHistory.called('express:/institutions/domains')
+            ).to.be.true
+        )
         // Wait for component to process the change and update the shadow input
         await waitFor(() => {
           const shadowInput = screen.getByTestId(

services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx

@@ -61,7 +61,9 @@ function resetFetchMock() {
 }
 
 async function confirmCodeForEmail(email: string) {
-  screen.getByText(`Enter the 6-digit confirmation code sent to ${email}.`)
+  await screen.findByText(
+    `Enter the 6-digit confirmation code sent to ${email}.`
+  )
   const inputCode = screen.getByLabelText(/6-digit confirmation code/i)
   fireEvent.change(inputCode, { target: { value: '123456' } })
   const submitCodeBtn = screen.getByRole<HTMLButtonElement>('button', {

services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx

@@ -139,16 +139,18 @@ describe('user role and institution', function () {
       departments: [fakeDepartment],
     })
 
-    fireEvent.click(
-      screen.getByRole('button', { name: /add role and department/i })
-    )
+    const addRoleButton = await screen.findByRole('button', {
+      name: /add role and department/i,
+    })
+
+    fireEvent.click(addRoleButton)
 
     await fetchMock.callHistory.flush(true)
     fetchMock.removeRoutes().clearHistory()
 
     fireEvent.click(screen.getByRole('combobox', { name: /department/i }))
 
-    screen.getByText(fakeDepartment)
+    await screen.findByText(fakeDepartment)
   })
 
   it('adds new role and department', async function () {

services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx

@@ -13,7 +13,7 @@ import ReconfirmationInfo from '../../../../../../frontend/js/features/settings/
 import { ssoUserData } from '../../fixtures/test-user-email-data'
 import { UserEmailData } from '../../../../../../types/user-email'
 import { UserEmailsProvider } from '../../../../../../frontend/js/features/settings/context/user-email-context'
-import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'
 import getMeta from '@/utils/meta'
 
 function renderReconfirmationInfo(data: UserEmailData) {
@@ -25,25 +25,18 @@ function renderReconfirmationInfo(data: UserEmailData) {
 }
 
 describe('<ReconfirmationInfo/>', function () {
-  let assignStub: sinon.SinonStub
-
   beforeEach(function () {
     Object.assign(getMeta('ol-ExposedSettings'), {
       samlInitPath: '/saml',
     })
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
-    assignStub = sinon.stub()
-    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
-      assign: assignStub,
-      replace: sinon.stub(),
-      reload: sinon.stub(),
-      setHash: sinon.stub(),
-    })
+    this.locationWrapperSandbox = sinon.createSandbox()
+    this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
   })
 
   afterEach(function () {
     fetchMock.removeRoutes().clearHistory()
-    this.locationStub.restore()
+    this.locationWrapperSandbox.restore()
   })
 
   describe('reconfirmed via SAML', function () {
@@ -115,9 +108,9 @@ describe('<ReconfirmationInfo/>', function () {
         await waitFor(() => {
           expect(confirmButton.disabled).to.be.true
         })
-        sinon.assert.calledOnce(assignStub)
+        sinon.assert.calledOnce(this.locationWrapperStub.assign)
         sinon.assert.calledWithMatch(
-          assignStub,
+          this.locationWrapperStub.assign,
           '/saml/init?university_id=2&reconfirm=/user/settings'
         )
       })

services/web/test/frontend/features/settings/components/leave/modal-form.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, screen, render, waitFor } from '@testing-library/react'
 import fetchMock, { type FetchMock } from 'fetch-mock'
 
 import LeaveModalForm from '../../../../../../frontend/js/features/settings/components/leave/modal-form'
-import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'
 import getMeta from '@/utils/meta'
 
 describe('<LeaveModalForm />', function () {
@@ -51,25 +51,19 @@ describe('<LeaveModalForm />', function () {
     let setInFlight: sinon.SinonStub
     let setIsFormValid: sinon.SinonStub
     let deleteMock: FetchMock
-    let assignStub: sinon.SinonStub
 
     beforeEach(function () {
       setInFlight = sinon.stub()
       setIsFormValid = sinon.stub()
       deleteMock = fetchMock.post('/user/delete', 200)
-      assignStub = sinon.stub()
-      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
-        assign: assignStub,
-        replace: sinon.stub(),
-        reload: sinon.stub(),
-        setHash: sinon.stub(),
-      })
+      this.locationWrapperSandbox = sinon.createSandbox()
+      this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
       Object.assign(getMeta('ol-ExposedSettings'), { isOverleaf: true })
     })
 
     afterEach(function () {
       fetchMock.removeRoutes().clearHistory()
-      this.locationStub.restore()
+      this.locationWrapperSandbox.restore()
     })
 
     it('with valid form', async function () {
@@ -86,6 +80,7 @@ describe('<LeaveModalForm />', function () {
       sinon.assert.calledOnce(setInFlight)
       sinon.assert.calledWithMatch(setInFlight, true)
       expect(deleteMock.callHistory.called()).to.be.true
+      const assignStub = this.locationWrapperStub.assign
       await waitFor(() => {
         sinon.assert.calledTwice(setInFlight)
         sinon.assert.calledWithMatch(setInFlight, false)