MTV-3062 / MTV-3529- Include VM folder test automation (#2098)

* Include VM folder test automation
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Enhance VM Tree Row component with data-testid attributes for improved testing.
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Refactor VM count retrieval in FolderNameCell
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Enhance Virtual Machines step to handle critical issues action during plan creation. Update fillAndComplete method to accept criticalIssuesAction parameter. Refactor VM count retrieval for improved clarity.
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Fix prettier formatting in ManageColumnsModal

Resolves: MTV-3062
Signed-off-by: Pedro Abreu <[email protected]>

* remove uneeded timeout parameters
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Refactor column item selection in VirtualMachinesTable
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

* Remove unused concernCount variable from VirtualMachinesTable class to streamline code.
Resolves: MTV-3062

Signed-off-by: Pedro Abreu <[email protected]>

---------

Signed-off-by: Pedro Abreu <[email protected]>
Co-authored-by: Pedro Abreu <[email protected]>

Author: Pedro-S-Abreu

src/components/Concerns/components/ConcernsPopover.tsx

@@ -23,6 +23,7 @@ const ConcernPopover: FC<{
       headerContent={getCategoryTitle(category)}
       bodyContent={<ConcernList concerns={concerns} />}
       footerContent={t('Total: {{length}}', { length: concerns.length })}
+      data-testid="concerns-popover"
     >
       <Button isInline variant={ButtonVariant.link}>
         <Label status={getCategoryStatus(category)}>{concerns.length}</Label>

src/components/FieldBuilderTable/FieldBuilderTable.tsx

@@ -75,7 +75,7 @@ const FieldBuilderTable: FC<FieldBuilderTableProps<FormData>> = ({
             );
 
             acc.push(
-              <Tr key={fieldRow.id}>
+              <Tr key={fieldRow.id} data-testid={`field-row-${rowIndex}`}>
                 {fieldRow.inputs.map((fieldInput) => (
                   <Td key={fieldInput.key}>{fieldInput}</Td>
                 ))}

src/components/VsphereFoldersTable/components/FolderTreeRow/FolderNameCell.tsx

@@ -10,7 +10,9 @@ const FolderNameCell: FC<FolderNameCellProps> = ({ row, vmCount }) => {
     <Split hasGutter>
       <SplitItem>{row.folderName}</SplitItem>
       <SplitItem>
-        <Label isCompact>{vmCount} VMs</Label>
+        <Label isCompact data-testid={`folder-${row.folderName}-vm-count`}>
+          {vmCount} VMs
+        </Label>
       </SplitItem>
     </Split>
   );

src/components/VsphereFoldersTable/components/FolderTreeRow/FolderTreeRow.tsx

@@ -14,7 +14,7 @@ type FolderTreeRowProps = {
 const FolderTreeRow: FC<FolderTreeRowProps> = ({ groupVMCountByFolder, row }) => {
   return (
     <TreeRowWrapper data-testid={row.key} key={row.key} row={{ props: row?.treeRow?.props }}>
-      <Td treeRow={row.treeRow} dataLabel={nameColumn.label}>
+      <Td treeRow={row.treeRow} dataLabel={nameColumn.label} data-testid={`${row.key}-expand-cell`}>
         <FolderNameCell row={row} vmCount={groupVMCountByFolder.get(row.folderName) ?? 0} />
       </Td>
     </TreeRowWrapper>

src/components/VsphereFoldersTable/components/VmTreeRow/VmTreeRow.tsx

@@ -24,14 +24,18 @@ const VmCells: Record<string, FC<{ row: VmRow }>> = {
 const VmTreeRow: FC<VmTreeRowProps> = ({ columns, row }) => {
   return (
     <TreeRowWrapper data-testid={row.key} key={row.key} row={{ props: row?.treeRow?.props }}>
-      <Td treeRow={row.treeRow} dataLabel={nameColumn.label}>
+      <Td treeRow={row.treeRow} dataLabel={nameColumn.label} data-testid={`${row.key}-name-cell`}>
         {row.vmData.name}
       </Td>
       {columns.map((col) => {
         if (!col.isVisible) return null;
         const Component = VmCells[col.resourceFieldId!];
         return (
-          <Td key={col.resourceFieldId} dataLabel={col.label ?? ''}>
+          <Td
+            key={col.resourceFieldId}
+            dataLabel={col.label ?? ''}
+            data-testid={`${row.key}-${col.resourceFieldId}-cell`}
+          >
             <Component row={row} />
           </Td>
         );

src/components/common/TableView/ManageColumnsModal.tsx

@@ -131,7 +131,12 @@ export const ManageColumnsModal = ({
   return (
     <>
       <div id="root" />
-      <Modal isOpen={showModal} variant="small" onClose={onClose}>
+      <Modal
+        isOpen={showModal}
+        variant="small"
+        onClose={onClose}
+        data-testid="manage-columns-modal"
+      >
         <ModalHeader
           title={title}
           description={
@@ -183,7 +188,7 @@ export const ManageColumnsModal = ({
             onDrop={onDrop}
             overlayProps={{ isCompact: true }}
           >
-            <DataList aria-label={title} isCompact />
+            <DataList aria-label={title} isCompact data-testid="manage-columns-list" />
           </DragDropSort>
         </ModalBody>
         <ModalFooter>
@@ -192,10 +197,16 @@ export const ManageColumnsModal = ({
             variant={ButtonVariant.primary}
             isDisabled={resourceFields === editedColumns}
             onClick={onSave}
+            data-testid="manage-columns-save-button"
           >
             {saveLabel}
           </Button>
-          <Button key="cancel" variant={ButtonVariant.secondary} onClick={onClose}>
+          <Button
+            key="cancel"
+            variant={ButtonVariant.secondary}
+            onClick={onClose}
+            data-testid="manage-columns-cancel-button"
+          >
             {cancelLabel}
           </Button>
           <Button key="restore" variant={ButtonVariant.link} onClick={restoreDefaults}>

src/components/common/TableView/ManageColumnsToolbarItem.tsx

@@ -50,6 +50,7 @@ export const ManageColumnsToolbarItem = ({
           variant={ButtonVariant.plain}
           onClick={showDialog}
           aria-label={ariaLabel ?? manageColumnsText}
+          data-testid="manage-columns-button"
         />
       </Tooltip>
       {children}

src/onlineHelp/learningExperience/HelpTopicSection.tsx

@@ -53,6 +53,7 @@ const HelpTopicSection: FC<HelpTopicSectionProps> = ({ index, listStyleType, top
 
   return (
     <ExpandableSection
+      data-testid="help-topic-section"
       className={css(
         'forklift--learning__help-section',
         isEmpty(topic.subTopics) && 'm-non-expandable',

src/plans/create/steps/network-map/SourceNetworkField.tsx

@@ -38,6 +38,7 @@ const SourceNetworkField: FC<SourceNetworkFieldProps> = ({
         <Select
           ref={field.ref}
           id={fieldId}
+          testId={`source-network-${fieldId}`}
           value={(field.value as MappingValue).name}
           onSelect={async (_event, value) => {
             field.onChange(value);

src/plans/create/steps/network-map/TargetNetworkField.tsx

@@ -28,6 +28,7 @@ const TargetNetworkField: FC<TargetNetworkFieldProps> = ({ fieldId, targetNetwor
         <Select
           ref={field.ref}
           id={fieldId}
+          testId={`target-network-${fieldId}`}
           value={(field.value as MappingValue).name}
           onSelect={async (_event, value) => {
             field.onChange(value);