@jant/core 0.3.27 → 0.3.28

package/src/ui/components/__tests__/jant-compose-editor.test.ts

@@ -0,0 +1,272 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import type { ComposeLabels } from "../compose-types.js";
+import "../jant-compose-editor.js";
+import type { JantComposeEditor } from "../jant-compose-editor.js";
+
+function requireElement<T extends globalThis.Element>(
+  element: T | null,
+  message: string,
+): T {
+  if (!element) {
+    throw new Error(message);
+  }
+  return element;
+}
+
+function requireItem<T extends globalThis.Element>(
+  collection: globalThis.NodeListOf<T>,
+  index: number,
+  message: string,
+): T {
+  const item = collection.item(index);
+  if (!item) {
+    throw new Error(message);
+  }
+  return item;
+}
+
+const labels: ComposeLabels = {
+  cancel: "Cancel",
+  note: "Note",
+  link: "Link",
+  quote: "Quote",
+  saveDraft: "Save as Draft",
+  saveAsDraft: "Save as draft",
+  discard: "Discard",
+  titlePlaceholder: "Title",
+  bodyPlaceholder: "What's on your mind...",
+  urlPlaceholder: "Paste a URL...",
+  linkTitlePlaceholder: "Give it a title...",
+  thoughtsPlaceholder: "Your thoughts (optional)",
+  quotePlaceholder: "Type the quote...",
+  authorPlaceholder: "Author (optional)",
+  sourcePlaceholder: "Source link (optional)",
+  attachedText: "Attached Text",
+  attachedTextPlaceholder: "Paste text...",
+  attachedTextHint: "Supplementary content",
+  done: "Done",
+  media: "Media",
+  score: "Score",
+  title: "Title",
+  collection: "Collection",
+  searchCollections: "Search...",
+  noCollections: "No collections found.",
+  post: "Post",
+  addAlt: "+ ALT",
+  addAltTitle: "Add alt text",
+  altPlaceholder: "Describe this...",
+  altHint: "Alt text improves accessibility",
+  addMore: "Add",
+  uploading: "Uploading...",
+  published: "Published!",
+};
+
+async function createElement(
+  format: string = "note",
+): Promise<JantComposeEditor> {
+  const el = document.createElement("jant-compose-editor") as JantComposeEditor;
+  el.format = format as "note" | "link" | "quote";
+  el.labels = labels;
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+describe("JantComposeEditor", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders note fields by default", async () => {
+    const el = await createElement("note");
+    const textarea = requireElement(
+      el.querySelector<HTMLTextAreaElement>(".compose-body-input"),
+      "expected compose body textarea",
+    );
+    expect(textarea.placeholder).toBe("What's on your mind...");
+  });
+
+  it("renders link fields when format is link", async () => {
+    const el = await createElement("link");
+    const urlInput = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="url"]'),
+      "expected url input",
+    );
+    expect(urlInput.placeholder).toBe("Paste a URL...");
+
+    const titleInput = el.querySelector<HTMLInputElement>(
+      ".compose-link-title",
+    );
+    expect(titleInput).not.toBeNull();
+  });
+
+  it("renders quote fields when format is quote", async () => {
+    const el = await createElement("quote");
+    const quoteTextarea = el.querySelector<HTMLTextAreaElement>(
+      ".compose-quote-text",
+    );
+    expect(quoteTextarea).not.toBeNull();
+
+    const authorInput = el.querySelector<HTMLInputElement>(
+      ".compose-quote-author",
+    );
+    expect(authorInput).not.toBeNull();
+  });
+
+  it("toggles star rating visibility", async () => {
+    const el = await createElement("note");
+
+    // Rating not visible initially
+    expect(el.querySelector(".compose-star-rating")).toBeNull();
+
+    // Click score button to show rating
+    const toolButtons =
+      el.querySelectorAll<HTMLButtonElement>(".compose-tool-btn");
+    const scoreBtnEl = requireItem(
+      toolButtons,
+      2,
+      "expected score tool button",
+    );
+    scoreBtnEl.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-star-rating")).not.toBeNull();
+  });
+
+  it("sets rating on star click and deselects on same star", async () => {
+    const el = await createElement("note");
+    el._showRating = true;
+    await el.updateComplete;
+
+    const stars = el.querySelectorAll<HTMLButtonElement>(".compose-star");
+    expect(stars.length).toBe(5);
+
+    // Click third star
+    stars[2].click();
+    await el.updateComplete;
+    expect(el._rating).toBe(3);
+
+    // Rating label shows
+    const label = el.querySelector(".compose-star-label");
+    expect(label?.textContent).toContain("3/5");
+
+    // Click third star again to deselect
+    stars[2].click();
+    await el.updateComplete;
+    expect(el._rating).toBe(0);
+  });
+
+  it("toggles attached text panel", async () => {
+    const el = await createElement("note");
+
+    // Click attached text tool button
+    const toolBtns =
+      el.querySelectorAll<HTMLButtonElement>(".compose-tool-btn");
+    const attachedBtn = requireItem(
+      toolBtns,
+      1,
+      "expected attached text button",
+    );
+    attachedBtn.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-attached-panel")).not.toBeNull();
+
+    // Click done button to close
+    const doneBtn = el.querySelector<HTMLButtonElement>(
+      ".compose-attached-panel .compose-post-btn",
+    );
+    doneBtn?.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-attached-panel")).toBeNull();
+  });
+
+  it("shows title toggle only in note mode", async () => {
+    const el = await createElement("note");
+    const toolSep = el.querySelector(".compose-tool-sep");
+    expect(toolSep).not.toBeNull();
+
+    el.format = "link";
+    await el.updateComplete;
+    expect(el.querySelector(".compose-tool-sep")).toBeNull();
+  });
+
+  it("getData returns current field values", async () => {
+    const el = await createElement("note");
+    el._title = "Test Title";
+    el._body = "Test Body";
+    el._rating = 4;
+    el._attachedText = "Some attached text";
+
+    const data = el.getData();
+    expect(data.title).toBe("Test Title");
+    expect(data.body).toBe("Test Body");
+    expect(data.rating).toBe(4);
+    expect(data.attachedText).toBe("Some attached text");
+    expect(data.url).toBe("");
+    expect(data.quoteText).toBe("");
+    expect(data.quoteAuthor).toBe("");
+  });
+
+  it("reset clears all fields", async () => {
+    const el = await createElement("note");
+    el._title = "Test";
+    el._body = "Body";
+    el._rating = 3;
+    el._showRating = true;
+    el._attachedText = "text";
+    el._showAttachedText = true;
+
+    el.reset();
+
+    expect(el._title).toBe("");
+    expect(el._body).toBe("");
+    expect(el._rating).toBe(0);
+    expect(el._showRating).toBe(false);
+    expect(el._attachedText).toBe("");
+    expect(el._showAttachedText).toBe(false);
+  });
+
+  it("shows attached text badge when text is present", async () => {
+    const el = await createElement("note");
+    el._attachedText = "Some content here";
+    await el.updateComplete;
+
+    const badge = el.querySelector(".compose-attached-badge");
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent).toContain("chars");
+  });
+
+  it("media button highlights when attachments are present", async () => {
+    const el = await createElement("note");
+
+    // Media button should not be active initially
+    const mediaBtn = el.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtn?.classList.contains("compose-tool-btn-active")).toBe(false);
+
+    // Add an attachment
+    const blob = new Blob(["fake"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    el._attachments = [
+      {
+        clientId: "test-1",
+        file,
+        previewUrl: URL.createObjectURL(blob),
+        status: "done",
+        mediaId: "m1",
+        alt: "",
+        error: null,
+      },
+    ];
+    await el.updateComplete;
+
+    const mediaBtnAfter =
+      el.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtnAfter?.classList.contains("compose-tool-btn-active")).toBe(
+      true,
+    );
+  });
+});

package/src/ui/components/__tests__/jant-post-form.test.ts

@@ -0,0 +1,172 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import type {
+  PostFormLabels,
+  PostFormInitial,
+  PostCollectionOption,
+  PostMediaItem,
+  PostSubmitDetail,
+} from "../post-form-types.js";
+import "../jant-post-form.js";
+import type { JantPostForm } from "../jant-post-form.js";
+
+const labels: PostFormLabels = {
+  formatLabel: "Format",
+  noteOption: "Note",
+  linkOption: "Link",
+  quoteOption: "Quote",
+  titleLabel: "Title",
+  titlePlaceholder: "Title...",
+  bodyLabel: "Body",
+  bodyPlaceholder: "Body...",
+  urlLabel: "URL",
+  urlPlaceholder: "https://example.com",
+  quoteTextLabel: "Quote Text",
+  quoteTextPlaceholder: "Quote...",
+  mediaLabel: "Media",
+  mediaAddButton: "Add Media",
+  mediaRemoveButton: "Remove",
+  mediaEmptyLabel: "No media",
+  statusLabel: "Status",
+  statusPublished: "Published",
+  statusDraft: "Draft",
+  featuredLabel: "Featured",
+  pinnedLabel: "Pinned",
+  collectionsLabel: "Collections",
+  submitLabel: "Publish",
+  cancelLabel: "Cancel",
+  mediaDialogTitle: "Select Media",
+  mediaDialogDone: "Done",
+  mediaDialogLoading: "Loading...",
+  submitSuccessMessage: "Saved!",
+  submitErrorMessage: "Failed.",
+};
+
+const initial: PostFormInitial = {
+  format: "note",
+  title: "",
+  body: "",
+  url: "",
+  quoteText: "",
+  status: "published",
+  featured: false,
+  pinned: false,
+  rating: 0,
+  collectionIds: [],
+  mediaIds: [],
+};
+
+const collections: PostCollectionOption[] = [
+  { id: 1, title: "General", icon: null },
+  { id: 2, title: "Favorites", icon: "★" },
+];
+
+const media: PostMediaItem[] = [
+  { id: "m1", thumbUrl: "https://cdn.example.com/m1.jpg", alt: "Media 1" },
+];
+
+async function createElement(
+  overrides: Partial<JantPostForm> = {},
+): Promise<JantPostForm> {
+  const el = document.createElement("jant-post-form") as JantPostForm;
+  el.labels = { ...labels };
+  el.initial = { ...initial };
+  el.collections = [...collections];
+  el.media = [...media];
+  el.action = "/dash/posts";
+  Object.assign(el, overrides);
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+describe("JantPostForm", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders base fields and labels", async () => {
+    const el = await createElement();
+    const select = el.querySelector("select.select");
+    expect(select).not.toBeNull();
+    const label = el.querySelector(".field .label");
+    expect(label?.textContent?.trim()).toBe("Format");
+    const submit = el.querySelector<HTMLButtonElement>("button[type=submit]");
+    expect(submit?.textContent?.trim()).toContain("Publish");
+  });
+
+  it("shows quote textarea when format set to quote", async () => {
+    const el = await createElement({
+      initial: { ...initial, format: "quote" },
+    });
+    await el.updateComplete;
+    const textarea = el.querySelector<HTMLTextAreaElement>(
+      "textarea[placeholder='Quote...']",
+    );
+    expect(textarea).not.toBeNull();
+  });
+
+  it("dispatches jant:post-submit with form data", async () => {
+    const el = await createElement();
+    const form = el.querySelector("form");
+    expect(form).not.toBeNull();
+    if (!form) throw new Error("Form element not found");
+
+    const titleInput = el.querySelector<HTMLInputElement>("input.input");
+    expect(titleInput).not.toBeNull();
+    if (!titleInput) throw new Error("Title input not found");
+    titleInput.value = "Sample Post";
+    titleInput.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const bodyTextarea =
+      el.querySelector<HTMLTextAreaElement>("textarea.textarea");
+    expect(bodyTextarea).not.toBeNull();
+    if (!bodyTextarea) throw new Error("Body textarea not found");
+    bodyTextarea.value = "Hello world";
+    bodyTextarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const checkboxList =
+      el.querySelectorAll<HTMLInputElement>("input.checkbox");
+    expect(checkboxList.length).toBeGreaterThan(0);
+    const checkbox = checkboxList[0];
+    checkbox.checked = true;
+    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const collectionCheckbox = checkboxList.item(2);
+    expect(collectionCheckbox).not.toBeNull();
+    if (!collectionCheckbox) throw new Error("Collection checkbox missing");
+    collectionCheckbox.checked = true;
+    collectionCheckbox.dispatchEvent(new Event("change", { bubbles: true }));
+
+    el.mediaIds = ["m1"];
+
+    let detail: PostSubmitDetail | null = null;
+    el.addEventListener("jant:post-submit", (event) => {
+      detail = (event as CustomEvent<PostSubmitDetail>).detail;
+    });
+
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+
+    expect(detail).not.toBeNull();
+    const d = detail as unknown as PostSubmitDetail;
+    expect(d.endpoint).toBe("/dash/posts");
+    expect(d.data.title).toBe("Sample Post");
+    expect(d.data.body).toBe("Hello world");
+    expect(d.data.featured).toBe(true);
+    expect(d.data.collectionIds).toEqual([collections[0].id]);
+    expect(d.data.mediaIds).toEqual(["m1"]);
+  });
+
+  it("updates mediaIds when setter called", async () => {
+    const el = await createElement();
+    el.mediaIds = ["m1"];
+    await el.updateComplete;
+
+    const items = el.querySelectorAll("[data-media-id]");
+    expect(items.length).toBe(1);
+    expect(items[0].getAttribute("data-media-id")).toBe("m1");
+  });
+});

package/src/ui/components/__tests__/jant-settings-avatar.test.ts

@@ -0,0 +1,235 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import type {
+  AvatarRemoveDetail,
+  SettingsLabels,
+  SettingsSaveDetail,
+} from "../settings-types.js";
+import "../jant-settings-avatar.js";
+import type { JantSettingsAvatar } from "../jant-settings-avatar.js";
+
+function requireElement<T extends globalThis.Element>(
+  element: T | null,
+  message: string,
+): T {
+  if (!element) {
+    throw new Error(message);
+  }
+  return element;
+}
+
+const labels: SettingsLabels = {
+  blogAvatar: "Blog Avatar",
+  uploadAvatar: "Upload Avatar",
+  remove: "Remove",
+  avatarHelp: "For best results, upload a square image.",
+  displayInHeader: "Display avatar in my site header",
+  processing: "Processing...",
+  uploading: "Uploading...",
+  uploadError: "Upload failed.",
+  general: "General",
+  siteName: "Site Name",
+  aboutBlog: "About this blog",
+  aboutBlogHelp: "Displayed above your blog posts.",
+  language: "Language",
+  defaultHomepageView: "Default Homepage View",
+  latest: "Latest",
+  featured: "Featured",
+  timeZone: "Time Zone",
+  siteFooter: "Site Footer",
+  markdownSupported: "Markdown supported",
+  footerHelp: "Displayed at the bottom of posts.",
+  seo: "SEO",
+  allowIndexing: "It's OK for search engines to index my site",
+  save: "Save",
+  cancel: "Cancel",
+};
+
+async function createElement(
+  avatarUrl = "",
+  showInHeader = false,
+): Promise<JantSettingsAvatar> {
+  const el = document.createElement(
+    "jant-settings-avatar",
+  ) as JantSettingsAvatar;
+  el.avatarUrl = avatarUrl;
+  el.showInHeader = showInHeader;
+  el.labels = labels;
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+/** Toggle a checkbox reliably in happy-dom by explicitly dispatching change */
+function toggleCheckbox(checkbox: HTMLInputElement) {
+  checkbox.checked = !checkbox.checked;
+  checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+/** Find the save button (not the upload label which also has .btn) */
+function findSaveBtn(el: HTMLElement): HTMLButtonElement | null {
+  return el.querySelector<HTMLButtonElement>("button.btn:not(.btn-outline)");
+}
+
+/** Find the cancel button */
+function findCancelBtn(el: HTMLElement): HTMLButtonElement | null {
+  return el.querySelector<HTMLButtonElement>("button.btn-outline");
+}
+
+describe("JantSettingsAvatar", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders card with Blog Avatar heading", async () => {
+    const el = await createElement();
+    const heading = el.querySelector("h2");
+    expect(heading?.textContent).toBe("Blog Avatar");
+  });
+
+  it("renders placeholder when no avatar URL", async () => {
+    const el = await createElement();
+    const img = el.querySelector("img");
+    expect(img).toBeNull();
+    const placeholder = el.querySelector(".bg-muted");
+    expect(placeholder).not.toBeNull();
+  });
+
+  it("renders avatar image when URL provided", async () => {
+    const el = await createElement("https://example.com/avatar.png");
+    const img = el.querySelector("img");
+    expect(img).not.toBeNull();
+    expect(img?.src).toBe("https://example.com/avatar.png");
+  });
+
+  it("shows Remove button when avatar exists", async () => {
+    const el = await createElement("https://example.com/avatar.png");
+    const buttons = el.querySelectorAll("button");
+    const removeBtn = Array.from(buttons).find((b) =>
+      b.textContent?.includes("Remove"),
+    );
+    expect(removeBtn).not.toBeNull();
+  });
+
+  it("hides Remove button when no avatar", async () => {
+    const el = await createElement();
+    const buttons = el.querySelectorAll("button");
+    const removeBtn = Array.from(buttons).find((b) =>
+      b.textContent?.includes("Remove"),
+    );
+    expect(removeBtn).toBeUndefined();
+  });
+
+  it("renders display-in-header checkbox with correct state", async () => {
+    const el = await createElement("", true);
+    const checkbox = el.querySelector<HTMLInputElement>(
+      'input[type="checkbox"]',
+    );
+    expect(checkbox?.checked).toBe(true);
+  });
+
+  it("toggling checkbox marks form as dirty", async () => {
+    const el = await createElement("", false);
+    const checkbox = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="checkbox"]'),
+      "expected header display checkbox",
+    );
+
+    toggleCheckbox(checkbox);
+    await el.updateComplete;
+
+    const saveBtn = findSaveBtn(el);
+    expect(saveBtn?.disabled).toBe(false);
+  });
+
+  it("cancel reverts checkbox to original state", async () => {
+    const el = await createElement("", false);
+    const checkbox = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="checkbox"]'),
+      "expected header display checkbox",
+    );
+
+    toggleCheckbox(checkbox);
+    await el.updateComplete;
+
+    const cancelBtn = findCancelBtn(el);
+    cancelBtn?.click();
+    await el.updateComplete;
+
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it("dispatches jant:settings-save on save click", async () => {
+    const el = await createElement("", false);
+    const checkbox = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="checkbox"]'),
+      "expected header display checkbox",
+    );
+
+    toggleCheckbox(checkbox);
+    await el.updateComplete;
+
+    let detail: SettingsSaveDetail | null = null;
+    el.addEventListener("jant:settings-save", (event) => {
+      const customEvent = event as CustomEvent<SettingsSaveDetail>;
+      detail = customEvent.detail;
+    });
+
+    const saveBtn = findSaveBtn(el);
+    saveBtn?.click();
+    await el.updateComplete;
+
+    expect(detail).not.toBeNull();
+    const d = detail as unknown as SettingsSaveDetail;
+    expect(d.endpoint).toBe("/dash/settings/avatar/display");
+    expect(d.section).toBe("avatar-display");
+    expect(d.data.showHeaderAvatar).toBe("true");
+  });
+
+  it("dispatches jant:avatar-remove on remove click", async () => {
+    const el = await createElement("https://example.com/avatar.png");
+
+    let detail: AvatarRemoveDetail | null = null;
+    el.addEventListener("jant:avatar-remove", (event) => {
+      const customEvent = event as CustomEvent<AvatarRemoveDetail>;
+      detail = customEvent.detail;
+    });
+
+    const buttons = el.querySelectorAll("button");
+    const removeBtn = Array.from(buttons).find((b) =>
+      b.textContent?.includes("Remove"),
+    );
+    removeBtn?.click();
+
+    expect(detail).not.toBeNull();
+    const d = detail as unknown as AvatarRemoveDetail;
+    expect(d.endpoint).toBe("/dash/settings/avatar/remove");
+  });
+
+  it("saved() resets dirty state", async () => {
+    const el = await createElement("", false);
+    const checkbox = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="checkbox"]'),
+      "expected header display checkbox",
+    );
+
+    toggleCheckbox(checkbox);
+    await el.updateComplete;
+
+    el.saved();
+    await el.updateComplete;
+
+    const saveBtn = findSaveBtn(el);
+    expect(saveBtn?.disabled).toBe(true);
+  });
+
+  it("renders file input with data-avatar-upload attribute", async () => {
+    const el = await createElement();
+    const fileInput = el.querySelector<HTMLInputElement>(
+      "input[data-avatar-upload]",
+    );
+    expect(fileInput).not.toBeNull();
+    expect(fileInput?.type).toBe("file");
+  });
+});