github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-27 09:44:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Improve cypress tests for managed users

GitOrigin-RevId: c4ba3027afc397b7eafc556527c9e41799997008
This commit is contained in:
M Fahru 2023-08-25 09:44:47 -07:00 • committed by Copybot
parent 9f41173308
commit c648448949
2 changed files with 92 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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' }} />

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

@ -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>
)
})