@jant/core 0.6.16 → 0.7.1

package/src/client/__tests__/compose-launch.test.ts

@@ -1,9 +1,18 @@
 // @vitest-environment happy-dom
 
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const lazyEntries = vi.hoisted(() => ({
+  ensureCompose: vi.fn(async () => {}),
+}));
+
+vi.mock("../lazy-entries.js", () => lazyEntries);
+
 import {
+  ensureComposeDialog,
   getReplyRefreshTarget,
   getReplyTargetArticle,
+  readComposeDialogLabels,
 } from "../compose-launch.js";
 
 function getArticle(): HTMLElement {
@@ -167,3 +176,55 @@ describe("getReplyTargetArticle", () => {
     );
   });
 });
+
+describe("ensureComposeDialog", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    lazyEntries.ensureCompose.mockClear();
+  });
+
+  it("loads the composer's bundle before handing the element back", async () => {
+    document.body.innerHTML = `<jant-compose-dialog></jant-compose-dialog>`;
+
+    const dialog = await ensureComposeDialog();
+
+    expect(lazyEntries.ensureCompose).toHaveBeenCalledTimes(1);
+    expect(dialog).toBe(document.querySelector("jant-compose-dialog"));
+  });
+
+  it("loads nothing on a page without a composer", async () => {
+    expect(await ensureComposeDialog()).toBeNull();
+    expect(lazyEntries.ensureCompose).not.toHaveBeenCalled();
+  });
+});
+
+describe("readComposeDialogLabels", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("reads the server-rendered attribute before the element upgrades", () => {
+    document.body.innerHTML = `<jant-compose-dialog labels='{"addCollection":"Add Collection"}'></jant-compose-dialog>`;
+
+    expect(readComposeDialogLabels()?.addCollection).toBe("Add Collection");
+  });
+
+  it("prefers the upgraded element's property", () => {
+    document.body.innerHTML = `<jant-compose-dialog labels='{"addCollection":"stale"}'></jant-compose-dialog>`;
+    const dialog = document.querySelector(
+      "jant-compose-dialog",
+    ) as HTMLElement & {
+      labels?: unknown;
+    };
+    dialog.labels = { addCollection: "Add Collection" };
+
+    expect(readComposeDialogLabels()?.addCollection).toBe("Add Collection");
+  });
+
+  it("returns null without a composer or with unreadable labels", () => {
+    expect(readComposeDialogLabels()).toBeNull();
+
+    document.body.innerHTML = `<jant-compose-dialog labels="{not json"></jant-compose-dialog>`;
+    expect(readComposeDialogLabels()).toBeNull();
+  });
+});

package/src/client/__tests__/compose-shortcuts.test.ts

@@ -1,6 +1,16 @@
 // @vitest-environment happy-dom
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// The composer's bundle loads on first use; the harness element below stands
+// in for the upgraded dialog, so loading is a no-op here.
+vi.mock("../lazy-entries.js", () => ({
+  ensureCompose: async () => {},
+  ensureSettings: async () => {},
+  ensureManage: async () => {},
+  loadEntriesForPage: () => {},
+}));
+
 import { __testOnly as composeDiscoveryTestOnly } from "../compose-discovery.js";
 import { __testOnly as composeShortcutsTestOnly } from "../compose-shortcuts.js";
 
@@ -24,6 +34,11 @@ function dispatchShortcut(
   return event;
 }
 
+/** Let a shortcut's trip through the lazy loader settle. */
+async function flush(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
 function createComposeHarness(): ComposeHarness {
   const composeEl = document.createElement(
     "jant-compose-dialog",
@@ -108,7 +123,7 @@ describe("compose shortcuts", () => {
     vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true }));
   });
 
-  it("opens a collection-scoped composer on collection pages with n", () => {
+  it("opens a collection-scoped composer on collection pages with n", async () => {
     const composeEl = createComposeHarness();
 
     const collectionPage = document.createElement("div");
@@ -118,6 +133,8 @@ describe("compose shortcuts", () => {
 
     const event = dispatchShortcut(document, "n");
 
+    await flush();
+
     expect(event.defaultPrevented).toBe(true);
     expect(composeEl.openNew).toHaveBeenCalledWith({ collectionId: "col-2" });
   });
@@ -126,7 +143,8 @@ describe("compose shortcuts", () => {
     createComposeHarness();
 
     dispatchShortcut(document, "n");
-    await Promise.resolve();
+
+    await flush();
 
     expect(globalThis.fetch).toHaveBeenCalledWith(
       composeDiscoveryTestOnly.COMPOSE_OPEN_SHORTCUT_DISCOVERY_API_PATH,
@@ -139,7 +157,7 @@ describe("compose shortcuts", () => {
     });
   });
 
-  it("ignores n while focus is inside an input", () => {
+  it("ignores n while focus is inside an input", async () => {
     const composeEl = createComposeHarness();
 
     const input = document.createElement("textarea");
@@ -147,10 +165,12 @@ describe("compose shortcuts", () => {
 
     dispatchShortcut(input, "n");
 
+    await flush();
+
     expect(composeEl.openNew).not.toHaveBeenCalled();
   });
 
-  it("opens a reply composer for the latest thread post on detail pages with r", () => {
+  it("opens a reply composer for the latest thread post on detail pages with r", async () => {
     const composeEl = createComposeHarness();
 
     const postView = document.createElement("div");
@@ -201,6 +221,8 @@ describe("compose shortcuts", () => {
 
     const event = dispatchShortcut(document, "r");
 
+    await flush();
+
     expect(event.defaultPrevented).toBe(true);
     expect(composeEl.openReply).toHaveBeenCalledTimes(1);
 
@@ -224,7 +246,7 @@ describe("compose shortcuts", () => {
     );
   });
 
-  it("targets the latest thread post for reply shortcuts even when an older post is hovered", () => {
+  it("targets the latest thread post for reply shortcuts even when an older post is hovered", async () => {
     const composeEl = createComposeHarness();
     const { hoveredArticle } = renderThreadDetailPage();
     const originalQuerySelector = document.querySelector.bind(document);
@@ -240,6 +262,8 @@ describe("compose shortcuts", () => {
 
     const event = dispatchShortcut(document, "r");
 
+    await flush();
+
     expect(event.defaultPrevented).toBe(true);
     expect(composeEl.openReply).toHaveBeenCalledWith(
       "post-latest",
@@ -265,7 +289,8 @@ describe("compose shortcuts", () => {
     );
 
     const event = dispatchShortcut(document, "e");
-    await Promise.resolve();
+
+    await flush();
 
     expect(event.defaultPrevented).toBe(true);
     expect(composeEl.openEdit).toHaveBeenCalledWith("post-hovered");
@@ -279,7 +304,8 @@ describe("compose shortcuts", () => {
     globalThis.history.pushState({}, "", "/about?edit=1");
 
     composeShortcutsTestOnly.openEditFromQueryParam();
-    await Promise.resolve();
+
+    await flush();
 
     expect(composeEl.openEdit).toHaveBeenCalledWith("post-current");
     expect(window.location.pathname).toBe("/about");
@@ -296,7 +322,8 @@ describe("compose shortcuts", () => {
     globalThis.history.pushState({}, "", "/preview/draft-post?edit=1");
 
     composeShortcutsTestOnly.openEditFromQueryParam();
-    await Promise.resolve();
+
+    await flush();
 
     expect(composeEl.openDraft).toHaveBeenCalledWith("post-current");
     expect(composeEl.openEdit).not.toHaveBeenCalled();
@@ -304,7 +331,7 @@ describe("compose shortcuts", () => {
     expect(window.location.search).toBe("");
   });
 
-  it("keeps using the hovered post for reply shortcuts in the timeline", () => {
+  it("keeps using the hovered post for reply shortcuts in the timeline", async () => {
     const composeEl = createComposeHarness();
     const article = document.createElement("article");
     article.dataset.post = "";
@@ -332,6 +359,8 @@ describe("compose shortcuts", () => {
 
     const event = dispatchShortcut(document, "r");
 
+    await flush();
+
     expect(event.defaultPrevented).toBe(true);
     expect(composeEl.openReply).toHaveBeenCalledTimes(1);
 

package/src/client/__tests__/compose-triggers.test.ts

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const launch = vi.hoisted(() => ({
+  openNewCompose: vi.fn(async () => {}),
+  openReplyForArticle: vi.fn(async () => {}),
+  openEditForPost: vi.fn(async () => {}),
+}));
+
+vi.mock("../compose-launch.js", () => launch);
+
+import "../compose-triggers.js";
+
+function click(selector: string): void {
+  const el = document.querySelector<HTMLElement>(selector);
+  if (!el) throw new Error(`expected ${selector} in DOM`);
+  el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+}
+
+describe("compose triggers", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    launch.openNewCompose.mockClear();
+    launch.openReplyForArticle.mockClear();
+    launch.openEditForPost.mockClear();
+  });
+
+  it("opens a new post from a [data-compose-open] button", () => {
+    document.body.innerHTML = `<button data-compose-open><span>New</span></button>`;
+
+    click("button span");
+
+    expect(launch.openNewCompose).toHaveBeenCalledWith(undefined);
+  });
+
+  it("scopes the new post to the button's collection", () => {
+    document.body.innerHTML = `<button data-compose-open data-compose-collection-id="col_1">New</button>`;
+
+    click("button");
+
+    expect(launch.openNewCompose).toHaveBeenCalledWith({
+      collectionId: "col_1",
+    });
+  });
+
+  it("replies to the post around a [data-reply-trigger]", () => {
+    document.body.innerHTML = `
+      <article data-post data-post-id="pst_1">
+        <button data-reply-trigger>Reply</button>
+      </article>`;
+
+    click("[data-reply-trigger]");
+
+    const article = document.querySelector("article");
+    expect(launch.openReplyForArticle).toHaveBeenCalledWith(article);
+  });
+
+  it("ignores a reply trigger outside any post", () => {
+    document.body.innerHTML = `<button data-reply-trigger>Reply</button>`;
+
+    click("[data-reply-trigger]");
+
+    expect(launch.openReplyForArticle).not.toHaveBeenCalled();
+  });
+
+  it("continues an inline draft from its badge, by its own or its post's id", () => {
+    document.body.innerHTML = `
+      <span data-draft-continue data-post-id="pst_draft">Draft</span>
+      <article data-post data-post-id="pst_2">
+        <span data-draft-continue>Draft</span>
+      </article>`;
+
+    click("[data-draft-continue][data-post-id]");
+    click("article [data-draft-continue]");
+
+    expect(launch.openEditForPost).toHaveBeenNthCalledWith(1, "pst_draft");
+    expect(launch.openEditForPost).toHaveBeenNthCalledWith(2, "pst_2");
+  });
+
+  it("leaves unrelated clicks alone", () => {
+    document.body.innerHTML = `<button>Nothing</button>`;
+
+    click("button");
+
+    expect(launch.openNewCompose).not.toHaveBeenCalled();
+    expect(launch.openReplyForArticle).not.toHaveBeenCalled();
+    expect(launch.openEditForPost).not.toHaveBeenCalled();
+  });
+});

package/src/client/__tests__/copy-field.test.ts

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import "../copy-field.js";
+
+const FEED_URL = "https://example.com/feed";
+const COPIED = "Feed URL copied.";
+const FAILED = "Could not copy. Select the address and copy it.";
+
+function requireElement<T>(element: T | null | undefined, message: string): T {
+  if (!element) throw new Error(message);
+  return element;
+}
+
+function renderField({ hiddenButton = false } = {}): {
+  input: HTMLInputElement;
+  button: HTMLButtonElement;
+} {
+  document.body.innerHTML = `
+    <div id="toast-container"></div>
+    <div data-copy-field-root>
+      <div class="relative">
+        <input type="text" readonly value="${FEED_URL}" data-copy-field-value />
+        <button
+          type="button"
+          ${hiddenButton ? "hidden" : ""}
+          data-copy-field="${COPIED}"
+          data-copy-field-failed="${FAILED}"
+        >Copy</button>
+      </div>
+    </div>
+  `;
+
+  return {
+    input: requireElement(
+      document.querySelector<HTMLInputElement>("[data-copy-field-value]"),
+      "expected the address input",
+    ),
+    button: requireElement(
+      document.querySelector<HTMLButtonElement>("[data-copy-field]"),
+      "expected the copy button",
+    ),
+  };
+}
+
+function toastText(): string {
+  return document.getElementById("toast-container")?.textContent ?? "";
+}
+
+async function settle(): Promise<void> {
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("copy field", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("copying", () => {
+    beforeEach(() => {
+      document.body.innerHTML = "";
+    });
+
+    it("copies the address and reports it", async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(globalThis.navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      });
+
+      const { button } = renderField();
+      button.click();
+      await settle();
+
+      expect(writeText).toHaveBeenCalledWith(FEED_URL);
+      expect(toastText()).toContain(COPIED);
+    });
+
+    // The Clipboard API is absent on insecure origins and can be denied by
+    // permission. Failing loudly is what points the reader at selecting the
+    // address by hand instead.
+    it("reports a failure when the clipboard is unavailable", async () => {
+      Object.defineProperty(globalThis.navigator, "clipboard", {
+        value: undefined,
+        configurable: true,
+      });
+
+      const { button } = renderField();
+      button.click();
+      await settle();
+
+      expect(toastText()).toContain("Could not copy");
+    });
+
+    it("reports a failure when the clipboard refuses", async () => {
+      const writeText = vi.fn().mockRejectedValue(new Error("denied"));
+      Object.defineProperty(globalThis.navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      });
+
+      const { button } = renderField();
+      button.click();
+      await settle();
+
+      expect(toastText()).toContain("Could not copy");
+    });
+
+    it("finds fields added after load", async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(globalThis.navigator, "clipboard", {
+        value: { writeText },
+        configurable: true,
+      });
+
+      // Nothing re-runs against new markup; the listener is on the document.
+      const { button } = renderField();
+      button.click();
+      await settle();
+
+      expect(writeText).toHaveBeenCalledWith(FEED_URL);
+    });
+  });
+
+  describe("manual selection fallback", () => {
+    beforeEach(() => {
+      document.body.innerHTML = "";
+    });
+
+    it("selects the whole address on click", () => {
+      const { input } = renderField();
+      const select = vi.spyOn(input, "select");
+
+      input.dispatchEvent(new Event("click", { bubbles: true }));
+
+      expect(select).toHaveBeenCalledTimes(1);
+    });
+
+    it("selects the whole address on focus", () => {
+      const { input } = renderField();
+      const select = vi.spyOn(input, "select");
+
+      input.dispatchEvent(new Event("focus"));
+
+      expect(select).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // The server ships the button hidden so that without this script the field
+  // degrades to a selectable input rather than a button that does nothing.
+  describe("revealing the button", () => {
+    it("reveals a button the server rendered hidden", () => {
+      const { button } = renderField({ hiddenButton: true });
+      expect(button.hidden).toBe(true);
+
+      document.dispatchEvent(new Event("DOMContentLoaded"));
+
+      expect(button.hidden).toBe(false);
+    });
+  });
+});

package/src/client/__tests__/custom-url-menu.test.ts

@@ -3,9 +3,47 @@
 import { beforeEach, describe, expect, it } from "vitest";
 import { initCustomUrlMenus } from "../custom-url-menu.js";
 
-function renderMenus() {
+/**
+ * happy-dom has no popover API, so the top layer is stubbed: `showPopover`
+ * and `hidePopover` drive a flag that `:popover-open` then reports, the same
+ * contract the browser offers.
+ */
+function stubTopLayer(menu: HTMLElement) {
+  let shown = false;
+  const nativeMatches = menu.matches.bind(menu);
+
+  Object.assign(menu, {
+    showPopover: () => {
+      shown = true;
+    },
+    hidePopover: () => {
+      shown = false;
+    },
+    matches: (selector: string) =>
+      selector === ":popover-open" ? shown : nativeMatches(selector),
+  });
+
+  return () => shown;
+}
+
+/** happy-dom lays nothing out, so anchoring math needs stated geometry. */
+function stubRect(el: HTMLElement, rect: Partial<globalThis.DOMRect>) {
+  el.getBoundingClientRect = () =>
+    ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      ...rect,
+    }) as globalThis.DOMRect;
+}
+
+function renderMenus({ topLayer = false } = {}) {
   document.body.innerHTML = `
     <div data-custom-url-actions>
+      <code data-row-blank-space>/first</code>
       <button
         type="button"
         data-custom-url-action="toggle-menu"
@@ -13,7 +51,7 @@ function renderMenus() {
       >
         More actions
       </button>
-      <div data-custom-url-menu role="menu" hidden>
+      <div data-custom-url-menu role="menu" popover="manual" hidden>
         <button type="button" role="menuitem" data-custom-url-action="delete">
           Delete
         </button>
@@ -27,7 +65,7 @@ function renderMenus() {
       >
         More actions
       </button>
-      <div data-custom-url-menu role="menu" hidden>
+      <div data-custom-url-menu role="menu" popover="manual" hidden>
         <button type="button" role="menuitem" data-custom-url-action="delete">
           Delete
         </button>
@@ -35,17 +73,24 @@ function renderMenus() {
     </div>
   `;
 
+  const menus = document.querySelectorAll<HTMLElement>(
+    "[data-custom-url-menu]",
+  );
+  // Stubbed before init: the script reads popover support once, up front.
+  const isInTopLayer = topLayer ? stubTopLayer(menus[0]!) : () => false;
+
   initCustomUrlMenus();
 
   const triggers = document.querySelectorAll<HTMLButtonElement>(
     "[data-custom-url-action='toggle-menu']",
   );
-  const menus = document.querySelectorAll<HTMLElement>(
-    "[data-custom-url-menu]",
-  );
   const menuItems = document.querySelectorAll<HTMLElement>("[role='menuitem']");
 
   return {
+    isInTopLayer,
+    firstRowBlankSpace: document.querySelector<HTMLElement>(
+      "[data-row-blank-space]",
+    ),
     firstTrigger: triggers[0],
     secondTrigger: triggers[1],
     firstMenu: menus[0],
@@ -72,6 +117,30 @@ describe("custom URL menus", () => {
     expect(firstTrigger?.getAttribute("aria-expanded")).toBe("false");
   });
 
+  it("closes when clicking blank space in its own row", () => {
+    const { firstTrigger, firstMenu, firstRowBlankSpace } = renderMenus();
+
+    firstTrigger?.click();
+    expect(firstMenu?.hidden).toBe(false);
+
+    firstRowBlankSpace?.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+
+    expect(firstMenu?.hidden).toBe(true);
+    expect(firstTrigger?.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("stays open when clicking inside the menu", () => {
+    const { firstTrigger, firstMenu } = renderMenus();
+
+    firstTrigger?.click();
+    firstMenu?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(firstMenu?.hidden).toBe(false);
+    expect(firstTrigger?.getAttribute("aria-expanded")).toBe("true");
+  });
+
   it("closes on Escape and returns focus to the trigger", () => {
     const { firstTrigger, firstMenu, firstDeleteButton } = renderMenus();
 
@@ -87,6 +156,58 @@ describe("custom URL menus", () => {
     expect(document.activeElement).toBe(firstTrigger);
   });
 
+  it("shows in the top layer and anchors itself to the trigger", () => {
+    const { firstTrigger, firstMenu, isInTopLayer } = renderMenus({
+      topLayer: true,
+    });
+
+    firstTrigger?.click();
+
+    expect(isInTopLayer()).toBe(true);
+    // The row list clips its children, so an open menu escapes to the top
+    // layer and is positioned against the viewport instead of the row.
+    expect(firstMenu?.style.top).not.toBe("");
+    expect(firstMenu?.style.left).not.toBe("");
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(isInTopLayer()).toBe(false);
+    expect(firstMenu?.hidden).toBe(true);
+  });
+
+  // The viewport is 1024x768 under happy-dom.
+  it("anchors below the trigger when the viewport has room", () => {
+    const { firstTrigger, firstMenu } = renderMenus({ topLayer: true });
+    stubRect(firstTrigger!, { top: 100, bottom: 126, right: 500 });
+    stubRect(firstMenu!, { width: 140, height: 120 });
+
+    firstTrigger?.click();
+
+    expect(firstMenu?.style.top).toBe("132px");
+    expect(firstMenu?.style.left).toBe("360px");
+  });
+
+  it("flips above the trigger when the viewport bottom is too close", () => {
+    const { firstTrigger, firstMenu } = renderMenus({ topLayer: true });
+    stubRect(firstTrigger!, { top: 700, bottom: 726, right: 500 });
+    stubRect(firstMenu!, { width: 140, height: 120 });
+
+    firstTrigger?.click();
+
+    expect(firstMenu?.style.top).toBe("574px");
+    expect(firstMenu?.style.left).toBe("360px");
+  });
+
+  it("keeps the menu inside the left viewport edge", () => {
+    const { firstTrigger, firstMenu } = renderMenus({ topLayer: true });
+    stubRect(firstTrigger!, { top: 100, bottom: 126, right: 60 });
+    stubRect(firstMenu!, { width: 140, height: 120 });
+
+    firstTrigger?.click();
+
+    expect(firstMenu?.style.left).toBe("8px");
+  });
+
   it("closes the previous menu when another one opens", () => {
     const { firstTrigger, secondTrigger, firstMenu, secondMenu } =
       renderMenus();