First commit

tests/forms.test.ts

@@ -0,0 +1,37 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+import DsCheckbox from "../src/components/forms/DsCheckbox.vue";
+import DsTextInput from "../src/components/forms/DsTextInput.vue";
+
+describe("form controls", () => {
+  it("associates labels, help, errors and updates v-model", async () => {
+    const view = render(DsTextInput, {
+      props: {
+        label: "Correo",
+        description: "Usaremos tu correo de trabajo.",
+        error: "El correo no es válido.",
+        modelValue: "",
+      },
+    });
+    const input = view.getByLabelText("Correo (Opcional)") as HTMLInputElement;
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(input.getAttribute("aria-describedby")).toContain("description");
+    expect(input.getAttribute("aria-describedby")).toContain("error");
+    await fireEvent.update(input, "omar@example.com");
+    expect(view.emitted()["update:modelValue"]?.[0]).toEqual([
+      "omar@example.com",
+    ]);
+  });
+
+  it("supports a boolean v-model and disabled state", async () => {
+    const view = render(DsCheckbox, {
+      props: { label: "Acepto", modelValue: false },
+    });
+    await fireEvent.click(view.getByRole("checkbox", { name: "Acepto" }));
+    expect(view.emitted()["update:modelValue"]?.[0]).toEqual([true]);
+    await view.rerender({ disabled: true });
+    expect((view.getByRole("checkbox") as HTMLInputElement).disabled).toBe(
+      true,
+    );
+  });
+});