// frontend/tests/journey/JourneyBottom.test.tsx — JF-4: 게이지 2개, 테이블 5행, 별 on 2개
import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { JourneyTable } from "@/components/journey/JourneyTable";
import { Gauge } from "@/components/journey/Gauge";
import { journey } from "./fixtures";

describe("JourneyTable + Gauge (JF-4)", () => {
  it("작업 테이블은 5행, 별(star) on=2개", () => {
    const { container } = render(
      <JourneyTable rows={journey.rows} people={journey.people} />,
    );
    const rows = container.querySelectorAll("tbody tr");
    expect(rows).toHaveLength(5);
    const starsOn = container.querySelectorAll(".star.on");
    expect(starsOn).toHaveLength(2);
  });

  it("상태 chip 키(prog/review/done/sched)가 적용된다", () => {
    const { container } = render(
      <JourneyTable rows={journey.rows} people={journey.people} />,
    );
    expect(container.querySelector(".chip.prog")).toBeTruthy();
    expect(container.querySelector(".chip.review")).toBeTruthy();
    expect(container.querySelector(".chip.done")).toBeTruthy();
    expect(container.querySelector(".chip.sched")).toBeTruthy();
  });

  it("반원 게이지 2개 — 딥 워크 5.2시간, 활동 링 72%", () => {
    const { container, getByText } = render(
      <div className="gauges">
        {journey.gauges.map((g, i) => (
          <Gauge key={i} {...g} />
        ))}
      </div>,
    );
    const gauges = container.querySelectorAll(".gauge");
    expect(gauges).toHaveLength(2);
    expect(getByText("딥 워크")).toBeInTheDocument();
    expect(getByText("5.2")).toBeInTheDocument();
    expect(getByText("활동 링")).toBeInTheDocument();
    expect(getByText("72")).toBeInTheDocument();
  });
});