test: add authenticated upload e2e flow

.gitignore

@@ -172,6 +172,7 @@ dist
 .output
 playwright-report/
 test-results/
+e2e/.auth/
 
 .DS_Store
 

client/features/upload-form/components/UploadView.tsx

@@ -74,6 +74,10 @@ export function UploadView({
 	const selectedOverflowTheme = OVERFLOW_THEME_OPTIONS.find(
 		(option) => option.value === selectedTheme,
 	);
+	const requiresTurnstile =
+		import.meta.env.PROD &&
+		import.meta.env.VITE_PUBLIC_E2E !== "1" &&
+		!isAuthenticated;
 
 	useEffect(() => {
 		if (isPermanent) {
@@ -437,7 +441,7 @@ export function UploadView({
 						!selectedFile ||
 						isUploading ||
 						!!uploadError ||
-						(import.meta.env.PROD && !turnstileToken)
+						(requiresTurnstile && !turnstileToken)
 					}
 					onClick={onUpload}
 				>

client/routes/index.tsx

@@ -95,6 +95,7 @@ export const Route = createFileRoute("/")({
 
 function Home() {
 	const { t, i18n } = useTranslation();
+	const [isHomeReady, setIsHomeReady] = useState(false);
 	const [expirationDays, setExpirationDays] = useState(30);
 	const [selectedTheme, setSelectedTheme] = useState<ThemeId>("default");
 	const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
@@ -110,6 +111,10 @@ function Home() {
 
 	const { data: session } = authClient.useSession();
 
+	useEffect(() => {
+		setIsHomeReady(true);
+	}, []);
+
 	useEffect(() => {
 		setExpirationDays((prev) => {
 			// Logged in: default to Permanent (-1) if user hasn't changed it yet.
@@ -237,6 +242,12 @@ function Home() {
 
 	return (
 		<>
+			<div
+				data-testid="home-ready"
+				data-ready={isHomeReady ? "true" : "false"}
+				className="hidden"
+				aria-hidden="true"
+			/>
 			{/* Main Container - Conditional Styles for Split View */}
 			<div
 				className={cn(

e2e/auth.setup.ts

@@ -0,0 +1,32 @@
+import { mkdir } from "node:fs/promises";
+import { dirname } from "node:path";
+import { expect, test as setup } from "@playwright/test";
+import { AUTH_FILE } from "./auth.shared";
+
+const E2E_AUTH_SECRET = "mdto-e2e-auth-secret";
+
+setup("bootstrap authenticated session", async ({ page }) => {
+	await mkdir(dirname(AUTH_FILE), { recursive: true });
+
+	const response = await page.request.post("/api/test/login", {
+		headers: {
+			"x-e2e-auth-secret": E2E_AUTH_SECRET,
+		},
+		data: {
+			name: "playwright-user",
+			email: "playwright-user@example.com",
+		},
+	});
+
+	expect(response.ok()).toBeTruthy();
+	const sessionResponse = await page.request.get("/api/test/session", {
+		headers: {
+			"x-e2e-auth-secret": E2E_AUTH_SECRET,
+		},
+	});
+	expect(sessionResponse.ok()).toBeTruthy();
+	const session = await sessionResponse.json();
+	expect(session.user.name).toBe("playwright-user");
+
+	await page.context().storageState({ path: AUTH_FILE });
+});

e2e/auth.shared.ts

@@ -0,0 +1 @@
+export const AUTH_FILE = "e2e/.auth/user.json";

e2e/authenticated-upload.spec.ts

@@ -0,0 +1,49 @@
+import { fileURLToPath } from "node:url";
+import { expect, test } from "@playwright/test";
+import { AUTH_FILE } from "./auth.shared";
+import { waitForHomeReady } from "./home.shared";
+
+const fixturePath = fileURLToPath(
+	new URL("./fixtures/sample.md", import.meta.url),
+);
+
+test.use({ storageState: AUTH_FILE });
+
+test.beforeEach(async ({ page }) => {
+	await page.addInitScript(() => {
+		window.localStorage.setItem("mdto.lang", "en");
+	});
+});
+
+test("authenticated upload creates a managed page for the logged-in user", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await waitForHomeReady(page);
+
+	await expect(page.getByText("playwright-user")).toBeVisible();
+
+	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+	await expect(page.getByText("sample.md")).toBeVisible();
+
+	await page.getByTestId("upload-create-button").click();
+
+	const successUrlInput = page.getByTestId("success-url-input");
+	await expect(successUrlInput).toBeVisible();
+
+	const successUrl = await successUrlInput.inputValue();
+	const url = new URL(successUrl);
+
+	expect(url.origin).toBe(new URL(page.url()).origin);
+	expect(url.pathname).toMatch(/^\/playwright-user\/[A-Za-z0-9_-]{4}$/);
+
+	await expect(page.getByTestId("success-open-link")).toHaveAttribute(
+		"href",
+		successUrl,
+	);
+
+	await page.goto(successUrl);
+	await expect(
+		page.getByRole("heading", { level: 1, name: "Sample Title" }),
+	).toBeVisible();
+});

e2e/home.shared.ts

@@ -0,0 +1,8 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function waitForHomeReady(page: Page) {
+	await expect(page.getByTestId("home-ready")).toHaveAttribute(
+		"data-ready",
+		"true",
+	);
+}

e2e/public-upload.spec.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath } from "node:url";
 import { expect, type Page, test } from "@playwright/test";
+import { waitForHomeReady } from "./home.shared";
 
 const fixturePath = fileURLToPath(
 	new URL("./fixtures/sample.md", import.meta.url),
@@ -44,6 +45,7 @@ test("home smoke shows upload controls in the initial state", async ({
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 
 	await expect(page.getByTestId("upload-file-input")).toBeAttached();
 	await expect(page.getByTestId("upload-preview-button")).toBeDisabled();
@@ -54,6 +56,7 @@ test("preview opens and closes for an uploaded markdown file", async ({
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 	await attachMarkdownFile(page);
 
 	await page.getByTestId("upload-preview-button").click();
@@ -75,6 +78,7 @@ test("anonymous upload creates a public page and exposes the raw markdown", asyn
 	page,
 }) => {
 	await page.goto("/");
+	await waitForHomeReady(page);
 	await attachMarkdownFile(page);
 	await page.getByRole("button", { name: "GitHub" }).click();
 

playwright.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from "@playwright/test";
 
 const baseURL = "http://127.0.0.1:4173";
-const workerCommand = process.env.CI
-	? "pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret"
-	: "VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret";
+const clientCommand =
+	"VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' VITE_PUBLIC_E2E=1 pnpm build && pnpm exec vite preview --host 127.0.0.1 --port 4173 --strictPort";
+const workerBaseCommand =
+	"pnpm exec wrangler d1 migrations apply mdto --local && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret --var ENABLE_E2E_AUTH:1 --var E2E_AUTH_SECRET:mdto-e2e-auth-secret";
+const workerCommand = workerBaseCommand;
 
 export default defineConfig({
 	testDir: "./e2e",
@@ -18,11 +20,18 @@ export default defineConfig({
 		screenshot: "only-on-failure",
 	},
 	projects: [
+		{
+			name: "setup",
+			testMatch: /auth\.setup\.ts/,
+		},
 		{
 			name: "chromium",
+			dependencies: ["setup"],
+			testIgnore: /auth\.setup\.ts/,
 			use: {
 				browserName: "chromium",
 				headless: true,
+				storageState: undefined,
 				viewport: {
 					width: 1280,
 					height: 900,
@@ -32,8 +41,7 @@ export default defineConfig({
 	],
 	webServer: [
 		{
-			command:
-				"pnpm generate:themes && vite --host 127.0.0.1 --port 4173 --strictPort",
+			command: clientCommand,
 			url: baseURL,
 			reuseExistingServer: !process.env.CI,
 			timeout: 120_000,

server/index.ts

@@ -6,6 +6,7 @@ import { sendDiscordAlert } from "./lib/discord";
 import { authRouter } from "./routes/auth.route";
 import { dashboardRouter } from "./routes/dashboard.route";
 import { pageApiRouter } from "./routes/page-api.route";
+import { testAuthRouter } from "./routes/test-auth.route";
 import { viewRouter } from "./routes/view.route";
 import { createContext } from "./trpc/context";
 import { appRouter } from "./trpc/router";
@@ -14,6 +15,7 @@ import { isDev } from "./utils/env";
 const app = new Hono<{ Bindings: Env }>();
 
 app.route("/api/auth", authRouter);
+app.route("/api/test", testAuthRouter);
 app.route("/api/v1/pages", pageApiRouter);
 app.all("/api/trpc/*", async (c) => {
 	return await fetchRequestHandler({

server/lib/test-auth.ts

@@ -0,0 +1 @@
+export const E2E_USER_COOKIE_NAME = "mdto_e2e_user";