Add name properties in 'Add cert. map. data' modal

The `name` parameters are helful to identify some section of the DOM tree while writing the tests. The 'Certificate mapping data` add modal (under user detail page) lacks of some names, making difficult the navigation through the HTML elements. These needs to be assigned for all the elements where there is no way to be identified. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Mar 11, 2024 · 4c3fb44 · 4c3fb44
1 parent b9deb55
commit 4c3fb44
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/components/CertificateMappingDataOption.tsx b/src/components/CertificateMappingDataOption.tsx
@@ -86,11 +86,12 @@ const CertificateMappingDataOption = (
           <Flex
             direction={{ default: "row" }}
             key={"ipacertmapdata-" + idx + "-div"}
-            name="value"
+            name={"flex-ipacertmapdata-" + idx + "-div"}
           >
             <FlexItem
               key={"ipacertmapdata-" + idx + "-textbox"}
               flex={{ default: "flex_1" }}
+              name={"flexitem-ipacertmapdata-" + idx + "-div"}
             >
               <TextInput
                 id="cert-map-data"
@@ -117,6 +118,7 @@ const CertificateMappingDataOption = (
         ))}
       </Flex>
       <SecondaryButton
+        name={"add-ipacertmapdata"}
         classname="pf-v5-u-mt-sm pf-v5-u-mb-0"
         isDisabled={!props.isCertMappingDataChecked}
         onClickHandler={onAddCertificateMappingDataHandler}
@@ -156,12 +158,12 @@ const CertificateMappingDataOption = (
         {certificateListCopy.map((certificate, idx) => (
           <Flex
             direction={{ default: "row" }}
-            key={"certificate-" + idx + "-div"}
+            key={"flex-certificate-" + idx + "-div"}
             alignItems={{ default: "alignItemsFlexEnd" }}
-            name="value"
+            name={"flex-certificate-" + idx + "-div"}
           >
             <FlexItem
-              key={"certificate-" + idx + "-textbox"}
+              key={"flexitem-certificate-" + idx + "-textbox"}
               flex={{ default: "flex_1" }}
             >
               <TextArea
@@ -177,7 +179,10 @@ const CertificateMappingDataOption = (
                 style={{ height: "135px" }}
               />
             </FlexItem>
-            <FlexItem key={"certificate-" + idx + "-delete-button"}>
+            <FlexItem
+              key={"certificate-" + idx + "-delete-button"}
+              name={"certificate-" + idx + "-delete-button"}
+            >
               <SecondaryButton
                 name="remove"
                 onClickHandler={() => onRemoveCertificateHandler(idx)}
@@ -189,6 +194,7 @@ const CertificateMappingDataOption = (
         ))}
       </Flex>
       <SecondaryButton
+        name={"add-certificate"}
         classname="pf-v5-u-mt-sm"
         isDisabled={!props.isCertMappingDataChecked}
         onClickHandler={onAddCertificateHandler}
@@ -220,6 +226,7 @@ const CertificateMappingDataOption = (
           <FormGroup
             label="Certificate mapping data"
             fieldId="certificate-mapping-data-modal"
+            name={"certificate-mapping-data-section"}
           >
             <>{certificateMappingDataElement}</>
           </FormGroup>
@@ -232,6 +239,7 @@ const CertificateMappingDataOption = (
                 hasAutoWidth={true}
               />
             }
+            name={"certificate-section"}
           >
             <>{certificateElement}</>
           </FormGroup>

diff --git a/src/components/Form/IpaCertificateMappingData.tsx b/src/components/Form/IpaCertificateMappingData.tsx
@@ -277,10 +277,16 @@ const IpaCertificateMappingData = (props: PropsToIpaCertificateMappingData) => {
       spinnerAriaValueText="Adding"
       spinnerAriaLabelledBy="Adding"
       spinnerAriaLabel="Adding"
+      name={"add-certificate-mapping-data-modal"}
     >
       {modalSpinning ? "Adding" : "Add"}
     </SecondaryButton>,
-    <Button key="cancel" variant="link" onClick={onClose}>
+    <Button
+      key="cancel"
+      variant="link"
+      onClick={onClose}
+      name={"cancel-certificate.mapping-data-modal"}
+    >
       Cancel
     </Button>,
   ];

diff --git a/src/components/IssuerAndSubjectOption.tsx b/src/components/IssuerAndSubjectOption.tsx
@@ -58,7 +58,7 @@ const IssuerAndSubjectOption = (props: PropsToIssuerAndSubjectOption) => {
         id="issuer-and-subject"
         className="pf-v5-u-mb-md"
       />
-      <div className="pf-v5-u-ml-lg pf-v5-u-mb-md">
+      <div className="pf-v5-u-ml-lg pf-v5-u-mb-md" id="issuer-and-subject">
         <Form>
           <FormGroup
             label="Issuer"
@@ -70,9 +70,10 @@ const IssuerAndSubjectOption = (props: PropsToIssuerAndSubjectOption) => {
               />
             }
             isRequired={props.isIssuerAndSubjectChecked}
+            name="issuer-formgroup"
           >
             <TextInput
-              id="issuer-textbox"
+              id="issuer"
               value={props.issuerValue}
               type="text"
               name="issuer"
@@ -92,6 +93,7 @@ const IssuerAndSubjectOption = (props: PropsToIssuerAndSubjectOption) => {
               />
             }
             isRequired={props.isIssuerAndSubjectChecked}
+            name="subject-formgroup"
           >
             <TextInput
               id="subject-textbox"