test: write tests for role management (#1396)

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

@@ -56,6 +56,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
             aria-label="open drawer"
             onClick={drawerOpen ? onDrawerClose : onDrawerOpen}
             sx={{ mr: 2 }}
+            data-test="drawer-menu-button"
           >
             {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
           </IconButton>

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

@@ -21,6 +21,7 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
         component={buttonProps.component}
         to={buttonProps.to}
         disabled={buttonProps.disabled}
+        data-test={buttonProps['data-test']}
       >
         {icon}
       </IconButton>

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

@@ -5,6 +5,7 @@ import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 type ControlledCheckboxProps = {
   name: string;
   defaultValue?: boolean;
+  dataTest?: string;
 } & Omit<CheckboxProps, 'defaultValue'>;
 
 export default function ControlledCheckbox(
@@ -18,6 +19,7 @@ export default function ControlledCheckbox(
     disabled = false,
     onBlur,
     onChange,
+    dataTest,
     ...checkboxProps
   } = props;
 
@@ -53,6 +55,7 @@ export default function ControlledCheckbox(
               onBlur?.(...args);
             }}
             inputRef={ref}
+            data-test={dataTest}
           />
         );
       }}

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

@@ -48,6 +48,7 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
             disabled={!allowed || disabled}
             onClick={() => setShowConfirmation(true)}
             size="small"
+            data-test="role-delete"
           >
             <DeleteIcon />
           </IconButton>
@@ -62,6 +63,7 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
         confirmButtionChildren={formatMessage('deleteRoleButton.confirm')}
+        data-test="delete-role-modal"
       />
     </>
   );

packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx

@@ -66,10 +66,15 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
   };
 
   return (
-    <Dialog open onClose={cancel} sx={{ display: open ? 'block' : 'none' }}>
+    <Dialog
+      open
+      onClose={cancel}
+      sx={{ display: open ? 'block' : 'none' }}
+      data-test={`${subject}-role-conditions-modal`}
+    >
       <DialogTitle>{formatMessage('permissionSettings.title')}</DialogTitle>
 
-      <DialogContent>
+      <DialogContent data-test="role-conditions-modal-body">
         <TableContainer component={Paper}>
           <Table>
             <TableHead>
@@ -113,6 +118,7 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
                         {action.subjects.includes(subject) && (
                           <ControlledCheckbox
                             name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
+                            dataTest={`${condition.key}-${action.key.toLowerCase()}-checkbox`}
                             defaultValue={defaultChecked}
                             disabled={
                               getValues(

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

@@ -62,6 +62,7 @@ const PermissionCatalogField = ({
             <TableRow
               key={subject.key}
               sx={{ '&:last-child td': { border: 0 } }}
+              data-test={`${subject.key}-permission-row`}
             >
               <TableCell scope="row">
                 <Typography variant="subtitle2">{subject.label}</Typography>
@@ -74,6 +75,7 @@ const PermissionCatalogField = ({
                       <ControlledCheckbox
                         disabled={disabled}
                         name={`${name}.${subject.key}.${action.key}.value`}
+                        dataTest={`${action.key.toLowerCase()}-checkbox`}
                       />
                     )}
 
@@ -89,6 +91,7 @@ const PermissionCatalogField = ({
                     size="small"
                     onClick={() => setDialogName(subject.key)}
                     disabled={disabled}
+                    data-test="permission-settings-button"
                   >
                     <SettingsIcon />
                   </IconButton>

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

@@ -49,21 +49,29 @@ export default function RoleList(): React.ReactElement {
           </TableRow>
         </TableHead>
         <TableBody>
-          {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+          {loading && <ListLoader
+            rowsNumber={3}
+            columnsNumber={2}
+            data-test="roles-list-loader" />}
           {!loading &&
             roles.map((role) => (
               <TableRow
                 key={role.id}
                 sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                data-test="role-row"
               >
                 <TableCell scope="row">
-                  <Typography variant="subtitle2">{role.name}</Typography>
+                  <Typography
+                    variant="subtitle2"
+                    data-test="role-name"
+                  >{role.name}</Typography>
                 </TableCell>
 
                 <TableCell scope="row">
-                  <Typography variant="subtitle2">
-                    {role.description}
-                  </Typography>
+                  <Typography
+                    variant="subtitle2"
+                    data-test="role-description"
+                  >{role.description}</Typography>
                 </TableCell>
 
                 <TableCell>
@@ -72,6 +80,7 @@ export default function RoleList(): React.ReactElement {
                       size="small"
                       component={Link}
                       to={URLS.ROLE(role.id)}
+                      data-test="role-edit"
                     >
                       <EditIcon />
                     </IconButton>
@@ -79,6 +88,7 @@ export default function RoleList(): React.ReactElement {
                     <DeleteRoleButton
                       disabled={role.isAdmin}
                       roleId={role.id}
+                      data-test="role-delete"
                     />
                   </Stack>
                 </TableCell>

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

@@ -69,12 +69,14 @@ export default function CreateRole(): React.ReactElement {
                 name="name"
                 label={formatMessage('roleForm.name')}
                 fullWidth
+                data-test="name-input"
               />
 
               <TextField
                 name="description"
                 label={formatMessage('roleForm.description')}
                 fullWidth
+                data-test="description-input"
               />
 
               <PermissionCatalogField
@@ -88,6 +90,7 @@ export default function CreateRole(): React.ReactElement {
                 color="primary"
                 sx={{ boxShadow: 2 }}
                 loading={loading}
+                data-test="create-button"
               >
                 {formatMessage('createRole.submit')}
               </LoadingButton>

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

@@ -92,6 +92,7 @@ export default function EditRole(): React.ReactElement {
                     required={true}
                     name="name"
                     label={formatMessage('roleForm.name')}
+                    data-test="name-input"
                     fullWidth
                   />
 
@@ -99,6 +100,7 @@ export default function EditRole(): React.ReactElement {
                     disabled={role.isAdmin}
                     name="description"
                     label={formatMessage('roleForm.description')}
+                    data-test="description-input"
                     fullWidth
                   />
                 </>
@@ -116,6 +118,7 @@ export default function EditRole(): React.ReactElement {
                 sx={{ boxShadow: 2 }}
                 loading={loading}
                 disabled={role?.isAdmin || roleLoading}
+                data-test="update-button"
               >
                 {formatMessage('editRole.submit')}
               </LoadingButton>