test(testing-view): add tests for charts store slice

Author: maximka76667

frontend/testing-view/src/features/charts/store/__tests__/addChart.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { config } from "../../../../../config";
+import { WORKSPACE_ID, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+
+beforeEach(() => {
+  store = createTestStore();
+});
+
+describe("addChart", () => {
+  it("adds a chart to the specified workspace", () => {
+    store.getState().addChart(WORKSPACE_ID);
+
+    expect(store.getState().charts[WORKSPACE_ID]).toHaveLength(1);
+  });
+
+  it("returns the new chart's ID", () => {
+    const id = store.getState().addChart(WORKSPACE_ID);
+
+    expect(store.getState().charts[WORKSPACE_ID][0].id).toBe(id);
+  });
+
+  it("initializes the chart with an empty series array", () => {
+    const id = store.getState().addChart(WORKSPACE_ID);
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === id);
+
+    expect(chart?.series).toStrictEqual([]);
+  });
+
+  it("initializes the chart with the default history limit", () => {
+    const id = store.getState().addChart(WORKSPACE_ID);
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === id);
+
+    expect(chart?.historyLimit).toBe(config.DEFAULT_CHART_HISTORY_LIMIT);
+  });
+
+  it("does not affect other workspaces", () => {
+    const chartsBefore = store.getState().charts["workspace-2"];
+    store.getState().addChart(WORKSPACE_ID);
+
+    expect(store.getState().charts["workspace-2"]).toStrictEqual(chartsBefore);
+  });
+
+  it("each call adds a distinct chart", () => {
+    const id1 = store.getState().addChart(WORKSPACE_ID);
+    const id2 = store.getState().addChart(WORKSPACE_ID);
+
+    expect(id1).not.toBe(id2);
+    expect(store.getState().charts[WORKSPACE_ID]).toHaveLength(2);
+  });
+});

frontend/testing-view/src/features/charts/store/__tests__/chartHistoryLimit.test.ts

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { WORKSPACE_ID, addChart, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+let chartId: string;
+
+beforeEach(() => {
+  store = createTestStore();
+  chartId = addChart(store);
+});
+
+describe("setChartHistoryLimit", () => {
+  it("updates the history limit for the correct chart", () => {
+    store.getState().setChartHistoryLimit(WORKSPACE_ID, chartId, 500);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.historyLimit).toBe(500);
+  });
+
+  it("does not affect other charts in the same workspace", () => {
+    const otherId = addChart(store);
+    const otherLimitBefore = store.getState().charts[WORKSPACE_ID].find((c) => c.id === otherId)?.historyLimit;
+
+    store.getState().setChartHistoryLimit(WORKSPACE_ID, chartId, 500);
+
+    const otherChart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === otherId);
+    expect(otherChart?.historyLimit).toBe(otherLimitBefore);
+  });
+
+  it("does not affect charts in other workspaces", () => {
+    const otherChartId = addChart(store, "workspace-2");
+    const otherLimitBefore = store.getState().charts["workspace-2"].find((c) => c.id === otherChartId)?.historyLimit;
+
+    store.getState().setChartHistoryLimit(WORKSPACE_ID, chartId, 500);
+
+    const otherChart = store.getState().charts["workspace-2"].find((c) => c.id === otherChartId);
+    expect(otherChart?.historyLimit).toBe(otherLimitBefore);
+  });
+});

frontend/testing-view/src/features/charts/store/__tests__/chartSeries.test.ts

@@ -0,0 +1,87 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { SERIES_A, SERIES_B, SERIES_ENUM, WORKSPACE_ID, addChart, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+let chartId: string;
+
+beforeEach(() => {
+  store = createTestStore();
+  chartId = addChart(store);
+});
+
+// ─── addSeriesToChart ─────────────────────────────────────────────────────────
+
+describe("addSeriesToChart", () => {
+  it("adds a series to the correct chart", () => {
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_A);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.series).toHaveLength(1);
+    expect(chart?.series[0]).toStrictEqual(SERIES_A);
+  });
+
+  it("appends multiple series in order", () => {
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_A);
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_B);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.series).toStrictEqual([SERIES_A, SERIES_B]);
+  });
+
+  it("supports enum series", () => {
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_ENUM);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.series[0].enumOptions).toStrictEqual(["Idle", "Running", "Fault"]);
+  });
+
+  it("does not affect other charts in the same workspace", () => {
+    const otherId = addChart(store);
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_A);
+
+    const otherChart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === otherId);
+    expect(otherChart?.series).toHaveLength(0);
+  });
+
+  it("does not affect charts in other workspaces", () => {
+    const otherChartId = addChart(store, "workspace-2");
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_A);
+
+    const otherChart = store.getState().charts["workspace-2"].find((c) => c.id === otherChartId);
+    expect(otherChart?.series).toHaveLength(0);
+  });
+});
+
+// ─── removeSeriesFromChart ────────────────────────────────────────────────────
+
+describe("removeSeriesFromChart", () => {
+  beforeEach(() => {
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_A);
+    store.getState().addSeriesToChart(WORKSPACE_ID, chartId, SERIES_B);
+  });
+
+  it("removes the series with the given variable name", () => {
+    store.getState().removeSeriesFromChart(WORKSPACE_ID, chartId, SERIES_A.variable);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.series.find((s) => s.variable === SERIES_A.variable)).toBeUndefined();
+  });
+
+  it("keeps other series in the same chart", () => {
+    store.getState().removeSeriesFromChart(WORKSPACE_ID, chartId, SERIES_A.variable);
+
+    const chart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === chartId);
+    expect(chart?.series).toHaveLength(1);
+    expect(chart?.series[0]).toStrictEqual(SERIES_B);
+  });
+
+  it("does not affect other charts", () => {
+    const otherId = addChart(store);
+    store.getState().addSeriesToChart(WORKSPACE_ID, otherId, SERIES_A);
+
+    store.getState().removeSeriesFromChart(WORKSPACE_ID, chartId, SERIES_A.variable);
+
+    const otherChart = store.getState().charts[WORKSPACE_ID].find((c) => c.id === otherId);
+    expect(otherChart?.series).toHaveLength(1);
+  });
+});

frontend/testing-view/src/features/charts/store/__tests__/clearCharts.test.ts

@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { WORKSPACE_ID, addChart, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+
+beforeEach(() => {
+  store = createTestStore();
+});
+
+describe("clearCharts", () => {
+  it("removes all charts from the active workspace", () => {
+    addChart(store);
+    addChart(store);
+
+    store.getState().clearCharts();
+
+    expect(store.getState().charts[WORKSPACE_ID]).toHaveLength(0);
+  });
+
+  it("does not affect charts in other workspaces", () => {
+    addChart(store, "workspace-2");
+    addChart(store);
+
+    store.getState().clearCharts();
+
+    expect(store.getState().charts["workspace-2"]).toHaveLength(1);
+  });
+});

frontend/testing-view/src/features/charts/store/__tests__/getActiveWorkspaceCharts.test.ts

@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { WORKSPACE_ID, addChart, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+
+beforeEach(() => {
+  store = createTestStore();
+});
+
+describe("getActiveWorkspaceCharts", () => {
+  it("returns the charts for the active workspace", () => {
+    const id = addChart(store);
+
+    const charts = store.getState().getActiveWorkspaceCharts();
+    expect(charts).toHaveLength(1);
+    expect(charts[0].id).toBe(id);
+  });
+
+  it("returns an empty array when the workspace has no charts", () => {
+    expect(store.getState().getActiveWorkspaceCharts()).toStrictEqual([]);
+  });
+
+  it("reflects the active workspace — switching workspaces returns different charts", () => {
+    addChart(store);
+
+    const workspace2 = store.getState().workspaces[1];
+    store.getState().setActiveWorkspace(workspace2);
+
+    expect(store.getState().getActiveWorkspaceCharts()).toHaveLength(0);
+  });
+
+  it("updates after a chart is added", () => {
+    expect(store.getState().getActiveWorkspaceCharts()).toHaveLength(0);
+
+    addChart(store);
+
+    expect(store.getState().getActiveWorkspaceCharts()).toHaveLength(1);
+  });
+
+  it("updates after a chart is removed", () => {
+    const id = addChart(store);
+    store.getState().removeChart(WORKSPACE_ID, id);
+
+    expect(store.getState().getActiveWorkspaceCharts()).toStrictEqual([]);
+  });
+});

frontend/testing-view/src/features/charts/store/__tests__/helpers.ts

@@ -0,0 +1,51 @@
+import { create } from "zustand";
+import { createChartsSlice } from "../chartsSlice";
+import { createAppSlice } from "../../../../store/slices/appSlice";
+import { createCatalogSlice } from "../../../../store/slices/catalogSlice";
+import { createConnectionsSlice } from "../../../../store/slices/connectionsSlice";
+import { createMessagesSlice } from "../../../../store/slices/messagesSlice";
+import { createTelemetrySlice } from "../../../../store/slices/telemetrySlice";
+import { createRightSidebarSlice } from "../../../workspace/store/rightSidebarSlice";
+import { createWorkspacesSlice } from "../../../workspace/store/workspacesSlice";
+import { createFilteringSlice } from "../../../filtering/store/filteringSlice";
+import type { Store } from "../../../../store/store";
+import type { WorkspaceChartSeries } from "../../types/charts";
+
+export const createTestStore = () =>
+  create<Store>()((...a) => ({
+    ...createAppSlice(...a),
+    ...createCatalogSlice(...a),
+    ...createWorkspacesSlice(...a),
+    ...createTelemetrySlice(...a),
+    ...createRightSidebarSlice(...a),
+    ...createConnectionsSlice(...a),
+    ...createMessagesSlice(...a),
+    ...createChartsSlice(...a),
+    ...createFilteringSlice(...a),
+  }));
+
+export const WORKSPACE_ID = "workspace-1";
+
+export const SERIES_A: WorkspaceChartSeries = {
+  packetId: 1,
+  variable: "speed",
+};
+
+export const SERIES_B: WorkspaceChartSeries = {
+  packetId: 2,
+  variable: "temperature",
+};
+
+export const SERIES_ENUM: WorkspaceChartSeries = {
+  packetId: 3,
+  variable: "state",
+  enumOptions: ["Idle", "Running", "Fault"],
+};
+
+/** Adds a chart to the given workspace and returns its ID. */
+export function addChart(
+  store: ReturnType<typeof createTestStore>,
+  workspaceId = WORKSPACE_ID,
+) {
+  return store.getState().addChart(workspaceId);
+}

frontend/testing-view/src/features/charts/store/__tests__/removeChart.test.ts

@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { WORKSPACE_ID, addChart, createTestStore } from "./helpers";
+
+let store: ReturnType<typeof createTestStore>;
+
+beforeEach(() => {
+  store = createTestStore();
+});
+
+describe("removeChart", () => {
+  it("removes the correct chart", () => {
+    const id = addChart(store);
+    store.getState().removeChart(WORKSPACE_ID, id);
+
+    expect(store.getState().charts[WORKSPACE_ID]).toHaveLength(0);
+  });
+
+  it("does not remove other charts in the same workspace", () => {
+    const id1 = addChart(store);
+    const id2 = addChart(store);
+
+    store.getState().removeChart(WORKSPACE_ID, id1);
+
+    const remaining = store.getState().charts[WORKSPACE_ID];
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].id).toBe(id2);
+  });
+
+  it("does not affect charts in other workspaces", () => {
+    const id = addChart(store, "workspace-2");
+    addChart(store);
+
+    store.getState().removeChart(WORKSPACE_ID, store.getState().charts[WORKSPACE_ID][0].id);
+
+    expect(store.getState().charts["workspace-2"].find((c) => c.id === id)).toBeDefined();
+  });
+
+  it("does nothing when the chart ID does not exist", () => {
+    addChart(store);
+    const countBefore = store.getState().charts[WORKSPACE_ID].length;
+
+    store.getState().removeChart(WORKSPACE_ID, "non-existent-id");
+
+    expect(store.getState().charts[WORKSPACE_ID]).toHaveLength(countBefore);
+  });
+});