test: write tests for user management (#1316)

* chore: add data-test attributes

* test: add github connection test, add applications modal

* test: write tests for user management

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

@@ -14,6 +14,7 @@ type ConfirmationDialogProps = {
   cancelButtonChildren: React.ReactNode;
   confirmButtionChildren: React.ReactNode;
   open?: boolean;
+  'data-test'?: string;
 }
 
 export default function ConfirmationDialog(props: ConfirmationDialogProps) {
@@ -26,9 +27,9 @@ export default function ConfirmationDialog(props: ConfirmationDialogProps) {
     confirmButtionChildren,
     open = true,
   } = props;
-
+  const dataTest = props['data-test'];
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog open={open} onClose={onClose} data-test={dataTest}>
       {title && (
         <DialogTitle>
           {title}
@@ -44,11 +45,16 @@ export default function ConfirmationDialog(props: ConfirmationDialogProps) {
 
       <DialogActions>
         {(cancelButtonChildren && onClose) && (
-          <Button onClick={onClose}>{cancelButtonChildren}</Button>
+          <Button
+            onClick={onClose}
+            data-test="confirmation-cancel-button">{cancelButtonChildren}</Button>
         )}
 
         {(confirmButtionChildren && onConfirm) && (
-          <Button onClick={onConfirm} color="error">
+          <Button
+            onClick={onConfirm}
+            color="error"
+            data-test="confirmation-confirm-button">
             {confirmButtionChildren}
           </Button>
         )}

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -37,7 +37,7 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
 
   return (
     <>
-      <IconButton onClick={() => setShowConfirmation(true)} size="small">
+      <IconButton data-test="delete-button" onClick={() => setShowConfirmation(true)} size="small">
         <DeleteIcon />
       </IconButton>
 
@@ -49,6 +49,7 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
         confirmButtionChildren={formatMessage('deleteUserButton.confirm')}
+        data-test="delete-user-modal"
       />
     </>
   );

packages/web/src/components/UserList/TablePaginationActions/index.tsx

@@ -52,6 +52,7 @@ export default function TablePaginationActions(
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
+        data-test="first-page-button"
       >
         {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
       </IconButton>
@@ -59,6 +60,7 @@ export default function TablePaginationActions(
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label="previous page"
+        data-test="previous-page-button"
       >
         {theme.direction === 'rtl' ? (
           <KeyboardArrowRight />
@@ -70,6 +72,7 @@ export default function TablePaginationActions(
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
+        data-test="next-page-button"
       >
         {theme.direction === 'rtl' ? (
           <KeyboardArrowLeft />
@@ -81,6 +84,7 @@ export default function TablePaginationActions(
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
+        data-test="last-page-button"
       >
         {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
       </IconButton>

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

@@ -83,23 +83,34 @@ export default function UserList(): React.ReactElement {
             </TableRow>
           </TableHead>
           <TableBody>
-            {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+            {loading && <ListLoader
+              data-test="users-list-loader"
+              rowsNumber={3}
+              columnsNumber={2} />}
             {!loading &&
               users.map((user) => (
                 <TableRow
                   key={user.id}
                   sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  data-test="user-row"
                 >
                   <TableCell scope="row">
-                    <Typography variant="subtitle2">{user.fullName}</Typography>
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-full-name">{user.fullName}</Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography variant="subtitle2">{user.email}</Typography>
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-email">{user.email}</Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography variant="subtitle2">
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-role"
+                    >
                       {user.role.name}
                     </Typography>
                   </TableCell>
@@ -110,11 +121,14 @@ export default function UserList(): React.ReactElement {
                         size="small"
                         component={Link}
                         to={URLS.USER(user.id)}
+                        data-test="user-edit"
                       >
                         <EditIcon />
                       </IconButton>
 
-                      <DeleteUserButton userId={user.id} />
+                      <DeleteUserButton
+                        data-test="user-delete"
+                        userId={user.id} />
                     </Stack>
                   </TableCell>
                 </TableRow>
@@ -124,6 +138,8 @@ export default function UserList(): React.ReactElement {
             <TableFooter>
               <TableRow>
                 <TablePagination
+                  data-total-count={totalCount}
+                  data-rows-per-page={rowsPerPage}
                   rowsPerPageOptions={[10, 25, 50, 100]}
                   page={page}
                   count={totalCount}

packages/web/src/index.tsx

@@ -12,6 +12,7 @@ import LiveChat from 'components/LiveChat/index.ee';
 import routes from 'routes';
 import reportWebVitals from './reportWebVitals';
 
+
 ReactDOM.render(
   <Router>
     <SnackbarProvider>

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

@@ -69,6 +69,7 @@ export default function CreateUser(): React.ReactElement {
                 required={true}
                 name="fullName"
                 label={formatMessage('userForm.fullName')}
+                data-test="full-name-input"
                 fullWidth
               />
 
@@ -76,6 +77,7 @@ export default function CreateUser(): React.ReactElement {
                 required={true}
                 name="email"
                 label={formatMessage('userForm.email')}
+                data-test="email-input"
                 fullWidth
               />
 
@@ -84,6 +86,7 @@ export default function CreateUser(): React.ReactElement {
                 name="password"
                 label={formatMessage('userForm.password')}
                 type="password"
+                data-test="password-input"
                 fullWidth
               />
 
@@ -110,6 +113,7 @@ export default function CreateUser(): React.ReactElement {
                 color="primary"
                 sx={{ boxShadow: 2 }}
                 loading={loading}
+                data-test="create-button"
               >
                 {formatMessage('createUser.submit')}
               </LoadingButton>

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

@@ -87,6 +87,7 @@ export default function EditUser(): React.ReactElement {
                   required={true}
                   name="fullName"
                   label={formatMessage('userForm.fullName')}
+                  data-test="full-name-input"
                   fullWidth
                 />
 
@@ -94,6 +95,7 @@ export default function EditUser(): React.ReactElement {
                   required={true}
                   name="email"
                   label={formatMessage('userForm.email')}
+                  data-test="email-input"
                   fullWidth
                 />
 
@@ -120,6 +122,7 @@ export default function EditUser(): React.ReactElement {
                   color="primary"
                   sx={{ boxShadow: 2 }}
                   loading={loading}
+                  data-test="update-button"
                 >
                   {formatMessage('editUser.submit')}
                 </LoadingButton>