.gitignore and v0.2.0

tests/forms.test.ts

@@ -1,6 +1,8 @@
 import { fireEvent, render } from "@testing-library/vue";
+import { h } from "vue";
 import { describe, expect, it } from "vitest";
 import DsCheckbox from "../src/components/forms/DsCheckbox.vue";
+import DsRadioGroup from "../src/components/forms/DsRadioGroup.vue";
 import DsTextInput from "../src/components/forms/DsTextInput.vue";
 
 describe("form controls", () => {
@@ -34,4 +36,43 @@ describe("form controls", () => {
       true,
     );
   });
+
+  it("associates checkbox descriptions and errors at the same time", () => {
+    const view = render(DsCheckbox, {
+      props: {
+        label: "Acepto",
+        description: "Lee las condiciones.",
+        error: "Debes aceptar.",
+      },
+    });
+    const checkbox = view.getByRole("checkbox");
+    const describedBy = checkbox.getAttribute("aria-describedby") ?? "";
+    expect(describedBy).toContain("description");
+    expect(describedBy).toContain("error");
+    expect(checkbox.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("gives radio groups unique descriptions and exposes invalid state", () => {
+    const props = {
+      legend: "Plan",
+      name: "plan",
+      options: [{ label: "Profesional", value: "pro" }],
+      description: "Elige un plan.",
+      error: "Selecciona una opción.",
+    };
+    const view = render({
+      setup: () => () =>
+        h("div", [h(DsRadioGroup, props), h(DsRadioGroup, props)]),
+    });
+    const groups = view.getAllByRole("group");
+    const describedBy = groups.map((group) =>
+      group.getAttribute("aria-describedby"),
+    );
+    expect(describedBy[0]).not.toBe(describedBy[1]);
+    expect(describedBy[0]).toContain("description");
+    expect(describedBy[0]).toContain("error");
+    expect(view.getAllByRole("radio")[0]?.getAttribute("aria-invalid")).toBe(
+      "true",
+    );
+  });
 });