// GrowthArchiveChart 组件单测（mock recharts）
// 依据：参考项目差距补齐 - 成长档案（班级均对比线）
// 覆盖：标题渲染 / 两条 Line / 数据映射 / 学科后缀 / 空数据点

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

// mock recharts：渲染简单 div 包裹子元素，便于断言
vi.mock("recharts", () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  LineChart: ({
    children,
    data,
  }: {
    children: React.ReactNode;
    data: unknown[];
  }) => (
    <div data-testid="line-chart" data-length={data.length}>
      {children}
    </div>
  ),
  Line: ({
    dataKey,
    stroke,
    strokeDasharray,
  }: {
    dataKey: string;
    stroke: string;
    strokeDasharray?: string;
  }) => (
    <div
      data-testid="line"
      data-key={dataKey}
      data-stroke={stroke}
      data-dash={strokeDasharray}
    />
  ),
  XAxis: (_props: unknown) => <div data-testid="x-axis" />,
  YAxis: (_props: unknown) => <div data-testid="y-axis" />,
  CartesianGrid: (_props: unknown) => <div data-testid="cartesian-grid" />,
  Tooltip: (_props: unknown) => <div data-testid="tooltip" />,
  Legend: (_props: unknown) => <div data-testid="legend" />,
}));

import { GrowthArchiveChart } from "./GrowthArchiveChart";

const mockArchive: GrowthArchive = {
  childId: "student-001",
  subject: "数学",
  dataPoints: [
    { date: "2026-03", studentScore: 82, classAverage: 76 },
    { date: "2026-04", studentScore: 88, classAverage: 78 },
    { date: "2026-05", studentScore: 92, classAverage: 79 },
    { date: "2026-06", studentScore: 90, classAverage: 80 },
  ],
};

describe("GrowthArchiveChart 渲染", () => {
  it("渲染标题成长档案并携带学科后缀", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    expect(screen.getByText(/成长档案/)).toBeInTheDocument();
    expect(screen.getByText(/数学/)).toBeInTheDocument();
  });

  it("渲染 ResponsiveContainer", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
  });

  it("渲染 LineChart 并传入 4 条数据", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    const chart = screen.getByTestId("line-chart");
    expect(chart).toHaveAttribute("data-length", "4");
  });

  it("渲染两条 Line（学生分数 + 班级平均）", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    const lines = screen.getAllByTestId("line");
    expect(lines).toHaveLength(2);
    expect(lines[0]).toHaveAttribute("data-key", "学生分数");
    expect(lines[1]).toHaveAttribute("data-key", "班级平均");
  });

  it("班级平均线为虚线（strokeDasharray=5 5）", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    const lines = screen.getAllByTestId("line");
    expect(lines[1]).toHaveAttribute("data-dash", "5 5");
  });

  it("学生分数线为实线（无 strokeDasharray）", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    const lines = screen.getAllByTestId("line");
    expect(lines[0]).not.toHaveAttribute("data-dash");
  });

  it("渲染 XAxis / YAxis / CartesianGrid / Tooltip / Legend", () => {
    render(<GrowthArchiveChart archive={mockArchive} />);
    expect(screen.getByTestId("x-axis")).toBeInTheDocument();
    expect(screen.getByTestId("y-axis")).toBeInTheDocument();
    expect(screen.getByTestId("cartesian-grid")).toBeInTheDocument();
    expect(screen.getByTestId("tooltip")).toBeInTheDocument();
    expect(screen.getByTestId("legend")).toBeInTheDocument();
  });
});

describe("GrowthArchiveChart 数据映射", () => {
  it("空 dataPoints 数组渲染 0 条数据", () => {
    const emptyArchive: GrowthArchive = {
      childId: "student-001",
      subject: "数学",
      dataPoints: [],
    };
    render(<GrowthArchiveChart archive={emptyArchive} />);
    const chart = screen.getByTestId("line-chart");
    expect(chart).toHaveAttribute("data-length", "0");
  });

  it("多条数据点正确映射", () => {
    const archive: GrowthArchive = {
      childId: "student-001",
      subject: "英语",
      dataPoints: Array.from({ length: 6 }, (_, i) => ({
        date: `2026-${String(i + 1).padStart(2, "0")}`,
        studentScore: 80 + i,
        classAverage: 70,
      })),
    };
    render(<GrowthArchiveChart archive={archive} />);
    const chart = screen.getByTestId("line-chart");
    expect(chart).toHaveAttribute("data-length", "6");
  });

  it("无 subject 时标题不显示学科后缀", () => {
    const archive: GrowthArchive = {
      childId: "student-001",
      subject: "",
      dataPoints: mockArchive.dataPoints,
    };
    render(<GrowthArchiveChart archive={archive} />);
    expect(screen.getByText("成长档案")).toBeInTheDocument();
  });
});
