test: add page title test ids to await and await mounting loader components

packages/web/src/components/ListLoader/index.tsx

@@ -11,15 +11,21 @@ import DeleteIcon from '@mui/icons-material/Delete';
 type ListLoaderProps = {
   rowsNumber: number;
   columnsNumber: number;
+  'data-test'?: string;
 };
 
-const ListLoader = ({ rowsNumber, columnsNumber }: ListLoaderProps) => {
+const ListLoader = ({
+  rowsNumber,
+  columnsNumber,
+  'data-test': dataTest,
+}: ListLoaderProps) => {
   return (
     <>
       {[...Array(rowsNumber)].map((row, index) => (
         <TableRow
           key={index}
           sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+          data-test={dataTest && index === 0 ? dataTest : undefined}
         >
           {[...Array(columnsNumber)].map((cell, index) => (
             <TableCell key={index} scope="row">

packages/web/src/components/LoginForm/index.tsx

@@ -44,6 +44,7 @@ function LoginForm() {
       <Typography
         variant="h3"
         align="center"
+        data-test="login-form-title"
         sx={{
           borderBottom: '1px solid',
           borderColor: (theme) => theme.palette.text.disabled,
@@ -78,13 +79,15 @@ function LoginForm() {
           sx={{ mb: 1 }}
         />
 
-        {isCloud && <Link
-          component={RouterLink}
-          to={URLS.FORGOT_PASSWORD}
-          underline="none"
-        >
-          {formatMessage('loginForm.forgotPasswordText')}
-        </Link>}
+        {isCloud && (
+          <Link
+            component={RouterLink}
+            to={URLS.FORGOT_PASSWORD}
+            underline="none"
+          >
+            {formatMessage('loginForm.forgotPasswordText')}
+          </Link>
+        )}
 
         <LoadingButton
           type="submit"
@@ -98,13 +101,15 @@ function LoginForm() {
           {formatMessage('loginForm.submit')}
         </LoadingButton>
 
-        {isCloud && <Typography variant="body1" align="center" mt={3}>
-          {formatMessage('loginForm.noAccount')}
-          &nbsp;
-          <Link component={RouterLink} to={URLS.SIGNUP} underline="none">
-          {formatMessage('loginForm.signUp')}
-          </Link>
-        </Typography>}
+        {isCloud && (
+          <Typography variant="body1" align="center" mt={3}>
+            {formatMessage('loginForm.noAccount')}
+            &nbsp;
+            <Link component={RouterLink} to={URLS.SIGNUP} underline="none">
+              {formatMessage('loginForm.signUp')}
+            </Link>
+          </Typography>
+        )}
       </Form>
     </Paper>
   );

packages/web/src/components/PageTitle/index.tsx

@@ -4,5 +4,5 @@ import Typography, { TypographyProps } from '@mui/material/Typography';
 type PageTitleProps = TypographyProps;
 
 export default function PageTitle(props: PageTitleProps): React.ReactElement {
-  return <Typography variant="h3" {...props} />;
+  return <Typography variant="h3" data-test="page-title" {...props} />;
 }

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -44,8 +44,8 @@ export default function CreateRole(): React.ReactElement {
       enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
         variant: 'success',
         SnackbarProps: {
-          'data-test': 'snackbar-create-role-success'
-        }
+          'data-test': 'snackbar-create-role-success',
+        },
       });
 
       navigate(URLS.ROLES);
@@ -58,7 +58,9 @@ export default function CreateRole(): React.ReactElement {
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('createRolePage.title')}</PageTitle>
+          <PageTitle data-test="create-role-title">
+            {formatMessage('createRolePage.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>

packages/web/src/pages/CreateUser/index.tsx

@@ -50,7 +50,7 @@ export default function CreateUser(): React.ReactElement {
         persist: true,
         SnackbarProps: {
           'data-test': 'snackbar-create-user-success',
-        }
+        },
       });
 
       navigate(URLS.USERS);
@@ -63,7 +63,9 @@ export default function CreateUser(): React.ReactElement {
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('createUserPage.title')}</PageTitle>
+          <PageTitle data-test="create-user-title">
+            {formatMessage('createUserPage.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>

packages/web/src/pages/EditRole/index.ee.tsx

@@ -54,8 +54,8 @@ export default function EditRole(): React.ReactElement {
       enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
         variant: 'success',
         SnackbarProps: {
-          'data-test': 'snackbar-edit-role-success'
-        }
+          'data-test': 'snackbar-edit-role-success',
+        },
       });
 
       navigate(URLS.ROLES);
@@ -70,7 +70,9 @@ export default function EditRole(): React.ReactElement {
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('editRolePage.title')}</PageTitle>
+          <PageTitle data-test="edit-role-title">
+            {formatMessage('editRolePage.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>

packages/web/src/pages/EditUser/index.tsx

@@ -57,8 +57,8 @@ export default function EditUser(): React.ReactElement {
         variant: 'success',
         SnackbarProps: {
           'data-test': 'snackbar-edit-user-success',
-          persist: true
-        }
+          persist: true,
+        },
       });
 
       navigate(URLS.USERS);
@@ -71,7 +71,9 @@ export default function EditUser(): React.ReactElement {
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('editUserPage.title')}</PageTitle>
+          <PageTitle data-test="edit-user-title">
+            {formatMessage('editUserPage.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>

packages/web/src/pages/Roles/index.ee.tsx

@@ -18,16 +18,12 @@ function RolesPage() {
       <Grid container item xs={12} sm={10} md={9}>
         <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
           <Grid container item xs sm alignItems="center">
-            <PageTitle>{formatMessage('rolesPage.title')}</PageTitle>
+            <PageTitle data-test="roles-page-title">
+              {formatMessage('rolesPage.title')}
+            </PageTitle>
           </Grid>
 
-          <Grid
-            container
-            item
-            xs="auto"
-            sm="auto"
-            alignItems="center"
-          >
+          <Grid container item xs="auto" sm="auto" alignItems="center">
             <ConditionalIconButton
               type="submit"
               variant="contained"

packages/web/src/pages/Users/index.tsx

@@ -18,16 +18,12 @@ function UsersPage() {
       <Grid container item xs={12} sm={10} md={9}>
         <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
           <Grid container item xs sm alignItems="center">
-            <PageTitle>{formatMessage('usersPage.title')}</PageTitle>
+            <PageTitle data-test="users-page-title">
+              {formatMessage('usersPage.title')}
+            </PageTitle>
           </Grid>
 
-          <Grid
-            container
-            item
-            xs="auto"
-            sm="auto"
-            alignItems="center"
-          >
+          <Grid container item xs="auto" sm="auto" alignItems="center">
             <ConditionalIconButton
               type="submit"
               variant="contained"