SystemSimulationApp/frontend/tests/e2e/fit-view.spec.ts

import { expect, test } from "@playwright/test";
import {
  expectAllNodesInsideCanvas,
  prepareApp,
  resultSnapshot,
  wideProject,
} from "./fixtures";

test("拖入组件不自动适配画布，手动适配按钮仍然生效", async ({ page }) => {
  await prepareApp(page);
  await page.goto("/");

  const viewport = page.locator(".flow-canvas .react-flow__viewport");
  const zoomOut = page.locator(".flow-canvas .react-flow__controls-zoomout");
  await zoomOut.click();
  await zoomOut.click();
  await page.waitForTimeout(250);
  const viewportBeforeDrop = await viewport.getAttribute("style");
  expect(viewportBeforeDrop).toBeTruthy();

  await page
    .getByRole("button", { name: "通用测试元件", exact: true })
    .dragTo(page.locator(".flow-canvas .react-flow__pane"));
  await expect(page.locator(".flow-canvas .react-flow__node")).toHaveCount(1);
  await page.waitForTimeout(250);
  await expect(viewport).toHaveAttribute("style", viewportBeforeDrop!);

  await page.getByRole("button", { name: "适配视图", exact: true }).click();
  await expect
    .poll(() => viewport.getAttribute("style"))
    .not.toBe(viewportBeforeDrop);
});

test("加载本地工程后自动适配建模画布", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript((project) => {
    window.localStorage.setItem(
      "system-simulation-flow:project:demo-system",
      JSON.stringify(project),
    );
  }, wideProject);

  await page.goto("/");
  await page.getByRole("button", { name: "加载工程" }).click();

  await expectAllNodesInsideCanvas(page, ".flow-canvas");
  const consolePanel = page.getByRole("complementary", {
    name: "仿真控制台",
    exact: true,
  });
  await expect(consolePanel).not.toContainText("工程已加载");
  await page.getByRole("button", { name: "展开仿真控制台" }).click();
  await expect(consolePanel).toContainText("工程已加载");
});

test("导入工程 JSON 后自动适配建模画布", async ({ page }) => {
  await prepareApp(page);
  await page.goto("/");

  await page.locator('input[type="file"]').setInputFiles({
    name: "wide-project.json",
    mimeType: "application/json",
    buffer: Buffer.from(JSON.stringify(wideProject)),
  });

  await expectAllNodesInsideCanvas(page, ".flow-canvas");
});

test("恢复自动保存工程后自动适配建模画布", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript((project) => {
    window.localStorage.setItem(
      "system-simulation-flow:autosave",
      JSON.stringify(project),
    );
  }, wideProject);

  await page.goto("/");
  await page.getByRole("button", { name: "恢复" }).click();

  await expectAllNodesInsideCanvas(page, ".flow-canvas");
  const consolePanel = page.getByRole("complementary", {
    name: "仿真控制台",
    exact: true,
  });
  await expect(consolePanel).not.toContainText("已恢复上次自动保存的工程");
  await page.getByRole("button", { name: "展开仿真控制台" }).click();
  await expect(consolePanel).toContainText("已恢复上次自动保存的工程");
});

test("切换到结果页时自动适配只读系统图", async ({ page }) => {
  await prepareApp(page);
  await page.addInitScript(({ project, snapshot }) => {
    window.sessionStorage.setItem(
      "system-simulation-flow:latest-result",
      JSON.stringify(snapshot),
    );
    window.localStorage.setItem(
      "system-simulation-flow:project:demo-system",
      JSON.stringify(project),
    );
  }, { project: wideProject, snapshot: resultSnapshot });

  await page.goto("/");
  await page.getByRole("button", { name: "加载工程" }).click();
  const freeModelingHandle = page.locator(
    '.flow-canvas .react-flow__node[data-id="generic_sensor_1"] .port-handle[data-port-name="port_a"]',
  );
  await freeModelingHandle.dispatchEvent("click");
  await expect(freeModelingHandle).toHaveAttribute(
    "data-connection-state",
    "origin",
  );
  await page.getByRole("tab", { name: /^结果/ }).click();
  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toHaveCount(0);

  await page.getByRole("tab", { name: "建模" }).click();
  await expectAllNodesInsideCanvas(page, ".flow-canvas");
  await expect(freeModelingHandle).toHaveAttribute(
    "data-connection-state",
    "idle",
  );
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toBeVisible();
  await page.getByRole("tab", { name: /^结果/ }).click();
  await expectAllNodesInsideCanvas(page, ".results-system-canvas");
  await expect(
    page.getByRole("complementary", { name: "仿真控制台", exact: true }),
  ).toHaveCount(0);
  await expect(page.locator(".results-system-canvas .react-flow__edge")).toHaveCount(
    wideProject.edges.length,
  );
  const connectedResultHandles = page.locator(
    '.results-system-canvas .port-handle[data-connected="true"]',
  );
  const idleResultHandles = page.locator(
    '.results-system-canvas .port-handle[data-connected="false"]',
  );
  await expect(connectedResultHandles).toHaveCount(
    wideProject.edges.length * 2,
  );
  await expect(idleResultHandles).toHaveCount(2);
  await expect(connectedResultHandles.first()).toHaveCSS("opacity", "0");
});