Merge pull request #1068 from gchq/dev/add-test-directory-to-frontend

added start of testing frontend v2

frontend/actions/review.ts

@@ -2,8 +2,9 @@ import qs from 'querystring'
 import { ResponseTypeKeys } from 'src/common/ReviewWithComment'
 import useSWR from 'swr'
 import { ModelInterface, ReleaseInterface } from 'types/types'
+import { ReviewRequestInterface } from 'types/v2/types'
 
-import { AccessRequestInterface, ReviewRequestInterface } from '../types/interfaces'
+import { AccessRequestInterface } from '../types/interfaces'
 import { ErrorInfo, fetcher } from '../utils/fetcher'
 
 export function useGetReviewRequestsForUser() {
@@ -54,10 +55,10 @@ export function useGetReviewRequestsForModel({ modelId, semver, accessRequestId
   )
 
   return {
-    mutateReviews: mutate,
     reviews: data ? data.reviews : [],
     isReviewsLoading: !error && !data,
     isReviewsError: error,
+    mutateReviews: mutate,
   }
 }
 

frontend/pages/_app.tsx

@@ -16,8 +16,8 @@ import createEmotionCache from 'utils/createEmotionCache'
 
 import ThemeModeContext from '../src/contexts/themeModeContext'
 import UnsavedChangesContext from '../src/contexts/unsavedChangesContext'
-import useThemeMode from '../utils/hooks/useThemeMode'
-import useUnsavedChanges from '../utils/hooks/useUnsavedChanges'
+import useThemeMode from '../src/hooks/useThemeMode'
+import useUnsavedChanges from '../src/hooks/useUnsavedChanges'
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache()

frontend/pages/index.tsx

@@ -22,8 +22,8 @@ import React, { ChangeEvent, Fragment, useCallback, useState } from 'react'
 import ChipSelector from 'src/common/ChipSelector'
 import EmptyBlob from 'src/common/EmptyBlob'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
+import useDebounce from 'src/hooks/useDebounce'
 import Wrapper from 'src/Wrapper'
-import useDebounce from 'utils/hooks/useDebounce'
 
 interface KeyAndLabel {
   key: string

frontend/src/MessageAlert.tsx

@@ -6,7 +6,7 @@ import Alert, { AlertProps } from '@mui/material/Alert'
 import Stack from '@mui/material/Stack'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
-import useNotification from 'utils/hooks/useNotification'
+import useNotification from 'src/hooks/useNotification'
 
 type PartialMessageAlertProps =
   | {
@@ -21,9 +21,16 @@ type PartialMessageAlertProps =
 type MessageAlertProps = {
   message?: string
   severity?: AlertProps['severity']
+  'data-test'?: string
 } & PartialMessageAlertProps
 
-export default function MessageAlert({ message = '', severity, linkText, href }: MessageAlertProps) {
+export default function MessageAlert({
+  message = '',
+  severity,
+  linkText,
+  href,
+  'data-test': dataTest,
+}: MessageAlertProps) {
   const alertRef = useRef<HTMLDivElement>(null)
   const [showContactMessage, setShowContactMessage] = useState(false)
   const sendNotification = useNotification()
@@ -48,7 +55,7 @@ export default function MessageAlert({ message = '', severity, linkText, href }:
   if (!message) return null
 
   return (
-    <Alert severity={severity} sx={{ mb: 2, mt: 2 }} ref={alertRef}>
+    <Alert severity={severity} sx={{ mb: 2, mt: 2 }} ref={alertRef} data-test={dataTest}>
       <Stack spacing={1}>
         <Stack direction='row' spacing={1} alignItems='center'>
           <Typography>{message}</Typography>

frontend/src/MuiForms/CustomTextInput.tsx

@@ -62,6 +62,7 @@ export default function CustomTextInput(props: CustomTextInputProps) {
         InputProps={{
           ...props.InputProps,
           ...(!formContext.editMode && { disableUnderline: true }),
+          'data-test': id,
         }}
       />
     </Fragment>

frontend/src/common/EmptyBlob.tsx

@@ -9,7 +9,7 @@ type EmptyBlobProps = {
 export default function EmptyBlob({ text }: EmptyBlobProps) {
   return (
     <Stack spacing={1} alignItems='center'>
-      <Image src='/emptyBlob.svg' alt='Empty blob' width={120} height={120} />
+      <Image src='/emptyBlob.svg' alt='Empty blob' width={120} height={120} data-test='emptyBlobImage' />
       <Typography color='text.secondary'>{text}</Typography>
     </Stack>
   )

frontend/src/common/ExpandableButton.tsx

@@ -60,9 +60,11 @@ export default function ExpandableButton({ label, icon, onClick, ariaLabel, heig
       >
         {icon}
         {hover ? (
-          <StyledHoverSpan className='test-open'>{label}</StyledHoverSpan>
+          <StyledHoverSpan className='test-open' data-test='expandedButtonContent'>
+            {label}
+          </StyledHoverSpan>
         ) : (
-          <StyledSpan className='test-closed'></StyledSpan>
+          <StyledSpan className='test-closed' data-test='collapsedButtonContent' />
         )}
       </Button>
     </Box>

frontend/src/common/MarkdownDisplay.tsx

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'
 import ReactMarkdown from 'markdown-to-jsx'
 import { useMemo } from 'react'
 
-type MarkdownDisplayProps = {
+export type MarkdownDisplayProps = {
   children: string
 }
 

frontend/src/common/ReviewWithComment.tsx

@@ -12,10 +12,11 @@ import {
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { SyntheticEvent, useMemo, useState } from 'react'
+import { ReviewRequestInterface } from 'types/v2/types'
 
 import { useGetModelRoles } from '../../actions/model'
 import { useGetReviewRequestsForModel } from '../../actions/review'
-import { AccessRequestInterface, ReviewRequestInterface } from '../../types/interfaces'
+import { AccessRequestInterface } from '../../types/interfaces'
 import { ReleaseInterface } from '../../types/types'
 import { getRoleDisplay } from '../../utils/roles'
 import MessageAlert from '../MessageAlert'

frontend/src/common/UserAvatar.tsx

@@ -56,6 +56,7 @@ export default function UserAvatar({
         width: avatarSize,
         fontSize,
       }}
+      data-test='userAvatar'
     >
       <Typography>{entity.id.charAt(0).toUpperCase()}</Typography>
     </Avatar>

frontend/src/common/UserDisplay.tsx

@@ -14,7 +14,7 @@ export interface UserInformation {
   email?: string
 }
 
-type UserDisplayProps = {
+export type UserDisplayProps = {
   dn: string
   hidePopover?: boolean
 }

frontend/src/contexts/themeModeContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { ThemeModeHook } from '../../utils/hooks/useThemeMode'
+import { ThemeModeHook } from '../hooks/useThemeMode'
 import { lightTheme } from '../theme'
 
 const ThemeModeContext = createContext<ThemeModeHook>({

frontend/src/contexts/unsavedChangesContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { UnsavedChangesHook } from '../../utils/hooks/useUnsavedChanges'
+import { UnsavedChangesHook } from '../hooks/useUnsavedChanges'
 
 const UnsavedChangesContext = createContext<UnsavedChangesHook>({
   unsavedChanges: false,

frontend/src/errors/ErrorWrapper.tsx

@@ -9,7 +9,11 @@ type ErrorWrapperProps = {
 export default function ErrorWrapper({ message }: ErrorWrapperProps) {
   return (
     <Wrapper title='Error' page='error'>
-      <MessageAlert message={message || 'Unable to communicate with server.'} severity='error' />
+      <MessageAlert
+        message={message || 'Unable to communicate with server.'}
+        severity='error'
+        data-test='errorWrapperMessage'
+      />
     </Wrapper>
   )
 }

frontend/utils/hooks/useThemeMode.ts → frontend/src/hooks/useThemeMode.ts

@@ -1,7 +1,7 @@
 import { Theme } from '@mui/material/styles'
 import { ChangeEvent, useCallback, useState } from 'react'
 
-import { darkTheme, lightTheme } from '../../src/theme'
+import { darkTheme, lightTheme } from '../theme'
 
 export type ThemeModeHook = {
   theme: Theme

frontend/src/model/accessRequests/AccessRequestDisplay.tsx

@@ -1,11 +1,13 @@
 import CommentIcon from '@mui/icons-material/ChatBubble'
-import { Card, Divider, Grid, Stack, Tooltip, Typography } from '@mui/material'
+import { Card, Divider, Grid, Stack, Typography } from '@mui/material'
 import { groupBy } from 'lodash-es'
 import { useEffect, useState } from 'react'
 import UserDisplay from 'src/common/UserDisplay'
 import Link from 'src/Link'
-import { AccessRequestInterface, ReviewRequestInterface, ReviewResponse } from 'types/interfaces'
+import { AccessRequestInterface } from 'types/interfaces'
+import { ReviewRequestInterface, ReviewResponse } from 'types/v2/types'
 import { formatDateString, sortByCreatedAtAscending } from 'utils/dateUtils'
+import { plural } from 'utils/stringUtils'
 
 import { useGetReviewRequestsForModel } from '../../../actions/review'
 import Loading from '../../common/Loading'
@@ -68,7 +70,7 @@ export default function AccessRequestDisplay({ accessRequest }: AccessRequestDis
               {accessRequest.metadata.overview.endDate && (
                 <Typography variant='caption'>
                   End Date:
-                  <Typography variant='caption' fontWeight='bold'>
+                  <Typography variant='caption' fontWeight='bold' data-test='accessRequestEndDate'>
                     {` ${formatDateString(accessRequest.metadata.overview.endDate)}`}
                   </Typography>
                 </Typography>
@@ -104,12 +106,12 @@ export default function AccessRequestDisplay({ accessRequest }: AccessRequestDis
             <Stack direction='row' justifyContent='space-between' spacing={2}>
               <ReviewDisplay reviews={reviewsWithLatestResponses} />
               {accessRequest.comments.length > 0 && (
-                <Tooltip title='Comments'>
-                  <Stack direction='row' spacing={1}>
-                    <CommentIcon color='primary' />
-                    <Typography variant='caption'>{accessRequest.comments.length}</Typography>
-                  </Stack>
-                </Tooltip>
+                <Stack direction='row' spacing={1}>
+                  <CommentIcon color='primary' data-test='commentIcon' />
+                  <Typography variant='caption' data-test='commentCount'>
+                    {plural(accessRequest.comments.length, 'comment')}
+                  </Typography>
+                </Stack>
               )}
             </Stack>
           </Stack>

frontend/src/model/common/ValidationErrorIcon.tsx

@@ -11,7 +11,7 @@ export default function ValidationErrorIcon({ step }: ValidationErrorIconProps)
   const theme = useTheme()
 
   return !step.isComplete(step) ? (
-    <Tooltip title='This step is unfinished'>
+    <Tooltip title='This step is unfinished' data-test='formStepValidationWarning'>
       <ErrorIcon sx={{ color: theme.palette.error.main }} />
     </Tooltip>
   ) : (

frontend/src/model/registry/CodeLine.tsx

@@ -3,7 +3,7 @@ import CodeIcon from '@mui/icons-material/Code'
 import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { ReactElement } from 'react'
-import useNotification from 'utils/hooks/useNotification'
+import useNotification from 'src/hooks/useNotification'
 
 interface CodeLineProps {
   line: string