import { render, screen } from "@testing-library/react";
import { VisuallyHidden } from "./VisuallyHidden";

describe("VisuallyHidden", () => {
  it("renders children", () => {
    render(<VisuallyHidden>Hidden text</VisuallyHidden>);

    expect(screen.getByText("Hidden text")).toBeInTheDocument();
  });

  it("applies hiding styles", () => {
    render(<VisuallyHidden data-testid="hidden">Content</VisuallyHidden>);

    const el = screen.getByTestId("hidden");
    expect(el).toHaveStyle({ position: "absolute" });
    expect(el).toHaveStyle({ width: "1px" });
    expect(el).toHaveStyle({ height: "1px" });
    expect(el).toHaveStyle({ overflow: "hidden" });
  });

  it("forwards custom className", () => {
    render(
      <VisuallyHidden data-testid="hidden" className="custom">
        Content
      </VisuallyHidden>,
    );

    expect(screen.getByTestId("hidden")).toHaveClass("custom");
  });

  it("renders as div by default", () => {
    render(<VisuallyHidden data-testid="hidden">Content</VisuallyHidden>);

    expect(screen.getByTestId("hidden").tagName).toBe("DIV");
  });

  it("changes element type with elementType prop", () => {
    render(
      <VisuallyHidden data-testid="hidden" elementType="span">
        Content
      </VisuallyHidden>,
    );

    expect(screen.getByTestId("hidden").tagName).toBe("SPAN");
  });

  it("forwards role prop", () => {
    render(
      <VisuallyHidden data-testid="hidden" role="status">
        Content
      </VisuallyHidden>,
    );

    expect(screen.getByTestId("hidden")).toHaveAttribute("role", "status");
  });

  it("forwards id prop", () => {
    render(
      <VisuallyHidden data-testid="hidden" id="my-id">
        Content
      </VisuallyHidden>,
    );

    expect(screen.getByTestId("hidden")).toHaveAttribute("id", "my-id");
  });
});
