feat(admin): added an add competence button to the updateCompetenceBl…

…oc form
SocialGouv · Nov 13, 2024 · 552a830 · 552a830
1 parent cb776f0
commit 552a830
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts b/...update-certification-competence-bloc-page/update-certification-competence-bloc-page.cy.ts
@@ -82,4 +82,20 @@ context("when i access the update certification page ", () => {
       "@updateCertificationCompetenceBlocForUpdateCertificationCompetenceBlocPage",
     );
   });
+
+  it("let me add a new competence bloc", function () {
+    interceptCertificationCompetenceBloc();
+    cy.admin(
+      "http://localhost:3003/admin2/certifications-v2/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b/bloc-competence/008a6fab-55ad-4412-ab17-56bc4b8e2fd0/",
+    );
+    cy.wait("@activeFeaturesForConnectedUser");
+    cy.wait("@getMaisonMereCGUQuery");
+    cy.wait("@getCompetenceBlocForUpdateCompetenceBlocPage");
+
+    cy.get('[data-test="competence-list"] input').should("have.length", 4);
+
+    cy.get('[data-test="add-competence-button"]').click();
+
+    cy.get('[data-test="competence-list"] input').should("have.length", 5);
+  });
 });
diff --git a/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx b/...n)/certifications-v2/[certificationId]/bloc-competence/_components/CompetenceBlocForm.tsx
@@ -1,4 +1,5 @@
 import { FormButtons } from "@/components/form/form-footer/FormButtons";
+import { Button } from "@codegouvfr/react-dsfr/Button";
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -46,10 +47,11 @@ export const CompetenceBlocForm = ({
     formState: { isDirty, isSubmitting, errors },
   } = methods;
 
-  const { fields: competencesFields } = useFieldArray({
-    control,
-    name: "competences",
-  });
+  const { fields: competencesFields, append: appendCompetenceField } =
+    useFieldArray({
+      control,
+      name: "competences",
+    });
 
   const handleFormSubmit = handleSubmit(onSubmit, (e) => console.log(e));
   return (
@@ -63,7 +65,10 @@ export const CompetenceBlocForm = ({
           ...register("label"),
         }}
       />
-      <div className="flex flex-col gap-2 mt-6 pl-4">
+      <div
+        className="flex flex-col gap-2 mt-6 mb-2 pl-4"
+        data-test="competence-list"
+      >
         {competencesFields.map((c, cIndex) => (
           <Input
             className="mb-0"
@@ -77,6 +82,17 @@ export const CompetenceBlocForm = ({
           />
         ))}
       </div>
+      <Button
+        data-test="add-competence-button"
+        priority="tertiary no outline"
+        iconId="fr-icon-add-line"
+        iconPosition="left"
+        onClick={() =>
+          appendCompetenceField({ label: "", index: competencesFields.length })
+        }
+      >
+        Ajouter une compétence
+      </Button>
       <FormButtons
         backUrl={backUrl}
         formState={{