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

import { Skeleton } from "./skeleton";

describe("Skeleton", () => {
  it("renders as an aria-hidden placeholder with root slot", () => {
    render(<Skeleton data-testid="skeleton" />);

    const skeleton = screen.getByTestId("skeleton");

    expect(skeleton).toHaveAttribute("data-slot", "root");
    expect(skeleton).toHaveAttribute("data-shape", "line");
    expect(skeleton).toHaveAttribute("data-tone", "default");
    expect(skeleton).toHaveAttribute("aria-hidden", "true");
  });

  it("supports alternate shape and tone hooks", () => {
    render(<Skeleton data-testid="skeleton" shape="avatar" tone="muted" />);

    const skeleton = screen.getByTestId("skeleton");

    expect(skeleton).toHaveAttribute("data-shape", "avatar");
    expect(skeleton).toHaveAttribute("data-tone", "muted");
  });
});