mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-15 20:59:18 +00:00
test: implement unit tests for hooks and refactor some types (#493)
This commit is contained in:
Fine0830
210
src/hooks/__tests__/useDashboardsSession.spec.ts
Normal file
210
src/hooks/__tests__/useDashboardsSession.spec.ts
Normal file
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { ConfigFieldTypes } from "@/views/dashboard/data";
|
||||
import getDashboard from "../useDashboardsSession";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// Mock ElMessage from element-plus
|
||||
vi.mock("element-plus", () => ({
|
||||
ElMessage: { info: vi.fn(), error: vi.fn(), success: vi.fn() },
|
||||
}));
|
||||
|
||||
// Mock dashboard store
|
||||
let mockDashboardStore: any;
|
||||
vi.mock("@/store/modules/dashboard", () => ({
|
||||
useDashboardStore: () => mockDashboardStore,
|
||||
}));
|
||||
|
||||
function setupContainers() {
|
||||
document.body.innerHTML = "";
|
||||
const main = document.createElement("div");
|
||||
main.className = "ds-main";
|
||||
// allow scrollTop to be writable in jsdom
|
||||
Object.defineProperty(main, "scrollTop", { value: 0, writable: true });
|
||||
|
||||
const tab = document.createElement("div");
|
||||
tab.className = "tab-layout";
|
||||
Object.defineProperty(tab, "scrollTop", { value: 0, writable: true });
|
||||
|
||||
document.body.appendChild(main);
|
||||
document.body.appendChild(tab);
|
||||
}
|
||||
|
||||
describe("useDashboardsSession", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
sessionStorage.clear();
|
||||
setupContainers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
sessionStorage.clear();
|
||||
});
|
||||
|
||||
it("selects dashboard by NAME using param and flattens widgets (including Tab children)", () => {
|
||||
const dashboards = [
|
||||
{ name: "A", layer: "L1", entity: "Service", isDefault: false },
|
||||
{ name: "B", layer: "L1", entity: "Service", isDefault: true },
|
||||
];
|
||||
sessionStorage.setItem("dashboards", JSON.stringify(dashboards));
|
||||
|
||||
// layout: Tab with grandchildren + a non-tab widget
|
||||
const layout = [
|
||||
{
|
||||
type: "Tab",
|
||||
id: "tab0",
|
||||
y: 10,
|
||||
h: 20,
|
||||
children: [
|
||||
{ name: "Tab1", children: [] },
|
||||
{
|
||||
name: "Tab2",
|
||||
children: [
|
||||
{ type: "Card", id: "tab0-1-0", y: 5, h: 10 },
|
||||
{ type: "Line", id: "tab0-1-1", y: 6, h: 12 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: "Line", id: "wid1", y: 2, h: 4 },
|
||||
];
|
||||
|
||||
const setWidget = vi.fn();
|
||||
const setActiveTabIndex = vi.fn();
|
||||
mockDashboardStore = {
|
||||
layout,
|
||||
currentDashboard: { name: "B", layer: "L1", entity: "Service" },
|
||||
setWidget,
|
||||
setActiveTabIndex,
|
||||
};
|
||||
|
||||
const { dashboard, widgets } = getDashboard({ name: "A", layer: "L1", entity: "Service" }, ConfigFieldTypes.NAME);
|
||||
|
||||
expect(dashboard).toEqual(dashboards[0]);
|
||||
// widgets should include: Tab itself + grandchildren (2) + non-tab (1) = 4
|
||||
expect(widgets).toHaveLength(4);
|
||||
expect(widgets.map((w: any) => w.id)).toEqual(["tab0", "tab0-1-0", "tab0-1-1", "wid1"]);
|
||||
});
|
||||
|
||||
it("selects dashboard by ISDEFAULT using currentDashboard when param omitted", () => {
|
||||
const dashboards = [
|
||||
{ name: "A", layer: "L1", entity: "Service", isDefault: false },
|
||||
{ name: "B", layer: "L1", entity: "Service", isDefault: true },
|
||||
];
|
||||
sessionStorage.setItem("dashboards", JSON.stringify(dashboards));
|
||||
|
||||
mockDashboardStore = {
|
||||
layout: [],
|
||||
currentDashboard: { name: "C", layer: "L1", entity: "Service" },
|
||||
setWidget: vi.fn(),
|
||||
setActiveTabIndex: vi.fn(),
|
||||
};
|
||||
|
||||
const { dashboard } = getDashboard(undefined, ConfigFieldTypes.ISDEFAULT);
|
||||
expect(dashboard).toEqual(dashboards[1]);
|
||||
});
|
||||
|
||||
it("associationWidget: non-tab widget scrolls main container and sets widget", () => {
|
||||
const layout = [{ type: "Line", id: "wid1", y: 3, h: 7 }];
|
||||
const setWidget = vi.fn();
|
||||
const setActiveTabIndex = vi.fn();
|
||||
mockDashboardStore = { layout, currentDashboard: {}, setWidget, setActiveTabIndex };
|
||||
|
||||
const { associationWidget } = getDashboard({ name: "A", layer: "L1", entity: "Service" }, ConfigFieldTypes.NAME);
|
||||
|
||||
associationWidget("src", { dataIndex: 1 }, "Line");
|
||||
|
||||
expect(setWidget).toHaveBeenCalledTimes(1);
|
||||
const arg = setWidget.mock.calls[0][0];
|
||||
expect(arg.filters).toEqual({ dataIndex: 1 });
|
||||
expect(arg.id).toBe("wid1");
|
||||
|
||||
// No tab index change for non-tab widget
|
||||
expect(setActiveTabIndex).not.toHaveBeenCalled();
|
||||
|
||||
const main = document.querySelector(".ds-main") as HTMLElement;
|
||||
expect(main.scrollTop).toBe(3 * 10 + 7 * 5);
|
||||
});
|
||||
|
||||
it("associationWidget: tab child widget sets active tab and scrolls both containers", () => {
|
||||
const layout = [
|
||||
{
|
||||
type: "Tab",
|
||||
id: "tab0",
|
||||
y: 10,
|
||||
h: 20,
|
||||
children: [
|
||||
{ name: "Tab1", children: [] },
|
||||
{ name: "Tab2", children: [{ type: "Card", id: "tab0-1-0", y: 5, h: 10 }] },
|
||||
],
|
||||
},
|
||||
];
|
||||
const setWidget = vi.fn();
|
||||
const setActiveTabIndex = vi.fn();
|
||||
mockDashboardStore = { layout, currentDashboard: {}, setWidget, setActiveTabIndex };
|
||||
|
||||
const { associationWidget } = getDashboard({ name: "A", layer: "L1", entity: "Service" }, ConfigFieldTypes.NAME);
|
||||
|
||||
associationWidget("tab0-0-9", { isRange: true }, "Card");
|
||||
|
||||
// set widget called with merged filters
|
||||
expect(setWidget).toHaveBeenCalledTimes(1);
|
||||
expect(setWidget.mock.calls[0][0].id).toBe("tab0-1-0");
|
||||
expect(setWidget.mock.calls[0][0].filters).toEqual({ isRange: true });
|
||||
|
||||
// active tab index set to 1 (from target id tab0-1-0)
|
||||
expect(setActiveTabIndex).toHaveBeenCalledWith(1);
|
||||
|
||||
const main = document.querySelector(".ds-main") as HTMLElement;
|
||||
const tab = document.querySelector(".tab-layout") as HTMLElement;
|
||||
expect(main.scrollTop).toBe(10 * 10 + 20 * 5); // scroll to Tab container
|
||||
expect(tab.scrollTop).toBe(5 * 10 + 10 * 5); // scroll to widget inside tab layout
|
||||
});
|
||||
|
||||
it("associationWidget: when widget is missing, shows info message", () => {
|
||||
const layout: any[] = [{ type: "Line", id: "wid1", y: 0, h: 0 }];
|
||||
mockDashboardStore = { layout, currentDashboard: {}, setWidget: vi.fn(), setActiveTabIndex: vi.fn() };
|
||||
|
||||
const { associationWidget } = getDashboard({ name: "A", layer: "L1", entity: "Service" }, ConfigFieldTypes.NAME);
|
||||
associationWidget("src", {}, "Table");
|
||||
|
||||
expect(ElMessage.info as any).toHaveBeenCalledTimes(1);
|
||||
expect((ElMessage.info as any).mock.calls[0][0]).toContain("Table");
|
||||
});
|
||||
|
||||
it("associationWidget: if sourceId equals target widget id, only sets widget and returns early", () => {
|
||||
const layout = [{ type: "Line", id: "wid1", y: 3, h: 7 }];
|
||||
const setWidget = vi.fn();
|
||||
const setActiveTabIndex = vi.fn();
|
||||
mockDashboardStore = { layout, currentDashboard: {}, setWidget, setActiveTabIndex };
|
||||
|
||||
const { associationWidget } = getDashboard({ name: "A", layer: "L1", entity: "Service" }, ConfigFieldTypes.NAME);
|
||||
|
||||
associationWidget("wid1", { sourceId: "test" }, "Line");
|
||||
|
||||
expect(setWidget).toHaveBeenCalledTimes(1);
|
||||
expect(setActiveTabIndex).not.toHaveBeenCalled();
|
||||
|
||||
const main = document.querySelector(".ds-main") as HTMLElement;
|
||||
const tab = document.querySelector(".tab-layout") as HTMLElement;
|
||||
// Early return: scroll positions unchanged (default 0)
|
||||
expect(main.scrollTop).toBe(0);
|
||||
expect(tab.scrollTop).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user