Merge pull request #24313 from overleaf/td-ac-bs5-frontend-tests

Update front-end tests to use Bootstrap 5

GitOrigin-RevId: abaa09f8c0639d64d6ade97468ab16204e5de97b

services/web/test/frontend/features/settings/components/account-info-section.test.tsx

@@ -90,7 +90,7 @@ describe('<AccountInfoSection />', function () {
         name: 'Update',
       })
     )
-    await screen.findByText('Saving…')
+    await screen.findByRole('button', { name: 'Loading' })
 
     finishUpdateCall(200)
     await screen.findByRole('button', {

services/web/test/frontend/features/settings/components/emails/emails-section-actions.test.tsx

@@ -172,11 +172,7 @@ describe('email actions - make primary', function () {
       fireEvent.click(
         withinModal.getByRole('button', { name: 'Change primary email' })
       )
-      expect(screen.queryByRole('dialog')).to.be.null
-
-      await waitForElementToBeRemoved(() =>
-        screen.getByRole('button', { name: /Processing/i, hidden: true })
-      )
+      await waitForElementToBeRemoved(() => screen.getByRole('dialog'))
     }
 
     it('shows confirmation modal and closes it', async function () {
@@ -201,13 +197,14 @@ describe('email actions - make primary', function () {
       withinModal.getByRole('button', { name: 'Change primary email' })
 
       fireEvent.click(withinModal.getByRole('button', { name: /cancel/i }))
-      expect(screen.queryByRole('dialog')).to.be.null
+
+      await waitForElementToBeRemoved(screen.getByRole('dialog'))
     })
 
     it('shows loader and removes button', async function () {
       fetchMock
         .get('/user/emails?ensureAffiliation=true', [userEmailData])
-        .post('/user/emails/default?delete-primary-unconfirmed', 200)
+        .post('/user/emails/default?delete-unconfirmed-primary', 200)
       render(<EmailsSection />)
 
       await confirmPrimaryEmail()
@@ -223,7 +220,7 @@ describe('email actions - make primary', function () {
     it('shows error', async function () {
       fetchMock
         .get('/user/emails?ensureAffiliation=true', [userEmailData])
-        .post('/user/emails/default?delete-primary-unconfirmed', 503)
+        .post('/user/emails/default?delete-unconfirmed-primary', 503)
       render(<EmailsSection />)
 
       await confirmPrimaryEmail()

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

@@ -69,7 +69,7 @@ async function confirmCodeForEmail(email: string) {
   })
   fireEvent.click(submitCodeBtn)
   await waitForElementToBeRemoved(() =>
-    screen.getByRole('button', { name: /confirming/i })
+    screen.getByRole('button', { name: /Loading/i })
   )
 }
 
@@ -216,7 +216,7 @@ describe('<EmailsSection />', function () {
 
     await waitForElementToBeRemoved(() =>
       screen.getByRole('button', {
-        name: /add new email/i,
+        name: /Loading/i,
       })
     )
 

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

@@ -134,7 +134,7 @@ describe('<EmailsSection />', function () {
       screen.queryByText(/an error has occurred while performing your request/i)
     ).to.be.null
 
-    await screen.findByRole('button', {
+    await screen.findAllByRole('button', {
       name: /resend confirmation code/i,
     })
   })

services/web/test/frontend/features/settings/components/emails/sso-alert.test.tsx

@@ -3,7 +3,7 @@ import { expect } from 'chai'
 import { SSOAlert } from '../../../../../../frontend/js/features/settings/components/emails/sso-alert'
 
 describe('<SSOAlert/>', function () {
-  describe('when thereis no institutional linking information', function () {
+  describe('when there is no institutional linking information', function () {
     it('should be empty', function () {
       render(<SSOAlert />)
       expect(screen.queryByRole('alert')).to.be.null
@@ -49,11 +49,11 @@ describe('<SSOAlert/>', function () {
       )
       render(<SSOAlert />)
       const closeButtons = screen.getAllByRole('button', {
-        name: 'Close alert',
+        name: 'Close',
       })
       fireEvent.click(closeButtons[0])
       fireEvent.click(closeButtons[1])
-      expect(screen.queryByRole('button', { name: 'Close alert' })).to.be.null
+      expect(screen.queryByRole('button', { name: 'Close' })).to.be.null
     })
   })
 
@@ -87,10 +87,10 @@ describe('<SSOAlert/>', function () {
     it('the alert should be closeable', function () {
       render(<SSOAlert />)
       const closeButton = screen.getByRole('button', {
-        name: 'Close alert',
+        name: 'Close',
       })
       fireEvent.click(closeButton)
-      expect(screen.queryByRole('button', { name: 'Close alert' })).to.be.null
+      expect(screen.queryByRole('button', { name: 'Close' })).to.be.null
     })
   })
 })

services/web/test/frontend/features/settings/components/linking-section.test.tsx

@@ -78,7 +78,7 @@ describe('<LinkingSection />', function () {
     )
     const helpLink = screen.getByRole('link', { name: 'Learn more' })
     expect(helpLink.getAttribute('href')).to.equal('/blog/434')
-    const linkButton = screen.getByRole('link', { name: 'Link' })
+    const linkButton = screen.getByRole('button', { name: 'Link' })
     expect(linkButton.getAttribute('href')).to.equal('/auth/orcid?intent=link')
   })
 

services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { screen, fireEvent, render } from '@testing-library/react'
+import { screen, fireEvent, render, within } from '@testing-library/react'
 import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget'
 import * as eventTracking from '@/infrastructure/event-tracking'
 
@@ -32,7 +32,7 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
     })
 
     it('should render an upgrade link and track clicks', function () {
-      const upgradeLink = screen.getByRole('link', { name: 'Upgrade' })
+      const upgradeLink = screen.getByRole('button', { name: 'Upgrade' })
       expect(upgradeLink.getAttribute('href')).to.equal(
         '/user/subscription/plans'
       )
@@ -51,7 +51,7 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
 
     it('should render a link to initiate integration linking', function () {
       expect(
-        screen.getByRole('link', { name: 'Link' }).getAttribute('href')
+        screen.getByRole('button', { name: 'Link' }).getAttribute('href')
       ).to.equal('/link')
     })
 
@@ -90,10 +90,11 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
 
     it('should open a modal with a link to confirm integration unlinking', function () {
       fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
-      screen.getByText('confirm unlink')
-      screen.getByText('you will be unlinked')
-      screen.getByRole('button', { name: 'Cancel' })
-      screen.getByRole('button', { name: 'Unlink' })
+      const withinModal = within(screen.getByRole('dialog'))
+      withinModal.getByText('confirm unlink')
+      withinModal.getByText('you will be unlinked')
+      withinModal.getByRole('button', { name: 'Cancel' })
+      withinModal.getByRole('button', { name: 'Unlink' })
     })
 
     it('should cancel unlinking when clicking "cancel" in the confirmation modal', async function () {

services/web/test/frontend/features/settings/components/linking/sso-widget.test.tsx

@@ -1,6 +1,12 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { screen, fireEvent, render, waitFor } from '@testing-library/react'
+import {
+  screen,
+  fireEvent,
+  render,
+  waitFor,
+  within,
+} from '@testing-library/react'
 import { FetchError } from '../../../../../../frontend/js/infrastructure/fetch-json'
 import { SSOLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/sso-widget'
 
@@ -27,7 +33,7 @@ describe('<SSOLinkingWidget />', function () {
     it('should render a link to `linkPath`', function () {
       render(<SSOLinkingWidget {...defaultProps} linked={false} />)
       expect(
-        screen.getByRole('link', { name: 'Link' }).getAttribute('href')
+        screen.getByRole('button', { name: 'Link' }).getAttribute('href')
       ).to.equal('/integration/link?intent=link')
     })
   })
@@ -75,7 +81,7 @@ describe('<SSOLinkingWidget />', function () {
         <SSOLinkingWidget {...defaultProps} linked onUnlink={unlinkFunction} />
       )
       fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
-      confirmBtn = screen.getByRole('button', {
+      confirmBtn = within(screen.getByRole('dialog')).getByRole('button', {
         name: 'Unlink',
         hidden: false,
       })
@@ -109,10 +115,13 @@ describe('<SSOLinkingWidget />', function () {
         <SSOLinkingWidget {...defaultProps} linked onUnlink={unlinkFunction} />
       )
       fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
-      const confirmBtn = screen.getByRole('button', {
-        name: 'Unlink',
-        hidden: false,
-      })
+      const confirmBtn = within(screen.getByRole('dialog')).getByRole(
+        'button',
+        {
+          name: 'Unlink',
+          hidden: false,
+        }
+      )
       fireEvent.click(confirmBtn)
     })
 

services/web/test/frontend/features/settings/components/password-section.test.tsx

@@ -145,7 +145,7 @@ describe('<PasswordSection />', function () {
     render(<PasswordSection />)
     submitValidForm()
 
-    await screen.findByText('Saving…')
+    await screen.findByRole('button', { name: 'Saving…' })
 
     finishUpdateCall({
       status: 200,

services/web/test/frontend/features/settings/components/security-section.test.tsx

@@ -22,7 +22,7 @@ describe('<SecuritySection />', function () {
     render(<SecuritySection />)
 
     expect(screen.getAllByText('Single Sign-On (SSO)').length).to.equal(2)
-    const link = screen.getByRole('link', {
+    const link = screen.getByRole('button', {
       name: /Set up SSO/i,
     })
     expect(link).to.exist