// frontend/tests/journey/JourneyBoard.test.tsx — JF-2: 베지어 링크 8개 렌더 (getBoundingClientRect 스텁)
import { render } from "@testing-library/react";
import { describe, expect, it, beforeAll, afterAll, vi } from "vitest";
import { JourneyBoard } from "@/components/journey/JourneyBoard";
import { journey } from "./fixtures";

// jsdom 은 layout 이 없어 getBoundingClientRect 가 0 을 반환 → from/to 모두 측정되도록 스텁.
let orig: typeof Element.prototype.getBoundingClientRect;
beforeAll(() => {
  orig = Element.prototype.getBoundingClientRect;
  let i = 0;
  Element.prototype.getBoundingClientRect = vi.fn(function (this: Element) {
    i += 1;
    return {
      x: 0,
      y: 0,
      top: (i % 5) * 30,
      left: (i % 4) * 100,
      right: (i % 4) * 100 + 80,
      bottom: (i % 5) * 30 + 60,
      width: 80,
      height: 60,
      toJSON: () => ({}),
    } as DOMRect;
  });
  // ResizeObserver 폴리필 (jsdom 미구현)
  if (!("ResizeObserver" in globalThis)) {
    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
      observe() {}
      unobserve() {}
      disconnect() {}
    };
  }
});
afterAll(() => {
  Element.prototype.getBoundingClientRect = orig;
});

describe("JourneyBoard (JF-2)", () => {
  it("8개의 .jx-line 베지어 path 를 렌더한다", () => {
    const { container } = render(
      <JourneyBoard
        stages={journey.stages}
        cards={journey.cards}
        links={journey.links}
        people={journey.people}
      />,
    );
    const lines = container.querySelectorAll("path.jx-line");
    expect(lines).toHaveLength(8);
  });

  it("커넥터 SVG 는 aria-hidden(카드 아래)", () => {
    const { container } = render(
      <JourneyBoard
        stages={journey.stages}
        cards={journey.cards}
        links={journey.links}
        people={journey.people}
      />,
    );
    const svg = container.querySelector("svg.jx-svg");
    expect(svg).toBeTruthy();
    expect(svg).toHaveAttribute("aria-hidden");
  });
});