add more e2e tests for performance a/b

Author: kettanaito

exercises/02.authentication/04.solution.third-party-providers/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/04.solution.third-party-providers/playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
 	},
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
+	// retries: process.env.CI ? 2 : 0,
 	workers: process.env.CI ? 1 : undefined,
 	reporter: 'html',
 	use: {

exercises/02.authentication/04.solution.third-party-providers/prisma/test.db

@@ -1,9 +1,8 @@
-import * as fs from 'node:fs'
 import { execSync } from 'node:child_process'
+import * as fs from 'node:fs'
 import { faker } from '@faker-js/faker'
 import bcrypt from 'bcryptjs'
 import { UniqueEnforcer } from 'enforce-unique'
-import { prisma } from '#app/utils/db.server.ts'
 
 const uniqueUsernameEnforcer = new UniqueEnforcer()
 
@@ -41,38 +40,6 @@ export function generateUserInfo(info?: Partial<TestUserInfo>): TestUserInfo {
 	}
 }
 
-export async function createPasskey(input: {
-	id: string
-	userId: string
-	aaguid: string
-	publicKey: Uint8Array<ArrayBuffer>
-	counter?: number
-}) {
-	const passkey = await prisma.passkey.create({
-		data: {
-			id: input.id,
-			aaguid: input.aaguid,
-			userId: input.userId,
-			publicKey: input.publicKey,
-			backedUp: false,
-			webauthnUserId: input.userId,
-			deviceType: 'singleDevice',
-			counter: input.counter || 0,
-		},
-	})
-
-	return {
-		async [Symbol.asyncDispose]() {
-			await prisma.passkey.deleteMany({
-				where: {
-					id: passkey.id,
-				},
-			})
-		},
-		...passkey,
-	}
-}
-
 export function createPassword(password: string = faker.internet.password()) {
 	return {
 		hash: bcrypt.hashSync(password, 10),

exercises/02.authentication/04.solution.third-party-providers/tests/db-utils.ts

@@ -0,0 +1,37 @@
+import { generateTOTP } from '@epic-web/totp'
+import { test, expect } from '#tests/test-extend.ts'
+
+test('authenticates using two-factor authentication', async ({
+	app,
+	navigate,
+	page,
+	createUser,
+	createVerification,
+}) => {
+	// Create a test user and enable 2FA for them directly in the database.
+	await using user = await createUser()
+	const totp = await generateTOTP()
+	await using _ = await createVerification({
+		totp,
+		userId: user.id,
+	})
+
+	// Log in as the created user.
+	await navigate('/login')
+
+	await page.getByLabel('Username').fill(user.username)
+	await page.getByLabel('Password').fill(user.password)
+	await page.getByRole('button', { name: 'Log in' }).click()
+
+	await expect(
+		page.getByRole('heading', { name: 'Check your 2FA app' }),
+	).toBeVisible()
+
+	await page
+		.getByRole('textbox', { name: /code/i })
+		.fill((await generateTOTP(totp)).otp)
+
+	await page.getByRole('button', { name: 'Submit' }).click()
+
+	await expect(page.getByRole('link', { name: user.name! })).toBeVisible()
+})

exercises/02.authentication/04.solution.third-party-providers/tests/e2e/authentication-2fa.test.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '#tests/test-extend.ts'
+
+test('authenticates using a email and password', async ({
+	app,
+	navigate,
+	page,
+	createUser,
+}) => {
+	await using user = await createUser()
+
+	await navigate('/login')
+
+	await page.getByLabel('Username').fill(user.username)
+	await page.getByLabel('Password').fill(user.password)
+	await page.getByRole('button', { name: 'Log in' }).click()
+
+	await expect(page.getByText(user.name!)).toBeVisible()
+})
+
+test('displays an error message when authenticating with invalid credentials', async ({
+	app,
+	navigate,
+	page,
+}) => {
+	await navigate('/login')
+
+	await page.getByLabel('Username').fill('non_existing_user')
+	await page.getByLabel('Password').fill('non_existing_password')
+	await page.getByRole('button', { name: 'Log in' }).click()
+
+	await expect(
+		page.getByRole('alert').getByText('Invalid username or password'),
+	).toBeVisible()
+})

exercises/02.authentication/04.solution.third-party-providers/tests/e2e/authentication-basic.test.ts

@@ -0,0 +1,89 @@
+import { type Page } from '@playwright/test'
+import { createTestPasskey } from 'test-passkey'
+import { test, expect } from '#tests/test-extend.ts'
+
+async function createWebAuthnClient(page: Page) {
+	const client = await page.context().newCDPSession(page)
+	await client.send('WebAuthn.enable')
+
+	const result = await client.send('WebAuthn.addVirtualAuthenticator', {
+		options: {
+			protocol: 'ctap2',
+			transport: 'internal',
+			hasResidentKey: true,
+			hasUserVerification: true,
+			isUserVerified: true,
+			// Authenticator will automatically respond to the next prompt in the browser.
+			automaticPresenceSimulation: true,
+		},
+	})
+
+	return {
+		client,
+		authenticatorId: result.authenticatorId,
+	}
+}
+
+test('authenticates using an existing passkey', async ({
+	app,
+	navigate,
+	page,
+	createUser,
+	createPasskey,
+}) => {
+	await navigate('/login')
+
+	// Create a test passkey.
+	const passkey = createTestPasskey({
+		rpId: new URL(page.url()).hostname,
+	})
+
+	// Add the passkey to the server.
+	await using user = await createUser()
+	await using _ = await createPasskey({
+		id: passkey.credential.credentialId,
+		aaguid: passkey.credential.aaguid || '',
+		publicKey: passkey.publicKey,
+		userId: user.id,
+		counter: passkey.credential.signCount,
+	})
+
+	// Add the passkey to the browser.
+	const { client, authenticatorId } = await createWebAuthnClient(page)
+	await client.send('WebAuthn.addCredential', {
+		authenticatorId,
+		credential: {
+			...passkey.credential,
+			isResidentCredential: true,
+			userName: user.username,
+			userHandle: btoa(user.id),
+			userDisplayName: user.name ?? user.email,
+		},
+	})
+
+	await page.getByRole('button', { name: 'Login with a passkey' }).click()
+
+	await expect(page.getByText(user.name!)).toBeVisible()
+})
+
+test('displays an error when authenticating via a passkey fails', async ({
+	app,
+	navigate,
+	page,
+}) => {
+	await navigate('/login')
+
+	const { client, authenticatorId } = await createWebAuthnClient(page)
+	await client.send('WebAuthn.setUserVerified', {
+		authenticatorId,
+		isUserVerified: false,
+	})
+
+	await page.getByRole('button', { name: 'Login with a passkey' }).click()
+
+	await expect(
+		page.getByText(
+			'Failed to authenticate with passkey: The operation either timed out or was not allowed',
+		),
+	).toBeVisible()
+})

exercises/02.authentication/04.solution.third-party-providers/tests/e2e/authentication-passkeys.test.ts

@@ -1,6 +1,12 @@
 import { type AppProcess, defineLauncher } from '@epic-web/app-launcher'
+import { generateTOTP } from '@epic-web/totp'
 import { test as testBase, expect } from '@playwright/test'
-import { PrismaClient, type User } from '@prisma/client'
+import {
+	PrismaClient,
+	type Verification,
+	type Passkey,
+	type User,
+} from '@prisma/client'
 import getPort from 'get-port'
 import {
 	definePersona,
@@ -27,6 +33,17 @@ interface Fixtures {
 	createUser: (
 		info?: Partial<TestUserInfo>,
 	) => Promise<AsyncDisposable & User & { password: string }>
+	createVerification: (input: {
+		totp: Awaited<ReturnType<typeof generateTOTP>>
+		userId: string
+	}) => Promise<AsyncDisposable & Verification>
+	createPasskey: (input: {
+		id: string
+		userId: string
+		aaguid: string
+		publicKey: Uint8Array<ArrayBuffer>
+		counter?: number
+	}) => Promise<AsyncDisposable & Passkey>
 }
 
 const user = definePersona('user', {
@@ -78,10 +95,12 @@ const launcher = defineLauncher({
 
 export const test = testBase.extend<Fixtures>({
 	async databasePath({}, use, testInfo) {
-		const databasePath = `./test-${testInfo.testId}.db`
-		await use(databasePath)
+		const databaseName = `test-${testInfo.testId}.db`
+		const databasePath = new URL(`../prisma/${databaseName}`, import.meta.url)
+			.pathname
 
-		await testInfo.attach(databasePath, { path: databasePath })
+		await use(databasePath)
+		await testInfo.attach(databaseName, { path: databasePath })
 	},
 	async prisma({ databasePath }, use) {
 		const prisma = new PrismaClient({
@@ -137,6 +156,54 @@ export const test = testBase.extend<Fixtures>({
 			}
 		})
 	},
+	async createPasskey({ prisma }, use) {
+		await use(async (input) => {
+			const passkey = await prisma.passkey.create({
+				data: {
+					id: input.id,
+					aaguid: input.aaguid,
+					userId: input.userId,
+					publicKey: input.publicKey,
+					backedUp: false,
+					webauthnUserId: input.userId,
+					deviceType: 'singleDevice',
+					counter: input.counter || 0,
+				},
+			})
+
+			return {
+				async [Symbol.asyncDispose]() {
+					await prisma.passkey.deleteMany({
+						where: {
+							id: passkey.id,
+						},
+					})
+				},
+				...passkey,
+			}
+		})
+	},
+	async createVerification({ prisma }, use) {
+		await use(async (input) => {
+			const { otp, ...totpConfig } = input.totp
+			const verification = await prisma.verification.create({
+				data: {
+					...totpConfig,
+					type: '2fa',
+					target: input.userId,
+				},
+			})
+
+			return {
+				async [Symbol.asyncDispose]() {
+					await prisma.verification.deleteMany({
+						where: { id: verification.id },
+					})
+				},
+				...verification,
+			}
+		})
+	},
 })
 
 export { expect }