feat(content-sidebar): Add data-target-id to menu items (#3610)

* feat(content-sidebar): Add data-target-id to MenuItem * feat(content-sidebar): Update data target ids * feat(content-sidebar): Update snapshot * feat(content-sidebar): Add data target ids to the modal elements * feat(content-sidebar): Update ids to camel case * feat(content-sidebar): Update Task Form ids
box · Aug 21, 2024 · cf05167 · cf05167
1 parent d01527f
commit cf05167
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/elements/content-sidebar/AddTaskMenu.js b/src/elements/content-sidebar/AddTaskMenu.js
@@ -28,7 +28,11 @@ const AddTaskMenu = (props: Props) => (
             </MenuToggle>
         </Button>
         <Menu className="bcs-AddTaskMenu">
-            <MenuItem className="bcs-AddTaskMenu-menuItem" onClick={() => props.onMenuItemClick(TASK_TYPE_GENERAL)}>
+            <MenuItem
+                className="bcs-AddTaskMenu-menuItem"
+                data-target-id="MenuItem-generalTask"
+                onClick={() => props.onMenuItemClick(TASK_TYPE_GENERAL)}
+            >
                 <div className="bcs-AddTaskMenu-icon">
                     <IconTaskGeneral width={30} height={30} />
                 </div>
@@ -41,7 +45,11 @@ const AddTaskMenu = (props: Props) => (
                     </div>
                 </div>
             </MenuItem>
-            <MenuItem className="bcs-AddTaskMenu-menuItem" onClick={() => props.onMenuItemClick(TASK_TYPE_APPROVAL)}>
+            <MenuItem
+                className="bcs-AddTaskMenu-menuItem"
+                data-target-id="MenuItem-approvalTask"
+                onClick={() => props.onMenuItemClick(TASK_TYPE_APPROVAL)}
+            >
                 <div className="bcs-AddTaskMenu-icon">
                     <IconTaskApproval width={30} height={30} />
                 </div>

diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/AddTaskMenu.test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/AddTaskMenu.test.js.snap
@@ -27,6 +27,7 @@ exports[`elements/content-sidebar/AddTaskMenu render should render a default com
   >
     <MenuItem
       className="bcs-AddTaskMenu-menuItem"
+      data-target-id="MenuItem-generalTask"
       onClick={[Function]}
     >
       <div
@@ -58,6 +59,7 @@ exports[`elements/content-sidebar/AddTaskMenu render should render a default com
     </MenuItem>
     <MenuItem
       className="bcs-AddTaskMenu-menuItem"
+      data-target-id="MenuItem-approvalTask"
       onClick={[Function]}
     >
       <div

diff --git a/src/elements/content-sidebar/activity-feed/task-form/TaskForm.js b/src/elements/content-sidebar/activity-feed/task-form/TaskForm.js
@@ -382,7 +382,10 @@ class TaskForm extends React.Component<Props, State> {
                             className={pillSelectorOverlayClasses}
                             error={this.getErrorByFieldname('taskAssignees')}
                             disabled={isForbiddenErrorOnEdit}
-                            inputProps={{ 'data-testid': 'task-form-assignee-input' }}
+                            inputProps={{
+                                'data-testid': 'task-form-assignee-input',
+                                'data-target-id': 'PillSelectorDropdown-selectAssigneesInput',
+                            }}
                             isRequired
                             label={<FormattedMessage {...messages.tasksAddTaskFormSelectAssigneesLabel} />}
                             name="taskAssignees"
@@ -443,6 +446,7 @@ class TaskForm extends React.Component<Props, State> {
                         <TextArea
                             className="bcs-task-name-input"
                             data-testid="task-form-name-input"
+                            data-target-id="TextArea-messageInput"
                             disabled={isDisabled || isForbiddenErrorOnEdit}
                             error={this.getErrorByFieldname('taskName')}
                             isRequired
@@ -460,6 +464,7 @@ class TaskForm extends React.Component<Props, State> {
                             inputProps={{
                                 [INTERACTION_TARGET]: ACTIVITY_TARGETS.TASK_DATE_PICKER,
                                 'data-testid': 'task-form-date-input',
+                                'data-target-id': 'DatePicker-dateInput',
                             }}
                             isAccessible
                             isDisabled={isForbiddenErrorOnEdit}
@@ -477,6 +482,7 @@ class TaskForm extends React.Component<Props, State> {
                                 className="bcs-task-input-cancel-btn"
                                 data-resin-target={ACTIVITY_TARGETS.APPROVAL_FORM_CANCEL}
                                 data-testid="task-form-cancel-button"
+                                data-target-id="Button-cancelButton"
                                 onClick={this.handleCancelClick}
                                 isDisabled={isLoading}
                                 type="button"
@@ -488,6 +494,7 @@ class TaskForm extends React.Component<Props, State> {
                                 className="bcs-task-input-submit-btn"
                                 data-resin-target={ACTIVITY_TARGETS.APPROVAL_FORM_POST}
                                 data-testid="task-form-submit-button"
+                                data-target-id="PrimaryButton-submitButton"
                                 isDisabled={isForbiddenErrorOnEdit}
                                 isLoading={isLoading}
                                 {...this.addResinInfo()}