github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 09:16:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

tests(permissions): add cypress tests for permission alert icon

Browse source 
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-10-13 17:02:41 +02:00
parent 6d69b294cb
commit 5ccc9059f0
7 changed files with 182 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
frontend/cypress/e2e/permissions.spec.ts Normal file
View file

@ -0,0 +1,115 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { NotePermissions } from '@hedgedoc/commons'
const mockPermissionChangeApiRoutes = (permission: NotePermissions) => {
cy.intercept('PUT', 'api/private/notes/mock-note/metadata/permissions/groups/_EVERYONE', {
statusCode: 200,
body: permission
})
cy.intercept('DELETE', 'api/private/notes/mock-note/metadata/permissions/groups/_EVERYONE', {
statusCode: 200,
body: permission
})
cy.intercept('PUT', 'api/private/notes/mock-note/metadata/permissions/groups/_LOGGED_IN', {
statusCode: 200,
body: permission
})
cy.intercept('DELETE', 'api/private/notes/mock-note/metadata/permissions/groups/_LOGGED_IN', {
statusCode: 200,
body: permission
})
}
describe('The permission settings modal', () => {
beforeEach(() => {
cy.visitTestNote()
cy.getByCypressId('sidebar-permission-btn').click()
})
it('can be displayed', () => {
cy.getByCypressId('permission-modal').should('be.visible')
cy.getByCypressId('permission-owner-name').contains('Mock User')
cy.getByCypressId('permission-setting-deny_LOGGED_IN').should('have.class', 'btn-secondary')
cy.getByCypressId('permission-setting-deny_EVERYONE').should('have.class', 'btn-secondary')
})
it('shows alert icon on invalid settings in special groups', () => {
cy.getByCypressId('permission-setting-deny_LOGGED_IN').should('have.class', 'btn-secondary')
mockPermissionChangeApiRoutes({
owner: 'mock',
sharedToUsers: [],
sharedToGroups: [
{
groupName: '_EVERYONE',
canEdit: false
}
]
})
cy.getByCypressId('permission-setting-read_EVERYONE').click()
cy.get('svg.text-warning.me-2').should('be.visible')
mockPermissionChangeApiRoutes({
owner: 'mock',
sharedToUsers: [],
sharedToGroups: [
{
groupName: '_EVERYONE',
canEdit: true
}
]
})
cy.getByCypressId('permission-setting-write_EVERYONE').click()
cy.get('svg.text-warning.me-2').should('be.visible')
mockPermissionChangeApiRoutes({
owner: 'mock',
sharedToUsers: [],
sharedToGroups: [
{
groupName: '_EVERYONE',
canEdit: false
},
{
groupName: '_LOGGED_IN',
canEdit: false
}
]
})
cy.getByCypressId('permission-setting-read_LOGGED_IN').click()
cy.get('svg.text-warning.me-2').should('not.exist')
mockPermissionChangeApiRoutes({
owner: 'mock',
sharedToUsers: [],
sharedToGroups: [
{
groupName: '_EVERYONE',
canEdit: true
},
{
groupName: '_LOGGED_IN',
canEdit: false
}
]
})
cy.getByCypressId('permission-setting-write_EVERYONE').click()
cy.get('svg.text-warning.me-2').should('be.visible')
mockPermissionChangeApiRoutes({
owner: 'mock',
sharedToUsers: [],
sharedToGroups: [
{
groupName: '_EVERYONE',
canEdit: true
},
{
groupName: '_LOGGED_IN',
canEdit: true
}
]
})
cy.getByCypressId('permission-setting-write_LOGGED_IN').click()
cy.get('svg.text-warning.me-2').should('not.exist')
})
})

52
frontend/cypress/support/visit-test-editor.ts
View file

@ -6,35 +6,37 @@
import type { Note } from '../../src/api/notes/types'
export const testNoteId = 'test'
const mockMetadata = {
id: testNoteId,
aliases: [
{
name: 'mock-note',
primaryAlias: true,
noteId: testNoteId
}
],
primaryAddress: 'mock-note',
title: 'Mock Note',
description: 'Mocked note for testing',
tags: ['test', 'mock', 'cypress'],
updatedAt: '2021-04-24T09:27:51.000Z',
updateUsername: null,
viewCount: 0,
version: 2,
createdAt: '2021-04-24T09:27:51.000Z',
editedBy: [],
permissions: {
owner: 'mock',
sharedToUsers: [],
sharedToGroups: []
}
}
beforeEach(() => {
cy.intercept(`api/private/notes/${testNoteId}`, {
content: '',
metadata: {
id: testNoteId,
aliases: [
{
name: 'mock-note',
primaryAlias: true,
noteId: testNoteId
}
],
primaryAddress: 'mock-note',
title: 'Mock Note',
description: 'Mocked note for testing',
tags: ['test', 'mock', 'cypress'],
updatedAt: '2021-04-24T09:27:51.000Z',
updateUsername: null,
viewCount: 0,
version: 2,
createdAt: '2021-04-24T09:27:51.000Z',
editedBy: [],
permissions: {
owner: 'mock',
sharedToUsers: [],
sharedToGroups: []
}
},
metadata: mockMetadata,
editedByAtPosition: []
} as Note)
cy.intercept(`api/private/notes/${testNoteId}/metadata`, mockMetadata)
})

4
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-special-group.tsx
View file

@ -16,6 +16,7 @@ import { ToggleButtonGroup } from 'react-bootstrap'
import { Eye as IconEye, Pencil as IconPencil, SlashCircle as IconSlashCircle } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
import { PermissionInconsistentAlert } from './permission-inconsistent-alert'
import { cypressId } from '../../../../../../utils/cypress-attribute'
export interface PermissionEntrySpecialGroupProps {
level: AccessLevel
@ -101,6 +102,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
onClick={onSetEntryDenied}
disabled={disabled}
className={'p-1'}
{...cypressId(`permission-setting-deny${type}`)}
/>
<IconButton
icon={IconEye}
@ -109,6 +111,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
onClick={onSetEntryReadOnly}
disabled={disabled}
className={'p-1'}
{...cypressId(`permission-setting-read${type}`)}
/>
<IconButton
icon={IconPencil}
@ -117,6 +120,7 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
onClick={onSetEntryWriteable}
disabled={disabled}
className={'p-1'}
{...cypressId(`permission-setting-write${type}`)}
/>
</ToggleButtonGroup>
</div>

8
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-modal.tsx
View file

@ -11,6 +11,7 @@ import { PermissionSectionSpecialGroups } from './permission-section-special-gro
import { PermissionSectionUsers } from './permission-section-users'
import React from 'react'
import { Modal } from 'react-bootstrap'
import { cypressId } from '../../../../../../utils/cypress-attribute'
/**
* Modal for viewing and managing the permissions of the note.
@ -21,7 +22,12 @@ import { Modal } from 'react-bootstrap'
export const PermissionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
const isOwner = useIsOwner()
return (
<CommonModal show={show} onHide={onHide} showCloseButton={true} titleI18nKey={'editor.modal.permissions.title'}>
<CommonModal
show={show}
onHide={onHide}
showCloseButton={true}
titleI18nKey={'editor.modal.permissions.title'}
{...cypressId('permission-modal')}>
<Modal.Body>
<PermissionSectionOwner disabled={!isOwner} />
<PermissionSectionUsers disabled={!isOwner} />

5
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-section-owner.tsx
View file

@ -12,6 +12,7 @@ import { PermissionOwnerChange } from './permission-owner-change'
import { PermissionOwnerInfo } from './permission-owner-info'
import React, { Fragment, useCallback, useState } from 'react'
import { Trans } from 'react-i18next'
import { cypressId } from '../../../../../../utils/cypress-attribute'
/**
* Section in the permissions modal for managing the owner of a note.
@ -50,7 +51,9 @@ export const PermissionSectionOwner: React.FC<PermissionDisabledProps> = ({ disa
<Trans i18nKey={'editor.modal.permissions.owner'} />
</h5>
<ul className={'list-group'}>
<li className={'list-group-item d-flex flex-row align-items-center justify-content-between'}>
<li
className={'list-group-item d-flex flex-row align-items-center justify-content-between'}
{...cypressId('permission-owner-name')}>
{changeOwner ? (
<PermissionOwnerChange onConfirmOwnerChange={onOwnerChange} />
) : (

8
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-sidebar-entry.tsx
View file

@ -10,6 +10,7 @@ import { PermissionModal } from './permissions-modal/permission-modal'
import React, { Fragment } from 'react'
import { Lock as IconLock } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
import { cypressId } from '../../../../../utils/cypress-attribute'
/**
* Renders a button to open the permission modal for the sidebar.
@ -23,7 +24,12 @@ export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ c
return (
<Fragment>
<SidebarButton hide={hide} className={className} icon={IconLock} onClick={showModal}>
<SidebarButton
hide={hide}
className={className}
icon={IconLock}
onClick={showModal}
{...cypressId('sidebar-permission-btn')}>
<Trans i18nKey={'editor.modal.permissions.title'} />
</SidebarButton>
<PermissionModal show={modalVisibility} onHide={closeModal} />

18
frontend/src/pages/api/private/users/mock.ts Normal file
View file

@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { UserInfo } from '../../../../api/users/types'
import { HttpMethod, respondToMatchingRequest } from '../../../../handler-utils/respond-to-matching-request'
import type { NextApiRequest, NextApiResponse } from 'next'
const handler = (req: NextApiRequest, res: NextApiResponse): void => {
respondToMatchingRequest<UserInfo>(HttpMethod.GET, req, res, {
username: 'mock',
displayName: 'Mock User',
photoUrl: ''
})
}
export default handler