@jant/core 0.6.16 → 0.7.0

package/src/client/components/__tests__/jant-locale-picker.test.ts

@@ -0,0 +1,207 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, afterEach } from "vitest";
+
+import "../jant-locale-picker.js";
+import type { JantLocalePicker } from "../jant-locale-picker.js";
+
+const locales = [
+  { tag: "en", native: "English", english: "English", coverage: 1 },
+  {
+    tag: "zh-Hans",
+    native: "简体中文",
+    english: "Simplified Chinese",
+    coverage: 1,
+  },
+  { tag: "ja", native: "日本語", english: "Japanese", coverage: 0 },
+  { tag: "fi", native: "suomi", english: "Finnish", coverage: 0 },
+];
+
+const labels = { search: "Search…", empty: "No matches." };
+
+async function createPicker(options?: {
+  value?: string;
+  exclude?: string[];
+  target?: HTMLSelectElement;
+}): Promise<JantLocalePicker> {
+  if (options?.target) document.body.appendChild(options.target);
+  const el = document.createElement("jant-locale-picker") as JantLocalePicker;
+  el.locales = locales;
+  el.labels = labels;
+  el.value = options?.value ?? "en";
+  if (options?.exclude) el.exclude = options.exclude;
+  if (options?.target) el.htmlFor = options.target.id;
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+function trigger(el: JantLocalePicker): HTMLButtonElement {
+  const button = el.querySelector<HTMLButtonElement>("[data-language-trigger]");
+  if (!button) throw new Error("trigger missing");
+  return button;
+}
+
+function optionLabels(el: JantLocalePicker): string[] {
+  return [...el.querySelectorAll('[role="option"]')].map(
+    (node) => node.textContent?.trim() ?? "",
+  );
+}
+
+async function press(el: JantLocalePicker, key: string) {
+  document.dispatchEvent(
+    new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+  );
+  await el.updateComplete;
+}
+
+function makeSelect(id: string, value: string): HTMLSelectElement {
+  const select = document.createElement("select");
+  select.id = id;
+  for (const locale of locales) {
+    const option = document.createElement("option");
+    option.value = locale.tag;
+    option.textContent = locale.native;
+    select.appendChild(option);
+  }
+  select.value = value;
+  return select;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("JantLocalePicker", () => {
+  it("shows the selected language on the trigger", async () => {
+    const el = await createPicker({ value: "zh-Hans" });
+    expect(trigger(el).textContent).toContain("简体中文");
+  });
+
+  it("filters on native name, English name, or tag", async () => {
+    const el = await createPicker();
+    trigger(el).click();
+    await el.updateComplete;
+    expect(optionLabels(el)).toHaveLength(locales.length);
+
+    const search = el.querySelector<HTMLInputElement>("[data-language-search]");
+    if (!search) throw new Error("search missing");
+
+    search.value = "finn";
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    await el.updateComplete;
+    expect(optionLabels(el).join()).toContain("suomi");
+    expect(optionLabels(el)).toHaveLength(1);
+
+    search.value = "zh";
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    await el.updateComplete;
+    expect(optionLabels(el).join()).toContain("简体中文");
+  });
+
+  it("leaves out excluded languages", async () => {
+    const el = await createPicker({ exclude: ["ja", "fi"] });
+    trigger(el).click();
+    await el.updateComplete;
+    expect(optionLabels(el)).toHaveLength(2);
+  });
+
+  it("says so when nothing matches", async () => {
+    const el = await createPicker();
+    trigger(el).click();
+    await el.updateComplete;
+
+    const search = el.querySelector<HTMLInputElement>("[data-language-search]");
+    if (search) {
+      search.value = "zzzz";
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    await el.updateComplete;
+    expect(el.textContent).toContain(labels.empty);
+  });
+
+  it("moves through the list with the arrow keys and picks with Enter", async () => {
+    const el = await createPicker();
+    const chosen: string[] = [];
+    el.addEventListener("locale-select", (event) => {
+      chosen.push((event as CustomEvent<{ tag: string }>).detail.tag);
+    });
+
+    trigger(el).click();
+    await el.updateComplete;
+
+    await press(el, "ArrowDown");
+    await press(el, "Enter");
+
+    expect(chosen).toEqual(["zh-Hans"]);
+    expect(el.value).toBe("zh-Hans");
+  });
+
+  it("wraps around at the end of the list", async () => {
+    const el = await createPicker();
+    trigger(el).click();
+    await el.updateComplete;
+
+    // Starts on the selected language (index 0), so one step back wraps.
+    await press(el, "ArrowUp");
+    const active = el.querySelector("[data-language-option][data-active]");
+    expect(active?.textContent).toContain("suomi");
+  });
+
+  it("closes on Escape and on an outside click", async () => {
+    const el = await createPicker();
+
+    trigger(el).click();
+    await el.updateComplete;
+    expect(el.querySelector("[data-language-search]")).not.toBeNull();
+
+    await press(el, "Escape");
+    expect(el.querySelector("[data-language-search]")).toBeNull();
+
+    trigger(el).click();
+    await el.updateComplete;
+    document.body.dispatchEvent(new Event("click", { bubbles: true }));
+    await el.updateComplete;
+    expect(el.querySelector("[data-language-search]")).toBeNull();
+  });
+
+  it("does not let Enter escape to a surrounding form", async () => {
+    const el = await createPicker();
+    let escaped = 0;
+    document.body.addEventListener("keydown", () => {
+      escaped++;
+    });
+
+    trigger(el).click();
+    await el.updateComplete;
+    await press(el, "Enter");
+
+    expect(escaped).toBe(0);
+  });
+
+  it("writes the choice to the form control it drives", async () => {
+    const select = makeSelect("content-language", "en");
+    const el = await createPicker({ target: select });
+    const events: string[] = [];
+    select.addEventListener("input", () => events.push("input"));
+    select.addEventListener("change", () => events.push("change"));
+
+    trigger(el).click();
+    await el.updateComplete;
+    el.querySelectorAll<HTMLButtonElement>('[role="option"]')[2]?.click();
+    await el.updateComplete;
+
+    expect(select.value).toBe("ja");
+    expect(events).toEqual(["input", "change"]);
+  });
+
+  it("takes the plain control out of the layout once it upgrades", async () => {
+    const select = makeSelect("content-language", "ja");
+    const el = await createPicker({ value: "", target: select });
+
+    expect(select.hidden).toBe(true);
+    // With no value of its own the picker adopts the control's, so it opens on
+    // whatever the form would have posted.
+    expect(trigger(el).textContent).toContain("日本語");
+  });
+});

package/src/client/components/__tests__/jant-nav-manager.test.ts

@@ -49,13 +49,6 @@ const collectionFormLabels: CollectionFormLabels = {
   quickHint: "More options are available after you create it.",
   quickSubmitLabel: "Create Collection",
   createdLabel: "Collection created.",
-  descriptionLabel: "Description",
-  descriptionPlaceholder: "What's this collection about?",
-  sortOrderLabel: "Sort Order",
-  sortNewest: "Newest first",
-  sortOldest: "Oldest first",
-  sortRatingDesc: "Highest rated",
-  submitLabel: "Save",
   cancelLabel: "Cancel",
 };
 
@@ -95,7 +88,19 @@ const labels: NavManagerLabels = {
     "Choose a titled note that isn't already in navigation, or create a new page.",
   addPage: "Add Page",
   searchPages: "Search pages",
+  searchPagesHint: "Search pages, or paste an address",
   recentPages: "Recently updated",
+  addressMatch: "At that address",
+  addressAlreadyAdded:
+    "Already in navigation. Drag it in the list above to move it.",
+  addressNotFound: "Nothing at {address}. Check it, or search by title.",
+  addressUnpublished: "That page is a draft. Publish it, then add it.",
+  addressPrivate: "That page is private, so nobody could open it from a menu.",
+  addressUntitled: "That page has no title yet, so a menu has nothing to show.",
+  addressExternal:
+    "That address is on another site. Navigation holds it as a link.",
+  addressLinkOnly: "Navigation holds that address as a link.",
+  addressAddAsLink: "Add as link",
   searchingPages: "Searching pages…",
   noMatchingPages: "No matching pages available to add.",
   noPages: "No pages available.",
@@ -122,6 +127,7 @@ const labels: NavManagerLabels = {
   back: "Back",
   headerSection: "Header",
   moreSection: "More",
+  previewMore: "More",
   moreEmptyHint: "Move links here to hide them under More.",
   placementSaved: "Navigation placement updated.",
   cancel: "Cancel",
@@ -448,14 +454,9 @@ describe("JantNavManager", () => {
         body: JSON.stringify({ title: "Books", slug: "books" }),
       }),
     );
-    const editLink = requireElement(
-      el.querySelector<HTMLAnchorElement>(
-        'a[href="/collections/books/edit?returnTo=%2Fsettings%2Fnavigation"]',
-      ),
-      "expected collection edit link",
-    );
-    expect(editLink.target).toBe("_blank");
-    expect(editLink.rel).toContain("noopener");
+    // The full editor is the collection dialog opened on top of this one,
+    // not a link out to a page that no longer exists.
+    expect(findButton(el, "Edit Collection").tagName).toBe("BUTTON");
     expect(el.collections).toContainEqual({
       id: "col-books",
       title: "Books",
@@ -556,6 +557,23 @@ describe("JantNavManager", () => {
     );
   });
 
+  it("labels the preview overflow button with the site header's own wording", async () => {
+    const el = await createElement();
+    el.labels = { ...labels, moreSection: "Overflow", previewMore: "More" };
+    await el.updateComplete;
+
+    const trigger = requireElement(
+      el.querySelector<HTMLElement>("[data-preview-more-trigger]"),
+      "expected preview more trigger",
+    );
+    const sectionHeading = Array.from(el.querySelectorAll("section > h2")).map(
+      (heading) => heading.textContent?.trim(),
+    );
+
+    expect(trigger.textContent?.trim()).toBe("More");
+    expect(sectionHeading).toContain("Overflow");
+  });
+
   it("opens and dismisses the preview More popover", async () => {
     const el = await createElement();
     const trigger = requireElement(
@@ -611,6 +629,33 @@ describe("JantNavManager", () => {
     expect(getPreviewHeaderLabels(el)).toContain("Feed");
   });
 
+  // `subscribe` addresses a page that 404s without feeds, so it has to drop out
+  // of the preview alongside `rss` — the server's projection drops both.
+  it("hides a saved Subscribe item from the preview too", async () => {
+    const el = await createElement();
+    el.items = [
+      ...items,
+      {
+        id: "nav-subscribe",
+        type: "system",
+        systemKey: "subscribe",
+        label: "Subscribe",
+        displayLabel: "Subscribe",
+        url: "/subscribe",
+        placement: "header",
+      },
+    ];
+    el.rssFeedsEnabled = false;
+    await el.updateComplete;
+
+    expect(getPreviewHeaderLabels(el)).not.toContain("Subscribe");
+    expect(el.querySelector('[data-nav-id="nav-subscribe"]')).not.toBeNull();
+
+    el.rssFeedsEnabled = true;
+    await el.updateComplete;
+    expect(getPreviewHeaderLabels(el)).toContain("Subscribe");
+  });
+
   it("adds a suggested collection link through the nav items API", async () => {
     const el = await createElement();
     el.suggestedLinks = suggestedLinks;
@@ -1020,4 +1065,178 @@ describe("JantNavManager", () => {
     expect(editPageLink.target).toBe("_blank");
     expect(editPageLink.rel).toContain("noopener");
   });
+
+  describe("pasting an address into the page picker", () => {
+    /** Type into the picker and wait out the debounce. */
+    async function search(el: JantNavManager, value: string) {
+      const input = requireElement(
+        el.querySelector<HTMLInputElement>("#nav-page-search"),
+        "page search input",
+      );
+      input.value = value;
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      await flushAsyncWork();
+      await el.updateComplete;
+    }
+
+    async function openPicker(
+      resolution: unknown,
+    ): Promise<{ el: JantNavManager; fetchMock: ReturnType<typeof vi.fn> }> {
+      const el = await createElement();
+      const fetchMock = vi
+        .fn()
+        .mockImplementation((input: string, init?: globalThis.RequestInit) => {
+          if (input.startsWith("/api/nav-items/pages?")) {
+            return Promise.resolve({
+              ok: true,
+              status: 200,
+              json: async () => ({ pages: [] }),
+            });
+          }
+          if (input.startsWith("/api/nav-items/resolve?")) {
+            return Promise.resolve({
+              ok: true,
+              status: 200,
+              json: async () => ({ resolution }),
+            });
+          }
+          if (input === "/api/nav-items" && init?.method === "POST") {
+            return Promise.resolve({
+              ok: true,
+              status: 201,
+              json: async () => ({
+                id: "nav-added",
+                type: "page",
+                postId: "pst_about",
+                label: "About me",
+                url: "/about-me",
+                placement: "header",
+              }),
+            });
+          }
+          throw new Error(`Unexpected fetch: ${input}`);
+        });
+      vi.stubGlobal("fetch", fetchMock);
+
+      findButton(el, "Add Page").click();
+      await flushAsyncWork();
+      await el.updateComplete;
+      return { el, fetchMock };
+    }
+
+    it("looks the address up instead of searching titles", async () => {
+      const { el, fetchMock } = await openPicker({
+        kind: "page",
+        address: "/about-me",
+        page: {
+          id: "pst_about",
+          title: "About me",
+          slug: "about-me",
+          updatedAt: 123,
+        },
+      });
+
+      await search(el, "https://example.com/about-me");
+
+      expect(fetchMock).toHaveBeenCalledWith(
+        `/api/nav-items/resolve?url=${encodeURIComponent("https://example.com/about-me")}`,
+        expect.objectContaining({
+          headers: expect.objectContaining({ Accept: "application/json" }),
+        }),
+      );
+      expect(el.textContent).toContain("At that address");
+
+      findButton(el, "About me").click();
+      await flushAsyncWork();
+      await el.updateComplete;
+
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/nav-items",
+        expect.objectContaining({
+          method: "POST",
+          body: JSON.stringify({
+            type: "page",
+            postId: "pst_about",
+            placement: "header",
+          }),
+        }),
+      );
+    });
+
+    it("says why a page cannot be added, rather than showing nothing", async () => {
+      const { el } = await openPicker({
+        kind: "unpublished",
+        address: "/draft-page",
+      });
+
+      await search(el, "/draft-page");
+
+      expect(el.textContent).toContain("That page is a draft");
+      expect(el.textContent).not.toContain("No matching pages");
+    });
+
+    it("names the address it could not find", async () => {
+      const { el } = await openPicker({
+        kind: "not_found",
+        address: "/typo",
+      });
+
+      await search(el, "/typo");
+
+      expect(el.textContent).toContain("Nothing at /typo.");
+    });
+
+    it("hands an off-site address to the link form, filled in", async () => {
+      const { el } = await openPicker({
+        kind: "external",
+        address: "https://example.org/hello",
+      });
+
+      await search(el, "https://example.org/hello");
+      expect(el.textContent).toContain("That address is on another site");
+
+      findButton(el, "Add as link").click();
+      await el.updateComplete;
+
+      // The picker is out of the way and the URL is already in the form, so
+      // the only thing left to type is the label.
+      expect(el.querySelector("#nav-page-dialog")).toBeNull();
+      expect(
+        requireElement(
+          el.querySelector<HTMLInputElement>("#nav-link-url"),
+          "link url input",
+        ).value,
+      ).toBe("https://example.org/hello");
+    });
+
+    it("does not offer a page that is already in navigation", async () => {
+      const { el } = await openPicker({
+        kind: "page",
+        address: "/about",
+        page: {
+          id: "pst_nav_1",
+          title: "About",
+          slug: "about",
+          updatedAt: 123,
+        },
+      });
+      el.items = [
+        {
+          id: "nav-1",
+          type: "page",
+          postId: "pst_nav_1",
+          label: "About",
+          url: "/about",
+          placement: "header",
+        },
+      ];
+      await el.updateComplete;
+
+      await search(el, "/about");
+
+      expect(el.textContent).toContain("Already in navigation");
+      expect(el.querySelector(".nav-page-result")).toBeNull();
+    });
+  });
 });