feat(frontend): add syntech to calculateur (#1026)

* refactor(frontend): add ratio to final screen bar and minor changes * refactor(frontend): add step actions * feat(frontend): add ccn 1486 * feat(frontend): add tests * feat(frontend): add snapshots * refactor(frontend): feedbacks
SocialGouv · Jul 22, 2019 · 3cfdb0c · 3cfdb0c
1 parent df94e6f
commit 3cfdb0c
Show file tree

Hide file tree

Showing 58 changed files with 5,611 additions and 353 deletions.
diff --git a/...s/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/stepReducer.test.js b/...s/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/stepReducer.test.js
@@ -1,6 +1,6 @@
-import { stepReducer, initialSteps } from "../stepReducer";
+import { stepPrime, stepReducer, initialSteps } from "../stepReducer";
 
-describe("getInitialSteps()", () => {
+describe("initialSteps", () => {
   it("should return default steps", () => {
     expect(initialSteps).toMatchInlineSnapshot(`
 Array [
@@ -12,7 +12,7 @@ Array [
   Object {
     "component": [Function],
     "label": "Informations générales",
-    "name": "infoGenerales",
+    "name": "info_generales",
   },
   Object {
     "component": [Function],
@@ -27,40 +27,57 @@ Array [
   Object {
     "component": [Function],
     "label": "Indemnité légale",
-    "name": "indemniteLegale",
+    "name": "indemnite_legale",
   },
 ]
 `);
   });
 });
 
 describe("reducer", () => {
-  it("should handle reset action", () => {
+  it("handles reset action", () => {
     expect(stepReducer([], { type: "reset" })).toEqual(initialSteps);
   });
-  it("should handle add_primes after salaires", () => {
+  it("handles add_step after salaires", () => {
     const initialSteps = [{ name: "salaires" }];
-    const newState = stepReducer(initialSteps, { type: "add_primes" });
+    const newState = stepReducer(initialSteps, {
+      type: "add_step",
+      payload: { insertAfter: "salaires", step: stepPrime }
+    });
 
-    expect(newState.findIndex(step => step.name === "primes")).toEqual(1);
+    expect(newState.findIndex(step => step.name === "primes")).toBe(1);
+    expect(newState[1]).toEqual(stepPrime);
   });
-  it("should handle add_primes after salaires", () => {
-    const initialSteps = [];
-    const newState = stepReducer(initialSteps, { type: "add_primes" });
+  it("does not add step at all if there is no previous step that matches", () => {
+    const initialSteps = [{}, {}];
+    const newState = stepReducer(initialSteps, {
+      type: "add_step",
+      payload: { insertAfter: "salaires", step: stepPrime }
+    });
 
-    expect(newState.findIndex(step => step.name === "primes")).toEqual(0);
+    expect(newState.findIndex(step => step.name === stepPrime.name)).toEqual(0);
   });
-  it("should handle remove_primes", () => {
-    const initialSteps = [];
-    const newState = stepReducer(initialSteps, { type: "remove_primes" });
+  it("handles remove_step", () => {
+    const initialSteps = [{}, stepPrime, {}];
+    const newState = stepReducer(initialSteps, {
+      type: "remove_step",
+      payload: stepPrime.name
+    });
 
-    expect(newState.findIndex(step => step.name === "primes")).toEqual(-1);
+    expect(newState.findIndex(step => step.name === stepPrime.name)).toEqual(
+      -1
+    );
   });
-  it("should not fail when handle remove_primes", () => {
-    const initialSteps = [];
-    const newState = stepReducer(initialSteps, { type: "remove_primes" });
+  it("does not fail when removing unexisting step", () => {
+    const initialSteps = [{}];
+    const newState = stepReducer(initialSteps, {
+      type: "remove_step",
+      payload: { insertAfter: "salaires", stepPrime }
+    });
 
-    expect(newState.findIndex(step => step.name === "primes")).toEqual(-1);
+    expect(newState.findIndex(step => step.name === stepPrime.name)).toEqual(
+      -1
+    );
   });
   it("should handle add_branche", () => {
     const initialSteps = [];

diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/branches.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/branches.js
@@ -27,6 +27,11 @@ export const branches = [
     value: "1351",
     label: "Convention collective nationale de la Prévention et sécurité"
   },
+  {
+    value: "1486",
+    label:
+      "Convention collective nationale des bureaux d'études techniques, des cabinets d'ingénieurs-conseils et des sociétés de conseils du 15 décembre 1987"
+  },
   {
     value: "1534",
     label:

diff --git a/...end/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap b/...end/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> should render 1`] = `
-.c20 {
+.c21 {
   padding: 0.625rem 1rem;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -23,21 +23,21 @@ exports[`<Result /> should render 1`] = `
   border-bottom-color: #0053b3;
 }
 
-.c20:not([disabled]):hover,
-.c20:not([disabled]):focus {
+.c21:not([disabled]):hover,
+.c21:not([disabled]):focus {
   background: #07f;
   color: #fff;
 }
 
-.c20:not([disabled]):active {
+.c21:not([disabled]):active {
   color: #fff;
   background: #1a85ff;
   border-width: 2px 1px 1px 1px;
   border-color: #006be6;
   outline: none;
 }
 
-.c20[aria-pressed="true"] {
+.c21[aria-pressed="true"] {
   color: #fff;
   background: #07f;
   border-width: 2px 1px 1px 1px;
@@ -46,21 +46,21 @@ exports[`<Result /> should render 1`] = `
   box-shadow: inset 0 1px 2px 0 #0053b3;
 }
 
-.c20[aria-pressed="true"]:not([disabled]):hover,
-.c20[aria-pressed="true"]:not([disabled]):focus {
+.c21[aria-pressed="true"]:not([disabled]):hover,
+.c21[aria-pressed="true"]:not([disabled]):focus {
   background-color: #006be6;
 }
 
-.c20[aria-pressed="true"]:not([disabled]):active {
+.c21[aria-pressed="true"]:not([disabled]):active {
   border-top-color: #0053b3;
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   color: rgba(255,255,255,0.4);
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -82,7 +82,7 @@ exports[`<Result /> should render 1`] = `
   box-shadow: none;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -103,7 +103,7 @@ exports[`<Result /> should render 1`] = `
   background-color: #d7e8f9;
 }
 
-.c19 {
+.c20 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -142,7 +142,7 @@ exports[`<Result /> should render 1`] = `
 .c6 {
   border-radius: 0.25rem;
   background-color: #53657d;
-  width: 50%;
+  width: calc(50% * 0.9533911504424778);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -158,7 +158,7 @@ exports[`<Result /> should render 1`] = `
 .c15 {
   border-radius: 0.25rem;
   background-color: #0053b3;
-  width: 50%;
+  width: calc(50% * 1);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -212,10 +212,6 @@ exports[`<Result /> should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  margin: 2rem -0.625rem;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
 }
 
 .c3 {
@@ -236,6 +232,44 @@ exports[`<Result /> should render 1`] = `
   font-size: 1.375rem;
 }
 
+.c17 {
+  margin: 1.25rem 0;
+}
+
+@media (max-width:980px) {
+  .c5 {
+    -webkit-flex-flow: wrap;
+    -ms-flex-flow: wrap;
+    flex-flow: wrap;
+  }
+}
+
+@media (max-width:980px) {
+  .c6 {
+    width: calc(100% * 0.9533911504424778);
+  }
+}
+
+@media (max-width:980px) {
+  .c15 {
+    width: calc(100% * 1);
+  }
+}
+
+@media (max-width:980px) {
+  .c7 {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width:980px) {
+  .c16 {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
 <div>
   <h2
     class="c0"
@@ -453,10 +487,10 @@ exports[`<Result /> should render 1`] = `
     </section>
   </div>
   <div
-    class="c17"
+    class="c17 c18"
   >
     <div
-      class="c18"
+      class="c19"
     >
       <svg
         fill="none"
@@ -489,18 +523,15 @@ exports[`<Result /> should render 1`] = `
       </svg>
     </div>
     <div
-      class="c19"
+      class="c20"
       role="alert"
     >
       Un accord collectif d’entreprise, le contrat de travail et un usage peuvent prévoir une formule de calcul plus avantageuse pour le salarié. Dans ce cas, le salarié perçoit l’indemnité la plus élevée.
-       
     </div>
   </div>
-  <br />
-  <br />
   <button
     aria-pressed="false"
-    class="c20"
+    class="c21"
   >
     Recommencer une simulation
   </button>