@oneuptime/common 13.0.0 → 13.0.1

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

@@ -0,0 +1,195 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { beforeEach, describe, expect, it } from "@jest/globals";
+import CheckoutForm from "../../../../App/FeatureSet/Dashboard/src/Pages/Settings/BillingPaymentMethodForm";
+import Navigation from "../../../UI/Utils/Navigation";
+import URL from "../../../Types/API/URL";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import { getJestSpyOn } from "../../Spy";
+
+const confirmSetupMock: MockFunction = getJestMockFunction();
+let stripeReady: boolean = true;
+let elementsReady: boolean = true;
+const mockElements: Record<string, unknown> = {};
+
+jest.mock(
+  "@stripe/react-stripe-js",
+  () => {
+    return {
+      PaymentElement: () => {
+        return <div data-testid="stripe-payment-element">Payment details</div>;
+      },
+      useStripe: () => {
+        return stripeReady ? { confirmSetup: confirmSetupMock } : null;
+      },
+      useElements: () => {
+        return elementsReady ? mockElements : null;
+      },
+    };
+  },
+  { virtual: true },
+);
+
+function renderForm(): {
+  onError: MockFunction;
+  onSuccess: MockFunction;
+  submit: () => void;
+  unmount: () => void;
+} {
+  const onError: MockFunction = getJestMockFunction();
+  const onSuccess: MockFunction = getJestMockFunction();
+  const formRef: React.RefObject<HTMLButtonElement> =
+    React.createRef<HTMLButtonElement>();
+  const { unmount } = render(
+    <CheckoutForm formRef={formRef} onError={onError} onSuccess={onSuccess} />,
+  );
+  return {
+    onError,
+    onSuccess,
+    submit: () => {
+      fireEvent.click(formRef.current!);
+    },
+    unmount,
+  };
+}
+
+describe("Adding a payment method", () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    confirmSetupMock.mockReset().mockResolvedValue({});
+    stripeReady = true;
+    elementsReady = true;
+    getJestSpyOn(Navigation, "getCurrentURL").mockReturnValue(
+      URL.fromString(
+        "https://example.com/dashboard/project/settings/billing?setup_intent=old",
+      ),
+    );
+  });
+
+  it("shows payment details without a pricing or acknowledgement panel", () => {
+    renderForm();
+    expect(screen.getByTestId("stripe-payment-element")).toBeInTheDocument();
+    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("payment-method-usage-consent"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/Adding a payment method enables paid usage/),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText(/Active monitors:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Session replay:/)).not.toBeInTheDocument();
+  });
+
+  it("does not start setup when payment details are clicked", async () => {
+    renderForm();
+    await userEvent.click(screen.getByTestId("stripe-payment-element"));
+    expect(confirmSetupMock).not.toHaveBeenCalled();
+  });
+
+  it("saves without an acknowledgement and returns to the clean billing URL", async () => {
+    const { submit, onSuccess, onError } = renderForm();
+    submit();
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+    });
+    expect(confirmSetupMock).toHaveBeenCalledWith({
+      elements: mockElements,
+      confirmParams: {
+        return_url: "https://example.com/dashboard/project/settings/billing",
+      },
+    });
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it.each(["stripe", "elements"])(
+    "reports an unavailable %s provider instead of leaving the save button loading",
+    (provider: string) => {
+      stripeReady = provider !== "stripe";
+      elementsReady = provider !== "elements";
+      const { submit, onError } = renderForm();
+      submit();
+      expect(onError).toHaveBeenCalledWith(
+        "The payment form is still loading. Please try again in a moment.",
+      );
+      expect(confirmSetupMock).not.toHaveBeenCalled();
+    },
+  );
+
+  it("reports a provider error and supports retry", async () => {
+    confirmSetupMock
+      .mockResolvedValueOnce({ error: { message: "Your card was declined." } })
+      .mockResolvedValueOnce({});
+    const { submit, onSuccess, onError } = renderForm();
+    submit();
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith("Your card was declined.");
+    });
+    expect(onSuccess).not.toHaveBeenCalled();
+    submit();
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+    });
+    expect(confirmSetupMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("recovers from an unexpected provider failure without an unhandled rejection", async () => {
+    confirmSetupMock.mockRejectedValueOnce(new Error("Network error"));
+    const { submit, onError, onSuccess } = renderForm();
+    submit();
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith(
+        "Unable to save your payment method. Please try again.",
+      );
+    });
+    expect(onSuccess).not.toHaveBeenCalled();
+    submit();
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("suppresses duplicate submissions while setup is in progress", async () => {
+    let resolveSetup: ((result: Record<string, unknown>) => void) | undefined;
+    confirmSetupMock.mockImplementationOnce(() => {
+      return new Promise<Record<string, unknown>>(
+        (resolve: (result: Record<string, unknown>) => void) => {
+          resolveSetup = resolve;
+        },
+      );
+    });
+    const { submit, onSuccess } = renderForm();
+    submit();
+    submit();
+    expect(confirmSetupMock).toHaveBeenCalledTimes(1);
+    await act(async () => {
+      resolveSetup!({});
+    });
+    expect(onSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it("can save again when the add-card form is reopened", async () => {
+    const first: ReturnType<typeof renderForm> = renderForm();
+    first.submit();
+    await waitFor(() => {
+      expect(first.onSuccess).toHaveBeenCalledTimes(1);
+    });
+    first.unmount();
+
+    const second: ReturnType<typeof renderForm> = renderForm();
+    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+    second.submit();
+    await waitFor(() => {
+      expect(second.onSuccess).toHaveBeenCalledTimes(1);
+    });
+    expect(second.onError).not.toHaveBeenCalled();
+    expect(confirmSetupMock).toHaveBeenCalledTimes(2);
+  });
+});

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

@@ -0,0 +1,199 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import * as React from "react";
+import { matchRoutes } from "react-router-dom";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import RouteMap, {
+  AlertsRoutePath,
+  IncidentsRoutePath,
+  MonitorsRoutePath,
+  ScheduledMaintenanceEventsRoutePath,
+  SettingsRoutePath,
+  RouteUtil,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+import { getAlertsBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs";
+import { getIncidentsBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/IncidentBreadcrumbs";
+import { getMonitorBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/MonitorBreadcrumbs";
+import { getScheduleMaintenanceBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/ScheduledMaintenanceBreadcrumbs";
+import { getSettingsBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/SettingsBreadcrumbs";
+import Route from "../../../Types/API/Route";
+import Dictionary from "../../../Types/Dictionary";
+import Link from "../../../Types/Link";
+import Page from "../../../UI/Components/Page/Page";
+import Navigation from "../../../UI/Utils/Navigation";
+import { goTo, PROJECT_ID } from "./SideMenuHarness";
+
+jest.mock("../../../UI/Utils/Analytics", () => {
+  return { __esModule: true, default: { capture: jest.fn() } };
+});
+
+type BreadcrumbGetter = (path: string) => Array<Link> | undefined;
+
+interface Product {
+  name: string;
+  landing: PageMap;
+  routes: Dictionary<string>;
+  getBreadcrumbs: BreadcrumbGetter;
+}
+
+const products: Array<Product> = [
+  {
+    name: "Alerts",
+    landing: PageMap.ALERTS,
+    routes: AlertsRoutePath,
+    getBreadcrumbs: getAlertsBreadcrumbs,
+  },
+  {
+    name: "Incidents",
+    landing: PageMap.INCIDENTS,
+    routes: IncidentsRoutePath,
+    getBreadcrumbs: getIncidentsBreadcrumbs,
+  },
+  {
+    name: "Monitors",
+    landing: PageMap.MONITORS,
+    routes: MonitorsRoutePath,
+    getBreadcrumbs: getMonitorBreadcrumbs,
+  },
+  {
+    name: "Scheduled maintenance",
+    landing: PageMap.SCHEDULED_MAINTENANCE_EVENTS,
+    routes: ScheduledMaintenanceEventsRoutePath,
+    getBreadcrumbs: getScheduleMaintenanceBreadcrumbs,
+  },
+  {
+    name: "Project settings",
+    landing: PageMap.SETTINGS,
+    routes: SettingsRoutePath,
+    getBreadcrumbs: getSettingsBreadcrumbs,
+  },
+];
+
+const modelId: string = "7b3b1548-23cd-46ab-8359-280eb34362af";
+const realRoutes: Array<{ path: string }> = Object.values(RouteMap)
+  .map((route: Route): { path: string } => {
+    return { path: route.toString() };
+  })
+  .filter((route: { path: string }): boolean => {
+    return !route.path.includes("*");
+  });
+
+function visit(page: string): string {
+  const path: string = RouteUtil.getRouteString(page)
+    .replace(":projectId", PROJECT_ID)
+    .replace(":id", modelId);
+  goTo(path);
+  return path;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe.each(products)("$name breadcrumb coverage", (product: Product) => {
+  /*
+   * Use the router's inventory, not a second list of pages that can omit the
+   * same new page as the breadcrumb map.
+   */
+  test.each([product.landing, ...Object.keys(product.routes)])(
+    "%s has a complete, navigable trail through the Page header",
+    (page: string) => {
+      const currentPath: string = visit(page);
+      const matchedPath: string = Navigation.getRoutePath(
+        RouteUtil.getRoutes(),
+      );
+      expect(matchedPath).toBe(RouteUtil.getRouteString(page));
+
+      const links: Array<Link> | undefined =
+        product.getBreadcrumbs(matchedPath);
+      expect(links).toBeDefined();
+      expect(links!.length).toBeGreaterThanOrEqual(2);
+      expect(links![0]?.title).toBe("Project");
+      expect(links![0]?.to.toString()).toBe(`/dashboard/${PROJECT_ID}`);
+      expect(links![links!.length - 1]?.to.toString()).toBe(currentPath);
+
+      links!.forEach((link: Link) => {
+        expect(link.title.trim().length).toBeGreaterThan(0);
+        expect(link.to.toString()).not.toMatch(/[:*]/);
+        expect(matchRoutes(realRoutes, link.to.toString())).not.toBeNull();
+      });
+
+      render(
+        <Page title={product.name} breadcrumbLinks={links}>
+          <div>Page content</div>
+        </Page>,
+      );
+      const trail: HTMLElement = screen.getByRole("navigation", {
+        name: "Breadcrumb",
+      });
+      expect(within(trail).getAllByRole("listitem")).toHaveLength(
+        links!.length,
+      );
+      expect(trail).not.toHaveClass("hidden");
+      expect(screen.getByText("Page content")).toBeInTheDocument();
+      within(trail)
+        .getAllByRole("link")
+        .forEach((anchor: HTMLElement) => {
+          expect(anchor.getAttribute("href")).not.toBe(currentPath);
+        });
+    },
+  );
+
+  test("does not invent breadcrumbs for an unknown page", () => {
+    visit(product.landing);
+    expect(product.getBreadcrumbs("/not-a-page")).toBeUndefined();
+  });
+});
+
+describe("restored breadcrumb hierarchy", () => {
+  test.each([
+    [
+      PageMap.INCIDENT_EPISODE_VIEW_AUDIT_LOGS,
+      getIncidentsBreadcrumbs,
+      ["Project", "Incidents", "Episodes", "View Episode", "Audit Logs"],
+      PageMap.INCIDENT_EPISODE_VIEW,
+    ],
+    [
+      PageMap.ALERT_EPISODE_VIEW_REMEDIATION,
+      getAlertsBreadcrumbs,
+      ["Project", "Alerts", "Episodes", "View Episode", "Remediation"],
+      PageMap.ALERT_EPISODE_VIEW,
+    ],
+    [
+      PageMap.MONITORS_SETTINGS_TEMPLATES_VIEW,
+      getMonitorBreadcrumbs,
+      ["Project", "Monitors", "Settings", "Templates", "View Template"],
+      PageMap.MONITORS_SETTINGS_TEMPLATES,
+    ],
+    [
+      PageMap.SETTINGS_TELEMETRY_INGESTION_KEY_VIEW,
+      getSettingsBreadcrumbs,
+      ["Project", "Settings", "Telemetry Ingestion Keys", "View Key"],
+      PageMap.SETTINGS_TELEMETRY_INGESTION_KEYS,
+    ],
+  ] as Array<[PageMap, BreadcrumbGetter, Array<string>, PageMap]>)(
+    "%s preserves its parent link and leaf title",
+    (
+      page: PageMap,
+      getBreadcrumbs: BreadcrumbGetter,
+      titles: Array<string>,
+      parent: PageMap,
+    ) => {
+      visit(page);
+      const links: Array<Link> = getBreadcrumbs(
+        RouteUtil.getRouteString(page),
+      )!;
+      expect(
+        links.map((link: Link): string => {
+          return link.title;
+        }),
+      ).toEqual(titles);
+      expect(links[links.length - 2]?.to.toString()).toBe(
+        RouteUtil.getRouteString(parent)
+          .replace(":projectId", PROJECT_ID)
+          .replace(":id", modelId),
+      );
+    },
+  );
+});

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

@@ -0,0 +1,198 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import CloudDocumentationCard from "../../../../App/FeatureSet/Dashboard/src/Components/Cloud/CloudDocumentationCard";
+import ModelAPI from "../../../UI/Utils/ModelAPI/ModelAPI";
+import ProjectUtil from "../../../UI/Utils/Project";
+import TelemetryIngestionKey from "../../../Models/DatabaseModels/TelemetryIngestionKey";
+import ObjectID from "../../../Types/ObjectID";
+import {
+  MANAGED_CLOUD_PLATFORMS,
+  ManagedCloudPlatform,
+  ManagedCloudPlatformDescriptor,
+} from "../../../Types/Cloud/CloudPlatform";
+
+/*
+ * The cloud guide as it reaches the screen.
+ *
+ * App/Tests/Dashboard/CloudDocumentationCard.test.ts pins the wiring at the
+ * source level because the App suite has no React. What is pinned here is
+ * the behaviour: the picker opens on the environment's own platform, falls
+ * back to ECS for a value ingest would not accept, offers exactly the
+ * registry's platforms, re-renders the guide when the selection changes,
+ * and hands the selected key's secret to the guide rather than a
+ * placeholder — the one thing that makes the snippets pasteable.
+ *
+ * react-markdown is mocked in Common's jest config to render its children
+ * as text, so the guide's markdown source is what the container holds.
+ */
+
+const PROJECT_ID: ObjectID = new ObjectID("project-1");
+
+const FIRST_KEY: TelemetryIngestionKey = new TelemetryIngestionKey();
+FIRST_KEY.id = new ObjectID("key-1");
+FIRST_KEY.name = "Production Key";
+FIRST_KEY.secretKey = new ObjectID("secret-production");
+
+type RenderCardFunction = (initialPlatform?: string | undefined) => HTMLElement;
+
+const renderCard: RenderCardFunction = (
+  initialPlatform?: string | undefined,
+): HTMLElement => {
+  const { container } = render(
+    <MemoryRouter>
+      <CloudDocumentationCard
+        title="Connect a cloud environment"
+        description="Where the settings go."
+        initialPlatform={initialPlatform}
+      />
+    </MemoryRouter>,
+  );
+
+  return container;
+};
+
+const platformPicker: () => HTMLElement = (): HTMLElement => {
+  return screen.getByRole("combobox", { name: "Select cloud platform" });
+};
+
+/*
+ * react-select renders its menu on ArrowDown; the option label is unique on
+ * the page at that moment (the guide's heading says "Connect <name>", which
+ * is a different string), so a global text lookup finds it.
+ */
+const pickPlatform: (label: string) => void = (label: string): void => {
+  fireEvent.keyDown(platformPicker(), { key: "ArrowDown" });
+  const option: HTMLElement = screen.getByText(label);
+  fireEvent.mouseDown(option);
+  fireEvent.click(option);
+};
+
+describe("CloudDocumentationCard", () => {
+  beforeEach(() => {
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+    jest.spyOn(ModelAPI, "getList").mockResolvedValue({
+      data: [FIRST_KEY],
+      count: 1,
+      skip: 0,
+      limit: 50,
+    } as never);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  test("opens on the environment's own platform", async () => {
+    const container: HTMLElement = renderCard(ManagedCloudPlatform.GcpCloudRun);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain("## Connect Google Cloud Run");
+    });
+
+    expect(container.textContent).toContain("cloud.platform=gcp_cloud_run");
+    expect(container.textContent).not.toContain("## Connect AWS ECS / Fargate");
+  });
+
+  test("falls back to AWS ECS when the platform is unknown or missing", async () => {
+    const withVmPlatform: HTMLElement = renderCard("aws_ec2");
+
+    await waitFor(() => {
+      expect(withVmPlatform.textContent).toContain(
+        "## Connect AWS ECS / Fargate",
+      );
+    });
+
+    cleanup();
+
+    const withoutPlatform: HTMLElement = renderCard(undefined);
+
+    await waitFor(() => {
+      expect(withoutPlatform.textContent).toContain(
+        "## Connect AWS ECS / Fargate",
+      );
+    });
+  });
+
+  test("interpolates the selected key's secret, not the placeholder", async () => {
+    const container: HTMLElement = renderCard(ManagedCloudPlatform.AwsEcs);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain(
+        "x-oneuptime-token: secret-production",
+      );
+    });
+
+    expect(container.textContent).not.toContain("<YOUR_API_KEY>");
+  });
+
+  test("offers exactly the registry's platforms", async () => {
+    renderCard(ManagedCloudPlatform.AwsEcs);
+
+    await waitFor(() => {
+      expect(platformPicker()).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(platformPicker(), { key: "ArrowDown" });
+
+    /*
+     * The selected platform's name is on screen twice — as the picker's
+     * current value and as its menu option — so count matches rather than
+     * insisting on one.
+     */
+    for (const descriptor of MANAGED_CLOUD_PLATFORMS) {
+      expect(
+        screen.getAllByText(descriptor.productName).length,
+      ).toBeGreaterThan(0);
+    }
+
+    /* Grouped by provider, so the group headings are on screen too. */
+    expect(screen.getByText("AWS")).toBeInTheDocument();
+    expect(screen.getByText("Google Cloud")).toBeInTheDocument();
+    expect(screen.getByText("Azure")).toBeInTheDocument();
+  });
+
+  test("switching the platform switches the guide", async () => {
+    const container: HTMLElement = renderCard(ManagedCloudPlatform.AwsEcs);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain("## Connect AWS ECS / Fargate");
+    });
+
+    const azure: ManagedCloudPlatformDescriptor = MANAGED_CLOUD_PLATFORMS.find(
+      (descriptor: ManagedCloudPlatformDescriptor): boolean => {
+        return descriptor.platform === ManagedCloudPlatform.AzureContainerApps;
+      },
+    ) as ManagedCloudPlatformDescriptor;
+
+    pickPlatform(azure.productName);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain(
+        "## Connect Azure Container Apps",
+      );
+    });
+
+    expect(container.textContent).toContain("CONTAINER_APP_REPLICA_NAME");
+    expect(container.textContent).toContain(`](${azure.docsUrl})`);
+    expect(container.textContent).not.toContain("## Connect AWS ECS / Fargate");
+    /* The key's secret follows the guide across the switch. */
+    expect(container.textContent).toContain("secret-production");
+  });
+});