brackt/app/components/standings/__tests__/PointProgressionChart.test.tsx

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

describe("PointProgressionChart", () => {
  it("renders empty state when no data is provided", () => {
    render(<PointProgressionChart chartData={[]} teams={[]} />);

    expect(screen.getByText("Point Progression")).toBeInTheDocument();
    expect(screen.getByText("No historical data available yet.")).toBeInTheDocument();
    expect(
      screen.getByText("Point progression will appear once daily snapshots are recorded.")
    ).toBeInTheDocument();
  });

  it("renders chart with data", () => {
    const teams = [
      { id: "team1", name: "Team Alpha" },
      { id: "team2", name: "Team Beta" },
    ];

    const chartData = [
      { date: "2024-01-01", "Team Alpha": 50, "Team Beta": 40 },
      { date: "2024-01-02", "Team Alpha": 75, "Team Beta": 60 },
      { date: "2024-01-03", "Team Alpha": 100, "Team Beta": 80 },
    ];

    render(<PointProgressionChart chartData={chartData} teams={teams} />);

    expect(screen.getByText("Point Progression")).toBeInTheDocument();
    expect(screen.getByText(/3 days of data/)).toBeInTheDocument();
  });

  it("renders singular 'day' when only one data point", () => {
    const teams = [{ id: "team1", name: "Team Alpha" }];
    const chartData = [{ date: "2024-01-01", "Team Alpha": 50 }];

    render(<PointProgressionChart chartData={chartData} teams={teams} />);

    expect(screen.getByText(/1 day of data/)).toBeInTheDocument();
  });

  it("displays correct data point count in description", () => {
    const teams = [
      { id: "team1", name: "Team Alpha" },
      { id: "team2", name: "Team Beta" },
      { id: "team3", name: "Team Gamma" },
    ];

    const chartData = [
      { date: "2024-01-01", "Team Alpha": 50, "Team Beta": 40, "Team Gamma": 30 },
    ];

    render(<PointProgressionChart chartData={chartData} teams={teams} />);

    expect(screen.getByText("Point Progression")).toBeInTheDocument();
    expect(screen.getByText(/1 day of data/)).toBeInTheDocument();
  });

  it("handles single team data", () => {
    const teams = [{ id: "team1", name: "Solo Team" }];
    const chartData = [
      { date: "2024-01-01", "Solo Team": 10 },
      { date: "2024-01-02", "Solo Team": 20 },
      { date: "2024-01-03", "Solo Team": 30 },
    ];

    render(<PointProgressionChart chartData={chartData} teams={teams} />);

    expect(screen.getByText("Point Progression")).toBeInTheDocument();
    expect(screen.getByText(/3 days of data/)).toBeInTheDocument();
  });

  it("renders with many teams without errors", () => {
    // Test color cycling with more teams than colors
    const teams = Array.from({ length: 12 }, (_, i) => ({
      id: `team${i}`,
      name: `Team ${i + 1}`,
    }));

    const chartData = [
      {
        date: "2024-01-01",
        ...Object.fromEntries(teams.map((t, i) => [t.name, (i + 1) * 10])),
      },
    ];

    render(<PointProgressionChart chartData={chartData} teams={teams} />);

    expect(screen.getByText("Point Progression")).toBeInTheDocument();
    expect(screen.getByText(/1 day of data/)).toBeInTheDocument();
  });
});