skywalking-booster-ui/src/hooks/__tests__/useDashboardsSession.spec.ts

/**
 * 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);
  });
});