From bbdab5c907a31d9340494b83fcefe5838e9e4e38 Mon Sep 17 00:00:00 2001
From: Maciej Szewczyk <maciej.szewczyk@tivix.com>
Date: Wed, 13 Nov 2024 20:53:57 +0100
Subject: [PATCH] add data-cy

---
 .../src/components/core/ButtonTooltip.tsx      | 16 ++++++++++++++--
 .../src/components/targeting/CreateTPMenu.tsx  |  2 +-
 .../CreateTargetPopulationHeader.tsx           |  6 +++++-
 .../EditTargetPopulation.tsx                   | 14 ++++++++++----
 .../TargetingCriteriaDisplay/Criteria.tsx      | 17 +++++++++++++----
 .../TargetingCriteriaCollectorFilterBlocks.tsx | 18 +++++++++++-------
 6 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/core/ButtonTooltip.tsx b/src/frontend/src/components/core/ButtonTooltip.tsx
index 45aef3827d..c8cf23968a 100644
--- a/src/frontend/src/components/core/ButtonTooltip.tsx
+++ b/src/frontend/src/components/core/ButtonTooltip.tsx
@@ -8,6 +8,7 @@ interface ButtonTooltipProps {
   title?: string;
   disabled?: boolean;
   [key: string]: any;
+  dataCy?: string;
 }
 
 export const ButtonTooltip: FC<ButtonTooltipProps> = ({
@@ -15,18 +16,29 @@ export const ButtonTooltip: FC<ButtonTooltipProps> = ({
   onClick = () => null,
   title = 'Permission denied',
   disabled,
+  dataCy,
   ...otherProps
 }) => {
   return disabled ? (
     <Tooltip title={title}>
       <span>
-        <Button disabled={disabled} onClick={onClick} {...otherProps}>
+        <Button
+          disabled={disabled}
+          onClick={onClick}
+          data-cy={dataCy}
+          {...otherProps}
+        >
           {children}
         </Button>
       </span>
     </Tooltip>
   ) : (
-    <Button disabled={disabled} onClick={onClick} {...otherProps}>
+    <Button
+      disabled={disabled}
+      onClick={onClick}
+      data-cy={dataCy}
+      {...otherProps}
+    >
       {children}
     </Button>
   );
diff --git a/src/frontend/src/components/targeting/CreateTPMenu.tsx b/src/frontend/src/components/targeting/CreateTPMenu.tsx
index 4bdb3568a7..9a61efe878 100644
--- a/src/frontend/src/components/targeting/CreateTPMenu.tsx
+++ b/src/frontend/src/components/targeting/CreateTPMenu.tsx
@@ -22,7 +22,7 @@ export const CreateTPMenu = (): ReactElement => {
           )}
           component={Link}
           to={`/${baseUrl}/target-population/create`}
-          data-cy="button-target-population-create-new"
+          dataCy="button-new-tp-disabled"
           disabled={!isActiveProgram}
         >
           {t('Create New')}
diff --git a/src/frontend/src/components/targeting/CreateTargetPopulation/CreateTargetPopulationHeader.tsx b/src/frontend/src/components/targeting/CreateTargetPopulation/CreateTargetPopulationHeader.tsx
index 9cba43f984..26ef59d709 100644
--- a/src/frontend/src/components/targeting/CreateTargetPopulation/CreateTargetPopulationHeader.tsx
+++ b/src/frontend/src/components/targeting/CreateTargetPopulation/CreateTargetPopulationHeader.tsx
@@ -60,7 +60,11 @@ export const CreateTargetPopulationHeader = ({
     >
       <>
         <Box m={2}>
-          <Button component={Link} to={`/${baseUrl}/target-population`}>
+          <Button
+            data-cy="button-cancel"
+            component={Link}
+            to={`/${baseUrl}/target-population`}
+          >
             {t('Cancel')}
           </Button>
         </Box>
diff --git a/src/frontend/src/components/targeting/EditTargetPopulation/EditTargetPopulation.tsx b/src/frontend/src/components/targeting/EditTargetPopulation/EditTargetPopulation.tsx
index fce8800d65..7fe4e91e22 100644
--- a/src/frontend/src/components/targeting/EditTargetPopulation/EditTargetPopulation.tsx
+++ b/src/frontend/src/components/targeting/EditTargetPopulation/EditTargetPopulation.tsx
@@ -119,7 +119,7 @@ export const EditTargetPopulation = ({
       onSubmit={handleSubmit}
     >
       {({ values, submitForm, errors, setFieldValue }) => (
-        <Form>
+        <Form data-cy="edit-target-population-form">
           <AutoSubmitFormOnEnter />
           <EditTargetPopulationHeader
             handleSubmit={submitForm}
@@ -127,8 +127,9 @@ export const EditTargetPopulation = ({
             loading={loading}
             baseUrl={baseUrl}
             targetPopulation={targetPopulation}
+            data-cy="edit-target-population-header"
           />
-          <PaperContainer>
+          <PaperContainer data-cy="paper-container">
             <Box pt={3} pb={3}>
               <Typography variant="h6">{t('Targeting Criteria')}</Typography>
             </Box>
@@ -142,6 +143,7 @@ export const EditTargetPopulation = ({
                   required
                   // @ts-ignore
                   error={errors.programCycleId?.value}
+                  data-cy="program-cycle-autocomplete"
                 />
               </Grid>
             </Grid>
@@ -155,7 +157,6 @@ export const EditTargetPopulation = ({
                   required
                   component={FormikTextField}
                   variant="outlined"
-                  data-cy="input-name"
                   disabled={targetPopulation.status === 'LOCKED'}
                 />
               </Grid>
@@ -173,17 +174,22 @@ export const EditTargetPopulation = ({
                   screenBeneficiary={screenBeneficiary}
                   isStandardDctType={isStandardDctType}
                   isSocialDctType={isSocialDctType}
+                  data-cy="add-filter-targeting-criteria-display"
                 />
               )}
             />
           </PaperContainer>
-          <Exclusions initialOpen={Boolean(values.excludedIds)} />
+          <Exclusions
+            initialOpen={Boolean(values.excludedIds)}
+            data-cy="exclusions"
+          />
           <Box
             pt={3}
             pb={3}
             display="flex"
             flexDirection="column"
             alignItems="center"
+            data-cy="save-message-box"
           >
             <Typography style={{ color: '#b1b1b5' }} variant="h6">
               {t('Save to see the list of households')}
diff --git a/src/frontend/src/components/targeting/TargetingCriteriaDisplay/Criteria.tsx b/src/frontend/src/components/targeting/TargetingCriteriaDisplay/Criteria.tsx
index 3e4475178a..278a3054b3 100644
--- a/src/frontend/src/components/targeting/TargetingCriteriaDisplay/Criteria.tsx
+++ b/src/frontend/src/components/targeting/TargetingCriteriaDisplay/Criteria.tsx
@@ -89,7 +89,7 @@ const PduDataBox = styled(Box)`
   margin: ${({ theme }) => theme.spacing(3)};
 `;
 
-const CriteriaField = ({ field, choicesDict }): ReactElement => {
+const CriteriaField = ({ field, choicesDict, dataCy }): ReactElement => {
   const extractChoiceLabel = (choiceField, argument) => {
     let choices = choicesDict?.[choiceField.fieldName];
     if (!choices) {
@@ -205,7 +205,7 @@ const CriteriaField = ({ field, choicesDict }): ReactElement => {
 
   return (
     <>
-      {fieldElement}
+      <div data-cy={dataCy}>{fieldElement}</div>
       {field.fieldAttribute?.type === 'PDU' &&
         (field.pduData || field.fieldAttribute.pduData) && (
           <PduDataBox data-cy="round-number-round-name-display">
@@ -338,17 +338,22 @@ export function Criteria({
           choicesDict={allDataFieldsChoicesDict}
           key={index}
           field={each}
+          dataCy={`criteria-field-${index}`}
         />
       ))}
       {individualsFiltersBlocks.map(
         (item, index) =>
           item.individualBlockFilters.length > 0 && (
-            <CriteriaSetBox key={index}>
+            <CriteriaSetBox
+              key={index}
+              data-cy={`individuals-criteria-set-box-${index}`}
+            >
               {item.individualBlockFilters.map((filter, filterIndex) => (
                 <CriteriaField
                   choicesDict={allDataFieldsChoicesDict}
                   key={filterIndex}
                   field={filter}
+                  dataCy={`individuals-criteria-field-${filterIndex}`}
                 />
               ))}
             </CriteriaSetBox>
@@ -357,12 +362,16 @@ export function Criteria({
       {collectorsFiltersBlocks.map(
         (item, index) =>
           item.collectorBlockFilters.length > 0 && (
-            <CriteriaSetBox key={index}>
+            <CriteriaSetBox
+              key={index}
+              data-cy={`collectors-criteria-set-box-${index}`}
+            >
               {item.collectorBlockFilters.map((filter, filterIndex) => (
                 <CriteriaField
                   choicesDict={allCollectorFieldsChoicesDict}
                   key={filterIndex}
                   field={filter}
+                  dataCy={`collectors-criteria-field-${filterIndex}`}
                 />
               ))}
             </CriteriaSetBox>
diff --git a/src/frontend/src/containers/forms/TargetingCriteriaCollectorFilterBlocks.tsx b/src/frontend/src/containers/forms/TargetingCriteriaCollectorFilterBlocks.tsx
index bf71538bd7..3e7c14f5b7 100644
--- a/src/frontend/src/containers/forms/TargetingCriteriaCollectorFilterBlocks.tsx
+++ b/src/frontend/src/containers/forms/TargetingCriteriaCollectorFilterBlocks.tsx
@@ -86,12 +86,12 @@ export const TargetingCriteriaCollectorFilterBlocks = ({
     blockIndex + 1 < values.collectorsFiltersBlocks.length;
 
   return (
-    <div>
+    <div data-cy="collectors-filters-block">
       <FieldArray
         name={`collectorsFiltersBlocks[${blockIndex}].collectorBlockFilters`}
         render={(arrayHelpers) => (
           <div>
-            <GrayFiltersBlock>
+            <GrayFiltersBlock data-cy="gray-filters-block">
               {values.collectorsFiltersBlocks[
                 blockIndex
               ].collectorBlockFilters.map((each, index) => {
@@ -101,7 +101,7 @@ export const TargetingCriteriaCollectorFilterBlocks = ({
                     .collectorBlockFilters.length;
                 return (
                   <Fragment key={blockIndex + index.toString()}>
-                    <FilterWrapper>
+                    <FilterWrapper data-cy="filter-wrapper">
                       <TargetingCriteriaCollectorBlockFilter
                         blockIndex={blockIndex}
                         index={index}
@@ -124,11 +124,12 @@ export const TargetingCriteriaCollectorFilterBlocks = ({
                           }
                           arrayHelpers.remove(index);
                         }}
+                        data-cy="collector-block-filter"
                       />
                     </FilterWrapper>
                     {shouldShowDivider && (
-                      <Divider>
-                        <DividerLabel>+</DividerLabel>
+                      <Divider data-cy="divider">
+                        <DividerLabel data-cy="divider-label">+</DividerLabel>
                       </Divider>
                     )}
                   </Fragment>
@@ -149,6 +150,7 @@ export const TargetingCriteriaCollectorFilterBlocks = ({
                     top: 18,
                     backgroundColor: '#fff',
                   }}
+                  data-cy="add-next-rule-button"
                 >
                   {t('Add Next Rule')}
                 </Button>
@@ -158,8 +160,10 @@ export const TargetingCriteriaCollectorFilterBlocks = ({
         )}
       />
       {shouldShowAndDivider && (
-        <AndDivider>
-          <AndDividerLabel>{t('And')}</AndDividerLabel>
+        <AndDivider data-cy="and-divider">
+          <AndDividerLabel data-cy="and-divider-label">
+            {t('And')}
+          </AndDividerLabel>
         </AndDivider>
       )}
     </div>