Playwright test failures (#581)

Co-authored-by: me <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>

Author: kentcdodds

app/utils/user-info.server.ts

@@ -20,12 +20,19 @@ type UserInfo = {
 	} | null
 }
 
-function abortTimeoutSignal(timeMs: number) {
-	const abortController = new AbortController()
-	void new Promise((resolve) => setTimeout(resolve, timeMs)).then(() => {
-		abortController.abort()
+// Note: We intentionally do NOT use AbortSignal or AbortController here.
+// Node.js v24 has a bug where aborting fetch requests causes a crash:
+// "uv__stream_destroy: Assertion `!uv__io_active...` failed"
+// Instead, we use Promise.race to implement timeouts without aborting.
+async function fetchWithTimeout(
+	url: string,
+	options: RequestInit,
+	timeoutMs: number,
+): Promise<Response> {
+	const timeoutPromise = new Promise<never>((_, reject) => {
+		setTimeout(() => reject(new Error('Request timeout')), timeoutMs)
 	})
-	return abortController.signal
+	return Promise.race([fetch(url, options), timeoutPromise])
 }
 
 export async function gravatarExistsForEmail({
@@ -51,12 +58,12 @@ export async function gravatarExistsForEmail({
 		getFreshValue: async (context) => {
 			const gravatarUrl = getAvatar(email, { fallback: '404' })
 			try {
-				const avatarResponse = await fetch(gravatarUrl, {
-					method: 'HEAD',
-					signal: abortTimeoutSignal(
-						context.background || forceFresh ? 1000 * 10 : 100,
-					),
-				})
+				const timeoutMs = context.background || forceFresh ? 1000 * 10 : 100
+				const avatarResponse = await fetchWithTimeout(
+					gravatarUrl,
+					{ method: 'HEAD' },
+					timeoutMs,
+				)
 				if (avatarResponse.status === 200) {
 					context.metadata.ttl = 1000 * 60 * 60 * 24 * 365
 					return true

e2e/calls.spec.ts

@@ -45,10 +45,15 @@ test('Call Kent recording flow', async ({ page, login }) => {
 		.type(faker.lorem.words(3).split(' ').join(','))
 	await mainContent.getByRole('button', { name: /submit/i }).click()
 
+	// Wait for the redirect to confirm the call was created
+	await expect(page).toHaveURL(/.*calls\/record\/[a-z0-9-]+/, { timeout: 10_000 })
+
 	await login({ role: 'ADMIN' })
 	await page.goto('/calls/admin')
 
-	await page.getByRole('link', { name: new RegExp(title, 'i') }).click()
+	const callLink = page.getByRole('link', { name: new RegExp(title, 'i') })
+	await expect(callLink).toBeVisible({ timeout: 10_000 })
+	await callLink.click()
 
 	await page.getByRole('button', { name: /start/i }).click()
 	await page.waitForTimeout(500) // let the sample.wav file play for a bit more
@@ -65,7 +70,11 @@ test('Call Kent recording flow', async ({ page, login }) => {
 			.getByRole('heading', { level: 2, name: /calls with kent/i }),
 	).toBeVisible({ timeout: 10_000 })
 
-	const email = await readEmail((em) => em.to.includes(user.email))
+	// Email sending is async and may take time to be written to the mock fixture
+	const email = await readEmail((em) => em.to.includes(user.email), {
+		maxRetries: 10,
+		retryDelay: 500,
+	})
 	invariant(email, 'Notification email not found')
 	expect(email.subject).toMatch(/published/i)
 	// NOTE: domain is hard coded for image generation and stuff

e2e/utils.ts

@@ -8,7 +8,6 @@ import {
 	PrismaClient,
 	type User,
 } from '#app/utils/prisma-generated.server/client.ts'
-import '../app/entry.server.tsx'
 import { getSession } from '../app/utils/session.server.ts'
 import { createUser } from '../prisma/seed-utils.ts'
 
@@ -24,26 +23,44 @@ type Email = {
 	html: string
 }
 
+async function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
 export async function readEmail(
 	recipientOrFilter: string | ((email: Email) => boolean),
+	{ maxRetries = 5, retryDelay = 200 }: { maxRetries?: number; retryDelay?: number } = {},
 ) {
-	try {
-		const mswOutput = fsExtra.readJsonSync(
-			path.join(process.cwd(), './mocks/msw.local.json'),
-		) as unknown as MSWData
-		const emails = Object.values(mswOutput.email).reverse() // reverse so we get the most recent email first
-		// TODO: add validation
-		if (typeof recipientOrFilter === 'string') {
-			return emails.find(
-				(email: Email) => email.to === recipientOrFilter,
-			) as Email | null
-		} else {
-			return emails.find(recipientOrFilter) as Email | null
+	for (let attempt = 0; attempt < maxRetries; attempt++) {
+		try {
+			const mswOutput = fsExtra.readJsonSync(
+				path.join(process.cwd(), './mocks/msw.local.json'),
+			) as unknown as MSWData
+			const emails = Object.values(mswOutput.email).reverse() // reverse so we get the most recent email first
+			// TODO: add validation
+			let email: Email | undefined
+			if (typeof recipientOrFilter === 'string') {
+				email = emails.find(
+					(email: Email) => email.to === recipientOrFilter,
+				)
+			} else {
+				email = emails.find(recipientOrFilter)
+			}
+			if (email) {
+				return email
+			}
+			// Email not found yet, retry after a delay
+			if (attempt < maxRetries - 1) {
+				await sleep(retryDelay)
+			}
+		} catch (error: unknown) {
+			console.error(`Error reading the email fixture (attempt ${attempt + 1})`, error)
+			if (attempt < maxRetries - 1) {
+				await sleep(retryDelay)
+			}
 		}
-	} catch (error: unknown) {
-		console.error(`Error reading the email fixture`, error)
-		return null
 	}
+	return null
 }
 
 export function extractUrl(text: string) {