@jant/core 0.6.15 → 0.7.0

package/src/client/components/__tests__/jant-compose-fullscreen.test.ts

@@ -14,14 +14,12 @@ const labels = {
   fullscreen: "Fullscreen",
   exitFullscreen: "Exit fullscreen",
   done: "Done",
-  title: "Title",
   titlePlaceholder: "Title",
   bodyPlaceholder: "What's on your mind...",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
 } as ComposeLabels;
 
 async function flush(el?: JantComposeFullscreen) {
@@ -58,7 +56,7 @@ describe("JantComposeFullscreen", () => {
     }
   });
 
-  it("opens in body-first mode when the title is hidden", async () => {
+  it("shows the title field when the editor arrived with one open", async () => {
     const el = document.createElement(
       "jant-compose-fullscreen",
     ) as JantComposeFullscreen;
@@ -68,26 +66,39 @@ describe("JantComposeFullscreen", () => {
 
     document.dispatchEvent(
       new CustomEvent("jant:fullscreen-open", {
-        detail: {
-          json: null,
-          title: "",
-          showTitle: false,
-          labels,
-        },
+        detail: { json: null, title: "", showTitle: true, labels },
       }),
     );
     await flush(el);
 
-    expect(el.querySelector(".compose-fullscreen-title")).toBeNull();
-    expect(
-      el.querySelector(".compose-fullscreen-title-placeholder"),
-    ).not.toBeNull();
+    expect(el.querySelector(".compose-fullscreen-title")).not.toBeNull();
     expect(el.textContent).not.toContain("Fullscreen");
-    expect(
-      el.querySelector(
-        ".compose-fullscreen-toolbar .compose-fullscreen-title-placeholder",
-      ),
-    ).toBeNull();
+  });
+
+  it("offers a way back to a title the editor had hidden", async () => {
+    const el = document.createElement(
+      "jant-compose-fullscreen",
+    ) as JantComposeFullscreen;
+    el.labels = labels;
+    document.body.appendChild(el);
+    await flush(el);
+
+    document.dispatchEvent(
+      new CustomEvent("jant:fullscreen-open", {
+        detail: { json: null, title: "", showTitle: false, labels },
+      }),
+    );
+    await flush(el);
+
+    expect(el.querySelector(".compose-fullscreen-title")).toBeNull();
+    const reveal = el.querySelector<HTMLButtonElement>(
+      ".compose-fullscreen-title-placeholder",
+    );
+    expect(reveal).not.toBeNull();
+
+    reveal?.click();
+    await flush(el);
+    expect(el.querySelector(".compose-fullscreen-title")).not.toBeNull();
   });
 
   it.each(["metaKey", "ctrlKey"] as const)(
@@ -105,7 +116,6 @@ describe("JantComposeFullscreen", () => {
           detail: {
             json: null,
             title: "Keyboard post",
-            showTitle: true,
             labels,
             editorIndex: 2,
           },
@@ -173,7 +183,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
           labels,
         },
       }),
@@ -194,66 +203,6 @@ describe("JantComposeFullscreen", () => {
     expect(el.querySelector(".compose-fullscreen-dialog")).not.toBeNull();
   });
 
-  it("reveals the title on demand and returns its visibility on close", async () => {
-    const el = document.createElement(
-      "jant-compose-fullscreen",
-    ) as JantComposeFullscreen;
-    el.labels = labels;
-    document.body.appendChild(el);
-    await flush(el);
-
-    document.dispatchEvent(
-      new CustomEvent("jant:fullscreen-open", {
-        detail: {
-          json: null,
-          title: "",
-          showTitle: false,
-          labels,
-        },
-      }),
-    );
-    await flush(el);
-
-    const toggle = el.querySelector<HTMLButtonElement>(
-      ".compose-fullscreen-title-placeholder",
-    );
-    expect(toggle).not.toBeNull();
-    toggle?.click();
-    await flush(el);
-
-    const input = el.querySelector<HTMLInputElement>(
-      ".compose-fullscreen-title",
-    );
-    expect(input).not.toBeNull();
-    if (!input) {
-      throw new Error("expected fullscreen title input");
-    }
-    input.value = "Desk Notes";
-    input.dispatchEvent(new Event("input"));
-
-    let detail: ComposeFullscreenCloseDetail | null = null;
-    document.addEventListener(
-      "jant:fullscreen-close",
-      (event) => {
-        detail = (event as CustomEvent<ComposeFullscreenCloseDetail>).detail;
-      },
-      { once: true },
-    );
-
-    el.querySelector<HTMLButtonElement>(".compose-fullscreen-done")?.click();
-
-    expect(detail).toMatchObject({
-      json: {
-        type: "doc",
-        content: [{ type: "paragraph" }],
-      },
-      title: "Desk Notes",
-      showTitle: true,
-      replyExpanded: false,
-      selection: { from: 1, to: 1 },
-    });
-  });
-
   it("restores and returns the current editor selection", async () => {
     const el = document.createElement(
       "jant-compose-fullscreen",
@@ -275,7 +224,6 @@ describe("JantComposeFullscreen", () => {
             ],
           },
           title: "",
-          showTitle: false,
           selection: { from: 4, to: 4 },
           labels,
         },
@@ -318,7 +266,7 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
+          showTitle: true,
           labels,
           replyContext: {
             contentHtml: "<p>A quiet sentence worth answering.</p>",
@@ -333,9 +281,10 @@ describe("JantComposeFullscreen", () => {
     expect(el.textContent).toContain("A quiet sentence worth answering.");
     expect(el.textContent).toContain("Mar 10, 2026");
     expect(el.textContent).toContain("Show more");
+    // The reply's title field lives inside its own row, not the toolbar.
     expect(
       el.querySelector(
-        ".compose-fullscreen-editor-row .compose-fullscreen-title-placeholder-reply",
+        ".compose-fullscreen-editor-row .compose-fullscreen-title-reply",
       ),
     ).not.toBeNull();
   });
@@ -353,7 +302,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "Follow-up",
-          showTitle: true,
           labels,
           replyContext: {
             contentHtml: "<p>Thread seed.</p>",
@@ -390,7 +338,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
           labels,
           replyContext: {
             contentHtml: "<p>One more thread preview.</p>",
@@ -436,7 +383,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
           labels,
         },
       }),
@@ -491,7 +437,6 @@ describe("JantComposeFullscreen", () => {
             ],
           },
           title: "",
-          showTitle: false,
           labels,
         },
       }),

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("日本語");
+  });
+});