Merge pull request #101 from SocialGouv/fix-cp-inconnu

fix(demographie): rentrer un CP non reconnu mais valide
SocialGouv · Nov 16, 2022 · c945046 · c945046
2 parents 35fdda4 + 26d8516
commit c945046
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 112 deletions.
diff --git a/__tests__/pages/ab-testing/demographic-data-survey.test.js b/__tests__/pages/ab-testing/demographic-data-survey.test.js
@@ -1,8 +1,72 @@
 import { checkIsFormCompleted } from "../../../pages/ab-testing/demographic-data-survey"
 
 describe("Questionnaire démographique", () => {
-  describe("Vérification que toutes les questions sont remplies", () => {
-    test("Les données sont `undefined` => false", () => {
+  describe("Should return all questions are completed", () => {
+    const completedGenderValues = [
+      {
+        id: "femme",
+        text: "Femme",
+        isChecked: true,
+      },
+      {
+        id: "homme",
+        text: "Homme",
+        isChecked: false,
+      },
+    ]
+
+    const completedAgeValues = [
+      {
+        id: "-18ans",
+        text: "-18 ans",
+        isChecked: true,
+      },
+      {
+        id: "18-25ans",
+        text: "18 - 25 ans",
+        isChecked: false,
+      },
+    ]
+
+    const completedResidenceValue = {
+      zipcode: "49000",
+      city: "Écouflant",
+      departmentName: "Maine-et-Loire",
+      departmentNumber: "49",
+      region: "Pays de la Loire",
+      label1Bold: "Écouflant",
+      label2: "49, Maine-et-Loire, Pays de la Loire",
+    }
+
+    const completedSituationValues = [
+      {
+        id: "attendez1Enfant",
+        text: "Vous attendez un enfant",
+        isChecked: true,
+      },
+      {
+        id: "avezEnfantDeMoinsDe2ans",
+        text: "Vous avez un enfant de moins de 2 ans",
+        isChecked: false,
+      },
+    ]
+
+    const completedAvailableRelativesValues = [
+      {
+        id: "oui",
+        text: "Oui",
+        isChecked: true,
+      },
+      {
+        id: "non",
+        text: "Non",
+        isChecked: false,
+      },
+    ]
+
+    const completedJobValues = { code: "10", libelle: "job" }
+
+    test("Should return false when data are `undefined` ", () => {
       expect(
         checkIsFormCompleted(
           undefined,
@@ -13,7 +77,8 @@ describe("Questionnaire démographique", () => {
         )
       ).toBeFalsy()
     })
-    test("Aucune question remplie => false", () => {
+
+    test("Should return false when form is not completed", () => {
       const genderValues = [
         {
           id: "femme",
@@ -53,7 +118,7 @@ describe("Questionnaire démographique", () => {
         },
       ]
 
-      const entourageValues = [
+      const availableRelativesValues = [
         {
           id: "oui",
           text: "Oui",
@@ -72,24 +137,12 @@ describe("Questionnaire démographique", () => {
           ageValues,
           undefined,
           situationValues,
-          entourageValues
+          availableRelativesValues
         )
       ).toBeFalsy()
     })
-    test("une partie des questions seulement est complété => false", () => {
-      const genderValues = [
-        {
-          id: "femme",
-          text: "Femme",
-          isChecked: true,
-        },
-        {
-          id: "homme",
-          text: "Homme",
-          isChecked: false,
-        },
-      ]
 
+    test("Should return false when form is only partially completed", () => {
       const ageValues = [
         {
           id: "-18ans",
@@ -116,7 +169,7 @@ describe("Questionnaire démographique", () => {
         },
       ]
 
-      const entourageValues = [
+      const availableRelativesValues = [
         {
           id: "oui",
           text: "Oui",
@@ -131,89 +184,52 @@ describe("Questionnaire démographique", () => {
 
       expect(
         checkIsFormCompleted(
-          genderValues,
+          completedGenderValues,
           ageValues,
           undefined,
           situationValues,
-          entourageValues
+          availableRelativesValues
         )
       ).toBeFalsy()
     })
-    test("Genre + Age + CP + situation + entourage complétés => true", () => {
-      const genderValues = [
-        {
-          id: "femme",
-          text: "Femme",
-          isChecked: true,
-        },
-        {
-          id: "homme",
-          text: "Homme",
-          isChecked: false,
-        },
-      ]
 
-      const ageValues = [
-        {
-          id: "-18ans",
-          text: "-18 ans",
-          isChecked: true,
-        },
-        {
-          id: "18-25ans",
-          text: "18 - 25 ans",
-          isChecked: false,
-        },
-      ]
-
-      const jobValues = { code: "10", libelle: "job" }
-
-      const situationValues = [
-        {
-          id: "attendez1Enfant",
-          text: "Vous attendez un enfant",
-          isChecked: true,
-        },
-        {
-          id: "avezEnfantDeMoinsDe2ans",
-          text: "Vous avez un enfant de moins de 2 ans",
-          isChecked: false,
-        },
-      ]
-
-      const entourageValues = [
-        {
-          id: "oui",
-          text: "Oui",
-          isChecked: true,
-        },
-        {
-          id: "non",
-          text: "Non",
-          isChecked: false,
-        },
-      ]
-
-      const residenceValue = {
-        zipcode: "49000",
-        city: "Écouflant",
-        departmentName: "Maine-et-Loire",
-        departmentNumber: "49",
-        region: "Pays de la Loire",
-        label1Bold: "Écouflant",
-        label2: "49, Maine-et-Loire, Pays de la Loire",
-      }
+    test("Should return true when all form is completed and zip code is an object", () => {
+      expect(
+        checkIsFormCompleted(
+          completedGenderValues,
+          completedAgeValues,
+          completedJobValues,
+          completedResidenceValue,
+          completedSituationValues,
+          completedAvailableRelativesValues
+        )
+      ).toBeTruthy()
+    })
 
+    test("Should return true when all form is completed and zip code is true", () => {
       expect(
         checkIsFormCompleted(
-          genderValues,
-          ageValues,
-          jobValues,
-          residenceValue,
-          situationValues,
-          entourageValues
+          completedGenderValues,
+          completedAgeValues,
+          completedJobValues,
+          true,
+          completedSituationValues,
+          completedAvailableRelativesValues
         )
       ).toBeTruthy()
     })
+
+    test("Should return false when all form is completed and zip code is false", () => {
+      expect(
+        checkIsFormCompleted(
+          completedGenderValues,
+          completedAgeValues,
+          completedJobValues,
+          false,
+          completedSituationValues,
+          completedAvailableRelativesValues
+        )
+      ).toBeFalsy()
+    })
   })
 })
diff --git a/__tests__/utils/components/auto-complete-zipcode.test.js b/__tests__/utils/components/auto-complete-zipcode.test.js
@@ -1,4 +1,7 @@
-import { cityInformation } from "../../../src/utils/components/auto-complete-zipcode.utils"
+import {
+  cityInformation,
+  isValidZipcode,
+} from "../../../src/utils/components/auto-complete-zipcode.utils"
 
 describe("AutoCompleteZipcode Utils", () => {
   describe("CityInformation", () => {
@@ -83,4 +86,22 @@ describe("AutoCompleteZipcode Utils", () => {
       expect(result).toEqual(expected)
     })
   })
+
+  describe("isValidZipcode", () => {
+    test("Should return true when zip code has 5 digits", () => {
+      expect(isValidZipcode("44000")).toBeTruthy()
+    })
+    test("Should return false when zip code has less than 5 digits", () => {
+      expect(isValidZipcode("44")).toBeFalsy()
+    })
+    test("Should return false when zip code has more than 5 digits", () => {
+      expect(isValidZipcode("440000")).toBeFalsy()
+    })
+    test("Should return false when zip code is not a number and has 5 characters", () => {
+      expect(isValidZipcode("aaaaa")).toBeFalsy()
+    })
+    test("Should return trfalseue when zip code is not a number and has less than 5 characters", () => {
+      expect(isValidZipcode("aa")).toBeFalsy()
+    })
+  })
 })
diff --git a/pages/ab-testing/demographic-data-survey.js b/pages/ab-testing/demographic-data-survey.js
@@ -13,7 +13,7 @@ import {
 import {
   ageValues,
   convertArraySituationsToString,
-  entourageValues,
+  availableRelativesValues,
   genderValues,
   situationValues,
 } from "../../src/utils/ab-testing/demographic-data.utils"
@@ -30,13 +30,15 @@ export default function DemographicDataSurvey() {
 
   const localeSelected = StorageUtils.getLocaleInLocalStorage()
   const [showDataDetails, setShowDataDetails] = useState(false)
-  const [isValudateButtonEnabled, setValudateButtonEnabled] = useState(true)
+  const [isValidateButtonEnabled, setValidateButtonEnabled] = useState(true)
   const [isLoading, setLoading] = useState(false)
+  const [isAutoCompleteZipCodeValid, setIsAutoCompleteZipCodeValid] =
+    useState(false)
 
   const [genderItems, setGenderItems] = useState(genderValues)
   const [ageItems, setAgeItems] = useState(ageValues)
   const [situationItems, setSituationItems] = useState(situationValues)
-  const [entourageItems, setEntourageItems] = useState(entourageValues)
+  const [entourageItems, setEntourageItems] = useState(availableRelativesValues)
   const [residenceValue, setResidenceValue] = useState()
   const [jobValue, setJobValue] = useState()
 
@@ -48,18 +50,18 @@ export default function DemographicDataSurvey() {
       genderItems,
       ageItems,
       jobValue,
-      residenceValue,
+      isAutoCompleteZipCodeValid,
       situationItems,
       entourageItems
     )
-    setValudateButtonEnabled(isCompleted)
+    setValidateButtonEnabled(isCompleted)
   }, [
     genderItems,
     ageItems,
     jobValue,
     situationItems,
     entourageItems,
-    residenceValue,
+    isAutoCompleteZipCodeValid,
   ])
 
   const RadioButtonGroup = ({ groupName, data, defaultData, setItems }) => (
@@ -134,7 +136,7 @@ export default function DemographicDataSurvey() {
         <RadioButtonGroup
           groupName="radio-entourage"
           data={entourageItems}
-          defaultData={entourageValues}
+          defaultData={availableRelativesValues}
           setItems={setEntourageItems}
         />
       </fieldset>
@@ -250,7 +252,10 @@ export default function DemographicDataSurvey() {
 
         <div>
           <div className="bloc-name">Code postal de résidence :</div>
-          <AutoCompleteZipCode setCitySelected={setResidenceValue} />
+          <AutoCompleteZipCode
+            setSelectedCity={setResidenceValue}
+            setIsAutoCompleteZipCodeValid={setIsAutoCompleteZipCodeValid}
+          />
         </div>
 
         <SituationBloc />
@@ -260,7 +265,7 @@ export default function DemographicDataSurvey() {
         <div className="button-validation">
           <button
             className="fr-btn fr-btn--lg"
-            disabled={!isValudateButtonEnabled}
+            disabled={!isValidateButtonEnabled}
             onClick={sendData}
           >
             {demographicData?.buttonLabelInInfoDemographicSurvey ?? "Envoyer"}
@@ -276,22 +281,21 @@ export const checkIsFormCompleted = (
   genderData,
   ageData,
   jobData,
-  residenceData,
+  isResidenceDataValid,
   situationData,
   entourageData
 ) => {
   const isGenderCompeleted = genderData?.find((item) => item.isChecked)
   const isAgeCompeleted = ageData?.find((item) => item.isChecked)
   const isJobSelected = jobData != undefined
-  const isResidenceCompeleted = residenceData != undefined
   const isSituationCompeleted = situationData?.find((item) => item.isChecked)
   const isEntourageCompeleted = entourageData?.find((item) => item.isChecked)
 
   return (
     isGenderCompeleted &&
     isAgeCompeleted &&
     isJobSelected &&
-    isResidenceCompeleted &&
+    isResidenceDataValid &&
     isSituationCompeleted &&
     isEntourageCompeleted
   )