import { render } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import InputText from "./InputText";

vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { exists: () => false },
  }),
}));

describe("InputText accessibility attributes", () => {
  it("links text inputs to their error descriptions", () => {
    const { container } = render(
      <InputText
        id="email"
        name="email"
        title="Email"
        type="email"
        defaultValue="not-an-email"
        ariaDescribedBy="email-error"
        ariaInvalid
      />,
    );

    const input = container.querySelector("input");
    // Subframe's TextInput associates its label implicitly by wrapping the input in the
    // <label> element (a valid WCAG name source), rather than via an explicit for/id pair.
    const label = input?.closest("label");

    expect(label).not.toBeNull();
    expect(label?.textContent).toContain("Email");
    expect(input?.getAttribute("aria-describedby")).toBe("email-error");
    expect(input?.getAttribute("aria-invalid")).toBe("true");
  });

  it("links textareas to their error descriptions", () => {
    const { container } = render(<InputText id="message" name="message" title="Message" rows={4} defaultValue="" ariaDescribedBy="message-error" isError />);

    const textarea = container.querySelector("textarea");

    expect(textarea?.getAttribute("aria-describedby")).toBe("message-error");
    expect(textarea?.getAttribute("aria-invalid")).toBe("true");
  });
});