EDM-3455: Add data-testid attributes for Cypress device E2E tests

apps/standalone/src/app/components/AppLayout/AppLayout.tsx

@@ -50,6 +50,7 @@ const AppLayoutContent = () => {
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="page-toggle-button"
+            data-testid="nav-toggle"
           />
         </MastheadToggle>
         <MastheadBrand>

libs/ui-components/src/components/DetailsPage/DetailsPage.tsx

@@ -38,6 +38,8 @@ export type DetailsPageProps = {
   actions?: React.ReactNode;
   nav?: React.ReactNode;
   banner?: React.ReactNode;
+  /** Optional data-testid for the title (e.g. "device-details-title") */
+  titleDataTestId?: string;
 };
 
 const DetailsPage = ({
@@ -53,6 +55,7 @@ const DetailsPage = ({
   actions,
   nav,
   banner,
+  titleDataTestId,
 }: DetailsPageProps) => {
   const { t } = useTranslation();
   let content = children;
@@ -87,7 +90,12 @@ const DetailsPage = ({
       <PageSection hasBodyWrapper={false}>
         <Split hasGutter>
           <SplitItem isFilled>
-            <Title headingLevel="h1" size="3xl" role="heading">
+            <Title
+              headingLevel="h1"
+              size="3xl"
+              role="heading"
+              {...(titleDataTestId && { 'data-testid': titleDataTestId })}
+            >
               {title || id}
             </Title>
           </SplitItem>

libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -121,6 +121,7 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
       error={error}
       id={deviceId}
       breadcrumbTitle={deviceAlias}
+      titleDataTestId="device-details-title"
       title={
         canEdit ? (
           /* key={deviceAlias} is needed for the input field to be initialized with the alias as its value */

libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx

@@ -94,6 +94,7 @@ const DecommissionedDevicesTable = ({
                   isDisabled={!hasSelectedRows}
                   onClick={() => setIsMassDeleteModalOpen(true)}
                   variant="secondary"
+                  data-testid="toolbar-delete-forever"
                 >
                   {t('Delete forever')}
                 </Button>
@@ -108,6 +109,7 @@ const DecommissionedDevicesTable = ({
                   setOnlyDecommissioned(false);
                 }}
                 ouiaId={t('Show decommissioned devices')}
+                data-testid="show-decommissioned-devices-switch"
               />
             </ToolbarItem>
           </ToolbarGroup>

libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx

@@ -54,7 +54,7 @@ const EnrolledDeviceTableRow = ({
   const columnIds = React.useMemo(() => deviceColumns.map(({ id }) => id), [deviceColumns]);
 
   return (
-    <Tr>
+    <Tr data-testid="enrolled-device-row">
       <Td
         select={{
           rowIndex,
@@ -65,7 +65,12 @@ const EnrolledDeviceTableRow = ({
       />
       {columnIds.includes('alias') && (
         <Td dataLabel={t('Alias')}>
-          <ResourceLink id={deviceName} name={deviceAlias || t('Untitled')} routeLink={ROUTE.DEVICE_DETAILS} />
+          <ResourceLink
+            id={deviceName}
+            name={deviceAlias || t('Untitled')}
+            routeLink={ROUTE.DEVICE_DETAILS}
+            data-testid="device-name-link"
+          />
         </Td>
       )}
       {columnIds.includes('name') && (
@@ -94,7 +99,7 @@ const EnrolledDeviceTableRow = ({
         </Td>
       )}
       {!hideActions && (
-        <Td isActionCell>
+        <Td isActionCell data-testid="device-row-actions">
           <ActionsColumn
             items={[
               ...(canEdit

libs/ui-components/src/components/Device/DevicesPage/EnrolledDevicesTable.tsx

@@ -162,6 +162,7 @@ const EnrolledDevicesTable = ({
               isDisabled={!hasSelectedRows}
               onClick={() => setIsMassDecommissionModalOpen(true)}
               variant="secondary"
+              data-testid="toolbar-decommission-devices"
             >
               {t('Decommission devices')}
             </Button>
@@ -177,6 +178,7 @@ const EnrolledDevicesTable = ({
               setOnlyDecommissioned(true);
             }}
             ouiaId={t('Show decommissioned devices')}
+            data-testid="show-decommissioned-devices-switch"
           />
         </ToolbarItem>
       </DeviceTableToolbar>
@@ -189,6 +191,7 @@ const EnrolledDevicesTable = ({
         emptyData={devices.length === 0}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
+        data-testid="enrolled-devices-table"
       >
         <Tbody>
           {devices.map((device, index) => (

libs/ui-components/src/components/EnrollmentRequest/EnrollmentRequestTableRow.tsx

@@ -67,7 +67,7 @@ const EnrollmentRequestTableRow: React.FC<EnrollmentRequestTableRow> = ({
       <Td dataLabel={t('Created')}>{timeSinceText(t, er.metadata.creationTimestamp)}</Td>
       {canApprove && (
         <Td dataLabel={t('Approve')}>
-          <Button variant="link" onClick={approveEnrollment}>
+          <Button variant="link" onClick={approveEnrollment} data-testid="enrollment-request-approve-button">
             {t('Approve')}
           </Button>
         </Td>

libs/ui-components/src/components/ListPage/ListPage.tsx

@@ -13,7 +13,7 @@ const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', childre
     <PageSection hasBodyWrapper={false}>
       <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
         <FlexItem>
-          <Title headingLevel={headingLevel} size="3xl">
+          <Title headingLevel={headingLevel} size="3xl" data-testid="list-page-title">
             {title}
           </Title>
         </FlexItem>

libs/ui-components/src/components/Table/Table.tsx

@@ -38,6 +38,7 @@ type TableProps<D> = Pick<PFTableProps, 'variant'> & {
   onSelectAll?: (isSelected: boolean) => void;
   isAllSelected?: boolean;
   isExpandable?: boolean;
+  'data-testid'?: string;
   singleSelect?: boolean;
 };
 

libs/ui-components/src/components/common/FlightCtlWizardFooter.tsx

@@ -50,20 +50,32 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
   let primaryBtn: React.ReactNode;
   if (isSubmitStep && !isReadOnly) {
     primaryBtn = (
-      <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      <Button
+        variant="primary"
+        onClick={submitForm}
+        isDisabled={isSubmitting}
+        isLoading={isSubmitting}
+        data-testid="wizard-save-button"
+      >
         {saveButtonText || t('Save')}
       </Button>
     );
   } else if (isSubmitStep) {
     // Read-only "Review" step
     primaryBtn = (
-      <Button variant="primary" onClick={() => navigate(-1)}>
+      <Button variant="primary" onClick={() => navigate(-1)} data-testid="wizard-close-button">
         {t('Close')}
       </Button>
     );
   } else {
     primaryBtn = (
-      <Button variant="primary" onClick={onMoveNext} isDisabled={!isReadOnly && !stepValid} ref={buttonRef}>
+      <Button
+        variant="primary"
+        onClick={onMoveNext}
+        isDisabled={!isReadOnly && !stepValid}
+        ref={buttonRef}
+        data-testid="wizard-next-button"
+      >
         {t('Next')}
       </Button>
     );
@@ -77,6 +89,7 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
               variant="secondary"
               onClick={goToPrevStep}
               isDisabled={String(activeStep.id) === firstStepId || isSubmitting}
+              data-testid="wizard-back-button"
             >
               {t('Back')}
             </Button>
@@ -85,7 +98,12 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
         </ActionListGroup>
         <ActionListGroup>
           <ActionListItem>
-            <Button variant="link" onClick={onCancel ?? (() => navigate(-1))} isDisabled={isSubmitting}>
+            <Button
+              variant="link"
+              onClick={onCancel ?? (() => navigate(-1))}
+              isDisabled={isSubmitting}
+              data-testid="wizard-cancel-button"
+            >
               {t('Cancel')}
             </Button>
           </ActionListItem>

libs/ui-components/src/components/common/ResourceLink.tsx

@@ -12,6 +12,7 @@ type ResourceDisplayLinkProps = {
   name?: string;
   variant?: 'shortened' | 'full';
   routeLink?: RouteWithPostfix;
+  'data-testid'?: string;
 };
 
 export const getDisplayText = (name: string | undefined) => {
@@ -24,7 +25,13 @@ export const getDisplayText = (name: string | undefined) => {
   return `${name.substring(0, 6)}...${name.substring(name.length - 7)}`;
 };
 
-const ResourceLink = ({ id, name, variant = 'shortened', routeLink }: ResourceDisplayLinkProps) => {
+const ResourceLink = ({
+  id,
+  name,
+  variant = 'shortened',
+  routeLink,
+  'data-testid': dataTestId,
+}: ResourceDisplayLinkProps) => {
   const nameOrId = name || id;
   const displayText = getDisplayText(nameOrId);
   const showCopy = nameOrId !== displayText;
@@ -33,7 +40,13 @@ const ResourceLink = ({ id, name, variant = 'shortened', routeLink }: ResourceDi
 
   return (
     <span className={`fctl-resource-link fctl-resource-link__${variant}`}>
-      {routeLink ? <Link to={{ route: routeLink, postfix: id }}>{textEl}</Link> : <>{textEl}</>}
+      {routeLink ? (
+        <Link to={{ route: routeLink, postfix: id }} data-testid={dataTestId}>
+          {textEl}
+        </Link>
+      ) : (
+        <span data-testid={dataTestId}>{textEl}</span>
+      )}
       {showCopy && nameOrId && <CopyButton text={nameOrId} />}
     </span>
   );

libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx

@@ -59,6 +59,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
           onClick={submitForm}
           isDisabled={disableSubmit || isSubmitting}
           isLoading={isSubmitting}
+          data-testid="approve-device-form-submit"
         >
           {t('Approve')}
         </Button>

libs/ui-components/src/components/modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal.tsx

@@ -124,6 +124,7 @@ const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecomm
           onClick={decommissionDevices}
           isLoading={isSubmitting}
           isDisabled={isSubmitting}
+          data-testid="modal-decommission-confirm"
         >
           {t('Decommission')}
         </Button>

libs/ui-components/src/components/modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal.tsx

@@ -112,7 +112,14 @@ const MassDeleteDeviceModal: React.FC<MassDeleteDeviceModalProps> = ({ onClose,
         </Stack>
       </ModalBody>
       <ModalFooter>
-        <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
+        <Button
+          key="delete"
+          variant="danger"
+          onClick={deleteResources}
+          isLoading={isDeleting}
+          isDisabled={isDeleting}
+          data-testid="modal-delete-devices-confirm"
+        >
           {t('Delete devices')}
         </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>