38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
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,
|
|
);
|
|
});
|
|
});
|