@oneuptime/common 13.0.7 → 14.0.0

package/Tests/App/Dashboard/AffectedResourcesSummaryStep.test.tsx

@@ -0,0 +1,307 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+
+/*
+ * The incident and scheduled maintenance wizards end on a summary that lists
+ * what each step picked. The "Resources Affected" step uses one picker that
+ * writes to every resource relation the page hands it, but its summary is
+ * hand-written per page - so a resource type the picker offers can be left
+ * out of it. Podman hosts were: pick only Podman hosts and the summary said
+ * "No resources affected", although the selection saved fine.
+ *
+ * The invariant pinned here: every resource prop the editor picker is given
+ * shows up in the summary. It drives the real pages, with ModelForm mocked to
+ * capture the fields it is handed (as MonitorCreateFromMonitorBackedDevice
+ * does), reads the resource props off the picker element the step renders,
+ * and renders the step's summary once per prop with only that type selected.
+ * A resource type added to a page's picker later is picked up without edits
+ * here.
+ */
+
+type CapturedField = {
+  stepId?: string | undefined;
+  getCustomElement?:
+    | ((
+        values: Record<string, unknown>,
+        elementProps: Record<string, unknown>,
+      ) => React.ReactElement)
+    | undefined;
+  getSummaryElement?:
+    | ((item: Record<string, unknown>) => React.ReactElement)
+    | undefined;
+};
+
+type CapturedFormProps = {
+  fields: Array<CapturedField>;
+};
+
+let capturedForm: CapturedFormProps | null = null;
+
+jest.mock("../../../UI/Components/Forms/ModelForm", () => {
+  // Only the component is stubbed: the pages import FormType from here too.
+  const actual: Record<string, unknown> = jest.requireActual(
+    "../../../UI/Components/Forms/ModelForm",
+  ) as Record<string, unknown>;
+
+  return {
+    __esModule: true,
+    ...actual,
+    default: (props: CapturedFormProps): React.ReactElement => {
+      capturedForm = props;
+      return <div data-testid="model-form" />;
+    },
+  };
+});
+
+/*
+ * The monitor summary looks its monitors up by id. Off the network, it
+ * renders how many ids it was given so the count is still observable.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/FetchMonitors",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: { monitorIds: Array<unknown> }): React.ReactElement => {
+        return <div>{`${props.monitorIds.length} monitor ids`}</div>;
+      },
+    };
+  },
+);
+
+import AffectedResourcesPicker, {
+  AffectedResourcesPayload,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/AffectedResources/AffectedResourcesPicker";
+import IncidentCreate from "../../../../App/FeatureSet/Dashboard/src/Pages/Incidents/Create";
+import ScheduledMaintenanceCreate from "../../../../App/FeatureSet/Dashboard/src/Pages/ScheduledMaintenanceEvents/Create";
+import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import Project from "../../../Models/DatabaseModels/Project";
+import Route from "../../../Types/API/Route";
+import ObjectID from "../../../Types/ObjectID";
+import Navigation from "../../../UI/Utils/Navigation";
+import ProjectUtil from "../../../UI/Utils/Project";
+
+type ResourceProp = Exclude<
+  keyof AffectedResourcesPayload,
+  "__affectedResourcesPayload"
+>;
+
+/*
+ * Every relation the picker can write. A Record keyed by the payload's own
+ * fields, so a resource type added to the picker fails to compile here until
+ * it is listed.
+ */
+const RESOURCE_PROPS: Record<ResourceProp, true> = {
+  monitors: true,
+  hosts: true,
+  kubernetesClusters: true,
+  dockerHosts: true,
+  podmanHosts: true,
+  proxmoxClusters: true,
+  vmwareVCenters: true,
+  cephClusters: true,
+  dockerSwarmClusters: true,
+  iotFleets: true,
+  networkSites: true,
+  services: true,
+};
+
+const RESOURCE_PROP_NAMES: Array<ResourceProp> = Object.keys(
+  RESOURCE_PROPS,
+) as Array<ResourceProp>;
+
+const NOTHING_SELECTED_PATTERN: RegExp = /No resources affected/;
+
+/*
+ * The selection size the per-type check uses, as a standalone number. Not \b:
+ * textContent runs a heading into the count after it ("Monitors3 monitor ids").
+ */
+const COUNT_OF_THREE_PATTERN: RegExp = /(^|\D)3(\D|$)/;
+
+type PageUnderTest = {
+  name: string;
+  component: React.FunctionComponent<PageComponentProps>;
+  route: string;
+};
+
+const PAGES: Array<PageUnderTest> = [
+  {
+    name: "incident create",
+    component: IncidentCreate,
+    route: "/dashboard/incidents/create",
+  },
+  {
+    name: "scheduled maintenance create",
+    component: ScheduledMaintenanceCreate,
+    route: "/dashboard/scheduled-maintenance-events/create",
+  },
+];
+
+type PickerStep = {
+  resourceProps: Array<ResourceProp>;
+  getSummaryElement: (item: Record<string, unknown>) => React.ReactElement;
+};
+
+async function openForm(page: PageUnderTest): Promise<CapturedFormProps> {
+  const project: Project = new Project();
+
+  render(
+    <MemoryRouter>
+      <page.component
+        pageRoute={new Route(page.route)}
+        currentProject={project}
+        hasPaymentMethod={true}
+      />
+    </MemoryRouter>,
+  );
+
+  await waitFor(() => {
+    expect(capturedForm).not.toBeNull();
+  });
+
+  return capturedForm!;
+}
+
+/** The fields whose editor is the picker and that render a summary. */
+function findPickerSteps(form: CapturedFormProps): Array<PickerStep> {
+  const emptySelection: Record<string, unknown> = {};
+  for (const prop of RESOURCE_PROP_NAMES) {
+    emptySelection[prop] = [];
+  }
+
+  const steps: Array<PickerStep> = [];
+
+  for (const field of form.fields) {
+    if (!field.getCustomElement || !field.getSummaryElement) {
+      continue;
+    }
+
+    const editor: React.ReactElement = field.getCustomElement(emptySelection, {
+      onChange: (): void => {},
+    });
+
+    if (editor.type !== AffectedResourcesPicker) {
+      continue;
+    }
+
+    const editorProps: Record<string, unknown> = editor.props as Record<
+      string,
+      unknown
+    >;
+
+    steps.push({
+      resourceProps: RESOURCE_PROP_NAMES.filter((prop: ResourceProp) => {
+        return prop in editorProps;
+      }),
+      getSummaryElement: field.getSummaryElement,
+    });
+  }
+
+  return steps;
+}
+
+function renderSummary(
+  step: PickerStep,
+  item: Record<string, unknown>,
+): string {
+  const { container } = render(step.getSummaryElement(item));
+  const text: string = container.textContent || "";
+  cleanup();
+  return text;
+}
+
+function ids(count: number): Array<string> {
+  return Array.from({ length: count }, () => {
+    return ObjectID.generate().toString();
+  });
+}
+
+describe("the Resources Affected summary step", () => {
+  beforeEach(() => {
+    capturedForm = null;
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(null);
+    jest.spyOn(Navigation, "getQueryStringByName").mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  describe.each(PAGES)("on the $name page", (page: PageUnderTest) => {
+    test("finds the picker step, so the checks below are not vacuous", async () => {
+      const steps: Array<PickerStep> = findPickerSteps(await openForm(page));
+
+      expect(steps).toHaveLength(1);
+      expect(steps[0]!.resourceProps).toEqual(
+        expect.arrayContaining(["monitors", "podmanHosts"]),
+      );
+    });
+
+    test("counts a selection of every resource type the picker offers", async () => {
+      const steps: Array<PickerStep> = findPickerSteps(await openForm(page));
+      const missing: Array<string> = [];
+
+      for (const step of steps) {
+        for (const prop of step.resourceProps) {
+          const text: string = renderSummary(step, { [prop]: ids(3) });
+
+          if (
+            NOTHING_SELECTED_PATTERN.test(text) ||
+            !COUNT_OF_THREE_PATTERN.test(text)
+          ) {
+            missing.push(`${prop}: "${text}"`);
+          }
+        }
+      }
+
+      expect(missing).toEqual([]);
+    });
+
+    test("says so when nothing is selected", async () => {
+      const [step] = findPickerSteps(await openForm(page));
+
+      expect(renderSummary(step!, {})).toMatch(NOTHING_SELECTED_PATTERN);
+    });
+
+    test("names Podman hosts, singular and plural", async () => {
+      const [step] = findPickerSteps(await openForm(page));
+
+      expect(renderSummary(step!, { podmanHosts: ids(1) })).toContain(
+        "1 Podman host",
+      );
+      expect(renderSummary(step!, { podmanHosts: ids(1) })).not.toContain(
+        "1 Podman hosts",
+      );
+      expect(renderSummary(step!, { podmanHosts: ids(2) })).toContain(
+        "2 Podman hosts",
+      );
+    });
+
+    test("lists Podman hosts alongside the other resource types", async () => {
+      const [step] = findPickerSteps(await openForm(page));
+
+      const text: string = renderSummary(step!, {
+        monitors: ids(1),
+        dockerHosts: ids(2),
+        podmanHosts: ids(4),
+        services: ids(1),
+      });
+
+      expect(text).toContain("1 monitor ids");
+      expect(text).toContain("2 Docker hosts");
+      expect(text).toContain("4 Podman hosts");
+      expect(text).toContain("1 service");
+    });
+  });
+});

package/Tests/App/Dashboard/ArgumentsFormGroupByUnlistedAttributes.test.tsx

@@ -0,0 +1,131 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import React from "react";
+import { Mock } from "jest-mock";
+import ArgumentsForm from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm";
+import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
+import DashboardTableComponent, {
+  TableGroupByAttribute,
+} from "../../../Types/Dashboard/DashboardComponents/DashboardTableComponent";
+import DashboardTableComponentUtil from "../../../Utils/Dashboard/Components/DashboardTableComponent";
+import { JSONObject } from "../../../Types/JSON";
+
+/*
+ * The table widget's "Group By Attributes" picker offers the project's
+ * telemetry attribute keys, and that list only covers keys seen in the last
+ * day (capped, alphabetically). A widget grouped by an attribute emitted less
+ * often - a weekly batch job - has a saved key the list is missing. The picker
+ * used to show no chip for it, and since the dropdown only reports the chips it
+ * shows, the next add or remove saved the widget without that key or its
+ * custom header, while "Column headers" still listed it.
+ */
+
+const LISTED_ATTRIBUTES: Array<string> = ["host.name", "service.name"];
+
+const SAVED_GROUP_BY: Array<TableGroupByAttribute> = [
+  { key: "batch.job.name", header: "Job" },
+  { key: "service.name", header: "Service" },
+];
+
+type OnFormChangeMock = Mock<(component: DashboardBaseComponent) => void>;
+
+function renderTableSettings(): OnFormChangeMock {
+  const table: DashboardTableComponent =
+    DashboardTableComponentUtil.getDefaultComponent();
+  table.arguments.groupByAttributes = SAVED_GROUP_BY;
+
+  const onFormChange: OnFormChangeMock =
+    jest.fn<(component: DashboardBaseComponent) => void>();
+
+  render(
+    <ArgumentsForm
+      component={table}
+      metrics={{ metricTypes: [], telemetryAttributes: LISTED_ATTRIBUTES }}
+      onFormChange={onFormChange}
+    />,
+  );
+
+  return onFormChange;
+}
+
+function removeChipButton(label: string): HTMLElement {
+  return screen.getByRole("button", { name: `Remove ${label}` });
+}
+
+function groupByPicker(): HTMLElement {
+  return within(
+    screen.getByText("Group By Attributes").parentElement as HTMLElement,
+  ).getByRole("combobox");
+}
+
+function lastSavedGroupBy(
+  onFormChange: OnFormChangeMock,
+): Array<TableGroupByAttribute> {
+  const lastCall: [DashboardBaseComponent] | undefined =
+    onFormChange.mock.calls[onFormChange.mock.calls.length - 1];
+  expect(lastCall).toBeDefined();
+
+  return (lastCall![0].arguments as JSONObject)[
+    "groupByAttributes"
+  ] as unknown as Array<TableGroupByAttribute>;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Table widget group-by picker with a key missing from the attribute list", () => {
+  test("shows a chip for a saved key the attribute list is missing", () => {
+    renderTableSettings();
+
+    expect(removeChipButton("batch.job.name")).toBeInTheDocument();
+    expect(removeChipButton("service.name")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Job")).toBeInTheDocument();
+  });
+
+  test("removing a different chip keeps the unlisted key and its header", () => {
+    const onFormChange: OnFormChangeMock = renderTableSettings();
+
+    fireEvent.click(removeChipButton("service.name"));
+
+    expect(lastSavedGroupBy(onFormChange)).toEqual([
+      { key: "batch.job.name", header: "Job" },
+    ]);
+    expect(removeChipButton("batch.job.name")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Remove service.name" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByDisplayValue("Job")).toBeInTheDocument();
+  });
+
+  test("adding a new key keeps the unlisted key and its header", () => {
+    const onFormChange: OnFormChangeMock = renderTableSettings();
+
+    fireEvent.keyDown(groupByPicker(), { key: "ArrowDown" });
+    const option: HTMLElement = screen.getByRole("option", {
+      name: "host.name",
+    });
+    fireEvent.mouseDown(option);
+    fireEvent.click(option);
+
+    const saved: Array<TableGroupByAttribute> = lastSavedGroupBy(onFormChange);
+    expect(saved).toHaveLength(3);
+    expect(saved).toEqual(
+      expect.arrayContaining([
+        { key: "batch.job.name", header: "Job" },
+        { key: "service.name", header: "Service" },
+        { key: "host.name" },
+      ]),
+    );
+    expect(removeChipButton("batch.job.name")).toBeInTheDocument();
+    expect(removeChipButton("host.name")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Job")).toBeInTheDocument();
+  });
+});