agent/apps/web/tests/app-shell.test.tsx

import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import userEvent from "@testing-library/user-event";
import { afterEach, describe, expect, it, vi } from "vitest";
import { App } from "../src/App.js";
import { createInitialHarnessState, type HarnessClientState } from "../src/store/reducer.js";

function makeStore() {
  const sendMessage = vi.fn().mockResolvedValue({ runId: "run_1" });
  const state: HarnessClientState = {
    ...createInitialHarnessState(),
    sessionId: "ses_test",
    connection: "open",
    skills: [{
      name: "ads-analysis",
      description: "分析广告投放指标",
      source: "project",
      filePath: ".agents/skills/ads-analysis/SKILL.md",
      diagnostics: [],
    }],
  };
  return {
    getSnapshot: () => state,
    subscribe: () => () => undefined,
    sendMessage,
    cancel: vi.fn().mockResolvedValue({ cancelled: false }),
    dispose: vi.fn().mockResolvedValue(undefined),
    start: vi.fn().mockResolvedValue(undefined),
    getModelConfig: vi.fn().mockResolvedValue({
      modelConfig: { configured: true, source: "environment", providerId: "openai", api: "openai-responses", modelId: "gpt-test", supportsImages: true },
    }),
  };
}

afterEach(() => vi.unstubAllGlobals());

describe("App", () => {
  it("fills a generation-approval prompt for a continued uploaded task without sending or asking for another upload", async () => {
    const store = makeStore();
    store.getSnapshot().skills.push({ name: "swads-image-to-video", description: "Image video", source: "local", filePath: "external/swads-image-to-video/SKILL.md", diagnostics: [] });
    const id = "i2v_11111111-1111-1111-1111-111111111111";
    const task = { id, revision: 4, title: "Cat", prompt: "Cat blinks", state: "awaiting_submission", durationSeconds: 3, referenceUrl: `/api/image-video/tasks/${id}/reference` };
    vi.stubGlobal("fetch", (_url: string, init?: RequestInit) => Promise.resolve(new Response(JSON.stringify(init?.method === "POST" ? { task } : { tasks: [task] }))));
    render(<App store={store} autoStart={false} modelConfigured />);
    const user = userEvent.setup();
    await user.click(await screen.findByRole("button", { name: "继续此任务" }));
    await user.click(screen.getByRole("checkbox", { name: /确认将此任务接续到当前会话/ }));
    await user.click(screen.getByRole("button", { name: "确认接续（不生成）" }));
    const composer = screen.getByRole<HTMLTextAreaElement>("textbox", { name: "消息" });
    expect(composer.value).toContain(id);
    expect(composer.value).toContain("i2v_submit");
    expect(composer.value).not.toContain("i2v_upload_reference");
    expect(composer.value).toContain("3 秒");
    expect(store.sendMessage).not.toHaveBeenCalled();
  });
  it("lets the user select a discovered Skill without submitting data immediately", async () => {
    const store = makeStore();
    render(<App store={store} autoStart={false} modelConfigured />);
    await userEvent.setup().click(screen.getByRole("button", { name: "使用 ads-analysis" }));
    expect(screen.getByRole<HTMLTextAreaElement>("textbox").value).toContain("ads-analysis");
    expect(store.sendMessage).not.toHaveBeenCalled();
  });

  it("returns to Chat after choosing a Skill in the mobile layout", async () => {
    vi.stubGlobal("matchMedia", vi.fn(() => ({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })));
    const store = makeStore();
    render(<App store={store} autoStart={false} modelConfigured />);
    const user = userEvent.setup();
    await user.click(screen.getByRole("tab", { name: "Skills" }));
    await user.click(screen.getByRole("button", { name: "使用 ads-analysis" }));
    expect(screen.getByRole("tab", { name: "Chat" })).toHaveAttribute("aria-selected", "true");
    expect(screen.getByRole<HTMLTextAreaElement>("textbox").value).toContain("ads-analysis");
    expect(store.sendMessage).not.toHaveBeenCalled();
  });

  it("renders the three primary work areas", () => {
    render(<App store={makeStore()} autoStart={false} modelConfigured />);
    expect(screen.getByRole("region", { name: "Skills Catalog" })).toBeVisible();
    expect(screen.getByRole("main", { name: "Streaming Chat" })).toBeVisible();
    expect(screen.getByRole("region", { name: "Event Timeline" })).toBeVisible();
  });

  it("fills but does not send the demo prompt", async () => {
    const user = userEvent.setup();
    const store = makeStore();
    render(<App store={store} autoStart={false} modelConfigured />);

    await user.click(screen.getByRole("button", { name: "填入演示任务" }));

    expect(screen.getByRole<HTMLTextAreaElement>("textbox").value).toContain("demo-account");
    expect(store.sendMessage).not.toHaveBeenCalled();
  });

  it("disables sending and points to settings when the model is missing", () => {
    render(<App store={makeStore()} autoStart={false} modelConfigured={false} />);
    expect(screen.getByRole("button", { name: "发送消息" })).toBeDisabled();
    expect(screen.getByText("请先配置模型连接")).toBeVisible();
  });

  it("switches to the event timeline in the mobile tab layout", async () => {
    vi.stubGlobal("matchMedia", vi.fn(() => ({
      matches: true,
      media: "(max-width: 720px)",
      onchange: null,
      addEventListener: vi.fn(),
      removeEventListener: vi.fn(),
      addListener: vi.fn(),
      removeListener: vi.fn(),
      dispatchEvent: vi.fn(),
    })));
    const user = userEvent.setup();
    render(<App store={makeStore()} autoStart={false} modelConfigured />);

    await user.click(screen.getByRole("tab", { name: "Events" }));

    expect(screen.getByRole("tab", { name: "Events" })).toHaveAttribute("aria-selected", "true");
    expect(screen.getByRole("region", { name: "Event Timeline" })).toBeVisible();
    expect(screen.queryByRole("main", { name: "Streaming Chat" })).not.toBeInTheDocument();
  });

  it("deletes the old session before starting a reset session", async () => {
    const user = userEvent.setup();
    const store = makeStore();
    render(<App store={store} autoStart={false} modelConfigured />);

    await user.click(screen.getByRole("button", { name: "重置训练会话" }));

    expect(store.dispose).toHaveBeenCalledTimes(1);
    expect(store.start).toHaveBeenCalledTimes(1);
    expect(store.dispose.mock.invocationCallOrder[0]).toBeLessThan(store.start.mock.invocationCallOrder[0] ?? 0);
  });
});