6ef829f667
- Added recharts dependency to package.json for data visualization. - Implemented PointProgressionChart component to display team point progression over time. - Updated scoring-system.md to reflect completion of historical views and added implementation notes. - Created unit tests for PointProgressionChart to ensure correct rendering and data handling. - Developed season completion detection and percentage calculation functions in season-helpers.server.ts. - Added tests for season completion logic and point progression data formatting. - Enhanced league loader to fetch necessary data for current season and teams.
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
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();
|
|
});
|
|
});
|