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,
    );
  });
});