fix(sensor-placement): smooth result editor transitions

2026-07-30 16:38:06 +08:00
parent 6114e76735
commit f355ddd002
2 changed files with 183 additions and 10 deletions
@@ -0,0 +1,123 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import MonitoringPlaceOptimizationPanel, {
+  getTabIndicatorSx,
+  getTabIndicatorTransform,
+} from "./MonitoringPlaceOptimizationPanel";
+import { getSensorPlacementScheme } from "./schemeApi";
+import type { SensorPlacementScheme } from "./types";
+
+const mockSchemeEditorRender = jest.fn();
+
+jest.mock("@refinedev/core", () => ({
+  useNotification: () => ({ open: jest.fn() }),
+}));
+
+jest.mock("./OptimizationParameters", () => ({
+  __esModule: true,
+  default: () => <div>optimization parameters</div>,
+  createOptimizationParametersState: () => ({}),
+}));
+
+jest.mock("./SchemeQuery", () => ({
+  __esModule: true,
+  default: ({ onEdit }: { onEdit: (schemeId: number) => void }) => (
+    <button onClick={() => onEdit(7)}>打开测试方案</button>
+  ),
+  createMonitoringSchemeQueryState: () => ({}),
+}));
+
+jest.mock("./SchemeEditor", () => ({
+  __esModule: true,
+  default: ({
+    scheme,
+    active,
+  }: {
+    scheme: SensorPlacementScheme;
+    active: boolean;
+  }) => {
+    mockSchemeEditorRender(active);
+    return <div data-testid="scheme-editor">{scheme.scheme_name}</div>;
+  },
+}));
+
+jest.mock("./schemeApi", () => ({
+  getSensorPlacementScheme: jest.fn(),
+}));
+
+jest.mock("@components/olmap/common/PanelEmptyState", () => ({
+  __esModule: true,
+  default: () => <div>empty state</div>,
+}));
+
+const mockGetSensorPlacementScheme = jest.mocked(getSensorPlacementScheme);
+
+const scheme: SensorPlacementScheme = {
+  id: 7,
+  scheme_name: "测试方案",
+  sensor_number: 1,
+  min_diameter: 100,
+  username: "operator",
+  create_time: "2026-07-30T08:00:00+08:00",
+  sensor_location: ["J-1"],
+  sensor_points: [],
+  can_edit: true,
+};
+
+describe("MonitoringPlaceOptimizationPanel", () => {
+  beforeEach(() => {
+    mockSchemeEditorRender.mockClear();
+  });
+
+  it("applies equal-width positioning to the rendered tab indicator", () => {
+    expect(getTabIndicatorTransform(0)).toBe("translateX(0%)");
+    expect(getTabIndicatorTransform(1)).toBe("translateX(100%)");
+    expect(getTabIndicatorTransform(2)).toBe("translateX(200%)");
+    expect(getTabIndicatorSx(1)).toMatchObject({
+      left: "0 !important",
+      width: "33.333333% !important",
+      transform: "translateX(100%)",
+    });
+
+    const { container } = render(<MonitoringPlaceOptimizationPanel />);
+    const indicator = container.querySelector<HTMLElement>(
+      ".MuiTabs-indicator",
+    );
+
+    expect(indicator).not.toBeNull();
+    expect(indicator).toHaveStyle({ transform: "translateX(0%)" });
+
+    fireEvent.click(screen.getByRole("tab", { name: /方案查询/ }));
+    expect(indicator).toHaveStyle({ transform: "translateX(200%)" });
+  });
+
+  it("prepares a queried scheme before switching to the result editor", async () => {
+    let resolveScheme: (value: SensorPlacementScheme) => void = () => {};
+    mockGetSensorPlacementScheme.mockReturnValue(
+      new Promise((resolve) => {
+        resolveScheme = resolve;
+      }),
+    );
+
+    render(<MonitoringPlaceOptimizationPanel />);
+
+    const queryTab = screen.getByRole("tab", { name: /方案查询/ });
+    const editorTab = screen.getByRole("tab", { name: /结果编辑/ });
+    fireEvent.click(queryTab);
+    fireEvent.click(screen.getByRole("button", { name: "打开测试方案" }));
+
+    expect(queryTab).toHaveAttribute("aria-selected", "true");
+    expect(editorTab).toHaveAttribute("aria-selected", "false");
+
+    await act(async () => {
+      resolveScheme(scheme);
+      await Promise.resolve();
+    });
+
+    expect(editorTab).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByTestId("scheme-editor")).toBeVisible();
+    expect(mockSchemeEditorRender.mock.calls.map(([active]) => active)).toEqual([
+      false,
+      true,
+    ]);
+  });
+});