@oneuptime/common 14.0.13 → 14.0.14

package/Tests/App/Accounts/FormPage.test.tsx

@@ -759,3 +759,241 @@ describe("links to incident forms", () => {
     expect(sentRequests()).toEqual([`GET ${FORM_URL}`]);
   });
 });
+
+/*
+ * The form's branding: its logo in place of the OneUptime logo, at the top
+ * of every screen that has the form, and its favicon as the tab's icon
+ * while it is open. Until it has its own, OneUptime's.
+ */
+describe("the form's branding", () => {
+  const LOGO: { type: string; data: string } = {
+    type: "image/png",
+    data: Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a]).toString("base64"),
+  };
+  const FAVICON: { type: string; data: string } = {
+    type: "image/svg+xml",
+    data: Buffer.from('<svg xmlns="http://www.w3.org/2000/svg"/>').toString(
+      "base64",
+    ),
+  };
+  const LOGO_URL: string = `data:image/png;base64,${LOGO.data}`;
+  const ANY_NAME: RegExp = /\S/;
+  const FAVICON_URL: string = `data:image/svg+xml;base64,${FAVICON.data}`;
+
+  const BRANDED: PublicForm = {
+    ...FORM,
+    logo: LOGO,
+    logoAltText: "Acme Inc.",
+    favicon: FAVICON,
+  };
+
+  // The page's own icon links, as Accounts' index.ejs has them.
+  const addPageIcons: () => void = (): void => {
+    document.head.innerHTML = [
+      '<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">',
+      '<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">',
+      '<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">',
+      '<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">',
+    ].join("");
+  };
+
+  const iconLinks: () => Array<Record<string, string | null>> = (): Array<
+    Record<string, string | null>
+  > => {
+    return Array.from(document.head.querySelectorAll("link")).map(
+      (link: HTMLLinkElement): Record<string, string | null> => {
+        return {
+          rel: link.getAttribute("rel"),
+          href: link.getAttribute("href"),
+          type: link.getAttribute("type"),
+          sizes: link.getAttribute("sizes"),
+        };
+      },
+    );
+  };
+
+  const PAGE_ICONS: Array<Record<string, string | null>> = [
+    {
+      rel: "apple-touch-icon",
+      href: "/accounts/assets/img/favicons/apple-touch-icon.png",
+      type: null,
+      sizes: "180x180",
+    },
+    {
+      rel: "shortcut icon",
+      href: "/accounts/assets/img/favicons/favicon.ico",
+      type: null,
+      sizes: null,
+    },
+    {
+      rel: "icon",
+      href: "/accounts/assets/img/favicons/favicon-32x32.png",
+      type: "image/png",
+      sizes: "32x32",
+    },
+    {
+      rel: "mask-icon",
+      href: "/accounts/assets/img/favicons/safari-pinned-tab.svg",
+      type: null,
+      sizes: null,
+    },
+  ];
+
+  afterEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  test("a form without a logo shows the OneUptime logo", async () => {
+    await renderForm();
+
+    const logo: HTMLElement = screen.getByTestId("form-logo");
+
+    expect(logo).toHaveAttribute("data-logo", "oneuptime");
+    expect(logo).toHaveAttribute("alt", "OneUptime");
+    expect(logo.getAttribute("src")).not.toContain("data:image/png;base64");
+  });
+
+  test("a form's own logo takes the OneUptime logo's place, read out as its alt text says", async () => {
+    await renderForm(BRANDED);
+
+    const logo: HTMLElement = screen.getByRole("img", { name: "Acme Inc." });
+
+    expect(logo).toBe(screen.getByTestId("form-logo"));
+    expect(logo).toHaveAttribute("data-logo", "form");
+    expect(logo).toHaveAttribute("src", LOGO_URL);
+    expect(
+      screen.queryByRole("img", { name: "OneUptime" }),
+    ).not.toBeInTheDocument();
+    // Still above the form's name.
+    expect(
+      logo.compareDocumentPosition(
+        screen.getByRole("heading", { level: 1, name: "Report a Problem" }),
+      ) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("without alt text, screen readers skip the logo: the form's name follows it", async () => {
+    await renderForm({ ...BRANDED, logoAltText: undefined });
+
+    expect(screen.getByTestId("form-logo")).toHaveAttribute("alt", "");
+    // Nothing on the page reads out as an image with a name.
+    expect(
+      screen.queryByRole("img", { name: ANY_NAME }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("the thank-you screen keeps the form's logo", async () => {
+    await renderForm(BRANDED);
+    serveSubmit({ status: 200, data: { reference: "INC-42" } });
+
+    fillRequired();
+    await submit();
+
+    expect(screen.getByTestId("form-success")).toBeInTheDocument();
+    expect(screen.getByTestId("form-logo")).toHaveAttribute("src", LOGO_URL);
+  });
+
+  test("a link that leads to no form shows the OneUptime logo", async () => {
+    serveForm({ status: 404, data: {} });
+
+    await renderPage();
+
+    expect(screen.getByTestId("form-load-failure")).toBeInTheDocument();
+    expect(screen.getByTestId("form-logo")).toHaveAttribute(
+      "data-logo",
+      "oneuptime",
+    );
+  });
+
+  test("a logo that cannot be drawn gives way to the OneUptime logo, never a broken image", async () => {
+    await renderForm(BRANDED);
+
+    await act(async () => {
+      fireEvent.error(screen.getByTestId("form-logo"));
+    });
+
+    expect(screen.getByTestId("form-logo")).toHaveAttribute(
+      "data-logo",
+      "oneuptime",
+    );
+    expect(screen.getByTestId("form-logo")).toHaveAttribute("alt", "OneUptime");
+  });
+
+  test("an image the page cannot draw safely is never drawn", async () => {
+    await renderForm({
+      ...FORM,
+      logo: { type: "text/html", data: LOGO.data },
+      logoAltText: "Acme Inc.",
+      favicon: { type: "image/png", data: "not base64!" },
+    } as unknown as PublicForm);
+
+    expect(screen.getByTestId("form-logo")).toHaveAttribute(
+      "data-logo",
+      "oneuptime",
+    );
+    expect(document.head.innerHTML).not.toContain("data:");
+  });
+
+  test("the form's favicon is the tab's icon while it is open, and OneUptime's comes back after", async () => {
+    addPageIcons();
+
+    await renderForm(BRANDED);
+
+    expect(iconLinks()).toEqual([
+      PAGE_ICONS[0],
+      {
+        rel: "shortcut icon",
+        href: FAVICON_URL,
+        type: "image/svg+xml",
+        sizes: null,
+      },
+      { rel: "icon", href: FAVICON_URL, type: "image/svg+xml", sizes: null },
+      PAGE_ICONS[3],
+    ]);
+
+    cleanup();
+
+    expect(iconLinks()).toEqual(PAGE_ICONS);
+  });
+
+  test("a page with no icon link gets one for the form, gone again after", async () => {
+    await renderForm(BRANDED);
+
+    expect(iconLinks()).toEqual([
+      { rel: "icon", href: FAVICON_URL, type: "image/svg+xml", sizes: null },
+    ]);
+
+    cleanup();
+
+    expect(iconLinks()).toEqual([]);
+  });
+
+  test("an ICO favicon is the tab's icon, as an ICO", async () => {
+    addPageIcons();
+
+    const ico: { type: string; data: string } = {
+      type: "image/x-icon",
+      data: Buffer.from([0x00, 0x00, 0x01, 0x00, 0x01, 0x00]).toString(
+        "base64",
+      ),
+    };
+    const icoUrl: string = `data:image/x-icon;base64,${ico.data}`;
+
+    await renderForm({ ...BRANDED, favicon: ico });
+
+    expect(iconLinks()).toEqual([
+      PAGE_ICONS[0],
+      { rel: "shortcut icon", href: icoUrl, type: "image/x-icon", sizes: null },
+      { rel: "icon", href: icoUrl, type: "image/x-icon", sizes: null },
+      PAGE_ICONS[3],
+    ]);
+  });
+
+  test("a form without a favicon leaves the tab's icon alone", async () => {
+    addPageIcons();
+
+    await renderForm({ ...BRANDED, favicon: undefined });
+
+    expect(iconLinks()).toEqual(PAGE_ICONS);
+  });
+});

package/Tests/App/Accounts/FormUtils.test.ts

@@ -237,6 +237,114 @@ describe("readPublicForm: what the page believes about the form", () => {
   });
 });
 
+describe("readPublicForm: the form's branding", () => {
+  const PNG: string = Buffer.from([0x89, 0x50, 0x4e, 0x47]).toString("base64");
+
+  const told: (branding: JSONObject) => PublicForm = (
+    branding: JSONObject,
+  ): PublicForm => {
+    return readPublicForm({
+      name: "Report a Problem",
+      fields: [],
+      isCaptchaRequired: false,
+      ...branding,
+    });
+  };
+
+  test("reads the logo, its alt text and the favicon the server described", () => {
+    expect(
+      told({
+        logo: { type: "image/png", data: PNG },
+        logoAltText: "  Acme Inc. ",
+        favicon: { type: "image/svg+xml", data: "PHN2Zz4=" },
+      }),
+    ).toEqual({
+      name: "Report a Problem",
+      fields: [],
+      isCaptchaRequired: false,
+      logo: { type: "image/png", data: PNG },
+      logoAltText: "Acme Inc.",
+      favicon: { type: "image/svg+xml", data: "PHN2Zz4=" },
+    });
+  });
+
+  test("a form without branding is just the form", () => {
+    expect(Object.keys(told({})).sort()).toEqual(
+      ["fields", "isCaptchaRequired", "name"].sort(),
+    );
+  });
+
+  test("never an image it cannot draw safely: then the OneUptime one stays", () => {
+    for (const logo of [
+      { type: "text/html", data: PNG },
+      { type: "image/png", data: "<svg onload=alert(1)>" },
+      { type: "image/png", data: `${PNG}"` },
+      { type: "image/png" },
+      "data:image/png;base64,AAAA",
+      [PNG],
+      null,
+    ]) {
+      const form: PublicForm = told({
+        logo: logo as unknown as JSONObject,
+        logoAltText: "Acme Inc.",
+        favicon: logo as unknown as JSONObject,
+      });
+
+      expect(form.logo).toBeUndefined();
+      // What a logo says goes only with a logo.
+      expect(form.logoAltText).toBeUndefined();
+      expect(form.favicon).toBeUndefined();
+    }
+  });
+
+  test("an ICO is drawn as the favicon, never as the logo", () => {
+    const ico: JSONObject = { type: "image/x-icon", data: "AAABAAEA" };
+    const form: PublicForm = told({
+      logo: ico,
+      logoAltText: "Acme Inc.",
+      favicon: ico,
+    });
+
+    expect(form.logo).toBeUndefined();
+    expect(form.logoAltText).toBeUndefined();
+    expect(form.favicon).toEqual(ico);
+  });
+
+  test("never more than each image may weigh: a logo's worth is too much for a favicon", () => {
+    // The longest base64 of a 128 KB and of a 512 KB image.
+    const faviconSized: string = "A".repeat(Math.ceil((128 * 1024) / 3) * 4);
+    const logoSized: string = "A".repeat(Math.ceil((512 * 1024) / 3) * 4);
+
+    expect(
+      told({ favicon: { type: "image/png", data: faviconSized } }).favicon,
+    ).toBeDefined();
+    expect(
+      told({ favicon: { type: "image/png", data: `${faviconSized}AAAA` } })
+        .favicon,
+    ).toBeUndefined();
+    expect(
+      told({ logo: { type: "image/png", data: logoSized } }).logo,
+    ).toBeDefined();
+    expect(
+      told({ logo: { type: "image/png", data: `${logoSized}AAAA` } }).logo,
+    ).toBeUndefined();
+    expect(
+      told({ favicon: { type: "image/png", data: logoSized } }).favicon,
+    ).toBeUndefined();
+  });
+
+  test("an alt text that is not text, or only spaces, is none", () => {
+    for (const logoAltText of [42, "   ", { text: "Acme" }]) {
+      expect(
+        told({
+          logo: { type: "image/png", data: PNG },
+          logoAltText: logoAltText as unknown as string,
+        }).logoAltText,
+      ).toBeUndefined();
+    }
+  });
+});
+
 describe("readFormSubmissionResult", () => {
   test("keeps the record's number and the form's message", () => {
     expect(