/**
 * Tests for SkeletonChart component.
 */

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

describe("SkeletonChart", () => {
  it("renders with default bar count", () => {
    const { container } = render(<SkeletonChart />);
    const bars = container.querySelectorAll('[role="presentation"] > div');
    expect(bars).toHaveLength(7);
  });

  it("renders with custom bar count", () => {
    const { container } = render(<SkeletonChart barCount={12} />);
    const bars = container.querySelectorAll('[role="presentation"] > div');
    expect(bars).toHaveLength(12);
  });

  it("applies custom height", () => {
    const { container } = render(<SkeletonChart height={300} />);
    const wrapper = container.querySelector('[role="presentation"]') as HTMLElement;
    expect(wrapper).toHaveStyle("height: 300px");
  });

  it("marks bars as aria-hidden", () => {
    const { container } = render(<SkeletonChart barCount={5} />);
    const bars = container.querySelectorAll('[aria-hidden="true"]');
    expect(bars).toHaveLength(5);
  });

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