/**
 * Tests for SkeletonTable component.
 */

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

describe("SkeletonTable", () => {
  it("renders with default row and cell count", () => {
    const { container } = render(<SkeletonTable />);
    const wrapper = container.querySelector('[role="presentation"]') as HTMLElement;
    const rows = wrapper?.children ?? [];
    expect(rows).toHaveLength(5);
  });

  it("renders with custom row count", () => {
    const { container } = render(<SkeletonTable rowCount={10} />);
    const wrapper = container.querySelector('[role="presentation"]') as HTMLElement;
    const rows = wrapper?.children ?? [];
    expect(rows).toHaveLength(10);
  });

  it("renders with custom cell count per row", () => {
    const { container } = render(<SkeletonTable rowCount={2} cellCount={8} />);
    const wrapper = container.querySelector('[role="presentation"]') as HTMLElement;
    const rows = Array.from(wrapper?.children ?? []);
    let totalCells = 0;
    rows.forEach((row) => {
      totalCells += row.children.length;
    });
    expect(totalCells).toBe(16); // 2 rows × 8 cells
  });

  it("has proper structure", () => {
    const { container } = render(<SkeletonTable rowCount={1} cellCount={3} />);
    const table = container.querySelector('div[role="presentation"]');
    expect(table).toBeInTheDocument();
  });
});
