Emdash source with visual editor image upload fix

Fixes: 1. media.ts: wrap placeholder generation in try-catch 2. toolbar.ts: check r.ok, display error message in popover
2026-05-03 10:44:54 +07:00
parent 78f81bebb6
commit 2d1be52177
2352 changed files with 662964 additions and 0 deletions
--- a/packages/admin/tests/components/ContentList.test.tsx
+++ b/packages/admin/tests/components/ContentList.test.tsx
@@ -0,0 +1,522 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { ContentList } from "../../src/components/ContentList";
+import type { ContentItem, TrashedContentItem } from "../../src/lib/api";
+import { render } from "../utils/render.tsx";
+
+const NO_RESULTS_PATTERN = /No results for/;
+const HAS_MORE_ITEMS_PATTERN = /21\+ items/;
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const NO_POSTS_YET_REGEX = /No posts yet/;
+const MOVE_TO_TRASH_CONFIRMATION_REGEX = /Move "Post" to trash/;
+const PERMANENT_DELETE_CONFIRMATION_REGEX = /Permanently delete "Old Post"/;
+
+vi.mock("@tanstack/react-router", async () => {
+	const actual = await vi.importActual("@tanstack/react-router");
+	return {
+		...actual,
+		Link: ({
+			children,
+			to,
+			params: _params,
+			...props
+		}: {
+			children: React.ReactNode;
+			to?: string;
+			params?: Record<string, string>;
+			[key: string]: unknown;
+		}) => (
+			<a href={typeof to === "string" ? to : "#"} {...props}>
+				{children}
+			</a>
+		),
+	};
+});
+
+function makeItem(overrides: Partial<ContentItem> = {}): ContentItem {
+	return {
+		id: "item_01",
+		type: "posts",
+		slug: "hello-world",
+		status: "draft",
+		data: { title: "Hello World" },
+		authorId: "user_01",
+		createdAt: "2025-01-01T00:00:00Z",
+		updatedAt: "2025-01-02T00:00:00Z",
+		publishedAt: null,
+		scheduledAt: null,
+		liveRevisionId: null,
+		draftRevisionId: "rev_01",
+		...overrides,
+	};
+}
+
+function makeTrashedItem(overrides: Partial<TrashedContentItem> = {}): TrashedContentItem {
+	return {
+		...makeItem(),
+		deletedAt: "2025-01-03T00:00:00Z",
+		...overrides,
+	};
+}
+
+const defaultProps = {
+	collection: "posts",
+	collectionLabel: "Posts",
+	items: [] as ContentItem[],
+};
+
+describe("ContentList", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe("rendering items", () => {
+		it("renders items in table with data.title", async () => {
+			const items = [makeItem({ id: "1", data: { title: "My Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("My Post")).toBeInTheDocument();
+		});
+
+		it("falls back to data.name when title is missing", async () => {
+			const items = [makeItem({ id: "1", data: { name: "Named Item" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("Named Item")).toBeInTheDocument();
+		});
+
+		it("falls back to slug when title and name are missing", async () => {
+			const items = [makeItem({ id: "1", slug: "my-slug", data: {} })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("my-slug")).toBeInTheDocument();
+		});
+
+		it("falls back to id when title, name, and slug are missing", async () => {
+			const items = [makeItem({ id: "item_xyz", slug: null, data: {} })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("item_xyz")).toBeInTheDocument();
+		});
+
+		it("renders multiple items", async () => {
+			const items = [
+				makeItem({ id: "1", data: { title: "First" } }),
+				makeItem({ id: "2", data: { title: "Second" } }),
+				makeItem({ id: "3", data: { title: "Third" } }),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("First")).toBeInTheDocument();
+			await expect.element(screen.getByText("Second")).toBeInTheDocument();
+			await expect.element(screen.getByText("Third")).toBeInTheDocument();
+		});
+	});
+
+	describe("empty states", () => {
+		it("shows empty message for All tab", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} />);
+			await expect.element(screen.getByText(NO_POSTS_YET_REGEX)).toBeInTheDocument();
+			await expect.element(screen.getByText("Create your first one")).toBeInTheDocument();
+		});
+
+		it("shows empty trash message in Trash tab", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} trashedItems={[]} />);
+			// Switch to Trash tab
+			await screen.getByText("Trash").click();
+			await expect.element(screen.getByText("Trash is empty")).toBeInTheDocument();
+		});
+	});
+
+	describe("tab switching", () => {
+		it("defaults to All tab", async () => {
+			const items = [makeItem()];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			// Items should be visible (All tab active)
+			await expect.element(screen.getByText("Hello World")).toBeInTheDocument();
+		});
+
+		it("switches to Trash tab", async () => {
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Deleted Post" },
+				}),
+			];
+			const screen = await render(
+				<ContentList {...defaultProps} items={[makeItem()]} trashedItems={trashed} />,
+			);
+			await screen.getByText("Trash").click();
+			await expect.element(screen.getByText("Deleted Post")).toBeInTheDocument();
+		});
+
+		it("shows trash count badge when items are trashed", async () => {
+			const screen = await render(
+				<ContentList {...defaultProps} items={[]} trashedItems={[]} trashedCount={42} />,
+			);
+			await expect.element(screen.getByText("42")).toBeInTheDocument();
+		});
+	});
+
+	describe("status badges", () => {
+		it("shows draft status", async () => {
+			const items = [makeItem({ id: "1", status: "draft" })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("draft")).toBeInTheDocument();
+		});
+
+		it("shows published status", async () => {
+			const items = [makeItem({ id: "1", status: "published" })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("published")).toBeInTheDocument();
+		});
+
+		it("shows pending badge when draftRevisionId differs from liveRevisionId", async () => {
+			const items = [
+				makeItem({
+					id: "1",
+					status: "published",
+					draftRevisionId: "rev_draft",
+					liveRevisionId: "rev_live",
+				}),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect.element(screen.getByText("pending")).toBeInTheDocument();
+		});
+
+		it("does not show pending badge when revisions match", async () => {
+			const items = [
+				makeItem({
+					id: "1",
+					status: "published",
+					draftRevisionId: "rev_same",
+					liveRevisionId: "rev_same",
+				}),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			expect(screen.getByText("pending").query()).toBeNull();
+		});
+	});
+
+	describe("delete confirmation", () => {
+		it("shows delete confirmation dialog with item title", async () => {
+			const onDelete = vi.fn();
+			const items = [makeItem({ id: "item_1", data: { title: "Post" } })];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} onDelete={onDelete} />,
+			);
+
+			// Click trash icon button to open the confirmation dialog
+			await screen.getByRole("button", { name: "Move Post to trash" }).click();
+
+			// Dialog should appear with confirmation text
+			await expect.element(screen.getByText("Move to Trash?")).toBeInTheDocument();
+			await expect.element(screen.getByText(MOVE_TO_TRASH_CONFIRMATION_REGEX)).toBeInTheDocument();
+			// Confirm and Cancel buttons should be visible
+			await expect
+				.element(screen.getByRole("button", { name: "Move to Trash" }))
+				.toBeInTheDocument();
+			await expect.element(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+		});
+	});
+
+	describe("permanent delete", () => {
+		it("shows permanent delete dialog with item title", async () => {
+			const onPermanentDelete = vi.fn();
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Old Post" },
+				}),
+			];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={[]}
+					trashedItems={trashed}
+					onPermanentDelete={onPermanentDelete}
+				/>,
+			);
+
+			// Switch to trash tab
+			await screen.getByText("Trash").click();
+
+			// Click permanent delete trigger button
+			await screen.getByRole("button", { name: "Permanently delete Old Post" }).click();
+
+			// Dialog should appear with correct text
+			await expect.element(screen.getByText("Delete Permanently?")).toBeInTheDocument();
+			await expect
+				.element(screen.getByText(PERMANENT_DELETE_CONFIRMATION_REGEX))
+				.toBeInTheDocument();
+			await expect
+				.element(screen.getByRole("button", { name: "Delete Permanently" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("restore", () => {
+		it("calls onRestore when restore button is clicked", async () => {
+			const onRestore = vi.fn();
+			const trashed = [
+				makeTrashedItem({
+					id: "t1",
+					data: { title: "Restorable" },
+				}),
+			];
+			const screen = await render(
+				<ContentList {...defaultProps} items={[]} trashedItems={trashed} onRestore={onRestore} />,
+			);
+
+			await screen.getByText("Trash").click();
+			await screen.getByRole("button", { name: "Restore Restorable" }).click();
+
+			expect(onRestore).toHaveBeenCalledWith("t1");
+		});
+	});
+
+	describe("duplicate", () => {
+		it("calls onDuplicate when duplicate button is clicked", async () => {
+			const onDuplicate = vi.fn();
+			const items = [makeItem({ id: "item_1", data: { title: "Copyable" } })];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} onDuplicate={onDuplicate} />,
+			);
+
+			await screen.getByRole("button", { name: "Duplicate Copyable" }).click();
+
+			expect(onDuplicate).toHaveBeenCalledWith("item_1");
+		});
+	});
+
+	describe("load more", () => {
+		it("shows Load More button when hasMore is true", async () => {
+			const onLoadMore = vi.fn();
+			const items = [makeItem()];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+			await expect.element(screen.getByRole("button", { name: "Load More" })).toBeInTheDocument();
+		});
+
+		it("does not show Load More when hasMore is false", async () => {
+			const items = [makeItem()];
+			const screen = await render(<ContentList {...defaultProps} items={items} hasMore={false} />);
+			expect(screen.getByRole("button", { name: "Load More" }).query()).toBeNull();
+		});
+
+		it("auto-fetches when user navigates to the last client-side page", async () => {
+			const onLoadMore = vi.fn();
+			// 21 items = 2 pages of 20; user starts on page 0 (not the last page)
+			const items = Array.from({ length: 21 }, (_, i) => makeItem({ id: `item_${i}` }));
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+
+			// On mount, page 0 is not the last page — no fetch yet
+			expect(onLoadMore).not.toHaveBeenCalled();
+
+			// Navigate to page 2 (the last page)
+			await screen.getByRole("button", { name: "Next page" }).click();
+
+			expect(onLoadMore).toHaveBeenCalledOnce();
+		});
+
+		it("does not auto-fetch when a search query is active", async () => {
+			const onLoadMore = vi.fn();
+			// 21 items so pagination exists, but search will collapse to 1 result / 1 page
+			const items = [
+				...Array.from({ length: 20 }, (_, i) =>
+					makeItem({ id: `item_${i}`, data: { title: `Post ${i}` } }),
+				),
+				makeItem({ id: "unique", data: { title: "Unique Title" } }),
+			];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+
+			// No fetch on mount (page 0 is not the last page with 21 items)
+			expect(onLoadMore).not.toHaveBeenCalled();
+
+			// Search collapses results to 1 item — totalPages becomes 1, but should NOT fetch
+			await screen.getByRole("searchbox").fill("Unique Title");
+
+			expect(onLoadMore).not.toHaveBeenCalled();
+		});
+
+		it("shows '+' suffix on item count when hasMore is true and no search is active", async () => {
+			const items = Array.from({ length: 21 }, (_, i) => makeItem({ id: `item_${i}` }));
+			const screen = await render(<ContentList {...defaultProps} items={items} hasMore={true} />);
+
+			await expect.element(screen.getByText(HAS_MORE_ITEMS_PATTERN)).toBeInTheDocument();
+		});
+
+		it("calls onLoadMore when Load More is clicked", async () => {
+			const onLoadMore = vi.fn();
+			const items = [makeItem()];
+			const screen = await render(
+				<ContentList {...defaultProps} items={items} hasMore={true} onLoadMore={onLoadMore} />,
+			);
+
+			// With 1 item and hasMore=true, the auto-fetch effect fires on mount
+			// because page 0 is already the last client-side page.
+			// The button click adds a second call on top of that.
+			expect(onLoadMore).toHaveBeenCalledOnce();
+
+			await screen.getByRole("button", { name: "Load More" }).click();
+
+			expect(onLoadMore).toHaveBeenCalledTimes(2);
+		});
+	});
+
+	describe("header", () => {
+		it("shows collection label as heading", async () => {
+			const screen = await render(<ContentList {...defaultProps} collectionLabel="Articles" />);
+			await expect.element(screen.getByRole("heading", { name: "Articles" })).toBeInTheDocument();
+		});
+
+		it("shows Add New link", async () => {
+			const screen = await render(<ContentList {...defaultProps} />);
+			await expect.element(screen.getByText("Add New")).toBeInTheDocument();
+		});
+	});
+
+	describe("search", () => {
+		it("shows search input when items exist", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			await expect
+				.element(screen.getByRole("searchbox", { name: "Search posts" }))
+				.toBeInTheDocument();
+		});
+
+		it("hides search input when no items", async () => {
+			const screen = await render(<ContentList {...defaultProps} items={[]} />);
+			expect(screen.getByRole("searchbox").query()).toBeNull();
+		});
+
+		it("filters items by title", async () => {
+			const items = [
+				makeItem({ id: "1", data: { title: "Alpha post" } }),
+				makeItem({ id: "2", data: { title: "Beta post" } }),
+				makeItem({ id: "3", data: { title: "Gamma post" } }),
+			];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await screen.getByRole("searchbox").fill("beta");
+
+			await expect.element(screen.getByText("Beta post")).toBeInTheDocument();
+			expect(screen.getByText("Alpha post").query()).toBeNull();
+			expect(screen.getByText("Gamma post").query()).toBeNull();
+		});
+
+		it("shows no results message when search has no matches", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Hello" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await screen.getByRole("searchbox").fill("zzzzz");
+
+			await expect.element(screen.getByText(NO_RESULTS_PATTERN)).toBeInTheDocument();
+		});
+	});
+
+	describe("pagination", () => {
+		it("shows pagination when items exceed page size", async () => {
+			const items = Array.from({ length: 25 }, (_, i) =>
+				makeItem({ id: `item_${i}`, data: { title: `Post ${i}` } }),
+			);
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			await expect.element(screen.getByText("1 / 2")).toBeInTheDocument();
+			await expect.element(screen.getByRole("button", { name: "Next page" })).toBeInTheDocument();
+		});
+
+		it("does not show pagination when items fit on one page", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+			expect(screen.getByRole("button", { name: "Next page" }).query()).toBeNull();
+		});
+
+		it("navigates between pages", async () => {
+			const items = Array.from({ length: 25 }, (_, i) =>
+				makeItem({ id: `item_${i}`, data: { title: `Post ${i}` } }),
+			);
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			// Page 1 should show Post 0
+			await expect.element(screen.getByText("Post 0")).toBeInTheDocument();
+
+			// Go to page 2
+			await screen.getByRole("button", { name: "Next page" }).click();
+
+			await expect.element(screen.getByText("2 / 2")).toBeInTheDocument();
+			// Post 20 should be on page 2
+			await expect.element(screen.getByText("Post 20")).toBeInTheDocument();
+			// Post 0 should not be visible
+			expect(screen.getByText("Post 0").query()).toBeNull();
+		});
+	});
+
+	describe("sortable headers", () => {
+		it("calls onSortChange when a header is clicked", async () => {
+			const onSortChange = vi.fn();
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={items}
+					sort={{ field: "updatedAt", direction: "desc" }}
+					onSortChange={onSortChange}
+				/>,
+			);
+
+			await screen.getByRole("button", { name: "Title" }).click();
+
+			expect(onSortChange).toHaveBeenCalledWith({ field: "title", direction: "desc" });
+		});
+
+		it("toggles direction when clicking the active column", async () => {
+			const onSortChange = vi.fn();
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={items}
+					sort={{ field: "title", direction: "desc" }}
+					onSortChange={onSortChange}
+				/>,
+			);
+
+			await screen.getByRole("button", { name: "Title" }).click();
+
+			expect(onSortChange).toHaveBeenCalledWith({ field: "title", direction: "asc" });
+		});
+
+		it("exposes sort state via aria-sort on the active header", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={items}
+					sort={{ field: "title", direction: "asc" }}
+					onSortChange={vi.fn()}
+				/>,
+			);
+
+			const titleHeader = screen.getByRole("columnheader", { name: "Title" });
+			const statusHeader = screen.getByRole("columnheader", { name: "Status" });
+			await expect.element(titleHeader).toHaveAttribute("aria-sort", "ascending");
+			// Inactive columns explicitly advertise "none" so the header still
+			// announces as sortable.
+			await expect.element(statusHeader).toHaveAttribute("aria-sort", "none");
+		});
+
+		it("falls back to static headers when onSortChange is not provided", async () => {
+			const items = [makeItem({ id: "1", data: { title: "Post" } })];
+			const screen = await render(<ContentList {...defaultProps} items={items} />);
+
+			// The header must not render as a button — it's just a label.
+			expect(screen.getByRole("button", { name: "Title" }).query()).toBeNull();
+		});
+	});
+});