124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
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,
|
|
]);
|
|
});
|
|
});
|