test: folder tests

packages/web/src/components/CreateFolderDialog/index.jsx

@@ -44,6 +44,7 @@ export default function CreateFolderDialog(props) {
       <DialogTitle>{formatMessage('createFolderDialog.title')}</DialogTitle>
 
       <IconButton
+        data-test="close-dialog"
         aria-label="close"
         onClick={onClose}
         sx={{
@@ -61,6 +62,7 @@ export default function CreateFolderDialog(props) {
           {formatMessage('createFolderDialog.description')}
         </DialogContentText>
         <TextField
+          data-test="new-folder-name"
           sx={{ mt: 2 }}
           value={folderName}
           onKeyDown={handleTextFieldKeyDown}

packages/web/src/components/EditFolderDialog/index.jsx

@@ -47,6 +47,7 @@ export default function EditFolderDialog(props) {
       <DialogTitle>{formatMessage('editFolderDialog.title')}</DialogTitle>
 
       <IconButton
+        data-test="close-dialog"
         aria-label="close"
         onClick={onClose}
         sx={{
@@ -64,6 +65,7 @@ export default function EditFolderDialog(props) {
           {formatMessage('editFolderDialog.description')}
         </DialogContentText>
         <TextField
+          data-test="new-folder-name"
           sx={{ mt: 2 }}
           value={folderName}
           onKeyDown={handleTextFieldKeyDown}

packages/web/src/components/EditorLayout/FlowFolder.jsx

@@ -18,6 +18,7 @@ export default function FlowFolder(props) {
 
   return (
     <Typography
+      data-test="folder-name"
       component={Link}
       to={URLS.FOLDER_FLOWS(id)}
       variant="body1"

packages/web/src/components/FlowContextMenu/index.jsx

@@ -150,7 +150,11 @@ function ContextMenu(props) {
 
         <Can I="manage" a="Flow" passThrough>
           {(allowed) => (
-            <MenuItem disabled={!allowed} onClick={onFlowFolderUpdate}>
+            <MenuItem
+              data-test="move-to"
+              disabled={!allowed}
+              onClick={onFlowFolderUpdate}
+            >
               {formatMessage('flow.moveTo')}
             </MenuItem>
           )}
@@ -166,7 +170,11 @@ function ContextMenu(props) {
 
         <Can I="manage" a="Flow" passThrough>
           {(allowed) => (
-            <MenuItem disabled={!allowed} onClick={onFlowDelete}>
+            <MenuItem
+              data-test="delete-flow"
+              disabled={!allowed}
+              onClick={onFlowDelete}
+            >
               {formatMessage('flow.delete')}
             </MenuItem>
           )}

packages/web/src/components/FlowFolderChangeDialog/index.jsx

@@ -62,6 +62,7 @@ function FlowFolderChangeDialog(props) {
       <DialogTitle>{formatMessage('flowFolderChangeDialog.title')}</DialogTitle>
 
       <IconButton
+        data-test="close-dialog"
         aria-label="close"
         onClick={onClose}
         sx={{
@@ -81,6 +82,7 @@ function FlowFolderChangeDialog(props) {
 
         <FormControl fullWidth>
           <Autocomplete
+            data-test="move-to-folder-name"
             value={
               folders?.data.find((folder) => folder.id === selectedFolder) ||
               uncategorizedFolder

packages/web/src/components/Folders/index.jsx

@@ -110,6 +110,7 @@ export default function Folders() {
         secondaryAction={
           <Stack direction="row" gap={1}>
             <IconButton
+              data-test="edit-folder"
               edge="end"
               aria-label="edit"
               onClick={() => setShowEditFolderDialog(true)}
@@ -117,6 +118,7 @@ export default function Folders() {
               <EditIcon />
             </IconButton>
             <IconButton
+              data-test="delete-folder"
               edge="end"
               aria-label="delete"
               onClick={() => setShowDeleteFolderDialog(true)}
@@ -154,6 +156,7 @@ export default function Folders() {
       <Box component={Card}>
         <List component="nav" aria-label="static folders">
           <ListItemButton
+            data-test="all-flows-folder"
             component={Link}
             to={{ search: allFlowsFolder }}
             selected={allFlowsFolderSelected}
@@ -166,6 +169,7 @@ export default function Folders() {
           </ListItemButton>
 
           <ListItemButton
+            data-test="uncategorized-flows-folder"
             component={Link}
             to={{ search: unassignedFlowsFolder }}
             selected={unassignedFlowsFolderSelected}
@@ -180,10 +184,17 @@ export default function Folders() {
 
         <Divider />
 
-        <List component="nav" aria-label="user folders">
+        <List
+          component="nav"
+          aria-label="user folders"
+          data-test="user-folders"
+        >
           {folders?.data?.map((folder) => generateFolderItem(folder))}
 
-          <ListItemButton onClick={() => setShowCreateFolderDialog(true)}>
+          <ListItemButton
+            data-test="add-folder-button"
+            onClick={() => setShowCreateFolderDialog(true)}
+          >
             <ListItemIcon>
               <AddIcon />
             </ListItemIcon>
@@ -212,6 +223,7 @@ export default function Folders() {
           onConfirm={handleDeleteFolderConfirmation}
           cancelButtonChildren={formatMessage('deleteFolderDialog.cancel')}
           confirmButtonChildren={formatMessage('deleteFolderDialog.confirm')}
+          data-test="delete-folder-modal"
           errorMessage={generalErrorMessage}
         />
       )}