next-tjwater-frontend/tests/browser/workspace-main-frame.e2e.ts

import { expect, test, type Page } from "@playwright/test";
import { mockAgentApi } from "./support/mock-agent-api";

test("the default workspace docks Agent beside the persistent map", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const workspace = page.locator("#main-workspace");
  const map = page.locator("#workspace-map");

  await expect(workspace).toHaveAttribute("data-layout-mode", "default");
  await expect(map).toBeVisible();
  await expect(page.getByLabel("Agent 命令面板")).toBeVisible();
  await expect(map.getByRole("navigation", { name: "地图工具" })).toBeVisible();
  await expect(page.getByRole("region", { name: "工况任务", exact: true })).toHaveCount(0);
  await expect(page.getByRole("button", { name: "任务视图" })).toHaveCount(0);
});

test("a generated Artifact stays in peek until explicitly opened", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.getByRole("button", { name: "生成 Agent 模拟分析成果" }).click();
  const peek = page.getByRole("complementary", { name: "Agent 成果预览" });

  await expect(peek).toBeVisible();
  await expect(peek).toContainText("北辰分区压力异常诊断");
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "default");
  await expect(page.getByRole("heading", { name: "北辰分区压力异常诊断" })).toHaveCount(0);

  await peek.getByRole("button", { name: "打开成果" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "map_split");
  await expect(page.locator("#workspace-map")).toBeVisible();
  await expect(page.locator("#artifact-workspace")).toBeVisible();
  await expect(page.getByRole("heading", { name: "北辰分区压力异常诊断" })).toBeVisible();
  await expect(page.getByLabel("Agent 折叠栏")).toBeVisible();
});

test("Agent expands over an active Artifact without resizing the main workspace", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await openFirstArtifact(page);

  const workspace = page.locator("#main-workspace");
  const before = await workspace.boundingBox();
  expect(before).not.toBeNull();

  await page.getByLabel(/展开 Agent 助手面板/).click();
  await expect(page.getByLabel("Agent 命令面板")).toBeVisible();
  const after = await workspace.boundingBox();

  expect(after).not.toBeNull();
  expect(after!.x).toBe(before!.x);
  expect(after!.width).toBe(before!.width);
});

test("spatial Artifacts switch between split, focus and peek", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await openFirstArtifact(page);

  await page.getByRole("button", { name: "专注分析" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "focus");
  await expect(page.locator("#workspace-map")).toBeHidden();

  await page.getByRole("button", { name: "显示地图" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "map_split");
  await expect(page.locator("#workspace-map")).toBeVisible();

  await page.getByRole("button", { name: "将成果收起为预览" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "default");
  await expect(page.getByRole("complementary", { name: "Agent 成果预览" })).toBeVisible();
  await expect(page.getByLabel("Agent 命令面板")).toBeVisible();

  await page.getByRole("button", { name: "销毁预览成果" }).click();
  await expect(page.getByRole("complementary", { name: "Agent 成果预览" })).toHaveCount(0);
  await expect(page.locator("#workspace-map")).toBeVisible();
});

test("non-spatial Artifacts open directly in focus mode", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.getByRole("button", { name: "生成 Agent 模拟分析成果" }).click();
  await page.getByRole("button", { name: "销毁预览成果" }).click();
  await page.getByRole("button", { name: "生成 Agent 模拟分析成果" }).click();
  await page.getByRole("button", { name: "打开成果" }).click();

  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "focus");
  await expect(page.getByRole("heading", { name: "供水服务分区平衡分析" })).toBeVisible();
  await expect(page.locator("#workspace-map")).toBeHidden();
  await expect(page.getByRole("button", { name: "显示地图" })).toHaveCount(0);
});

test("narrow workspaces switch between Artifact and map as pages", async ({ page }) => {
  await page.setViewportSize({ width: 1180, height: 820 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });
  await openFirstArtifact(page);

  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "focus");
  await page.getByRole("button", { name: "显示地图" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "map_only");
  await expect(page.locator("#workspace-map")).toBeVisible();
  await expect(page.locator("#artifact-workspace")).toBeHidden();

  await page.getByRole("button", { name: "返回分析成果" }).click();
  await expect(page.locator("#main-workspace")).toHaveAttribute("data-layout-mode", "focus");
  await expect(page.locator("#artifact-workspace")).toBeVisible();
});

test("the condition feed remains floating and starts closed", async ({ page }) => {
  await page.setViewportSize({ width: 1600, height: 900 });
  await prepareMainFrame(page);
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await expect(page.getByRole("region", { name: "工况任务", exact: true })).toHaveCount(0);
  await page.getByRole("button", { name: "工况任务", exact: true }).click();
  await expect(page.getByRole("region", { name: "工况任务", exact: true })).toBeVisible();
});

async function openFirstArtifact(page: Page) {
  await page.getByRole("button", { name: "生成 Agent 模拟分析成果" }).click();
  await page.getByRole("button", { name: "打开成果" }).click();
}

async function prepareMainFrame(page: Page) {
  await mockAgentApi(page);
  await page.route("**/runtime-config.js", async (route) => {
    await route.fulfill({
      contentType: "application/javascript",
      body: `globalThis.__TJWATER_CONFIG__ = {
        TJWATER_AUTH_MODE: "disabled",
        TJWATER_MAPBOX_ACCESS_TOKEN: "",
        TJWATER_MAP_URL: "https://workspace-map.invalid/geoserver",
        TJWATER_GEOSERVER_WORKSPACE: "tjwater",
        TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
        TJWATER_ENABLE_DEV_PANEL: "true",
        TJWATER_ENABLE_MSW: "false"
      };`
    });
  });
  await page.route("https://workspace-map.invalid/**", async (route) => {
    await route.fulfill({ status: 204 });
  });
}