Merge pull request #14506 from overleaf/mf-add-cypress-managed-user-dropdown

[web] Improve cypress tests for managed users

GitOrigin-RevId: c4ba3027afc397b7eafc556527c9e41799997008

services/web/frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button.tsx

@@ -158,7 +158,10 @@ export default function ManagedUserDropdownButton({
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right managed-user-dropdown-menu">
           {userPending ? (
-            <MenuItemButton onClick={onResendGroupInviteClick}>
+            <MenuItemButton
+              onClick={onResendGroupInviteClick}
+              data-testid="resend-group-invite-action"
+            >
               {t('resend_group_invite')}
               {isResendingGroupInvite ? (
                 <Icon type="spinner" spin style={{ marginLeft: '5px' }} />
@@ -166,7 +169,10 @@ export default function ManagedUserDropdownButton({
             </MenuItemButton>
           ) : null}
           {userNotManaged ? (
-            <MenuItemButton onClick={onResendManagedUserInviteClick}>
+            <MenuItemButton
+              onClick={onResendManagedUserInviteClick}
+              data-testid="resend-managed-user-invite-action"
+            >
               {t('resend_managed_user_invite')}
               {isResendingManagedUserInvite ? (
                 <Icon type="spinner" spin style={{ marginLeft: '5px' }} />

services/web/test/frontend/features/group-management/components/managed-users/managed-user-dropdown-button.spec.tsx

@@ -1,7 +1,21 @@
-import ManagedUserDropdownButton from '../../../../../../frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button'
+import type { PropsWithChildren } from 'react'
 import sinon from 'sinon'
+import ManagedUserDropdownButton from '../../../../../../frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button'
 import { GroupMembersProvider } from '../../../../../../frontend/js/features/group-management/context/group-members-context'
 
+function Wrapper({ children }: PropsWithChildren<Record<string, unknown>>) {
+  return (
+    <ul className="managed-users-list">
+      <span
+        className="managed-users-actions"
+        style={{ display: 'flex', width: '100%', justifyContent: 'flex-end' }}
+      >
+        <GroupMembersProvider>{children}</GroupMembersProvider>
+      </span>
+    </ul>
+  )
+}
+
 describe('ManagedUserDropdownButton', function () {
   const subscriptionId = '123abc'
 
@@ -11,7 +25,7 @@ describe('ManagedUserDropdownButton', function () {
       email: 'some.user@example.com',
       first_name: 'Some',
       last_name: 'User',
-      invite: true,
+      invite: false,
       last_active_at: new Date(),
       enrollment: {
         managedBy: 'some-group',
@@ -26,25 +40,25 @@ describe('ManagedUserDropdownButton', function () {
       })
 
       cy.mount(
-        <GroupMembersProvider>
+        <Wrapper>
           <ManagedUserDropdownButton
             user={user}
             openOffboardingModalForUser={sinon.stub()}
             groupId={subscriptionId}
             setManagedUserAlert={sinon.stub()}
           />
-        </GroupMembersProvider>
+        </Wrapper>
       )
     })
 
-    it('should render the button', function () {
+    it('should render dropdown button', function () {
       cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
         'exist'
       )
       cy.get(`.action-btn`).should('exist')
     })
 
-    it('should show the menu when the button is clicked', function () {
+    it('should show the correct menu when dropdown button is clicked', function () {
       cy.get('.action-btn').click()
       cy.findByTestId('delete-user-action').should('exist')
       cy.findByTestId('delete-user-action').then($el => {
@@ -53,7 +67,56 @@ describe('ManagedUserDropdownButton', function () {
     })
   })
 
-  describe('with non-managed user', function () {
+  describe('with non-managed user (have joined group)', function () {
+    const user = {
+      _id: 'some-user',
+      email: 'some.user@example.com',
+      first_name: 'Some',
+      last_name: 'User',
+      invite: false,
+      last_active_at: new Date(),
+      enrollment: {},
+      isEntityAdmin: undefined,
+    }
+
+    beforeEach(function () {
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-users', [user])
+      })
+
+      cy.mount(
+        <Wrapper>
+          <ManagedUserDropdownButton
+            user={user}
+            openOffboardingModalForUser={sinon.stub()}
+            groupId={subscriptionId}
+            setManagedUserAlert={sinon.stub()}
+          />
+        </Wrapper>
+      )
+    })
+
+    it('should render dropdown button', function () {
+      cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
+        'exist'
+      )
+      cy.get(`.action-btn`).should('exist')
+    })
+
+    it('should show the correct menu when dropdown button is clicked', function () {
+      cy.get('.action-btn').click()
+      cy.findByTestId('resend-managed-user-invite-action').should('exist')
+      cy.findByTestId('resend-managed-user-invite-action').then($el => {
+        Cypress.dom.isVisible($el)
+      })
+      cy.findByTestId('remove-user-action').should('exist')
+      cy.findByTestId('remove-user-action').then($el => {
+        Cypress.dom.isVisible($el)
+      })
+    })
+  })
+
+  describe('with pending user (have not joined group)', function () {
     const user = {
       _id: 'some-user',
       email: 'some.user@example.com',
@@ -71,26 +134,30 @@ describe('ManagedUserDropdownButton', function () {
       })
 
       cy.mount(
-        <GroupMembersProvider>
+        <Wrapper>
           <ManagedUserDropdownButton
             user={user}
             openOffboardingModalForUser={sinon.stub()}
             groupId={subscriptionId}
             setManagedUserAlert={sinon.stub()}
           />
-        </GroupMembersProvider>
+        </Wrapper>
       )
     })
 
-    it('should render the button', function () {
+    it('should render dropdown button', function () {
       cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
         'exist'
       )
       cy.get(`.action-btn`).should('exist')
     })
 
-    it('should show the menu when the button is clicked', function () {
+    it('should show the correct menu when dropdown button is clicked', function () {
       cy.get('.action-btn').click()
+      cy.findByTestId('resend-group-invite-action').should('exist')
+      cy.findByTestId('resend-group-invite-action').then($el => {
+        Cypress.dom.isVisible($el)
+      })
       cy.findByTestId('remove-user-action').should('exist')
       cy.findByTestId('remove-user-action').then($el => {
         Cypress.dom.isVisible($el)
@@ -116,25 +183,25 @@ describe('ManagedUserDropdownButton', function () {
       })
 
       cy.mount(
-        <GroupMembersProvider>
+        <Wrapper>
           <ManagedUserDropdownButton
             user={user}
             openOffboardingModalForUser={sinon.stub()}
             groupId={subscriptionId}
             setManagedUserAlert={sinon.stub()}
           />
-        </GroupMembersProvider>
+        </Wrapper>
       )
     })
 
-    it('should render the button', function () {
+    it('should render dropdown button', function () {
       cy.get('#managed-user-dropdown-some\\.user\\@example\\.com').should(
         'exist'
       )
       cy.get(`.action-btn`).should('exist')
     })
 
-    it('should show the (empty) menu when the button is clicked', function () {
+    it('should show the (empty) menu when dropdown button is clicked', function () {
       cy.get('.action-btn').click()
       cy.findByTestId('no-actions-available').should('exist')
     })
@@ -161,14 +228,14 @@ describe('ManagedUserDropdownButton', function () {
       })
 
       cy.mount(
-        <GroupMembersProvider>
+        <Wrapper>
           <ManagedUserDropdownButton
             user={user}
             openOffboardingModalForUser={sinon.stub()}
             groupId={subscriptionId}
             setManagedUserAlert={sinon.stub()}
           />
-        </GroupMembersProvider>
+        </Wrapper>
       )
     })