@jant/core 0.6.16 → 0.7.0

package/src/client/__tests__/compose-bridge-video-poster.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment happy-dom
+
+/**
+ * The compose card and the uploaded media used to draw their poster from two
+ * different places: the card from a quick `<video>` frame grab, the upload
+ * from the mediabunny probe. When the probe came back without one, the card
+ * showed a thumbnail the published post did not have. The quick frame is now
+ * the upload's fallback, so the two cannot disagree.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const processToFile = vi.fn();
+const uploadViaSession = vi.fn();
+
+vi.mock("../video-processor.js", () => ({
+  VideoProcessor: {
+    isSupported: () => true,
+    processToFile: (...args: unknown[]) => processToFile(...args),
+  },
+}));
+
+vi.mock("../upload-session.js", () => ({
+  uploadViaSession: (...args: unknown[]) => uploadViaSession(...args),
+}));
+
+await import("../compose-bridge.js");
+
+const QUICK_POSTER = new Blob(["quick"], { type: "image/webp" });
+const PROBE_POSTER = new Blob(["probe"], { type: "image/webp" });
+
+/** Stand in for the `<video>` element `captureQuickPoster` grabs a frame from. */
+function stubFrameCapture(options: { decodes: boolean }) {
+  vi.spyOn(document, "createElement").mockImplementation(((tag: string) => {
+    if (tag === "canvas") {
+      return {
+        width: 0,
+        height: 0,
+        getContext: () => ({ drawImage: () => {} }),
+        toBlob: (cb: (blob: Blob | null) => void) => cb(QUICK_POSTER),
+      } as unknown as HTMLElement;
+    }
+    const video = {
+      muted: false,
+      playsInline: false,
+      preload: "",
+      videoWidth: 1280,
+      videoHeight: 720,
+      onloadeddata: null as null | (() => void),
+      onerror: null as null | (() => void),
+      removeAttribute: () => {},
+      load: () => {},
+      set src(_value: string) {
+        queueMicrotask(() =>
+          options.decodes ? this.onloadeddata?.() : this.onerror?.(),
+        );
+      },
+    };
+    return video as unknown as HTMLElement;
+  }) as typeof document.createElement);
+}
+
+function selectVideoFile() {
+  document.dispatchEvent(
+    new CustomEvent("jant:files-selected", {
+      detail: {
+        files: [
+          {
+            file: new File(["source"], "clip.mov", {
+              type: "video/quicktime",
+            }),
+            clientId: "attachment-1",
+          },
+        ],
+      },
+    }),
+  );
+}
+
+async function settle() {
+  for (let i = 0; i < 6; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+function uploadedPoster(): Blob | undefined {
+  const metadata = uploadViaSession.mock.calls[0]?.[1] as
+    { poster?: Blob } | undefined;
+  return metadata?.poster;
+}
+
+describe("compose bridge video poster", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    processToFile.mockReset();
+    uploadViaSession.mockReset();
+    uploadViaSession.mockResolvedValue({
+      id: "med_1",
+      filename: "clip.mp4",
+      url: "/media/clip.mp4",
+      mimeType: "video/mp4",
+      size: 10,
+    });
+    vi.stubGlobal("URL", {
+      createObjectURL: () => "blob:test",
+      revokeObjectURL: () => {},
+    });
+  });
+
+  it("uploads the probe's poster when it has one", async () => {
+    stubFrameCapture({ decodes: true });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: PROBE_POSTER,
+      blurhash: "LGK",
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadedPoster()).toBe(PROBE_POSTER);
+  });
+
+  it("falls back to the quick frame when the probe found no poster", async () => {
+    stubFrameCapture({ decodes: true });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: undefined,
+      blurhash: undefined,
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadedPoster()).toBe(QUICK_POSTER);
+  });
+
+  it("uploads without a poster when neither path produced one", async () => {
+    stubFrameCapture({ decodes: false });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: undefined,
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadedPoster()).toBeUndefined();
+  });
+});

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

@@ -43,6 +43,46 @@ async function flushBridgeWork(times = 4) {
   }
 }
 
+/** A minimal published-post detail, as the composer dispatches it. */
+function singlePostDetail(overrides: Record<string, unknown> = {}) {
+  return {
+    format: "quote",
+    title: "",
+    body: '{"type":"doc","content":[]}',
+    url: "",
+    quoteText: "A borrowed sentence.",
+    quoteAuthor: "",
+    slug: "",
+    status: "published",
+    visibility: "public",
+    rating: 0,
+    collectionIds: [],
+    attachments: [],
+    ...overrides,
+  };
+}
+
+/** The same, as a two-quote thread. */
+function threadSubmitDetail(overrides: Record<string, unknown> = {}) {
+  const first = singlePostDetail();
+  return {
+    ...first,
+    pendingAttachments: [],
+    threadPosts: [first, singlePostDetail({ quoteText: "And its answer." })],
+    ...overrides,
+  };
+}
+
+/** Text of the compose progress toast, which the result message takes over. */
+function progressToastText(): string {
+  return (
+    document
+      .getElementById("toast-compose-deferred")
+      ?.querySelector("span")
+      ?.textContent?.trim() ?? ""
+  );
+}
+
 function renderPostView(postId: string) {
   const postView = document.createElement("div");
   postView.dataset.postView = "";
@@ -968,4 +1008,236 @@ describe("compose bridge", () => {
 
     expect(assignSpy).toHaveBeenCalledWith("/blog/published-post");
   });
+
+  it("saves a thread as a draft when the connection drops, not just when the server refuses", async () => {
+    // A publish that never reaches the server and one the server rejects are
+    // the same event to the author: the post did not go up. Both earn the
+    // save-as-draft attempt.
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    composeEl.labels = {
+      publishFailedDraft: "Couldn't publish. Saved as draft.",
+    };
+    document.body.appendChild(composeEl);
+
+    const bodies: string[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose/thread") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      const body = String(init?.body ?? "");
+      bodies.push(body);
+      // The publish attempt never completes; the draft attempt gets through.
+      if (bodies.length === 1) throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ status: "draft" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: threadSubmitDetail(),
+      }),
+    );
+    await flushBridgeWork();
+
+    expect(bodies).toHaveLength(2);
+    expect(JSON.parse(bodies[1]).posts[0].status).toBe("draft");
+    // The work reached the server, so the local copy is no longer the only one.
+    expect(composeEl.clearLocalDraftFromStorage).toHaveBeenCalled();
+    expect(composeEl.openNew).not.toHaveBeenCalled();
+  });
+
+  it("reopens the composer with its local draft when the connection stays down", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    document.body.appendChild(composeEl);
+
+    let calls = 0;
+    vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      calls += 1;
+      throw new TypeError("Failed to fetch");
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: threadSubmitDetail(),
+      }),
+    );
+    await flushBridgeWork();
+
+    // Publish, then the draft attempt — both dropped.
+    expect(calls).toBe(2);
+    expect(composeEl.openNew).toHaveBeenCalledWith({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: [],
+    });
+    // Nothing reached the server, so the local copy must stay.
+    expect(composeEl.clearLocalDraftFromStorage).not.toHaveBeenCalled();
+  });
+
+  it("saves a single post as a draft when the connection drops", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    document.body.appendChild(composeEl);
+
+    const bodies: string[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      bodies.push(String(init?.body ?? ""));
+      if (bodies.length === 1) throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ status: "draft" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: { ...singlePostDetail(), pendingAttachments: [] },
+      }),
+    );
+    await flushBridgeWork();
+
+    expect(bodies).toHaveLength(2);
+    expect(JSON.parse(bodies[1]).status).toBe("draft");
+  });
+
+  it("names the publish in a toast while the request is still running", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = true;
+    composeEl.reset = vi.fn();
+    composeEl.updateComplete = Promise.resolve();
+    document.body.appendChild(composeEl);
+
+    let release: (() => void) | undefined;
+    const inFlight = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      // A Link post waits on the server while its preview thumbnail is
+      // fetched and stored — the toast has to survive that whole wait.
+      await inFlight;
+      return new Response(
+        JSON.stringify({ status: "published", permalink: "/a-link" }),
+        { status: 200, headers: { "Content-Type": "application/json" } },
+      );
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          ...singlePostDetail({
+            format: "link",
+            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            quoteText: "",
+          }),
+          pendingAttachments: [],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Publishing...");
+
+    release?.();
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Published!");
+  });
+
+  it("names a draft save while the request is still running", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+
+    let release: (() => void) | undefined;
+    const inFlight = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      await inFlight;
+      return new Response(
+        JSON.stringify({ status: "draft", toast: "Draft saved." }),
+        { status: 200, headers: { "Content-Type": "application/json" } },
+      );
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          ...singlePostDetail({ status: "draft" }),
+          pendingAttachments: [],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Saving...");
+
+    release?.();
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Draft saved.");
+  });
 });

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