// RunProgressBanner: the shared in-progress chrome — run id + UTC+8
// started stamp + done/total counter, the progress width over terminal
// region statuses (with the zero-total guard), and caller-provided header
// chips and footer content.

import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import { RunProgressBanner } from "@/components/runs/RunProgressBanner";

function progressBar(): HTMLElement {
  const bar = document.querySelector(".progress-shimmer") as HTMLElement | null;
  expect(bar).not.toBeNull();
  return bar!;
}

describe("RunProgressBanner", () => {
  it("renders the run id, started stamp, and done/total counter", () => {
    render(
      <RunProgressBanner
        runId="run-20260907T020000"
        startedAt="2026-09-07T02:00:00+08:00"
        done={3}
        total={5}
      />,
    );
    expect(screen.getByText("run-20260907T020000")).toBeInTheDocument();
    expect(screen.getByText("started 2026-09-07 02:00 UTC+8")).toBeInTheDocument();
    expect(screen.getByText("3/5 regions")).toBeInTheDocument();
  });

  it("sets the progress width from done/total", () => {
    render(
      <RunProgressBanner runId="r" startedAt="2026-09-07T02:00:00+08:00" done={3} total={5} />,
    );
    expect(progressBar().style.width).toBe("60%");
  });

  it("renders a 0% width when the total is zero", () => {
    render(<RunProgressBanner runId="r" startedAt="2026-09-07T02:00:00+08:00" done={0} total={0} />);
    expect(progressBar().style.width).toBe("0%");
  });

  it("renders header chips and footer content", () => {
    render(
      <RunProgressBanner
        runId="r"
        startedAt="2026-09-07T02:00:00+08:00"
        done={1}
        total={2}
        footer={<div>per-region grid</div>}
      >
        <span>chip</span>
      </RunProgressBanner>,
    );
    expect(screen.getByText("chip")).toBeInTheDocument();
    expect(screen.getByText("per-region grid")).toBeInTheDocument();
  });
});