@jant/core 0.6.15 → 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

@@ -8,6 +8,7 @@ type ComposeHarness = HTMLElement & {
   clearLocalDraftFromStorage?: () => void;
   clearEditDraftFromStorage?: (postId: string) => void;
   openEdit?: (id: string) => Promise<void>;
+  openDraft?: (id: string) => Promise<void>;
   openNew?: (options?: { restoreDraft?: boolean }) => Promise<void>;
   openReply?: (
     id: string,
@@ -42,9 +43,58 @@ 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 = "";
+  postView.dataset.postViewId = postId;
+  document.body.appendChild(postView);
+  return postView;
+}
+
 describe("compose bridge", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
+    delete document.documentElement.dataset.sitePathPrefix;
     vi.restoreAllMocks();
     globalThis.sessionStorage.clear();
   });
@@ -517,7 +567,12 @@ describe("compose bridge", () => {
       undefined,
       "pst_root",
       { kind: "timeline-item", id: "pst_root" },
-      { restoreDraft: true, initialFormat: "quote" },
+      {
+        restoreDraft: true,
+        initialFormat: "quote",
+        restoreToast: false,
+        restoreMedia: [],
+      },
     );
     expect(composeEl.openNew).not.toHaveBeenCalled();
     expect(composeEl.clearLocalDraftFromStorage).not.toHaveBeenCalled();
@@ -716,6 +771,473 @@ describe("compose bridge", () => {
 
     await flushBridgeWork();
 
-    expect(fetchSpy).toHaveBeenCalledTimes(2);
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps an updated draft on its authenticated preview path", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+    const previewBar = document.createElement("aside");
+    previewBar.dataset.previewStatus = "";
+    document.body.appendChild(previewBar);
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    globalThis.history.replaceState({}, "", "/blog/preview/draft-post");
+
+    const assignSpy = vi
+      .spyOn(globalThis.location, "assign")
+      .mockImplementation(() => {});
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      const url = new URL(raw, "http://localhost");
+
+      expect(url.pathname).toBe("/api/posts/pst_draft");
+      expect(init?.method).toBe("PUT");
+      expect(JSON.parse(String(init?.body))).toMatchObject({
+        status: "draft",
+      });
+
+      return new Response(
+        JSON.stringify({
+          id: "pst_draft",
+          slug: "draft-post",
+          status: "draft",
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "note",
+          title: "Draft post",
+          body: "Updated draft body",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          slug: "draft-post",
+          status: "draft",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          editPostId: "pst_draft",
+          draftSourceId: "pst_draft",
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(assignSpy).toHaveBeenCalledWith("/blog/preview/draft-post");
+  });
+
+  it("keeps a draft-panel save in place and signals the updated list", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    const refreshCollections = vi.fn(async () => true);
+    composeEl.refreshCollections = refreshCollections;
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+
+    const assignSpy = vi
+      .spyOn(globalThis.location, "assign")
+      .mockImplementation(() => {});
+    const completeSpy = vi.fn();
+    document.addEventListener("jant:compose-submit-complete", completeSpy, {
+      once: true,
+    });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          id: "pst_draft",
+          slug: "draft-post",
+          status: "draft",
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "note",
+          title: "Draft post",
+          body: "Updated draft body",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          slug: "draft-post",
+          status: "draft",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          editPostId: "pst_draft",
+          draftSourceId: "pst_draft",
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(assignSpy).not.toHaveBeenCalled();
+    expect(refreshCollections).toHaveBeenCalled();
+    expect(completeSpy).toHaveBeenCalledOnce();
+  });
+
+  it("reopens a failed server draft through the draft loader", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openDraft = vi.fn(async () => {});
+    composeEl.openEdit = vi.fn(async () => {});
+    document.body.appendChild(composeEl);
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ error: "Could not save draft." }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "note",
+          title: "Draft post",
+          body: "Updated draft body",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          status: "draft",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          editPostId: "pst_draft",
+          draftSourceId: "pst_draft",
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(composeEl.openDraft).toHaveBeenCalledWith("pst_draft");
+    expect(composeEl.openEdit).not.toHaveBeenCalled();
+  });
+
+  it("sends a published draft to its public permalink", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+    renderPostView("pst_draft");
+    const previewBar = document.createElement("aside");
+    previewBar.dataset.previewStatus = "";
+    document.body.appendChild(previewBar);
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    globalThis.history.replaceState({}, "", "/blog/preview/draft-post");
+
+    const assignSpy = vi
+      .spyOn(globalThis.location, "assign")
+      .mockImplementation(() => {});
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          id: "pst_draft",
+          slug: "published-post",
+          status: "published",
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "note",
+          title: "Published post",
+          body: "Ready to publish",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          slug: "published-post",
+          status: "published",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          editPostId: "pst_draft",
+          draftSourceId: "pst_draft",
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    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.");
   });
 });