i18n.spec.ts

/**
 * i18n E2E Tests
 *
 * Tests the internationalization features in the admin UI:
 * - Locale column in content list
 * - Locale filter in content list
 * - Translations sidebar in content editor
 * - Creating translations via the admin UI
 * - Navigating between translations
 * - Slug correctness (no locale suffix accumulation)
 *
 * The e2e fixture has i18n configured with locales: en, fr, es
 * and defaultLocale: en.
 *
 * Seed data:
 *   - posts: "First Post" (en, published), "Second Post" (en, published), "Draft Post" (en, draft)
 *   - pages: "About" (en, published), "Contact" (en, draft)
 */

import { test, expect } from "../fixtures/index.js";

// The edit route preserves the entry's locale as a `?locale=` search param
// (see #1242), so the URL may carry a query string after the ULID.
const CONTENT_EDIT_URL_PATTERN = /\/content\/posts\/[A-Z0-9]+(?:\?.*)?$/;

const localeTest = test.extend<{
	localeCollection: {
		collection: string;
		createPost: (locale: string, title: string) => Promise<void>;
	};
}>({
	localeCollection: async ({ request, serverInfo }, use) => {
		const headers = {
			Authorization: `Bearer ${serverInfo.token}`,
			"X-EmDash-Request": "1",
			Origin: serverInfo.baseUrl,
		};
		const collection = `locale_switcher_${crypto.randomUUID().replaceAll("-", "")}`;
		const collectionPath = `${serverInfo.baseUrl}/_emdash/api/schema/collections/${collection}`;
		const contentPath = `${serverInfo.baseUrl}/_emdash/api/content/${collection}`;
		const postIds: string[] = [];
		const pendingPosts = new Map<string, string>();

		try {
			const created = await request.post(`${serverInfo.baseUrl}/_emdash/api/schema/collections`, {
				headers,
				data: { slug: collection, label: "Posts", labelSingular: "Post", supports: ["drafts"] },
			});
			await expect(created).toBeOK();

			const field = await request.post(`${collectionPath}/fields`, {
				headers,
				data: { slug: "title", label: "Title", type: "string", required: true },
			});
			await expect(field).toBeOK();

			await use({
				collection,
				createPost: async (locale, title) => {
					const slug = `post-${locale}`;
					pendingPosts.set(slug, locale);
					const response = await request.post(contentPath, {
						headers,
						data: { data: { title }, slug, locale },
					});
					await expect(response).toBeOK();
					const body = await response.json();
					postIds.push(body.data.item.id);
					pendingPosts.delete(slug);
				},
			});
		} finally {
			for (const [slug, locale] of pendingPosts) {
				await expect
					.soft(
						request
							.get(`${contentPath}/${slug}`, { headers, params: { locale } })
							.then(async (response) => {
								if (response.status() === 404) return true;
								await expect(response).toBeOK();
								const body = await response.json();
								postIds.push(body.data.item.id);
								return true;
							}),
					)
					.resolves.toBe(true);
			}
			const paths = postIds.flatMap((id) => [
				`${contentPath}/${id}`,
				`${contentPath}/${id}/permanent`,
			]);
			for (const path of paths) {
				await expect.soft(request.delete(path, { headers })).resolves.toBeOK();
			}
			await expect
				.soft(
					request
						.delete(collectionPath, { headers })
						.then((response) => response.ok() || response.status() === 404),
				)
				.resolves.toBe(true);
		}
	},
});

interface CreatePostInput {
	title: string;
	slug: string;
	locale?: string;
	translationOf?: string;
	canonical?: string;
}

async function createPublishedPost(
	baseUrl: string,
	token: string,
	input: CreatePostInput,
): Promise<{ id: string }> {
	const headers = {
		"Content-Type": "application/json",
		Authorization: `Bearer ${token}`,
		"X-EmDash-Request": "1",
		Origin: baseUrl,
	};
	const createResponse = await fetch(`${baseUrl}/_emdash/api/content/posts`, {
		method: "POST",
		headers,
		body: JSON.stringify({
			data: { title: input.title },
			slug: input.slug,
			locale: input.locale,
			translationOf: input.translationOf,
			seo: input.canonical ? { canonical: input.canonical } : undefined,
		}),
	});
	if (!createResponse.ok) {
		throw new Error(`Failed to create post: ${createResponse.status}`);
	}
	const createJson = await createResponse.json();
	const id = createJson.data?.item?.id ?? createJson.data?.id;

	const publishResponse = await fetch(`${baseUrl}/_emdash/api/content/posts/${id}/publish`, {
		method: "POST",
		headers,
		body: JSON.stringify({}),
	});
	if (!publishResponse.ok) {
		throw new Error(`Failed to publish post: ${publishResponse.status}`);
	}

	return { id };
}

async function setPostSeoEnabled(baseUrl: string, token: string, enabled: boolean): Promise<void> {
	const response = await fetch(`${baseUrl}/_emdash/api/schema/collections/posts`, {
		method: "PUT",
		headers: {
			"Content-Type": "application/json",
			Authorization: `Bearer ${token}`,
			"X-EmDash-Request": "1",
			Origin: baseUrl,
		},
		body: JSON.stringify({ hasSeo: enabled }),
	});
	if (!response.ok) {
		throw new Error(`Failed to update SEO for posts: ${response.status}`);
	}
}

test.describe("i18n", () => {
	test.beforeEach(async ({ admin }) => {
		await admin.devBypassAuth();
	});

	test.describe("Canonical URLs", () => {
		test.beforeEach(async ({ serverInfo }) => {
			await setPostSeoEnabled(serverInfo.baseUrl, serverInfo.token, true);
		});

		test.afterEach(async ({ serverInfo }) => {
			await setPostSeoEnabled(serverInfo.baseUrl, serverInfo.token, false);
		});

		test("preserves the locale prefix and normalizes the trailing slash", async ({
			page,
			serverInfo,
		}) => {
			const slug = `canonical-translation-${Date.now()}`;
			const source = await createPublishedPost(serverInfo.baseUrl, serverInfo.token, {
				title: "Canonical source",
				slug,
			});
			await createPublishedPost(serverInfo.baseUrl, serverInfo.token, {
				title: "Canonical translation",
				slug,
				locale: "fr",
				translationOf: source.id,
			});

			await page.goto(`/fr/posts/${slug}/`);
			await expect(page.locator("#title")).toHaveText("Canonical translation");

			await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
				"href",
				`${serverInfo.baseUrl}/fr/posts/${slug}`,
			);
		});

		test("keeps the default locale canonical unprefixed", async ({ page, serverInfo }) => {
			const slug = `canonical-default-${Date.now()}`;
			await createPublishedPost(serverInfo.baseUrl, serverInfo.token, {
				title: "Default canonical",
				slug,
			});

			await page.goto(`/posts/${slug}`);

			await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
				"href",
				`${serverInfo.baseUrl}/posts/${slug}`,
			);
		});

		test("prefers an explicit canonical over the request path", async ({ page, serverInfo }) => {
			const slug = `canonical-explicit-${Date.now()}`;
			const canonical = "https://example.com/explicit-canonical";
			await createPublishedPost(serverInfo.baseUrl, serverInfo.token, {
				title: "Explicit canonical",
				slug,
				canonical,
			});

			await page.goto(`/posts/${slug}`);

			await expect(page.locator('link[rel="canonical"]')).toHaveAttribute("href", canonical);
		});
	});

	test.describe("Content List", () => {
		test("shows locale column when i18n is configured", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			// The table should have a "Locale" column header
			const localeHeader = admin.page.locator("th", { hasText: "Locale" });
			await expect(localeHeader).toBeVisible();
		});

		test("displays locale badges for each content item", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			// All seeded posts are English — should see EN badges
			const locales = await admin.getLocaleColumnValues();
			expect(locales.length).toBeGreaterThan(0);
			// All seeded content is "en"
			for (const locale of locales) {
				expect(locale.trim().toLowerCase()).toBe("en");
			}
		});

		localeTest("has a locale filter switcher", async ({ admin, serverInfo, localeCollection }) => {
			const { collection, createPost } = localeCollection;
			await createPost("en", "First Post");
			await admin.goToContent(collection);
			await admin.waitForLoading();
			await expect(admin.page.getByRole("searchbox", { name: "Search posts" })).toHaveValue("");

			const select = admin.page.getByRole("combobox", { name: "Locale" });
			const englishPost = admin.page.getByRole("link", { name: "First Post", exact: true });
			const emptyMessage = admin.page.getByText("No posts yet.");
			await expect(select).toBeVisible();
			await expect(select).toHaveText("EN (default)");
			await expect(englishPost).toBeVisible();
			await select.click();

			await expect(admin.page.getByRole("option", { name: "EN (default)" })).toBeVisible();
			await expect(admin.page.getByRole("option", { name: "FR" })).toBeVisible();
			await expect(admin.page.getByRole("option", { name: "ES" })).toBeVisible();
			await admin.page.keyboard.press("Escape");

			await admin.setLocaleFilter("fr");
			await expect(select).toHaveText("FR");
			await expect(admin.page).toHaveURL(
				`${serverInfo.baseUrl}/_emdash/admin/content/${collection}?locale=fr`,
			);
			expect(await admin.getLocaleFilterValue()).toBe("fr");
			await expect(emptyMessage).toBeVisible();
			await expect(englishPost).toHaveCount(0);

			await admin.setLocaleFilter("en");
			await expect(select).toHaveText("EN (default)");
			expect(await admin.getLocaleFilterValue()).toBe("en");
			await expect(englishPost).toBeVisible();
			await expect(emptyMessage).toHaveCount(0);
		});

		localeTest(
			"shows only content from the selected locale",
			async ({ admin, localeCollection }) => {
				const { collection, createPost } = localeCollection;
				await createPost("en", "First Post");
				await createPost("fr", "French Post");
				await admin.goToContent(collection);
				await admin.waitForLoading();
				await expect(admin.page.getByRole("searchbox", { name: "Search posts" })).toHaveValue("");

				const select = admin.page.getByRole("combobox", { name: "Locale" });
				const englishPost = admin.page.getByRole("link", { name: "First Post", exact: true });
				const frenchPost = admin.page.getByRole("link", { name: "French Post", exact: true });
				await expect(select).toHaveText("EN (default)");
				await expect(englishPost).toBeVisible();
				await expect(frenchPost).toHaveCount(0);

				await admin.setLocaleFilter("fr");
				await expect(select).toHaveText("FR");
				await expect(frenchPost).toBeVisible();
				await expect(englishPost).toHaveCount(0);

				await admin.setLocaleFilter("en");
				await expect(select).toHaveText("EN (default)");
				await expect(englishPost).toBeVisible();
				await expect(frenchPost).toHaveCount(0);
			},
		);
	});

	test.describe("Content Editor", () => {
		test("shows translations sidebar for existing content", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			// Click on any post to edit (use first link in table body)
			await admin.page.locator("table tbody tr a").first().click();
			await admin.waitForLoading();

			// Should see the Translations sidebar heading
			const translationsHeading = admin.page.locator("h3", {
				hasText: "Translations",
			});
			await expect(translationsHeading).toBeVisible();
		});

		test("shows all configured locales in translations sidebar", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			await admin.page.locator("table tbody tr a").first().click();
			await admin.waitForLoading();

			// Should show en, fr, es in the sidebar
			const locales = await admin.getTranslationSidebarLocales();
			const normalized = locales.map((l) => l.trim().toLowerCase());
			expect(normalized).toContain("en");
			expect(normalized).toContain("fr");
			expect(normalized).toContain("es");
		});

		test("marks current locale in translations sidebar", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			await admin.page.locator("table tbody tr a").first().click();
			await admin.waitForLoading();

			// The "current" marker should appear next to EN
			const currentMarker = admin.page.locator("span.text-kumo-link", {
				hasText: "current",
			});
			await expect(currentMarker).toBeVisible();
		});

		test("shows Translate buttons for missing locales", async ({ admin }) => {
			await admin.goToContent("posts");
			await admin.waitForLoading();

			await admin.page.locator("table tbody tr a").first().click();
			await admin.waitForLoading();

			// FR and ES should have "Translate" buttons since no translations exist yet
			expect(await admin.hasTranslateButton("fr")).toBe(true);
			expect(await admin.hasTranslateButton("es")).toBe(true);
		});

		test("does not show translations sidebar for new content", async ({ admin }) => {
			await admin.goToNewContent("posts");
			await admin.waitForLoading();

			// The translations sidebar should NOT be visible for unsaved content
			const translationsHeading = admin.page.locator("h3", {
				hasText: "Translations",
			});
			await expect(translationsHeading).not.toBeVisible();
		});
	});

	test.describe("Translation Flow", () => {
		test("creates a translation and navigates to it", async ({ admin }) => {
			// Create a fresh post so we have a clean translation group
			await admin.goToNewContent("posts");
			await admin.waitForLoading();

			const postTitle = `i18n Test Post ${Date.now()}`;
			await admin.fillField("title", postTitle);
			await admin.clickSave();

			// Wait for redirect to edit page
			await expect(admin.page).toHaveURL(CONTENT_EDIT_URL_PATTERN, {
				timeout: 10000,
			});
			await admin.waitForLoading();

			// Capture the original post URL
			const originalUrl = admin.page.url();

			// Should see Translate buttons for FR and ES
			expect(await admin.hasTranslateButton("fr")).toBe(true);

			// Click "Translate" for FR — wait for URL to change (SPA navigation)
			await admin.clickTranslate("fr");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== originalUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			// The title should be pre-filled from the original
			await expect(admin.page.locator("#field-title")).toHaveValue(postTitle);

			// The slug should be the same as the original (no locale suffix)
			const slug = await admin.page.getByLabel("Slug").inputValue();
			expect(slug).not.toContain("-fr");
			expect(slug).not.toContain("-en");
		});

		test("shows Edit link for existing translations", async ({ admin }) => {
			// FIXME(cloudflare): flaky on the Cloudflare/workerd target — the EN
			// "Edit" link doesn't appear in the translations sidebar within the
			// helper's timeout on the freshly created FR translation page. The
			// backend is NOT at fault: hitting the translations API directly on
			// D1 returns both siblings correctly (EN's translation_group is
			// self-referential, FR's points to EN). It's a front-end render-timing
			// issue specific to the slower workerd dev runtime — the sibling
			// `clickEditTranslation` test (208) passes because `.click()` waits
			// longer than this `isVisible` check. Skipped so the CF lane stays green.
			test.skip(
				process.env.EMDASH_E2E_TARGET === "cloudflare",
				"CF: translations sidebar Edit link renders too slowly (front-end timing; backend verified OK)",
			);
			// Create a post and its FR translation
			await admin.goToNewContent("posts");
			await admin.waitForLoading();

			const postTitle = `Translation Edit Test ${Date.now()}`;
			await admin.fillField("title", postTitle);
			await admin.clickSave();

			await expect(admin.page).toHaveURL(CONTENT_EDIT_URL_PATTERN, {
				timeout: 10000,
			});
			await admin.waitForLoading();

			const originalUrl = admin.page.url();

			// Create FR translation and wait for navigation
			await admin.clickTranslate("fr");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== originalUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			// Now on the FR translation — EN should show "Edit" link, not "Translate"
			expect(await admin.hasEditTranslationLink("en")).toBe(true);
			// ES should still show "Translate"
			expect(await admin.hasTranslateButton("es")).toBe(true);
		});

		test("can navigate between translations via Edit links", async ({ admin }) => {
			// Create a post and FR translation
			await admin.goToNewContent("posts");
			await admin.waitForLoading();

			const postTitle = `Navigation Test ${Date.now()}`;
			await admin.fillField("title", postTitle);
			await admin.clickSave();

			await expect(admin.page).toHaveURL(CONTENT_EDIT_URL_PATTERN, {
				timeout: 10000,
			});
			await admin.waitForLoading();

			const originalUrl = admin.page.url();

			// Create FR translation and wait for navigation
			await admin.clickTranslate("fr");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== originalUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			const frUrl = admin.page.url();

			// Navigate back to EN via Edit link
			await admin.clickEditTranslation("en");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== frUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			// Should be back on the original post
			await expect(admin.page).toHaveURL(originalUrl);
			await expect(admin.page.locator("#field-title")).toHaveValue(postTitle);
		});

		test("creating multiple translations does not accumulate locale suffixes in slugs", async ({
			admin,
		}) => {
			// This is the regression test for the slug accumulation bug:
			// old code: slug = rawItem.slug + "-" + locale
			// Each translate would append more suffixes: post-fr-en-fr-en...

			await admin.goToNewContent("posts");
			await admin.waitForLoading();

			const postTitle = `Slug Accumulation Test ${Date.now()}`;
			await admin.fillField("title", postTitle);
			await admin.clickSave();

			await expect(admin.page).toHaveURL(CONTENT_EDIT_URL_PATTERN, {
				timeout: 10000,
			});
			await admin.waitForLoading();

			const originalUrl = admin.page.url();
			const originalSlug = await admin.page.getByLabel("Slug").inputValue();
			expect(originalSlug).toBeTruthy();

			// Create FR translation and wait for navigation
			await admin.clickTranslate("fr");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== originalUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			// FR slug should be the same as original (UNIQUE(slug, locale) allows this)
			const frSlug = await admin.page.getByLabel("Slug").inputValue();
			expect(frSlug).toBe(originalSlug);

			const frUrl = admin.page.url();

			// Navigate back to EN
			await admin.clickEditTranslation("en");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== frUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			const enUrl = admin.page.url();

			// Create ES translation from EN
			await admin.clickTranslate("es");
			await admin.page.waitForURL(
				(url) => CONTENT_EDIT_URL_PATTERN.test(url.pathname) && url.href !== enUrl,
				{ timeout: 15000 },
			);
			await admin.waitForLoading();

			// ES slug should also be the same — no accumulation
			const esSlug = await admin.page.getByLabel("Slug").inputValue();
			expect(esSlug).toBe(originalSlug);
		});
	});
});