1511 ameliorer le remplissage des revenus (#4099)

* fix: Utilise le nullish coalescing

Note: à l'inverse du logical OR ça permet de ne pas fallback sur l'opérande de droites si
la valeur de l'opérande de gauche est égale à 0 ou est la chaine vide.
Ça permet d'afficher le 0

Pour info ça fix le problème, mais ça en créé d'autres :
- le fait qu'on ne puisse plus mettre les champs à vide (1)
- le fait que désormais les champs sont à 0 et non à vide (2)

* fix: fix de (1) si la chaine est vide on ne force pas de mettre à 0

Note: avant c'était forcé de mettre à 0 puis le 0 fallback sur vide :
ici on évite ces aller-retours

* fix: fix de (2) initialiser les montants à vide

Note: avant on avait le montant à 0 mais ensuite on l'affichait vide
via le OR logic

⚠️ vérifier que ça casse pas la requête openfisca

* fix: Ne pas accepter des valeurs qui ne sont pas des nombre pour InputNumber

* feat: Ajout d'un test end-to-end

cypress/e2e/student.cy.js

@@ -45,6 +45,7 @@ context("Full simulation", () => {
 
     revenu.fill_ressources_types(["salaire_net"])
     revenu.fillConstantRevenu(1101.42)
+    revenu.checkFieldRequired()
     revenu.fillRevenuBrut(1)
 
     projet.fill__interetsAidesVelo(["velo_mecanique", "velo_electrique"])

cypress/utils/form.js

@@ -2,6 +2,12 @@ import { urlInclude } from "./controllers.js"
 
 const submit = () => cy.get('button[type="submit"]:contains("Suivant")').click()
 
+const checkRequiredField = () => {
+  submit()
+  cy.get(".fr-alert--warning").should("exist")
+  cy.get(".fr-alert--warning").should("contain", "Ce champ est obligatoire")
+}
+
 const fillRadio = (url, value, noSubmit) => {
   urlInclude(url)
   cy.checkA11y()
@@ -59,6 +65,7 @@ const fillPatrimoine = () => {
 
 export default {
   submit,
+  checkRequiredField,
   fillRadio,
   fillCheckboxes,
   fillNumber,

cypress/utils/revenu.js

@@ -1,4 +1,4 @@
-import { submit } from "./form.js"
+import { submit, checkRequiredField } from "./form.js"
 import { urlInclude } from "./controllers.js"
 
 const fill_ressources_types = (types = []) => {
@@ -51,6 +51,13 @@ const fillInconstantRevenu = (revenus) => {
   submit()
 }
 
+const checkFieldRequired = () => {
+  checkRequiredField()
+  cy.get("form").find('input[type="text"]').type(1)
+  cy.get("form").find('input[type="text"]').clear()
+  checkRequiredField()
+}
+
 const fillRevenuBrut = (revenu) => {
   cy.get("form").find('input[type="text"]').type(revenu)
   cy.checkA11y()
@@ -79,6 +86,7 @@ export default {
   fill_ressources_types,
   fillConstantRevenu,
   fillInconstantRevenu,
+  checkFieldRequired,
   fillRevenuBrut,
   fillChildrenRessources,
 }

src/components/input-number.vue

@@ -45,13 +45,20 @@ export default {
   computed: {
     model: {
       get() {
-        return this.value || this.modelValue || ""
+        return this.value ?? this.modelValue ?? ""
       },
       set(value) {
         if (typeof value === "string") {
           value = this.parseInputString(value)
         }
-        value = value == "" ? 0 : value
+
+        if (value === "") {
+          this.error = false
+          this.$emit("update:modelValue", "")
+          this.$emit("input-error", this.error)
+          return
+        }
+
         const valid = !isNaN(parseFloat(value))
         const floor = this.min == null || this.min <= parseFloat(value)
         const ceiling = this.max == null || this.max >= parseFloat(value)

src/views/simulation/Ressources/montants.vue

@@ -105,7 +105,7 @@ export default {
     this.types.forEach((type) => {
       Object.keys(type.amounts).forEach((period) => {
         if (type.amounts[period] === null || type.amounts[period] === "") {
-          type.amounts[period] = 0
+          type.amounts[period] = ""
         }
       })
     })
@@ -192,7 +192,11 @@ export default {
         path: this.$route.path,
         value: this.types.map((type) => {
           Object.keys(type.amounts).forEach(function (period) {
-            if (type.amounts[period] === null || isNaN(type.amounts[period])) {
+            if (
+              type.amounts[period] === null ||
+              isNaN(type.amounts[period]) ||
+              type.amounts[period] === ""
+            ) {
               type.amounts[period] = 0
             }
           })

src/views/simulation/mutualized-step.vue

@@ -190,7 +190,10 @@ export default {
     requiredValueMissing(submit) {
       const hasError =
         this.value === undefined ||
-        (this.questionType === "text" && !this.value)
+        (this.questionType === "text" && !this.value) ||
+        (this.questionType === "number" &&
+          typeof this.value !== "number" &&
+          !isNaN(this.value))
 
       if (submit) {
         this.store.updateError(hasError && "Ce champ est obligatoire.")

tests/unit/components/input-number.spec.ts

@@ -24,7 +24,7 @@ function testInputNumber(
 }
 
 describe("input-number.vue", () => {
-  it("accept valid numbers", async () => {
+  it("accept valid values", async () => {
     const testSet = [
       { input: "1", result: 1 },
       { input: "27,45", result: 27.45 },
@@ -33,7 +33,7 @@ describe("input-number.vue", () => {
       { input: "044", result: 44 },
       { input: "-1.45", result: -1.45 },
       { input: "200.0", result: 200 },
-      { input: "", result: 0 },
+      { input: "", result: "" },
     ]
 
     for (const test of testSet) {
@@ -59,7 +59,7 @@ describe("input-number.vue", () => {
   it("reject invalid numbers", async () => {
     const testSet = [
       { input: "1+2", result: 12 },
-      { input: "Infinity", result: 0 },
+      { input: "Infinity", result: "" },
       { input: "1e25", result: 125 },
       { input: undefined, result: undefined, error: true },
     ]