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/subscription/components/dashboard/group-subscription-memberships.test.tsx

@@ -92,7 +92,9 @@ describe('<GroupSubscriptionMemberships />', function () {
         </SplitTestProvider>
       )
 
-      const leaveGroupButton = screen.getByText('Leave group')
+      const leaveGroupButton = screen.getByRole('button', {
+        name: 'Leave group',
+      })
       fireEvent.click(leaveGroupButton)
 
       this.confirmModal = screen.getByRole('dialog')
@@ -100,8 +102,12 @@ describe('<GroupSubscriptionMemberships />', function () {
         'Are you sure you want to leave this group?'
       )
 
-      this.cancelButton = within(this.confirmModal).getByText('Cancel')
-      this.leaveNowButton = within(this.confirmModal).getByText('Leave now')
+      this.cancelButton = within(this.confirmModal).getByRole('button', {
+        name: 'Cancel',
+      })
+      this.leaveNowButton = within(this.confirmModal).getByRole('button', {
+        name: 'Leave now',
+      })
     })
 
     afterEach(function () {

services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx

@@ -89,7 +89,7 @@ describe('<PersonalSubscription />', function () {
 
       screen.getByText('No further payments will be taken.', { exact: false })
 
-      screen.getByRole('link', { name: 'View your invoices' })
+      screen.getByRole('button', { name: 'View your invoices' })
       screen.getByRole('button', { name: 'Reactivate your subscription' })
     })
 

services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx

@@ -323,7 +323,7 @@ describe('<ActiveSubscription />', function () {
       fireEvent.click(button)
 
       const cancelButton = screen.getByRole('button', {
-        name: 'Loading',
+        name: 'Processing…',
       }) as HTMLButtonElement
       expect(cancelButton.disabled).to.be.true
 
@@ -368,7 +368,7 @@ describe('<ActiveSubscription />', function () {
           name: cancelButtonText,
         })
         screen.getByRole('button', {
-          name: 'Loading',
+          name: 'Processing…',
         })
       })
 
@@ -385,7 +385,7 @@ describe('<ActiveSubscription />', function () {
         expect(buttons[0].getAttribute('disabled')).to.equal('')
         expect(buttons[1].getAttribute('disabled')).to.equal('')
         screen.getByRole('button', {
-          name: 'Loading',
+          name: 'Processing…',
         })
         screen.getByRole('button', {
           name: extendTrialButtonText,
@@ -456,7 +456,7 @@ describe('<ActiveSubscription />', function () {
           name: cancelButtonText,
         })
         screen.getByRole('button', {
-          name: 'Loading',
+          name: 'Processing…',
         })
       })
 
@@ -473,7 +473,7 @@ describe('<ActiveSubscription />', function () {
         expect(buttons[0].getAttribute('disabled')).to.equal('')
         expect(buttons[1].getAttribute('disabled')).to.equal('')
         screen.getByRole('button', {
-          name: 'Loading',
+          name: 'Processing…',
         })
         screen.getByRole('button', {
           name: downgradeButtonText,

services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx

@@ -118,10 +118,14 @@ describe('<ChangePlanModal />', function () {
       })
       fireEvent.click(buttons[0])
 
-      await screen.findByText('Are you sure you want to change plan to', {
-        exact: false,
-      })
-      screen.getByRole('button', { name: 'Change plan' })
+      const confirmModal = screen.getByRole('dialog')
+      await within(confirmModal).findByText(
+        'Are you sure you want to change plan to',
+        {
+          exact: false,
+        }
+      )
+      within(confirmModal).getByRole('button', { name: 'Change plan' })
 
       expect(
         screen.queryByText(
@@ -197,10 +201,13 @@ describe('<ChangePlanModal />', function () {
       await screen.findByText('Are you sure you want to change plan to', {
         exact: false,
       })
-      const buttonConfirm = screen.getByRole('button', { name: 'Change plan' })
+      const buttonConfirm = within(screen.getByRole('dialog')).getByRole(
+        'button',
+        { name: 'Change plan' }
+      )
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
 
       // page is reloaded on success
       await waitFor(() => {
@@ -230,10 +237,13 @@ describe('<ChangePlanModal />', function () {
       await screen.findByText('Are you sure you want to change plan to', {
         exact: false,
       })
-      const buttonConfirm = screen.getByRole('button', { name: 'Change plan' })
+      const buttonConfirm = within(screen.getByRole('dialog')).getByRole(
+        'button',
+        { name: 'Change plan' }
+      )
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
 
       await screen.findByText('Sorry, something went wrong. ', { exact: false })
       await screen.findByText('Please try again. ', { exact: false })
@@ -286,7 +296,7 @@ describe('<ChangePlanModal />', function () {
       })
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
 
       // page is reloaded on success
       await waitFor(() => {
@@ -304,7 +314,7 @@ describe('<ChangePlanModal />', function () {
       })
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
       await screen.findByText('Sorry, something went wrong. ', { exact: false })
       await screen.findByText('Please try again. ', { exact: false })
       await screen.findByText('If the problem continues please contact us.', {
@@ -518,7 +528,7 @@ describe('<ChangePlanModal />', function () {
       const buttonConfirm = screen.getByRole('button', { name: 'Upgrade now' })
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
 
       // // page is reloaded on success
       await waitFor(() => {
@@ -539,7 +549,7 @@ describe('<ChangePlanModal />', function () {
       const buttonConfirm = screen.getByRole('button', { name: 'Upgrade now' })
       fireEvent.click(buttonConfirm)
 
-      screen.getByText('processing', { exact: false })
+      screen.getByRole('button', { name: 'Processing…' })
 
       await screen.findByText('Sorry, something went wrong. ', { exact: false })
       await screen.findByText('Please try again. ', { exact: false })

services/web/test/frontend/features/subscription/components/group-invite/accepted-invite.test.tsx

@@ -2,34 +2,38 @@ import { render, screen } from '@testing-library/react'
 import AcceptedInvite from '../../../../../../frontend/js/features/subscription/components/group-invite/accepted-invite'
 import { expect } from 'chai'
 
-describe('accepted group invite', function () {
-  it('renders', async function () {
-    window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
-    render(<AcceptedInvite />)
-    await screen.findByText(
-      'You have joined the group subscription managed by example@overleaf.com'
-    )
-  })
+for (const bsVersion of [3, 5])
+  describe('accepted group invite' + ` bs${bsVersion}`, function () {
+    beforeEach(function () {
+      window.metaAttributesCache.set('ol-bootstrapVersion', bsVersion)
+    })
+    it('renders', async function () {
+      window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
+      render(<AcceptedInvite />)
+      await screen.findByText(
+        'You have joined the group subscription managed by example@overleaf.com'
+      )
+    })
 
-  it('links to SSO enrollment page for SSO groups', async function () {
-    window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
-    window.metaAttributesCache.set('ol-groupSSOActive', true)
-    window.metaAttributesCache.set('ol-subscriptionId', 'group123')
-    render(<AcceptedInvite />)
-    const linkBtn = (await screen.findByRole('link', {
-      name: 'Done',
-    })) as HTMLLinkElement
-    expect(linkBtn.href).to.equal(
-      'https://www.test-overleaf.com/subscription/group123/sso_enrollment'
-    )
-  })
+    it('links to SSO enrollment page for SSO groups', async function () {
+      window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
+      window.metaAttributesCache.set('ol-groupSSOActive', true)
+      window.metaAttributesCache.set('ol-subscriptionId', 'group123')
+      render(<AcceptedInvite />)
+      const linkBtn = (await screen.findByRole('link', {
+        name: 'Done',
+      })) as HTMLLinkElement
+      expect(linkBtn.href).to.equal(
+        'https://www.test-overleaf.com/subscription/group123/sso_enrollment'
+      )
+    })
 
-  it('links to dash for non-SSO groups', async function () {
-    window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
-    render(<AcceptedInvite />)
-    const linkBtn = (await screen.findByRole('link', {
-      name: 'Done',
-    })) as HTMLLinkElement
-    expect(linkBtn.href).to.equal('https://www.test-overleaf.com/project')
+    it('links to dash for non-SSO groups', async function () {
+      window.metaAttributesCache.set('ol-inviterName', 'example@overleaf.com')
+      render(<AcceptedInvite />)
+      const linkBtn = (await screen.findByRole('link', {
+        name: 'Done',
+      })) as HTMLLinkElement
+      expect(linkBtn.href).to.equal('https://www.test-overleaf.com/project')
+    })
   })
-})

services/web/test/frontend/features/subscription/components/group-invite/group-invite.test.tsx

@@ -2,37 +2,80 @@ import { render, screen } from '@testing-library/react'
 import { expect } from 'chai'
 import GroupInvite from '../../../../../../frontend/js/features/subscription/components/group-invite/group-invite'
 
-describe('group invite', function () {
-  const inviterName = 'example@overleaf.com'
-  beforeEach(function () {
-    window.metaAttributesCache.set('ol-inviterName', inviterName)
-  })
-
-  it('renders header', async function () {
-    render(<GroupInvite />)
-    await screen.findByText(inviterName)
-    screen.getByText(`has invited you to join a group subscription on Overleaf`)
-    expect(screen.queryByText('Email link expired, please request a new one.'))
-      .to.be.null
-  })
-
-  describe('when user has personal subscription', function () {
+for (const bsVersion of [3, 5])
+  describe('group invite' + ` bs${bsVersion}`, function () {
+    window.metaAttributesCache.set('ol-bootstrapVersion', bsVersion)
+    const inviterName = 'example@overleaf.com'
     beforeEach(function () {
-      window.metaAttributesCache.set(
-        'ol-hasIndividualRecurlySubscription',
-        true
-      )
+      window.metaAttributesCache.set('ol-inviterName', inviterName)
     })
 
-    it('renders cancel personal subscription view', async function () {
+    it('renders header', async function () {
       render(<GroupInvite />)
-      await screen.findByText(
-        'You already have an individual subscription, would you like us to cancel this first before joining the group licence?'
+      await screen.findByText(inviterName)
+      screen.getByText(
+        `has invited you to join a group subscription on Overleaf`
       )
+      expect(
+        screen.queryByText('Email link expired, please request a new one.')
+      ).to.be.null
     })
 
-    describe('and in a managed group', function () {
-      // note: this should not be possible but managed user view takes priority over all
+    describe('when user has personal subscription', function () {
+      beforeEach(function () {
+        window.metaAttributesCache.set(
+          'ol-hasIndividualRecurlySubscription',
+          true
+        )
+      })
+
+      it('renders cancel personal subscription view', async function () {
+        render(<GroupInvite />)
+        await screen.findByText(
+          'You already have an individual subscription, would you like us to cancel this first before joining the group licence?'
+        )
+      })
+
+      describe('and in a managed group', function () {
+        // note: this should not be possible but managed user view takes priority over all
+        beforeEach(function () {
+          window.metaAttributesCache.set(
+            'ol-currentManagedUserAdminEmail',
+            'example@overleaf.com'
+          )
+          window.metaAttributesCache.set('ol-cannot-join-subscription', true)
+        })
+
+        it('renders managed user cannot join view', async function () {
+          render(<GroupInvite />)
+          await screen.findByText('You can’t join this group subscription')
+          screen.getByText(
+            'Your Overleaf account is managed by your current group admin (example@overleaf.com). This means you can’t join additional group subscriptions',
+            { exact: false }
+          )
+          screen.getByRole('link', { name: 'Read more about Managed Users.' })
+        })
+      })
+    })
+
+    describe('when user does not have a personal subscription', function () {
+      beforeEach(function () {
+        window.metaAttributesCache.set(
+          'ol-hasIndividualRecurlySubscription',
+          false
+        )
+        window.metaAttributesCache.set('ol-inviteToken', 'token123')
+      })
+
+      it('does not render cancel personal subscription view', async function () {
+        render(<GroupInvite />)
+        await screen.findByText(
+          'Please click the button below to join the group subscription and enjoy the benefits of an upgraded Overleaf account'
+        )
+      })
+    })
+
+    describe('when the user is already a managed user in another group', function () {
       beforeEach(function () {
         window.metaAttributesCache.set(
           'ol-currentManagedUserAdminEmail',
@@ -43,7 +86,11 @@ describe('group invite', function () {
 
       it('renders managed user cannot join view', async function () {
         render(<GroupInvite />)
-        await screen.findByText('You can’t join this group subscription')
+        await screen.findByText(inviterName)
+        screen.getByText(
+          `has invited you to join a group subscription on Overleaf`
+        )
+        screen.getByText('You can’t join this group subscription')
         screen.getByText(
           'Your Overleaf account is managed by your current group admin (example@overleaf.com). This means you can’t join additional group subscriptions',
           { exact: false }
@@ -51,70 +98,28 @@ describe('group invite', function () {
         screen.getByRole('link', { name: 'Read more about Managed Users.' })
       })
     })
-  })
 
-  describe('when user does not have a personal subscription', function () {
-    beforeEach(function () {
-      window.metaAttributesCache.set(
-        'ol-hasIndividualRecurlySubscription',
-        false
-      )
-      window.metaAttributesCache.set('ol-inviteToken', 'token123')
+    describe('expired', function () {
+      beforeEach(function () {
+        window.metaAttributesCache.set('ol-expired', true)
+      })
+
+      it('shows error notification when expired', async function () {
+        render(<GroupInvite />)
+        await screen.findByText('Email link expired, please request a new one.')
+      })
     })
 
-    it('does not render cancel personal subscription view', async function () {
-      render(<GroupInvite />)
-      await screen.findByText(
-        'Please click the button below to join the group subscription and enjoy the benefits of an upgraded Overleaf account'
-      )
+    describe('join view', function () {
+      beforeEach(function () {
+        window.metaAttributesCache.set('ol-inviteToken', 'token123')
+      })
+
+      it('shows view to join group', async function () {
+        render(<GroupInvite />)
+        await screen.findByText(
+          'Please click the button below to join the group subscription and enjoy the benefits of an upgraded Overleaf account'
+        )
+      })
     })
   })
-
-  describe('when the user is already a managed user in another group', function () {
-    beforeEach(function () {
-      window.metaAttributesCache.set(
-        'ol-currentManagedUserAdminEmail',
-        'example@overleaf.com'
-      )
-      window.metaAttributesCache.set('ol-cannot-join-subscription', true)
-    })
-
-    it('renders managed user cannot join view', async function () {
-      render(<GroupInvite />)
-      await screen.findByText(inviterName)
-      screen.getByText(
-        `has invited you to join a group subscription on Overleaf`
-      )
-      screen.getByText('You can’t join this group subscription')
-      screen.getByText(
-        'Your Overleaf account is managed by your current group admin (example@overleaf.com). This means you can’t join additional group subscriptions',
-        { exact: false }
-      )
-      screen.getByRole('link', { name: 'Read more about Managed Users.' })
-    })
-  })
-
-  describe('expired', function () {
-    beforeEach(function () {
-      window.metaAttributesCache.set('ol-expired', true)
-    })
-
-    it('shows error notification when expired', async function () {
-      render(<GroupInvite />)
-      await screen.findByText('Email link expired, please request a new one.')
-    })
-  })
-
-  describe('join view', function () {
-    beforeEach(function () {
-      window.metaAttributesCache.set('ol-inviteToken', 'token123')
-    })
-
-    it('shows view to join group', async function () {
-      render(<GroupInvite />)
-      await screen.findByText(
-        'Please click the button below to join the group subscription and enjoy the benefits of an upgraded Overleaf account'
-      )
-    })
-  })
-})