@jant/core 0.6.16 → 0.7.0

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();