visionA/visionA-frontend/src/app/workspace/[deviceId]/workspace-client.test.tsx

/**
 * WorkspaceClient 測試（塊 2-review M1：overlay 未就緒不繪製）
 *
 * 聚焦 M1：CameraFeed `<img>` 是 height:auto（實際高依 MJPEG 比例），overlay 必須等
 *   ResizeObserver 回報**真實顯示尺寸**後才繪製；在那之前不可用寫死猜測換算 → 否則 bbox 錯位。
 *
 * 策略：
 *   - 用真實 device-store（setState 灌一台 online 裝置）+ 真實 inference-store
 *   - mock `@/lib/api`（start 回 streamUrl）、mock `@/hooks/use-inference-stream`（no-op）
 *   - 用可控 ResizeObserver：預設「不」觸發 callback（模擬尺寸尚未回報）；
 *     另一測試手動觸發 callback 模擬尺寸就緒
 */
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

import { LocaleProvider } from "@/lib/i18n/context";
import { useDeviceStore } from "@/stores/device-store";
import { useInferenceStore } from "@/stores/inference-store";

// mock api：start 回 streamUrl；stop 直接 resolve
const post = vi.fn();
vi.mock("@/lib/api", async () => {
  const actual = await vi.importActual<typeof import("@/lib/api")>("@/lib/api");
  return { ...actual, api: { ...actual.api, post: (...a: unknown[]) => post(...a) } };
});

// mock WS hook（避免真連線）
vi.mock("@/hooks/use-inference-stream", () => ({
  useInferenceStream: vi.fn(),
}));

// 可控 ResizeObserver：把 callback 存起來，測試決定何時觸發
let roCallbacks: ResizeObserverCallback[] = [];
class ControllableRO {
  cb: ResizeObserverCallback;
  constructor(cb: ResizeObserverCallback) {
    this.cb = cb;
    roCallbacks.push(cb);
  }
  observe() {}
  unobserve() {}
  disconnect() {}
}

import { useInferenceStream } from "@/hooks/use-inference-stream";

import { WorkspaceClient } from "./workspace-client";

/** 取 useInferenceStream 最後一次呼叫的 enabled 參數（第 2 個引數）。 */
function lastCameraWsEnabled(): boolean | undefined {
  const mock = vi.mocked(useInferenceStream);
  const call = mock.mock.calls.at(-1);
  return call?.[1] as boolean | undefined;
}

function seedOnlineDevice() {
  useDeviceStore.setState({
    selectedDevice: {
      id: "dev-1",
      name: "KL520",
      remoteStatus: "online",
      lastSeenAt: null,
    } as ReturnType<typeof useDeviceStore.getState>["selectedDevice"],
    isLoading: false,
  });
}

function renderClient() {
  return render(
    <LocaleProvider>
      <WorkspaceClient deviceId="dev-1" />
    </LocaleProvider>,
  );
}

beforeEach(() => {
  post.mockReset();
  roCallbacks = [];
  (globalThis as { ResizeObserver?: unknown }).ResizeObserver = ControllableRO;
  useInferenceStore.setState({
    result: null,
    results: [],
    fps: 0,
    avgLatency: 0,
    batchResults: {},
    confidenceThreshold: 0.5,
  });
  seedOnlineDevice();
});

afterEach(() => {
  vi.clearAllMocks();
});

describe("WorkspaceClient — overlay 尺寸就緒閘門（M1）", () => {
  it("start 後、尺寸尚未回報前不繪製 overlay", async () => {
    post.mockResolvedValue({ streamUrl: "/api/camera/stream", sourceType: "camera" });
    // 先放一筆偵測結果（模擬第一筆結果早於 ResizeObserver 回報）
    useInferenceStore.setState({
      result: {
        taskType: "detection",
        timestamp: Date.now(),
        latencyMs: 10,
        detections: [
          { label: "x", confidence: 0.9, bbox: { x: 0, y: 0, width: 0.5, height: 0.5 } },
        ],
      },
    });

    renderClient();
    fireEvent.click(screen.getByText("開始推論"));

    // CameraFeed 應已顯示（有 img），但 overlay 尚未繪製（feedSize 為 null）
    await waitFor(() => {
      expect(screen.getByTestId("camera-feed-img")).toBeInTheDocument();
    });
    expect(screen.queryByTestId("camera-overlay")).not.toBeInTheDocument();
  });

  it("ResizeObserver 回報真實尺寸後才繪製 overlay", async () => {
    post.mockResolvedValue({ streamUrl: "/api/camera/stream", sourceType: "camera" });
    renderClient();
    fireEvent.click(screen.getByText("開始推論"));

    await waitFor(() => {
      expect(screen.getByTestId("camera-feed-img")).toBeInTheDocument();
    });
    // 尚未回報 → 無 overlay
    expect(screen.queryByTestId("camera-overlay")).not.toBeInTheDocument();

    // 模擬 ResizeObserver 回報真實顯示尺寸（非 4:3，例如 640×360）
    act(() => {
      const img = screen.getByTestId("camera-feed-img");
      roCallbacks.forEach((cb) =>
        cb(
          [
            { target: img, contentRect: { width: 640, height: 360 } } as unknown as ResizeObserverEntry,
          ],
          {} as ResizeObserver,
        ),
      );
    });

    await waitFor(() => {
      expect(screen.getByTestId("camera-overlay")).toBeInTheDocument();
    });
    // canvas 尺寸用回報的真實值（360，非寫死 480）
    const canvas = screen.getByTestId("camera-overlay") as HTMLCanvasElement;
    expect(canvas.getAttribute("height")).toBe("360");
  });
});

/**
 * 切換 Radix Tab。Radix Tabs 預設 activationMode="automatic"（focus 即切換），
 * jsdom 下單純 click 不一定觸發 onValueChange，故同時 fire focus + click 確保切換。
 */
async function switchTab(name: string) {
  const trigger = screen.getByRole("tab", { name });
  await act(async () => {
    fireEvent.focus(trigger);
    fireEvent.click(trigger);
  });
}

describe("WorkspaceClient — 切 tab 時 camera 串流 / WS 正確關閉（S-1，塊3 最高風險路徑）", () => {
  it("推論中切離 camera tab → 呼叫 /api/camera/stop + camera WS enabled 變 false", async () => {
    post.mockResolvedValue({ streamUrl: "/api/camera/stream", sourceType: "camera" });
    renderClient();

    // 開始 camera 推論
    fireEvent.click(screen.getByText("開始推論"));
    await waitFor(() => {
      expect(screen.getByTestId("camera-feed-img")).toBeInTheDocument();
    });
    // camera WS 此時應為 enabled=true（camera tab + 推論中 + 線上）
    expect(lastCameraWsEnabled()).toBe(true);
    // 尚未呼叫 stop
    expect(post).not.toHaveBeenCalledWith("/api/camera/stop", expect.anything());

    // 切到 image tab
    await switchTab("圖片");

    // handleTabChange 應自動停掉 camera（POST /api/camera/stop）
    await waitFor(() => {
      expect(post).toHaveBeenCalledWith("/api/camera/stop", { deviceId: "dev-1" });
    });
    // camera 串流已清（isRunning=false）→ camera 的 useInferenceStream enabled 變 false（不殘留連線）
    await waitFor(() => {
      expect(lastCameraWsEnabled()).toBe(false);
    });
    // camera feed 已不在畫面（切到 image tab，且串流已清）
    expect(screen.queryByTestId("camera-feed-img")).not.toBeInTheDocument();
  });

  it("未推論時切 tab → 不呼叫 stop（無殘留可清）", async () => {
    renderClient();
    // 沒按開始，直接切到 video tab
    await switchTab("影片");
    expect(post).not.toHaveBeenCalledWith("/api/camera/stop", expect.anything());
    // camera WS 一直是 disabled
    expect(lastCameraWsEnabled()).toBe(false);
  });

  it("切到 image tab 後 camera WS 保持 false（媒體 tab 有自己的 WS，兩者互斥）", async () => {
    post.mockResolvedValue({ streamUrl: "/api/camera/stream", sourceType: "camera" });
    renderClient();
    fireEvent.click(screen.getByText("開始推論"));
    await waitFor(() => expect(screen.getByTestId("camera-feed-img")).toBeInTheDocument());

    await switchTab("圖片");
    await waitFor(() => expect(lastCameraWsEnabled()).toBe(false));

    // 停留在 image tab，camera WS 不應又被打開
    expect(lastCameraWsEnabled()).toBe(false);
  });
});