/**
 * Tests for SkeletonFormField component.
 */

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

describe("SkeletonFormField", () => {
  it("renders label by default", () => {
    const { container } = render(<SkeletonFormField />);
    const elements = container.querySelectorAll('[role="presentation"] > div');
    expect(elements).toHaveLength(2);
  });

  it("hides label when showLabel is false", () => {
    const { container } = render(<SkeletonFormField showLabel={false} />);
    const elements = container.querySelectorAll('[role="presentation"] > div');
    expect(elements).toHaveLength(1);
  });

  it("applies custom input height", () => {
    const { container } = render(<SkeletonFormField inputHeight={48} />);
    const divs = container.querySelectorAll('[role="presentation"] > div');
    const input = divs[divs.length - 1] as HTMLElement;
    expect(input).toHaveStyle("height: 48px");
  });

  it("marks elements as aria-hidden", () => {
    const { container } = render(<SkeletonFormField />);
    const hidden = container.querySelectorAll('[aria-hidden="true"]');
    expect(hidden.length).toBeGreaterThan(0);
  });

  it("has proper accessibility attributes", () => {
    const { container } = render(<SkeletonFormField />);
    const field = container.querySelector('[role="presentation"]');
    expect(field).toBeInTheDocument();
  });
});
