feat(website): vae collective form submit button is now enabled by default

Author: agarbe

packages/reva-website/src/app/inscription-candidat/vae-collective/_components/VaeCollectiveCodeForm.tsx

@@ -40,7 +40,7 @@ export function VaeCollectiveCodeForm() {
     register,
     handleSubmit,
     watch,
-    formState: { errors, isDirty },
+    formState: { errors },
     setError,
     clearErrors,
   } = useForm<FormData>({
@@ -52,7 +52,6 @@ export function VaeCollectiveCodeForm() {
   });
 
   const codeValue = watch("code");
-  const isFormComplete = codeValue.length === 8;
 
   const { refetch: validateCode, isLoading } = useQuery({
     queryKey: ["validateVaeCollectiveCode", codeValue],
@@ -99,7 +98,7 @@ export function VaeCollectiveCodeForm() {
           className="w-full justify-center"
           priority="primary"
           type="submit"
-          disabled={!isDirty || !isFormComplete || isLoading}
+          disabled={isLoading}
         >
           Accéder à cette VAE collective
         </Button>

packages/reva-website/tests/vae-collective.spec.ts

@@ -95,36 +95,35 @@ test.describe("VAE Collective Code Page", () => {
     ).toBeVisible();
   });
 
-  test("should validate form input constraints", async ({ page, msw }) => {
-    msw.use(
-      fvae.query("getVaeCollectiveCohort", () => {
-        return HttpResponse.json({
-          data: {
-            cohorteVaeCollective: null,
-          },
-        });
-      }),
-    );
-
+  test("should show an error when the code is less than 8 characters", async ({
+    page,
+  }) => {
     const codeInput = page.getByRole("textbox");
+
+    await codeInput.fill("ABC");
+
     const submitButton = page.getByRole("button", {
       name: "Accéder à cette VAE collective",
     });
 
-    await expect(submitButton).toBeDisabled();
+    await submitButton.click();
+
+    await expect(
+      page.getByText("Le code doit contenir exactement 8 caractères"),
+    ).toBeVisible();
+  });
 
-    await codeInput.fill("ABC");
-    await expect(submitButton).toBeDisabled();
+  test("should show an error when the code contains invalid characters", async ({
+    page,
+  }) => {
+    const codeInput = page.getByRole("textbox");
 
-    await codeInput.click();
-    await codeInput.pressSequentially("ABCD1234");
-    await expect(submitButton).toBeEnabled();
+    await codeInput.fill("ABCD####");
 
-    await codeInput.clear();
-    await codeInput.click();
-    await codeInput.pressSequentially("ABCD####");
+    const submitButton = page.getByRole("button", {
+      name: "Accéder à cette VAE collective",
+    });
 
-    await expect(submitButton).toBeEnabled();
     await submitButton.click();
 
     await expect(