@oneuptime/common 14.0.6 → 14.0.8

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

@@ -0,0 +1,196 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, render, screen } from "@testing-library/react";
+import React from "react";
+
+/*
+ * The subscriber notification template editor's live preview: the template
+ * as it is typed, filled in with sample values by the compiler the jobs use.
+ * An email shows in a frame that runs nothing and cannot reach the
+ * dashboard; the other channels show the text they would send.
+ */
+
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+import SubscriberTemplateLivePreview from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/SubscriberTemplateLivePreview";
+import SubscriberNotificationPreviewCopy from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/SubscriberNotificationPreviewCopy";
+import { getEmailPreviewDocument } from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/EmailPreviewFrame";
+import StatusPageSubscriberNotificationEventType from "../../../Types/StatusPage/StatusPageSubscriberNotificationEventType";
+import StatusPageSubscriberNotificationMethod from "../../../Types/StatusPage/StatusPageSubscriberNotificationMethod";
+import SubscriberNotificationTemplatePreview from "../../../Types/StatusPage/SubscriberNotificationTemplatePreview";
+
+const INCIDENT_CREATED: StatusPageSubscriberNotificationEventType =
+  StatusPageSubscriberNotificationEventType.SubscriberIncidentCreated;
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SubscriberTemplateLivePreview", () => {
+  test("an email: the subject and the body filled with sample values, in a sandboxed frame", () => {
+    const body: string =
+      "<h1>{{incidentTitle}}</h1>{{incidentDescription}}<script>alert(1)</script>";
+
+    render(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Email}
+        templateBody={body}
+        emailSubject="{{statusPageName}}: {{incidentTitle}}"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-subject"),
+    ).toHaveTextContent("Acme Status: Checkout requests are failing");
+
+    const frame: HTMLIFrameElement = screen.getByTestId(
+      "subscriber-template-preview-frame",
+    ) as HTMLIFrameElement;
+
+    // The same compile the jobs fill the template with.
+    expect(frame.getAttribute("srcdoc")).toBe(
+      getEmailPreviewDocument(
+        SubscriberNotificationTemplatePreview.render({
+          eventType: INCIDENT_CREATED,
+          notificationMethod: StatusPageSubscriberNotificationMethod.Email,
+          templateBody: body,
+          emailSubject: "",
+        }).body,
+      ),
+    );
+    expect(frame.getAttribute("srcdoc")).toContain(
+      "<h1>Checkout requests are failing</h1><p>Customers in <strong>Europe</strong>",
+    );
+
+    const sandbox: Array<string> = (frame.getAttribute("sandbox") || "").split(
+      /\s+/,
+    );
+    expect(frame.hasAttribute("sandbox")).toBe(true);
+    expect(sandbox).not.toContain("allow-scripts");
+    expect(sandbox).not.toContain("allow-same-origin");
+  });
+
+  test("updates as the template is typed", () => {
+    const { rerender } = render(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.SMS}
+        templateBody="{{incidentTitle}}"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-text"),
+    ).toHaveTextContent("Checkout requests are failing");
+
+    rerender(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.SMS}
+        templateBody="{{incidentTitle}} ({{incidentSeverity}})"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-text"),
+    ).toHaveTextContent("Checkout requests are failing (Major)");
+  });
+
+  test("an email with no subject says the default subject is used", () => {
+    render(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Email}
+        templateBody="<p>{{incidentTitle}}</p>"
+        emailSubject=""
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-subject"),
+    ).toHaveTextContent(SubscriberNotificationPreviewCopy.livePreviewNoSubject);
+  });
+
+  test("Slack shows the Markdown it would send, and lists placeholders the event does not offer", () => {
+    render(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Slack}
+        templateBody="**{{incidentTitle}}** {{incidentStat}}"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-text"),
+    ).toHaveTextContent("**Checkout requests are failing** {{incidentStat}}");
+    expect(
+      screen.getByTestId("subscriber-template-preview-unknown-placeholders"),
+    ).toHaveTextContent(
+      "Not variables of this event, so sent as written: {{incidentStat}}",
+    );
+    expect(
+      screen.queryByTestId("subscriber-template-preview-frame"),
+    ).toBeNull();
+  });
+
+  test("before an event type is picked, or while the body is empty, it says what to do", () => {
+    const { rerender } = render(
+      <SubscriberTemplateLivePreview
+        eventType={undefined}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Email}
+        templateBody="<p>x</p>"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-empty"),
+    ).toHaveTextContent(
+      SubscriberNotificationPreviewCopy.livePreviewPickEventType,
+    );
+
+    rerender(
+      <SubscriberTemplateLivePreview
+        eventType={INCIDENT_CREATED}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Email}
+        templateBody="   "
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-empty"),
+    ).toHaveTextContent(
+      SubscriberNotificationPreviewCopy.livePreviewEmptyTemplate,
+    );
+  });
+
+  test("a report template has no preview", () => {
+    render(
+      <SubscriberTemplateLivePreview
+        eventType={StatusPageSubscriberNotificationEventType.SubscriberReport}
+        notificationMethod={StatusPageSubscriberNotificationMethod.Email}
+        templateBody="{{report.reportDates}}"
+      />,
+    );
+
+    expect(
+      screen.getByTestId("subscriber-template-preview-unavailable"),
+    ).toHaveTextContent(
+      SubscriberNotificationPreviewCopy.livePreviewReportUnavailable,
+    );
+  });
+});

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

@@ -0,0 +1,248 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The notice above a status page's subscriber list naming the subscribers
+ * the team added that have unsubscribed recently. Every notification can be
+ * unsubscribed from without signing in, so one reader of a shared address
+ * can take a whole site off the page; the owners are emailed, and this
+ * keeps it on screen for everyone else who manages the list.
+ *
+ * The list request is stubbed and recorded: these pin what it asks for (this
+ * page, this channel, only team-added subscribers, only the last 30 days,
+ * newest first) and what the notice says.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+import TeamAddedSubscribersUnsubscribedNotice from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/TeamAddedSubscribersUnsubscribedNotice";
+import SubscriberUnsubscribeCopy, {
+  RECENTLY_UNSUBSCRIBED_LIST_LIMIT,
+  RECENTLY_UNSUBSCRIBED_WINDOW_IN_DAYS,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/SubscriberUnsubscribeCopy";
+import StatusPageSubscriber from "../../../Models/DatabaseModels/StatusPageSubscriber";
+import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import Email from "../../../Types/Email";
+import { JSONObject } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import Phone from "../../../Types/Phone";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "10000000-0000-4000-8000-000000000001",
+);
+const STATUS_PAGE_ID: ObjectID = new ObjectID(
+  "20000000-0000-4000-8000-000000000002",
+);
+
+function emailSubscriber(email: string, index: number): StatusPageSubscriber {
+  const row: StatusPageSubscriber = new StatusPageSubscriber();
+  row._id = `30000000-0000-4000-8000-00000000000${index}`;
+  row.subscriberEmail = new Email(email);
+  row.unsubscribedAt = new Date("2026-09-20T10:00:00.000Z");
+  return row;
+}
+
+async function renderNotice(props?: {
+  channelQuery?: JSONObject;
+  contactSelect?: JSONObject;
+}): Promise<void> {
+  await act(async () => {
+    render(
+      <TeamAddedSubscribersUnsubscribedNotice
+        statusPageId={STATUS_PAGE_ID}
+        projectId={PROJECT_ID}
+        channelQuery={
+          (props?.channelQuery as never) || { subscriberEmail: new NotNull() }
+        }
+        contactSelect={
+          (props?.contactSelect as never) || { subscriberEmail: true }
+        }
+      />,
+    );
+  });
+}
+
+function listRequest(): JSONObject {
+  expect(getListMock).toHaveBeenCalledTimes(1);
+  return getListMock.mock.calls[0]![0] as JSONObject;
+}
+
+beforeEach(() => {
+  getListMock.mockReset();
+  getListMock.mockResolvedValue({
+    data: [],
+    count: 0,
+    skip: 0,
+    limit: RECENTLY_UNSUBSCRIBED_LIST_LIMIT,
+  } as never);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("TeamAddedSubscribersUnsubscribedNotice", () => {
+  test("asks for this page's team-added subscribers on this channel that left in the last 30 days", async () => {
+    const before: number = Date.now();
+
+    await renderNotice();
+
+    const request: JSONObject = listRequest();
+    const query: JSONObject = request["query"] as JSONObject;
+
+    expect(request["modelType"]).toBe(StatusPageSubscriber);
+    expect(query["statusPageId"]).toBe(STATUS_PAGE_ID);
+    expect(query["projectId"]).toBe(PROJECT_ID);
+    expect(query["isUnsubscribed"]).toBe(true);
+    /*
+     * Is Added By Team, not Created By: a subscriber an API key or a
+     * workflow added has no creator, and is the team's all the same.
+     */
+    expect(query["isAddedByTeam"]).toBe(true);
+    expect(query["createdByUserId"]).toBeUndefined();
+    expect(query["subscriberEmail"]).toBeInstanceOf(NotNull);
+
+    const since: GreaterThan<Date> = query["unsubscribedAt"] as never;
+    expect(since).toBeInstanceOf(GreaterThan);
+    const windowStart: number = new Date(since.value as Date).getTime();
+    const expected: number =
+      before - RECENTLY_UNSUBSCRIBED_WINDOW_IN_DAYS * 24 * 60 * 60 * 1000;
+    expect(Math.abs(windowStart - expected)).toBeLessThan(60 * 1000);
+
+    expect(request["sort"]).toEqual({ unsubscribedAt: SortOrder.Descending });
+    expect(request["limit"]).toBe(RECENTLY_UNSUBSCRIBED_LIST_LIMIT);
+    expect(request["select"]).toEqual({
+      _id: true,
+      unsubscribedAt: true,
+      subscriberEmail: true,
+    });
+  });
+
+  test("shows nothing when nobody the team added has left", async () => {
+    await renderNotice();
+
+    expect(
+      screen.queryByTestId("team-added-subscribers-unsubscribed"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("names each subscriber that left, and when", async () => {
+    getListMock.mockResolvedValue({
+      data: [
+        emailSubscriber("site03-all@acme.com", 1),
+        emailSubscriber("site07-ops@acme.com", 2),
+      ],
+      count: 2,
+      skip: 0,
+      limit: RECENTLY_UNSUBSCRIBED_LIST_LIMIT,
+    } as never);
+
+    await renderNotice();
+
+    const notice: HTMLElement = await screen.findByTestId(
+      "team-added-subscribers-unsubscribed",
+    );
+
+    expect(notice).toHaveTextContent(
+      SubscriberUnsubscribeCopy.recentlyUnsubscribedTitle,
+    );
+    expect(notice).toHaveTextContent(
+      SubscriberUnsubscribeCopy.recentlyUnsubscribedDescription,
+    );
+    expect(notice).toHaveTextContent("site03-all@acme.com, unsubscribed");
+    expect(notice).toHaveTextContent("site07-ops@acme.com, unsubscribed");
+    expect(notice).not.toHaveTextContent("more.");
+  });
+
+  test("summarises the rest past the first ten", async () => {
+    getListMock.mockResolvedValue({
+      data: [emailSubscriber("site03-all@acme.com", 1)],
+      count: 13,
+      skip: 0,
+      limit: RECENTLY_UNSUBSCRIBED_LIST_LIMIT,
+    } as never);
+
+    await renderNotice();
+
+    expect(
+      await screen.findByTestId("team-added-subscribers-unsubscribed"),
+    ).toHaveTextContent(
+      "12 more. Filter the list by Unsubscribed At to see them all.",
+    );
+  });
+
+  test("names an SMS subscriber by its number on the SMS list", async () => {
+    const sms: StatusPageSubscriber = new StatusPageSubscriber();
+    sms._id = "30000000-0000-4000-8000-000000000009";
+    sms.subscriberPhone = new Phone("+15555550123");
+    sms.unsubscribedAt = new Date("2026-09-20T10:00:00.000Z");
+
+    getListMock.mockResolvedValue({
+      data: [sms],
+      count: 1,
+      skip: 0,
+      limit: RECENTLY_UNSUBSCRIBED_LIST_LIMIT,
+    } as never);
+
+    await renderNotice({
+      channelQuery: { subscriberPhone: new NotNull() } as never,
+      contactSelect: { subscriberPhone: true },
+    });
+
+    expect(
+      (listRequest()["query"] as JSONObject)["subscriberPhone"],
+    ).toBeInstanceOf(NotNull);
+    expect(
+      await screen.findByTestId("team-added-subscribers-unsubscribed"),
+    ).toHaveTextContent("+15555550123, unsubscribed");
+  });
+
+  test("a list that cannot load leaves the notice out", async () => {
+    getListMock.mockRejectedValue(new Error("forbidden") as never);
+
+    await renderNotice();
+
+    expect(
+      screen.queryByTestId("team-added-subscribers-unsubscribed"),
+    ).not.toBeInTheDocument();
+  });
+});