// frontend/tests/connectors/ConnectStateBadge.test.tsx — 5개 상태별 라벨+클래스
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { ConnectStateBadge } from "@/components/connectors/ConnectStateBadge";

describe("ConnectStateBadge", () => {
  it("connected 는 last prop 텍스트를 라벨로 사용 + 녹색 점", () => {
    const { container } = render(<ConnectStateBadge state="connected" last="오늘 09:12" />);
    expect(screen.getByText("오늘 09:12")).toBeInTheDocument();
    expect(container.querySelector(".cs-badge.cs-connected")).toBeTruthy();
    expect(container.querySelector(".dot-green")).toBeTruthy();
  });

  it("syncing → '동기화 중…' + 파란 점", () => {
    const { container } = render(<ConnectStateBadge state="syncing" />);
    expect(screen.getByText("동기화 중…")).toBeInTheDocument();
    expect(container.querySelector(".cs-badge.cs-syncing")).toBeTruthy();
    expect(container.querySelector(".dot-blue")).toBeTruthy();
  });

  it("disconnected → '연결 안 됨' + faint 점", () => {
    const { container } = render(<ConnectStateBadge state="disconnected" />);
    expect(screen.getByText("연결 안 됨")).toBeInTheDocument();
    expect(container.querySelector(".cs-badge.cs-disconnected")).toBeTruthy();
    expect(container.querySelector(".dot-faint")).toBeTruthy();
  });

  it("error → '동기화 실패 · 다시 시도' + coral 점", () => {
    const { container } = render(<ConnectStateBadge state="error" />);
    expect(screen.getByText("동기화 실패 · 다시 시도")).toBeInTheDocument();
    expect(container.querySelector(".cs-badge.cs-error")).toBeTruthy();
    expect(container.querySelector(".dot-coral")).toBeTruthy();
  });

  it("token_expired → '권한 만료 · 다시 연결' + amber 점", () => {
    const { container } = render(<ConnectStateBadge state="token_expired" />);
    expect(screen.getByText("권한 만료 · 다시 연결")).toBeInTheDocument();
    expect(container.querySelector(".cs-badge.cs-token_expired")).toBeTruthy();
    expect(container.querySelector(".dot-amber")).toBeTruthy();
  });
});
