DiAL/tests/web/components/TrendChart.test.tsx

import "../../../tests/web/test-utils";
import { render } from "@testing-library/react";
import { describe, expect, test } from "bun:test";

import type { TrendPoint } from "../../../src/shared/api";

import { TrendChart } from "../../../src/web/components/TrendChart";

describe("TrendChart", () => {
  const data: TrendPoint[] = [
    {
      availability: 100,
      avgDurationMs: 100,
      bucketStart: "2025-01-15T10:00:00.000Z",
      downChecks: 0,
      maxDurationMs: 150,
      minDurationMs: 50,
      totalChecks: 10,
      upChecks: 10,
    },
    {
      availability: 95,
      avgDurationMs: 120,
      bucketStart: "2025-01-15T11:00:00.000Z",
      downChecks: 1,
      maxDurationMs: 200,
      minDurationMs: 80,
      totalChecks: 20,
      upChecks: 19,
    },
  ];

  test("有数据时不崩溃", () => {
    const { container } = render(<TrendChart data={data} />);

    expect(container.firstChild).not.toBeNull();
  });

  test("空数据显示占位", () => {
    const { container } = render(<TrendChart data={[]} />);

    // 应该显示占位文本
    const element = container.querySelector(".trend-empty");
    expect(element).not.toBeNull();
  });

  test("包含 trend-chart className", () => {
    const { container } = render(<TrendChart data={data} />);

    const element = container.querySelector(".trend-chart");
    expect(element).not.toBeNull();
  });
});