Merge pull request #584 from athul-aot/bugfix/FWF-3740-update-data-test-id

Bugfix/FWF 3740 updated missing data testid in microfrontend

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/BuildModal.tsx

@@ -68,7 +68,7 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
             <b>{t(title)}</b>
           </Modal.Title>
           <div className="d-flex align-items-center">
-            <CloseIcon onClick={onClose} />
+            <CloseIcon onClick={onClose} dataTestId="modal-close"/>
           </div>
         </Modal.Header>
         <Modal.Body className="d-flex">

forms-flow-components/src/components/CustomComponents/Button.tsx

@@ -49,7 +49,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
   disabled = false,
   icon = false,
   className = "",
-  dataTestId = "",
+  dataTestId,
   ariaLabel = "",
   name =  "",
   buttonLoading = false,

forms-flow-components/src/components/CustomComponents/ConfirmModal.tsx

@@ -22,6 +22,8 @@ interface ConfirmModalProps {
   secondoryBtndataTestid?: string;
   secondoryBtnariaLabel?: string;
   secondaryBtnLoading?:boolean;
+  datatestId?: string;
+  titleDataTestId?: string;
 }
 
 export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
@@ -41,7 +43,9 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
   secondaryBtnDisable = false,
   secondoryBtndataTestid = 'cancel-button',
   secondoryBtnariaLabel = 'Cancel Button',
-  secondaryBtnLoading= false
+  secondaryBtnLoading= false,
+  datatestId,
+  titleDataTestId,
 }) => {
   const { t } = useTranslation();
   return (
@@ -55,7 +59,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
         aria-describedby="confirm-modal-message"
       >
         <Modal.Header>
-          <Modal.Title id="confirm-modal-title">
+          <Modal.Title id="confirm-modal-title" data-testid={titleDataTestId}>
             <b>
               {t(title)}
             </b>
@@ -71,7 +75,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = React.memo(({
           >
             <div
               className="message-primary"
-              data-testid="confirm-modal-primary-message"
+              data-testid={ datatestId }
               aria-label="Primary message"
             >
               {t(message)}

forms-flow-components/src/components/CustomComponents/CustomInfo.tsx

@@ -28,7 +28,7 @@ export const CustomInfo: FC<CustomInfoProps> = ( {
 
 
   return (
-    <div className={`info-panel ${className}`} data-test-id={dataTestId}>
+    <div className={`info-panel ${className}`} data-testid={dataTestId}>
       <div className="d-flex align-items-center">
         <NewInfoIcon />
         <div className="field-label ms-2">{t(heading)}</div>

forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx

@@ -137,7 +137,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             <b>{t(modalHeader)}</b>
           </Modal.Title>
           <div className="d-flex align-items-center">
-            <CloseIcon onClick={onClose} />
+            <CloseIcon onClick={onClose} data-testid="close-duplicate-modal"/>
           </div>
         </Modal.Header>
         <Modal.Body className="form-builder-modal">

forms-flow-components/src/components/CustomComponents/ImportModal.tsx

@@ -361,7 +361,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
                         ? selectedLayoutVersion.label
                         : t("Skip, do not import")}
                     </div>
-                    <DropdownIcon />
+                    <DropdownIcon dataTestId="import-dropdown-layout"/>
                   </div>
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
@@ -396,7 +396,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
                         ? selectedFlowVersion.label
                         : t("Skip, do not import")}
                     </div>
-                    <DropdownIcon />
+                    <DropdownIcon dataTestId="import-dropdown-flow" />
                   </div>
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
@@ -493,6 +493,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
           </Modal.Title>
           <div className="d-flex align-items-center">
             <CloseIcon
+            dataTestId="import-modal-close-icon"
               width={16.5}
               height={16.5}
               onClick={() => {
@@ -531,6 +532,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
             buttonLoading={!importError && importLoader}
           />
           <CustomButton
+          dataTestId="import-modal-close-button"
             variant="secondary"
             size="md"
             label="Cancel"

forms-flow-components/src/components/CustomComponents/SortableHeadder.tsx

@@ -47,7 +47,7 @@ export const SortableHeader: React.FC<SortableHeaderProps> = ({
     >
       <span className="mt-1">{t(title)}</span>
       <span className={sortedOrder === "asc" ? "arrow-up" : "arrow-down"}>
-        <SortIcon color={iconColor} />
+        <SortIcon color={iconColor} dataTestId="sort" />
       </span>
     </button>
   );

forms-flow-components/src/components/CustomComponents/TableFooter.tsx

@@ -51,11 +51,12 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                 linkClass="page-link"
                 onChange={handlePageChange}
                 prevPageText={
-                  <span><AngleLeftIcon /></span>
+                  <span data-testid="goto-previous"><AngleLeftIcon /></span>
                 }
                 nextPageText={
-                  <span><AngleRightIcon /></span>
+                  <span data-testid="goto-next"><AngleRightIcon /></span>
                 }
+                
               />
             </div>
           </td>

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -220,6 +220,7 @@ export const CloseIcon = ({
   color = grayColor,
   width = 14,
   height = 14,
+  dataTestId = "close-icon",
   ...props
 }) => (
   <svg
@@ -229,6 +230,7 @@ export const CloseIcon = ({
     viewBox="0 0 14 14"
     fill="none"
     onClick={props.onClick}
+    data-testid={dataTestId} 
     {...props}
   >
     <path
@@ -508,6 +510,7 @@ export const BackToPrevIcon = ({ color = baseColor, onClick, ...props }) => (
     viewBox="0 0 32 33"
     fill="none"
     onClick={onClick}
+    {...props}
   >
     <path
       fillRule="evenodd"
@@ -664,8 +667,9 @@ export const TickIcon = ({ color = baseColor, ...props }) => (
   </svg>
 );
 
-export const DropdownIcon = ({ color = baseColor }) => (
+export const DropdownIcon = ({ color = baseColor,dataTestId, ...props}) => (
   <svg
+    data-testid={dataTestId}
     xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="9"
@@ -766,13 +770,14 @@ export const FilterIcon = ({ color = baseColor, ...props }) => (
   </svg>
 );
 
-export const SortIcon = ({ color = grayColor, ...props }) => (
+export const SortIcon = ({ dataTestId, color = grayColor, ...props }) => (
   <svg
     width="12"
     height="17"
     viewBox="0 0 12 17"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-testid={dataTestId}
   >
     <path
       d="M6 15.5L6 1.5M6 1.5L11 5.5M6 1.5L1 5.5"

forms-flow-nav/src/root.component.js

@@ -66,7 +66,7 @@ export default function Root(props) {
           </div>
         )}
         <HamburgerMenu props={props} />
-        { !isPreviewRoute && <div className="main-sidenav" ref={sidenavRef}>
+        { !isPreviewRoute && <div className="main-sidenav" ref={sidenavRef} data-testid="main-sidenav">
           <Sidebar props={props} sidenavHeight={sidenavHeight}/>
         </div>}
       </>