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

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

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

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

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

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

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

@@ -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} />
           ) : (

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

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

frontend/src/pages/api/private/users/mock.ts

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