@oneuptime/common 14.0.13 → 14.0.14

package/Tests/UI/Components/FoldedSection/FoldedSectionDarkMode.test.ts

@@ -0,0 +1,197 @@
+import { describe, expect, test } from "@jest/globals";
+import fs from "fs";
+import path from "path";
+
+/*
+ * The folded sections (FoldedSection, and CollapsibleFormSection and
+ * AdvancedPageSection, which draw through it) in the dark theme.
+ *
+ * The dark theme does not use Tailwind's dark: variants. Theme.css re-colours
+ * the light utility classes under html.dark, one rule per class (and per
+ * variant: `.bg-gray-50` does not cover `hover:bg-gray-50`). A class it has no
+ * rule for keeps its light colour in the dark theme - a white header on a
+ * slate dialog, a pale chip that glows - and nothing fails. So this holds
+ * every colour class the folds use to what Theme.css actually remaps.
+ */
+
+const COMPONENTS: string = path.join(
+  __dirname,
+  "..",
+  "..",
+  "..",
+  "..",
+  "UI",
+  "Components",
+);
+
+const FILES: Array<string> = [
+  path.join(COMPONENTS, "FoldedSection", "FoldedSection.tsx"),
+  path.join(COMPONENTS, "Forms", "CollapsibleFormSection.tsx"),
+  path.join(COMPONENTS, "AdvancedPageSection", "AdvancedPageSection.tsx"),
+];
+
+const THEME_CSS: string = fs
+  .readFileSync(
+    path.join(__dirname, "..", "..", "..", "..", "UI", "Styles", "Theme.css"),
+    "utf8",
+  )
+  .replace(/\/\*[\s\S]*?\*\//g, " ");
+
+// Comments hold prose, not classes.
+function codeOf(file: string): string {
+  return fs
+    .readFileSync(file, "utf8")
+    .replace(/\/\*[\s\S]*?\*\//g, " ")
+    .replace(/\/\/.*$/gm, " ");
+}
+
+const CODE: string = FILES.map(codeOf).join("\n");
+
+/*
+ * Every whitespace-separated token of every string: the double-quoted ones
+ * wherever they are - inside a template literal's ${...} too, where a
+ * ternary picks a tile's colours - and the static text of the template
+ * literals themselves.
+ */
+function stringTokens(code: string): Array<string> {
+  const texts: Array<string> = [];
+
+  for (const match of code.matchAll(/"([^"\n]*)"/g)) {
+    texts.push(match[1] ?? "");
+  }
+
+  for (const match of code.matchAll(/`([^`]*)`/g)) {
+    texts.push((match[1] ?? "").replace(/\$\{[\s\S]*?\}/g, " "));
+  }
+
+  return texts.flatMap((text: string): Array<string> => {
+    return text.split(/\s+/).filter((token: string): boolean => {
+      return token.length > 0;
+    });
+  });
+}
+
+// The utility a token applies, after its variants.
+function utilityOf(token: string): string {
+  let depth: number = 0;
+  let lastColon: number = -1;
+
+  for (let i: number = 0; i < token.length; i++) {
+    const character: string = token[i]!;
+
+    if (character === "[") {
+      depth++;
+    } else if (character === "]") {
+      depth--;
+    } else if (character === ":" && depth === 0) {
+      lastColon = i;
+    }
+  }
+
+  return token.slice(lastColon + 1);
+}
+
+const COLOR_UTILITY: RegExp =
+  /^(?:bg|text|border|ring|divide|from|via|to|outline|fill|stroke)-(?:white|black|(?:gray|slate|red|amber|yellow|emerald|green|sky|blue|indigo|orange|rose|purple|pink|teal|cyan|lime|violet|fuchsia|zinc|neutral|stone)-\d{2,3})(?:\/\d+)?$/;
+
+// A mid-tone hue (500 or 600) reads the same in both themes; greys do not.
+const SOLID: RegExp =
+  /^(?:bg|text|border|ring)-(?!(?:gray|slate|zinc|neutral|stone)-)[a-z]+-(?:500|600)$/;
+
+const IDENTIFIER_CHAR: RegExp = /[\w-]/;
+
+const SUBSTRING_VARIANTS: Array<string> = Array.from(
+  THEME_CSS.matchAll(/\[class\*="([^"]+)"\]/g),
+  (match: RegExpMatchArray): string => {
+    return match[1]!;
+  },
+).filter((prefix: string): boolean => {
+  return prefix.includes(":");
+});
+
+function isRemapped(token: string): boolean {
+  const utility: string = utilityOf(token);
+
+  if (SOLID.test(utility) && utility === token.replace(/^focus-visible:/, "")) {
+    return true;
+  }
+
+  if (THEME_CSS.includes(`[class~="${token}"]`)) {
+    return true;
+  }
+
+  if (
+    SUBSTRING_VARIANTS.some((prefix: string): boolean => {
+      return token.startsWith(prefix);
+    })
+  ) {
+    return true;
+  }
+
+  const escapedClass: string = token
+    .replace(/\\/g, "\\\\")
+    .replace(/:/g, "\\:")
+    .replace(/\//g, "\\/");
+  let from: number = THEME_CSS.indexOf(`.${escapedClass}`);
+
+  while (from !== -1) {
+    const next: string = THEME_CSS[from + escapedClass.length + 1] || " ";
+
+    if (!IDENTIFIER_CHAR.test(next)) {
+      return true;
+    }
+
+    from = THEME_CSS.indexOf(`.${escapedClass}`, from + 1);
+  }
+
+  return false;
+}
+
+const COLOR_TOKENS: Array<string> = Array.from(
+  new Set(
+    stringTokens(CODE).filter((token: string): boolean => {
+      return COLOR_UTILITY.test(utilityOf(token));
+    }),
+  ),
+);
+
+describe("folded sections in the dark theme", () => {
+  test("use no dark: variants and build no colour class from a template", () => {
+    expect(CODE).not.toContain("dark:");
+    expect(CODE).not.toMatch(/(?:bg|text|border|ring|divide|from|via|to)-\$\{/);
+  });
+
+  test("every colour class they use is remapped for dark mode", () => {
+    // The scan found their colours at all, so this is not vacuous.
+    expect(COLOR_TOKENS).toEqual(
+      expect.arrayContaining([
+        // The frame and the header.
+        "border-gray-200",
+        "bg-white",
+        "hover:bg-gray-50",
+        "text-gray-900",
+        // The pills of what is inside, and the sentences under them.
+        "text-gray-600",
+        "ring-gray-200",
+        "text-gray-500",
+        // The chips of what is set.
+        "bg-indigo-50",
+        "text-indigo-700",
+        "ring-indigo-200",
+        // The icon tile, grey or tinted.
+        "bg-gray-100",
+        "text-indigo-600",
+        // The chevron.
+        "text-gray-400",
+        // The keyboard focus ring.
+        "focus-visible:ring-indigo-500",
+      ]),
+    );
+
+    expect(
+      COLOR_TOKENS.filter((token: string): boolean => {
+        return !isRemapped(token);
+      }),
+    ).toEqual([]);
+  });
+});

package/Tests/UI/Components/FoldedSection/FoldedSectionItem.test.ts

@@ -0,0 +1,247 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  FOLDED_SECTION_MAX_UNSET_ITEMS,
+  FOLDED_SECTION_MORE_ITEMS,
+  FOLDED_SECTION_OFF,
+  FOLDED_SECTION_ON,
+  FoldedSectionItem,
+  FoldedSectionItemsShown,
+  foldedSectionItem,
+  getFoldedSectionItemsShown,
+} from "../../../../UI/Components/FoldedSection/FoldedSectionItem";
+import {
+  MORE_FIELDS_SECTION_TITLE,
+  MORE_SECTION_ICON,
+  MORE_SETTINGS_SECTION_TITLE,
+  RETIRED_FOLD_TITLE,
+} from "../../../../UI/Components/FoldedSection/FoldedSectionTitles";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+/*
+ * "The advanced section in the form should be called something better -
+ * like 'more' or something as such ... show what things are inside it when
+ * collapsed (small summary of things)." - the maintainer.
+ *
+ * What a folded section lists while it is folded: every set item (what is
+ * in force must never be hidden) and a few unset names, then how many more.
+ * These are the rules behind that list; FoldedSection draws it.
+ */
+
+function item(
+  key: string,
+  isSet: boolean = false,
+  value?: string,
+): FoldedSectionItem {
+  return value === undefined
+    ? { key, title: key, isSet }
+    : { key, title: key, isSet, value };
+}
+
+function keys(shown: FoldedSectionItemsShown): Array<string> {
+  return shown.shown.map((candidate: FoldedSectionItem): string => {
+    return candidate.key;
+  });
+}
+
+describe("what a folded section is called", () => {
+  test("a form's fold is More fields and a page's More settings, never Advanced", () => {
+    expect(MORE_FIELDS_SECTION_TITLE).toBe("More fields");
+    expect(MORE_SETTINGS_SECTION_TITLE).toBe("More settings");
+
+    // Not the ⋯ button's name, which every card and table row already has.
+    expect(MORE_FIELDS_SECTION_TITLE).not.toBe("More options");
+    expect(MORE_SETTINGS_SECTION_TITLE).not.toBe("More options");
+
+    expect(RETIRED_FOLD_TITLE.test(MORE_FIELDS_SECTION_TITLE)).toBe(false);
+    expect(RETIRED_FOLD_TITLE.test(MORE_SETTINGS_SECTION_TITLE)).toBe(false);
+  });
+
+  test("the retired name is caught however it is written", () => {
+    for (const title of [
+      "Advanced",
+      "advanced",
+      "Advanced Options",
+      "Advanced Settings",
+      "ADVANCED: Timeout and Retries",
+    ]) {
+      expect(RETIRED_FOLD_TITLE.test(title)).toBe(true);
+    }
+
+    for (const title of [
+      "More fields",
+      "Advancement",
+      "Subscriber Notifications",
+    ]) {
+      expect(RETIRED_FOLD_TITLE.test(title)).toBe(false);
+    }
+  });
+
+  test("both wear the same icon: things to adjust", () => {
+    expect(MORE_SECTION_ICON).toBe(IconProp.AdjustmentHorizontal);
+  });
+
+  test("a set switch reads On or Off, and how many more are left is one sentence", () => {
+    expect(FOLDED_SECTION_ON).toBe("On");
+    expect(FOLDED_SECTION_OFF).toBe("Off");
+    expect(FOLDED_SECTION_MORE_ITEMS).toEqual({
+      one: "{{count}} more",
+      other: "{{count}} more",
+    });
+  });
+});
+
+describe("getFoldedSectionItemsShown", () => {
+  test("lists a short section whole", () => {
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown([
+      item("Declared At"),
+      item("Initial State"),
+      item("Labels"),
+      item("Private Incident"),
+    ]);
+
+    expect(keys(shown)).toEqual([
+      "Declared At",
+      "Initial State",
+      "Labels",
+      "Private Incident",
+    ]);
+    expect(shown.hiddenCount).toBe(0);
+  });
+
+  test("keeps a long section small: the first few names, then how many more", () => {
+    const items: Array<FoldedSectionItem> = [
+      "Display Name",
+      "Description",
+      "Show Current Status",
+      "Show Uptime Percent",
+      "Uptime Precision",
+      "Show Status History Chart",
+      "Show Annotations",
+      "Labels",
+    ].map((title: string): FoldedSectionItem => {
+      return item(title);
+    });
+
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown(items);
+
+    expect(FOLDED_SECTION_MAX_UNSET_ITEMS).toBe(4);
+    expect(keys(shown)).toEqual([
+      "Display Name",
+      "Description",
+      "Show Current Status",
+      "Show Uptime Percent",
+    ]);
+    expect(shown.hiddenCount).toBe(4);
+  });
+
+  test("lists one name too many rather than saying '1 more' in its place", () => {
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown(
+      ["A", "B", "C", "D", "E"].map((title: string): FoldedSectionItem => {
+        return item(title);
+      }),
+    );
+
+    expect(keys(shown)).toEqual(["A", "B", "C", "D", "E"]);
+    expect(shown.hiddenCount).toBe(0);
+  });
+
+  test("never hides a set item, and keeps the order the section has", () => {
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown([
+      item("A"),
+      item("B"),
+      item("C"),
+      item("D"),
+      item("E"),
+      item("F"),
+      item("Labels", true, "2"),
+      item("G"),
+      item("Private", true, "On"),
+    ]);
+
+    expect(keys(shown)).toEqual(["A", "B", "C", "D", "Labels", "Private"]);
+    expect(shown.hiddenCount).toBe(3);
+  });
+
+  test("lists every set item even when there are more than the limit", () => {
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown(
+      ["A", "B", "C", "D", "E", "F", "G"].map(
+        (title: string): FoldedSectionItem => {
+          return item(title, true);
+        },
+      ),
+    );
+
+    expect(shown.shown).toHaveLength(7);
+    expect(shown.hiddenCount).toBe(0);
+  });
+
+  test("takes a limit of its own", () => {
+    const shown: FoldedSectionItemsShown = getFoldedSectionItemsShown(
+      ["A", "B", "C", "D"].map((title: string): FoldedSectionItem => {
+        return item(title);
+      }),
+      1,
+    );
+
+    expect(keys(shown)).toEqual(["A"]);
+    expect(shown.hiddenCount).toBe(3);
+  });
+
+  test("lists nothing for a section with nothing in it", () => {
+    expect(getFoldedSectionItemsShown([])).toEqual({
+      shown: [],
+      hiddenCount: 0,
+    });
+  });
+});
+
+describe("foldedSectionItem", () => {
+  test("a page names a card by its title, unset unless it says so", () => {
+    expect(foldedSectionItem("Block Permissions")).toEqual({
+      key: "Block Permissions",
+      title: "Block Permissions",
+      isSet: false,
+    });
+  });
+
+  test("a set card carries what it is set to", () => {
+    expect(
+      foldedSectionItem("Block Permissions", {
+        key: "blockPermissions",
+        isSet: true,
+        value: "2",
+      }),
+    ).toEqual({
+      key: "blockPermissions",
+      title: "Block Permissions",
+      isSet: true,
+      value: "2",
+    });
+  });
+
+  test("an unset card carries no value, whatever it is given", () => {
+    expect(
+      foldedSectionItem("Block Permissions", { isSet: false, value: "0" }),
+    ).toEqual({
+      key: "Block Permissions",
+      title: "Block Permissions",
+      isSet: false,
+    });
+  });
+
+  test("a value that is an English word says so, to be looked up", () => {
+    expect(
+      foldedSectionItem("Search Engine Indexing", {
+        isSet: true,
+        value: "Off",
+        translateValue: true,
+      }),
+    ).toEqual({
+      key: "Search Engine Indexing",
+      title: "Search Engine Indexing",
+      isSet: true,
+      value: "Off",
+      translateValue: true,
+    });
+  });
+});

package/Tests/UI/Components/FoldedSection/FoldedSectionQueries.ts

@@ -0,0 +1,86 @@
+import { within } from "@testing-library/react";
+
+/*
+ * Reading a folded section's header the way a reader does (FoldedSection):
+ * the names it lists while folded, and the chips it draws for the ones that
+ * are set - "Labels: 2", "Private Incident: On". Shared by the tests of the
+ * forms and pages that fold rarely needed things under More fields or More
+ * settings.
+ */
+
+/*
+ * A header a query did not find (null) is an error, not the whole page: read
+ * as the page, a missing header would pass for one that shows nothing.
+ */
+function itemsIn(container?: HTMLElement | null): Array<HTMLElement> {
+  if (container === null) {
+    throw new Error("The folded section header to read was not found.");
+  }
+
+  const scope: HTMLElement = container || document.body;
+
+  return within(scope).queryAllByTestId("folded-section-item");
+}
+
+// Every name a folded header lists, set or not, as read on screen.
+export function listedNames(container?: HTMLElement | null): Array<string> {
+  return itemsIn(container).map((item: HTMLElement): string => {
+    return (item.textContent || "").trim();
+  });
+}
+
+// The chips of the set ones: "Name: value", or the name alone.
+export function setChips(container?: HTMLElement | null): Array<string> {
+  return itemsIn(container)
+    .filter((item: HTMLElement): boolean => {
+      return item.getAttribute("data-item-set") === "true";
+    })
+    .map((item: HTMLElement): string => {
+      return (item.textContent || "").trim();
+    });
+}
+
+// Whether a folded header shows anything as set.
+export function hasSetChip(container?: HTMLElement | null): boolean {
+  return setChips(container).length > 0;
+}
+
+/*
+ * The elements with this text that are not a name a folded header lists - a
+ * field's own label, say, which the header names as well while it is folded.
+ */
+export function queryAllByTextOutsideFoldedHeaders(
+  container: HTMLElement,
+  text: string,
+): Array<HTMLElement> {
+  return within(container)
+    .queryAllByText(text)
+    .filter((element: HTMLElement): boolean => {
+      return !element.closest("[data-testid='folded-section-header']");
+    });
+}
+
+export function getByTextOutsideFoldedHeaders(
+  container: HTMLElement,
+  text: string,
+): HTMLElement {
+  const matches: Array<HTMLElement> = queryAllByTextOutsideFoldedHeaders(
+    container,
+    text,
+  );
+
+  if (matches.length !== 1) {
+    throw new Error(
+      `Expected one element with the text "${text}" outside folded headers, found ${matches.length}.`,
+    );
+  }
+
+  return matches[0]!;
+}
+
+export function queryByTextOutsideFoldedHeaders(
+  container: HTMLElement,
+  text: string,
+): HTMLElement | null {
+  return queryAllByTextOutsideFoldedHeaders(container, text)[0] || null;
+}