Merge pull request #24336 from overleaf/td-bs5-migrate-cypress-tests

Migrate some Cypress tests to Bootstrap 5

GitOrigin-RevId: a3de8680046c35f8cc1df8baef60981d8eb52580

services/web/frontend/js/shared/components/split-menu.tsx

@@ -1,146 +0,0 @@
-import { Button, Dropdown, MenuItem } from 'react-bootstrap'
-import type {
-  ButtonProps,
-  MenuItemProps,
-  DropdownButtonProps,
-  DropdownProps,
-} from 'react-bootstrap'
-import type { PropsWithChildren } from 'react'
-import classNames from 'classnames'
-import Tooltip, { type TooltipProps } from './tooltip'
-import Icon, { type IconProps } from './icon'
-import type { BsSize, BsStyle } from '../../../../types/bootstrap'
-
-type SplitMenuBsStyle = Extract<BsStyle, 'primary' | 'secondary' | 'danger'>
-
-type SplitMenuBsSize = Extract<BsSize, 'md' | 'sm' | 'xs'>
-
-type SplitMenuButtonProps = {
-  tooltip?: Omit<TooltipProps, 'children'>
-  bsStyle?: SplitMenuBsStyle
-  text: string
-  icon?: IconProps
-} & Pick<ButtonProps, 'aria-label' | 'onClick' | 'className' | 'disabled'>
-
-type SplitMenuDropdownToggleProps = {
-  handleAnimationEnd?: () => void
-} & Pick<DropdownButtonProps, 'className' | 'aria-label'>
-
-type SplitMenuDropdownProps = Pick<DropdownProps, 'id' | 'className'>
-
-type SplitMenuProps = PropsWithChildren<{
-  bsStyle: SplitMenuBsStyle
-  bsSize?: SplitMenuBsSize
-  button: Omit<SplitMenuButtonProps, 'disabled'>
-  dropdown: SplitMenuDropdownProps
-  dropdownToggle?: SplitMenuDropdownToggleProps
-  disabled?: boolean
-}>
-
-function SplitMenu({
-  bsStyle,
-  bsSize = 'md',
-  button,
-  dropdown,
-  dropdownToggle,
-  disabled = false,
-  children,
-}: SplitMenuProps) {
-  const { tooltip, icon, ...buttonProps } = button
-
-  const splitMenuClassName = classNames('split-menu', {
-    [`btn-${bsSize}`]: true,
-  })
-
-  const dropdownToggleClassName = classNames(
-    'split-menu-dropdown-toggle',
-    dropdownToggle?.className
-  )
-
-  return (
-    <div className={splitMenuClassName}>
-      <SplitMenuButton
-        // eslint-disable-next-line react/jsx-handler-names
-        onClick={buttonProps.onClick}
-        className={buttonProps.className}
-        disabled={disabled}
-        tooltip={tooltip}
-        bsStyle={bsStyle}
-      >
-        {icon ? (
-          <Icon className="split-menu-icon" type={icon.type} spin={icon.spin} />
-        ) : null}
-        <span className="split-menu-button">{buttonProps.text}</span>
-      </SplitMenuButton>
-      <Dropdown
-        className={classNames('split-menu-dropdown', dropdown.className)}
-        id={dropdown.id}
-      >
-        <Dropdown.Toggle
-          aria-label={dropdownToggle?.['aria-label']}
-          className={dropdownToggleClassName}
-          bsStyle={bsStyle}
-          onAnimationEnd={dropdownToggle?.handleAnimationEnd}
-          data-ol-loading={disabled}
-        />
-
-        <Dropdown.Menu>{children}</Dropdown.Menu>
-      </Dropdown>
-    </div>
-  )
-}
-
-function SplitMenuButton({
-  onClick,
-  disabled,
-  tooltip,
-  bsStyle,
-  children,
-  className,
-  ...props
-}: PropsWithChildren<Omit<SplitMenuButtonProps, 'text' | 'icon'>>) {
-  const buttonClassName = classNames('split-menu-button', className)
-
-  if (tooltip) {
-    return (
-      <Tooltip
-        id={tooltip.id}
-        description={tooltip.description}
-        tooltipProps={tooltip.tooltipProps}
-        overlayProps={tooltip.overlayProps}
-      >
-        <Button
-          className={buttonClassName}
-          bsStyle={bsStyle}
-          onClick={onClick}
-          aria-label={props['aria-label']}
-          disabled={disabled}
-          data-ol-loading={disabled}
-        >
-          {children}
-        </Button>
-      </Tooltip>
-    )
-  }
-
-  return (
-    <Button
-      className={buttonClassName}
-      bsStyle={bsStyle}
-      onClick={onClick}
-      aria-label={props['aria-label']}
-      disabled={disabled}
-      data-ol-loading={disabled}
-    >
-      {children}
-    </Button>
-  )
-}
-
-function SplitMenuItem(props: MenuItemProps) {
-  return <MenuItem {...props} draggable="false" />
-}
-
-SplitMenu.Item = SplitMenuItem
-
-export default SplitMenu

services/web/frontend/stories/split-menu.stories.tsx

@@ -1,225 +0,0 @@
-import SplitMenu from '../js/shared/components/split-menu'
-
-export const PrimaryWithoutTooltip = () => {
-  return (
-    <SplitMenu
-      bsStyle="primary"
-      button={{
-        text: 'Button',
-      }}
-      dropdown={{
-        id: 'pdf-recompile-dropdown',
-      }}
-    >
-      <SplitMenu.Item>tes</SplitMenu.Item>
-    </SplitMenu>
-  )
-}
-
-export const PrimaryWithTooltip = () => {
-  return (
-    <SplitMenu
-      bsStyle="primary"
-      button={{
-        text: 'Button',
-        tooltip: {
-          description: 'tooltip description',
-          id: 'tooltip-storybook',
-          overlayProps: {
-            placement: 'bottom',
-          },
-        },
-      }}
-      dropdown={{
-        id: 'pdf-recompile-dropdown',
-      }}
-    >
-      <SplitMenu.Item>tes</SplitMenu.Item>
-    </SplitMenu>
-  )
-}
-
-export const Disabled = () => {
-  return (
-    <div>
-      <h2>Primary</h2>
-      <SplitMenu
-        bsStyle="primary"
-        disabled
-        button={{
-          text: 'Button',
-        }}
-        dropdown={{
-          id: 'pdf-recompile-dropdown',
-        }}
-        dropdownToggle={{}}
-      >
-        <SplitMenu.Item>tes</SplitMenu.Item>
-      </SplitMenu>
-      <hr />
-      <h2>Secondary</h2>
-      <SplitMenu
-        bsStyle="secondary"
-        disabled
-        button={{
-          text: 'Button',
-        }}
-        dropdown={{
-          id: 'pdf-recompile-dropdown',
-        }}
-        dropdownToggle={{}}
-      >
-        <SplitMenu.Item>tes</SplitMenu.Item>
-      </SplitMenu>
-      <hr />
-      <h2>Danger</h2>
-      <SplitMenu
-        bsStyle="danger"
-        disabled
-        button={{
-          text: 'Button',
-        }}
-        dropdown={{
-          id: 'pdf-recompile-dropdown',
-        }}
-        dropdownToggle={{}}
-      >
-        <SplitMenu.Item>tes</SplitMenu.Item>
-      </SplitMenu>
-    </div>
-  )
-}
-
-export const DifferentSizeAndStyle = () => {
-  return (
-    <div>
-      <h2>Default (medium)</h2>
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <SplitMenu
-          bsStyle="primary"
-          bsSize="md"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="secondary"
-          bsSize="md"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="danger"
-          bsSize="md"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-      </div>
-      <hr />
-      <h2>Small</h2>
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <SplitMenu
-          bsStyle="primary"
-          bsSize="sm"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="secondary"
-          bsSize="sm"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="danger"
-          bsSize="sm"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-      </div>
-      <hr />
-      <h2>Extra Small</h2>
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <SplitMenu
-          bsStyle="primary"
-          bsSize="xs"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="secondary"
-          bsSize="xs"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-        <SplitMenu
-          bsStyle="danger"
-          bsSize="xs"
-          button={{
-            text: 'Button',
-          }}
-          dropdown={{
-            id: 'pdf-recompile-dropdown',
-          }}
-        >
-          <SplitMenu.Item>tes</SplitMenu.Item>
-        </SplitMenu>
-      </div>
-    </div>
-  )
-}
-
-export default {
-  title: 'Shared / Components / Split Menu',
-  component: SplitMenu,
-  args: {
-    source: 'storybook',
-  },
-}

services/web/test/frontend/components/shared/language-picker.spec.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import '../../helpers/bootstrap-5'
 import LanguagePicker from '../../../../frontend/js/features/ui/components/bootstrap-5/language-picker'
 import getMeta from '@/utils/meta'
 import exposedSettings from '../../../../modules/admin-panel/test/frontend/js/features/user/data/exposedSettings'

services/web/test/frontend/components/shared/split-menu.spec.tsx

@@ -1,68 +0,0 @@
-import '../../helpers/bootstrap-3'
-import SplitMenu from '../../../../frontend/js/shared/components/split-menu'
-
-describe('SplitMenu', function () {
-  it('renders primary variant', function () {
-    cy.mount(
-      <SplitMenu
-        bsStyle="primary"
-        button={{
-          text: 'Button Text',
-        }}
-        dropdown={{
-          id: 'pdf-recompile-dropdown',
-        }}
-      >
-        <SplitMenu.Item>Item 1</SplitMenu.Item>
-        <SplitMenu.Item>Item 2</SplitMenu.Item>
-        <SplitMenu.Item>Item 3</SplitMenu.Item>
-      </SplitMenu>
-    )
-
-    cy.get('button.split-menu-button').contains('Button Text')
-    cy.get('button.split-menu-button').should('have.class', 'btn-primary')
-    cy.get('button.split-menu-dropdown-toggle').should(
-      'have.class',
-      'btn-primary'
-    )
-    cy.get('li').should('have.length', 3)
-    cy.get('li').contains('Item 1')
-    cy.get('li').contains('Item 2')
-    cy.get('li').contains('Item 3')
-
-    cy.get('ul.dropdown-menu').should('not.be.visible')
-    cy.get('button.split-menu-dropdown-toggle').click()
-    cy.get('ul.dropdown-menu').should('be.visible')
-  })
-
-  it('with custom classNames', function () {
-    cy.mount(
-      <SplitMenu
-        bsStyle="primary"
-        button={{
-          text: 'Button Text',
-          className: 'split-menu-class-1',
-        }}
-        dropdown={{
-          id: 'pdf-recompile-dropdown',
-          className: 'split-menu-class-2',
-        }}
-        dropdownToggle={{
-          className: 'split-menu-class-3',
-        }}
-      >
-        <SplitMenu.Item>Item 1</SplitMenu.Item>
-      </SplitMenu>
-    )
-
-    cy.get('button.split-menu-button').should(
-      'have.class',
-      'split-menu-class-1'
-    )
-    cy.get('div.split-menu-dropdown').should('have.class', 'split-menu-class-2')
-    cy.get('button.split-menu-dropdown-toggle').should(
-      'have.class',
-      'split-menu-class-3'
-    )
-  })
-})

services/web/test/frontend/features/full-project-search/components/full-project-search.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import { EditorProviders } from '../../../helpers/editor-providers'
 import FullProjectSearch from '../../../../../modules/full-project-search/frontend/js/components/full-project-search'
 import {

services/web/test/frontend/features/group-management/components/add-seats.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import AddSeats, {
   MAX_NUMBER_OF_USERS,
 } from '@/features/group-management/components/add-seats/add-seats'

services/web/test/frontend/features/group-management/components/group-managers.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-3'
 import GroupManagers from '@/features/group-management/components/group-managers'
 
 const JOHN_DOE = {

services/web/test/frontend/features/group-management/components/group-members.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-3'
 import GroupMembers from '@/features/group-management/components/group-members'
 import { GroupMembersProvider } from '@/features/group-management/context/group-members-context'
 import { User } from '../../../../../types/group-management/user'
@@ -126,7 +125,7 @@ describe('GroupMembers', function () {
 
       cy.get('.form-control').type('someone.else@test.com')
       cy.get('.add-more-members-form button').click()
-      cy.get('.alert').contains('Error: User already added')
+      cy.findByRole('alert').contains('Error: User already added')
     })
 
     it('checks the select all checkbox', function () {
@@ -134,23 +133,23 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').should('not.be.checked')
+            cy.findByTestId('select-single-checkbox').should('not.be.checked')
           })
           cy.get('tr:nth-child(2)').within(() => {
-            cy.get('.select-item').should('not.be.checked')
+            cy.findByTestId('select-single-checkbox').should('not.be.checked')
           })
         })
 
-      cy.get('.select-all').click()
+      cy.findByTestId('select-all-checkbox').click()
 
       cy.findByTestId('managed-entities-table')
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').should('be.checked')
+            cy.findByTestId('select-single-checkbox').should('be.checked')
           })
           cy.get('tr:nth-child(2)').within(() => {
-            cy.get('.select-item').should('be.checked')
+            cy.findByTestId('select-single-checkbox').should('be.checked')
           })
         })
     })
@@ -164,7 +163,7 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').check()
+            cy.findByTestId('select-single-checkbox').check()
           })
         })
 
@@ -192,12 +191,12 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').check()
+            cy.findByTestId('select-single-checkbox').check()
           })
         })
       cy.get('button').contains('Remove from group').click()
 
-      cy.get('.alert').contains('Sorry, something went wrong')
+      cy.findByRole('alert').contains('Sorry, something went wrong')
     })
   })
 
@@ -264,7 +263,7 @@ describe('GroupMembers', function () {
             cy.contains('john.doe@test.com')
             cy.contains('John Doe')
             cy.contains('15th Jan 2023')
-            cy.get('.sr-only').contains('Pending invite')
+            cy.get('.visually-hidden').contains('Pending invite')
             cy.findByTestId('badge-pending-invite').should(
               'have.text',
               'Pending invite'
@@ -277,7 +276,7 @@ describe('GroupMembers', function () {
             cy.contains('Bobby Lapointe')
             cy.contains('2nd Jan 2023')
             cy.findByTestId('badge-pending-invite').should('not.exist')
-            cy.get('.sr-only').contains('Not managed')
+            cy.get('.visually-hidden').contains('Not managed')
           })
 
           cy.get('tr:nth-child(3)').within(() => {
@@ -285,7 +284,7 @@ describe('GroupMembers', function () {
             cy.contains('Claire Jennings')
             cy.contains('3rd Jan 2023')
             cy.findByTestId('badge-pending-invite').should('not.exist')
-            cy.get('.sr-only').contains('Managed')
+            cy.get('.visually-hidden').contains('Managed')
           })
         })
     })
@@ -310,7 +309,7 @@ describe('GroupMembers', function () {
           cy.get('tr:nth-child(4)').within(() => {
             cy.contains('someone.else@test.com')
             cy.contains('N/A')
-            cy.get('.sr-only').contains('Pending invite')
+            cy.get('.visually-hidden').contains('Pending invite')
             cy.findByTestId('badge-pending-invite').should(
               'have.text',
               'Pending invite'
@@ -332,7 +331,7 @@ describe('GroupMembers', function () {
 
       cy.get('.form-control').type('someone.else@test.com')
       cy.get('.add-more-members-form button').click()
-      cy.get('.alert').contains('Error: User already added')
+      cy.findByRole('alert').contains('Error: User already added')
     })
 
     it('checks the select all checkbox', function () {
@@ -340,23 +339,23 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').should('not.be.checked')
+            cy.findByTestId('select-single-checkbox').should('not.be.checked')
           })
           cy.get('tr:nth-child(2)').within(() => {
-            cy.get('.select-item').should('not.be.checked')
+            cy.findByTestId('select-single-checkbox').should('not.be.checked')
           })
         })
 
-      cy.get('.select-all').click()
+      cy.findByTestId('select-all-checkbox').click()
 
       cy.findByTestId('managed-entities-table')
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').should('be.checked')
+            cy.findByTestId('select-single-checkbox').should('be.checked')
           })
           cy.get('tr:nth-child(2)').within(() => {
-            cy.get('.select-item').should('be.checked')
+            cy.findByTestId('select-single-checkbox').should('be.checked')
           })
         })
 
@@ -372,7 +371,7 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').check()
+            cy.findByTestId('select-single-checkbox').check()
           })
         })
 
@@ -400,7 +399,7 @@ describe('GroupMembers', function () {
         .within(() => {
           // no checkbox should be shown for 'Claire Jennings', a managed user
           cy.get('tr:nth-child(3)').within(() => {
-            cy.get('.select-item').should('not.exist')
+            cy.findByTestId('select-single-checkbox').should('not.exist')
           })
         })
     })
@@ -414,14 +413,14 @@ describe('GroupMembers', function () {
         .find('tbody')
         .within(() => {
           cy.get('tr:nth-child(1)').within(() => {
-            cy.get('.select-item').check()
+            cy.findByTestId('select-single-checkbox').check()
           })
         })
       cy.get('.page-header').within(() => {
         cy.get('button').contains('Remove from group').click()
       })
 
-      cy.get('.alert').contains('Sorry, something went wrong')
+      cy.findByRole('alert').contains('Sorry, something went wrong')
     })
   })
 
@@ -485,12 +484,12 @@ describe('GroupMembers', function () {
         .within(() => {
           cy.get('tr:nth-child(2)').within(() => {
             cy.contains('bobby.lapointe@test.com')
-            cy.get('.sr-only').contains('SSO not active')
+            cy.get('.visually-hidden').contains('SSO not active')
           })
 
           cy.get('tr:nth-child(3)').within(() => {
             cy.contains('claire.jennings@test.com')
-            cy.get('.sr-only').contains('SSO active')
+            cy.get('.visually-hidden').contains('SSO active')
           })
         })
     })

services/web/test/frontend/features/group-management/components/institution-managers.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-3'
 import InstitutionManagers from '@/features/group-management/components/institution-managers'
 
 const JOHN_DOE = {

services/web/test/frontend/features/group-management/components/managed-group-members.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-3'
 import GroupMembers from '@/features/group-management/components/group-members'
 import { GroupMembersProvider } from '@/features/group-management/context/group-members-context'
 import { User } from '../../../../../types/group-management/user'
@@ -93,7 +92,7 @@ describe('group members, with managed users', function () {
           cy.contains('john.doe@test.com')
           cy.contains('John Doe')
           cy.contains('15th Jan 2023')
-          cy.get('.sr-only').contains('Pending invite')
+          cy.get('.visually-hidden').contains('Pending invite')
 
           cy.findByTestId('badge-pending-invite').should(
             'have.text',
@@ -107,7 +106,7 @@ describe('group members, with managed users', function () {
           cy.contains('Bobby Lapointe')
           cy.contains('2nd Jan 2023')
           cy.findByTestId('badge-pending-invite').should('not.exist')
-          cy.get('.sr-only').contains('Not managed')
+          cy.get('.visually-hidden').contains('Not managed')
         })
 
         cy.get('tr:nth-child(3)').within(() => {
@@ -115,7 +114,7 @@ describe('group members, with managed users', function () {
           cy.contains('Claire Jennings')
           cy.contains('3rd Jan 2023')
           cy.findByTestId('badge-pending-invite').should('not.exist')
-          cy.get('.sr-only').contains('Managed')
+          cy.get('.visually-hidden').contains('Managed')
         })
       })
   })
@@ -140,7 +139,7 @@ describe('group members, with managed users', function () {
         cy.get('tr:nth-child(4)').within(() => {
           cy.contains('someone.else@test.com')
           cy.contains('N/A')
-          cy.get('.sr-only').contains('Pending invite')
+          cy.get('.visually-hidden').contains('Pending invite')
           cy.findByTestId('badge-pending-invite').should(
             'have.text',
             'Pending invite'
@@ -162,7 +161,7 @@ describe('group members, with managed users', function () {
 
     cy.get('.form-control').type('someone.else@test.com')
     cy.get('.add-more-members-form button').click()
-    cy.get('.alert').contains('Error: User already added')
+    cy.findByRole('alert').contains('Error: User already added')
   })
 
   it('checks the select all checkbox', function () {
@@ -170,23 +169,23 @@ describe('group members, with managed users', function () {
       .find('tbody')
       .within(() => {
         cy.get('tr:nth-child(1)').within(() => {
-          cy.get('.select-item').should('not.be.checked')
+          cy.findByTestId('select-single-checkbox').should('not.be.checked')
         })
         cy.get('tr:nth-child(2)').within(() => {
-          cy.get('.select-item').should('not.be.checked')
+          cy.findByTestId('select-single-checkbox').should('not.be.checked')
         })
       })
 
-    cy.get('.select-all').click()
+    cy.findByTestId('select-all-checkbox').click()
 
     cy.findByTestId('managed-entities-table')
       .find('tbody')
       .within(() => {
         cy.get('tr:nth-child(1)').within(() => {
-          cy.get('.select-item').should('be.checked')
+          cy.findByTestId('select-single-checkbox').should('be.checked')
         })
         cy.get('tr:nth-child(2)').within(() => {
-          cy.get('.select-item').should('be.checked')
+          cy.findByTestId('select-single-checkbox').should('be.checked')
         })
       })
 
@@ -202,7 +201,7 @@ describe('group members, with managed users', function () {
       .find('tbody')
       .within(() => {
         cy.get('tr:nth-child(1)').within(() => {
-          cy.get('.select-item').check()
+          cy.findByTestId('select-single-checkbox').check()
         })
       })
 
@@ -230,7 +229,7 @@ describe('group members, with managed users', function () {
       .within(() => {
         // no checkbox should be shown for 'Claire Jennings', a managed user
         cy.get('tr:nth-child(3)').within(() => {
-          cy.get('.select-item').should('not.exist')
+          cy.findByTestId('select-single-checkbox').should('not.exist')
         })
       })
   })
@@ -244,14 +243,14 @@ describe('group members, with managed users', function () {
       .find('tbody')
       .within(() => {
         cy.get('tr:nth-child(1)').within(() => {
-          cy.get('.select-item').check()
+          cy.findByTestId('select-single-checkbox').check()
         })
       })
     cy.get('.page-header').within(() => {
       cy.get('button').contains('Remove from group').click()
     })
 
-    cy.get('.alert').contains('Sorry, something went wrong')
+    cy.findByRole('alert').contains('Sorry, something went wrong')
   })
 })
 
@@ -280,12 +279,14 @@ describe('Group members when group SSO is enabled', function () {
       .within(() => {
         cy.get('tr:nth-child(2)').within(() => {
           cy.contains('bobby.lapointe@test.com')
-          cy.get('.sr-only').contains('SSO not active').should('not.exist')
+          cy.get('.visually-hidden')
+            .contains('SSO not active')
+            .should('not.exist')
         })
 
         cy.get('tr:nth-child(3)').within(() => {
           cy.contains('claire.jennings@test.com')
-          cy.get('.sr-only').contains('SSO active').should('not.exist')
+          cy.get('.visually-hidden').contains('SSO active').should('not.exist')
         })
       })
   })
@@ -300,12 +301,12 @@ describe('Group members when group SSO is enabled', function () {
       .within(() => {
         cy.get('tr:nth-child(2)').within(() => {
           cy.contains('bobby.lapointe@test.com')
-          cy.get('.sr-only').contains('SSO not active')
+          cy.get('.visually-hidden').contains('SSO not active')
         })
 
         cy.get('tr:nth-child(3)').within(() => {
           cy.contains('claire.jennings@test.com')
-          cy.get('.sr-only').contains('SSO active')
+          cy.get('.visually-hidden').contains('SSO active')
         })
       })
   })

services/web/test/frontend/features/group-management/components/members-table/dropdown-button.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import type { PropsWithChildren } from 'react'
 import sinon from 'sinon'
 import DropdownButton from '@/features/group-management/components/members-table/dropdown-button'
@@ -7,14 +6,15 @@ import { User } from '../../../../../../types/group-management/user'
 
 function Wrapper({ children }: PropsWithChildren<Record<string, unknown>>) {
   return (
-    <ul className="managed-entities-list">
-      <span
-        className="managed-users-actions"
-        style={{ display: 'flex', width: '100%', justifyContent: 'flex-end' }}
-      >
-        <GroupMembersProvider>{children}</GroupMembersProvider>
-      </span>
-    </ul>
+    <table className="table">
+      <tbody>
+        <tr>
+          <td className="managed-users-actions" style={{ textAlign: 'right' }}>
+            <GroupMembersProvider>{children}</GroupMembersProvider>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   )
 }
 
@@ -60,11 +60,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-group-invite-action').should('be.visible')
         cy.findByTestId('remove-user-action').should('be.visible')
 
@@ -97,11 +97,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('remove-user-action').should('be.visible')
 
@@ -142,11 +142,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-group-invite-action').should('be.visible')
         cy.findByTestId('remove-user-action').should('be.visible')
 
@@ -182,11 +182,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('delete-user-action').should('be.visible')
 
@@ -221,11 +221,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-managed-user-invite-action').should(
           'be.visible'
@@ -264,11 +264,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the (empty) menu when the button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('no-actions-available').should('exist')
       })
     })
@@ -306,11 +306,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-group-invite-action').should('be.visible')
         cy.findByTestId('remove-user-action').should('be.visible')
 
@@ -341,7 +341,7 @@ describe('DropdownButton', function () {
 
       it('should show resend invite when user is admin', function () {
         mountDropDownComponent({ ...user, isEntityAdmin: true }, '123abc')
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-sso-link-invite-action').should('exist')
       })
 
@@ -350,7 +350,7 @@ describe('DropdownButton', function () {
           win.metaAttributesCache.set('ol-groupSSOActive', false)
         })
         mountDropDownComponent(user, '123abc')
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-sso-link-invite-action').should('not.exist')
       })
 
@@ -359,7 +359,7 @@ describe('DropdownButton', function () {
           win.metaAttributesCache.set('ol-groupSSOActive', true)
         })
         mountDropDownComponent(user, '123abc')
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-sso-link-invite-action').should('be.visible')
       })
 
@@ -373,7 +373,7 @@ describe('DropdownButton', function () {
           { success: true }
         ).as('resendInviteRequest')
         mountDropDownComponent(user, '123abc')
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-sso-link-invite-action')
           .should('exist')
           .as('resendInvite')
@@ -415,11 +415,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
         cy.findByTestId('resend-group-invite-action').should('be.visible')
         cy.findByTestId('remove-user-action').should('be.visible')
 
@@ -462,11 +462,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-managed-user-invite-action').should(
           'be.visible'
@@ -504,11 +504,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-managed-user-invite-action').should(
           'be.visible'
@@ -553,11 +553,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-managed-user-invite-action').should(
           'be.visible'
@@ -597,11 +597,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-managed-user-invite-action').should(
           'be.visible'
@@ -641,11 +641,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('delete-user-action').should('be.visible')
 
@@ -690,11 +690,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('delete-user-action').should('be.visible')
 
@@ -734,11 +734,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show the correct menu when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('resend-sso-link-invite-action').should('exist')
 
@@ -783,11 +783,11 @@ describe('DropdownButton', function () {
         cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
           'exist'
         )
-        cy.get(`.action-btn`).should('exist')
+        cy.findByRole('button', { name: /actions/i })
       })
 
       it('should show no actions except to unlink when dropdown button is clicked', function () {
-        cy.get('.action-btn').click()
+        cy.findByRole('button', { name: /actions/i }).click()
 
         cy.findByTestId('unlink-user-action').should('exist')
 

services/web/test/frontend/features/group-management/components/members-table/managed-user-status.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import ManagedUserStatus from '@/features/group-management/components/members-table/managed-user-status'
 import { User } from '../../../../../../types/group-management/user'
 

services/web/test/frontend/features/group-management/components/members-table/member-row.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import sinon from 'sinon'
 import MemberRow from '@/features/group-management/components/members-table/member-row'
 import { GroupMembersProvider } from '@/features/group-management/context/group-members-context'

services/web/test/frontend/features/group-management/components/members-table/members-list.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import MembersList from '@/features/group-management/components/members-table/members-list'
 import { GroupMembersProvider } from '@/features/group-management/context/group-members-context'
 import { User } from '../../../../../../types/group-management/user'

services/web/test/frontend/features/group-management/components/members-table/offboard-managed-user-modal.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import OffboardManagedUserModal from '@/features/group-management/components/members-table/offboard-managed-user-modal'
 import sinon from 'sinon'
 

services/web/test/frontend/features/group-management/components/members-table/unlink-user-modal.test.tsx

@@ -1,4 +1,3 @@
-import '../../../../helpers/bootstrap-3'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { ReactElement } from 'react'
 import sinon from 'sinon'

services/web/test/frontend/features/group-management/components/missing-billing-information.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
 import MissingBillingInformation from '@/features/group-management/components/missing-billing-information'
 

services/web/test/frontend/features/group-management/components/publisher-managers.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-3'
 import PublisherManagers from '@/features/group-management/components/publisher-managers'
 
 const JOHN_DOE = {
@@ -112,7 +111,7 @@ describe('publisher managers', function () {
         })
       })
 
-    cy.get('.select-all').click()
+    cy.findByTestId('select-all-checkbox').click()
 
     cy.findByTestId('managed-entities-table')
       .find('tbody')

services/web/test/frontend/features/group-management/components/request-status.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import RequestStatus from '@/features/group-management/components/request-status'
 
 describe('<RequestStatus />', function () {

services/web/test/frontend/features/group-management/components/subtotal-limit-exceeded.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import SubtotalLimitExceeded from '@/features/group-management/components/subtotal-limit-exceeded'
 
 describe('<SubtotalLimitExceeded />', function () {

services/web/test/frontend/features/group-management/components/upgrade-subscription.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import UpgradeSubscription from '@/features/group-management/components/upgrade-subscription/upgrade-subscription'
 import { SubscriptionChangePreview } from '../../../../../types/subscription/subscription-change-preview'
 

services/web/test/frontend/features/history/components/change-list.spec.tsx

@@ -1,4 +1,3 @@
-import '../../../helpers/bootstrap-5'
 import { useState } from 'react'
 import ToggleSwitch from '../../../../../frontend/js/features/history/components/change-list/toggle-switch'
 import ChangeList from '../../../../../frontend/js/features/history/components/change-list/change-list'

services/web/test/frontend/helpers/bootstrap-5.ts

@@ -1,5 +1 @@
 import '../../../frontend/stylesheets/bootstrap-5/main-style.scss'
-
-beforeEach(function () {
-  window.metaAttributesCache.set('ol-bootstrapVersion', 5)
-})