import { describe, expect, it } from "vitest";
import { funnelChart, trendChart } from "../components/charts";

describe("accessible charts", () => {
  it("provides a titled SVG and complete data table for trends", () => {
    const html = trendChart([
      { date: "2026-08-16", registrations: 12, creditsUsed: 345 },
    ]);

    expect(html).toContain('aria-labelledby="trend-chart-title trend-chart-description"');
    expect(html).toContain("<caption>新增用户与积分消耗趋势完整数据</caption>");
    expect(html).toContain("<td>345</td>");
  });

  it("renders the funnel without CSP-sensitive inline styles", () => {
    const html = funnelChart([
      { label: "访问", count: 20 },
      { label: "注册", count: 10 },
    ]);

    expect(html).toContain("<progress");
    expect(html).not.toContain('style="');
  });
});