02/04: per-test app instances with app-launcher

Author: kettanaito

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

@@ -0,0 +1 @@
+DATABASE_URL="file:./test.db"

exercises/02.authentication/04.solution.third-party-providers/.gitignore

@@ -3,11 +3,11 @@ node_modules
 
 /build
 /server-build
- 
+
 .cache
 
-/prisma/data.db
-/prisma/data.db-journal
+/prisma/*.db
+/prisma/*.db-journal
 /tests/prisma
 
 /test-results/

exercises/02.authentication/04.solution.third-party-providers/app/mocks/handlers.ts

@@ -5,15 +5,15 @@ import {
 	GitHubEmailSchema,
 } from '#app/utils/providers/github.server.ts'
 
-const githubUsers = new Collection({
+const gitHubUsers = new Collection({
 	schema: GitHubUserResponseSchema,
 })
 
 const githubEmails = new Collection({
 	schema: GitHubEmailSchema,
 })
 
-export const mockGitHubUser = await githubUsers.create({
+export const mockGitHubUser = await gitHubUsers.create({
 	id: 1,
 	login: 'kody',
 	name: 'Kody the Koala',

exercises/02.authentication/04.solution.third-party-providers/eslint.config.js

@@ -6,7 +6,10 @@ export default [
 	// add custom config objects here:
 	{
 		files: ['**/tests/**/*.ts'],
-		rules: { 'react-hooks/rules-of-hooks': 'off' },
+		rules: {
+			'react-hooks/rules-of-hooks': 'off',
+			'no-unused-vars': ['warning', { varsIgnorePattern: '^app$' }],
+		},
 	},
 	{
 		ignores: ['.react-router/*'],

exercises/02.authentication/04.solution.third-party-providers/package.json

@@ -84,7 +84,6 @@
     "execa": "^9.5.2",
     "express": "^4.21.2",
     "express-rate-limit": "^7.5.0",
-    "get-port": "^7.1.0",
     "glob": "^11.0.2",
     "input-otp": "^1.4.2",
     "intl-parse-accept-language": "^1.0.0",
@@ -113,6 +112,7 @@
     "zod": "^3.24.4"
   },
   "devDependencies": {
+    "@epic-web/app-launcher": "^0.3.3",
     "@epic-web/config": "^1.20.1",
     "@faker-js/faker": "^9.7.0",
     "@msw/data": "^1.1.2",
@@ -143,6 +143,7 @@
     "esbuild": "^0.25.3",
     "eslint": "^9.26.0",
     "fs-extra": "^11.3.0",
+    "get-port": "^7.1.0",
     "jsdom": "^25.0.1",
     "msw": "^2.7.6",
     "npm-run-all": "^4.1.5",

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

@@ -1,5 +1,11 @@
 import { defineConfig, devices } from '@playwright/test'
 import 'dotenv/config'
+import { config } from 'dotenv'
+
+config({
+	path: new URL('.env.test', import.meta.url),
+	override: true,
+})
 
 const PORT = process.env.PORT || '3000'
 
@@ -31,16 +37,16 @@ export default defineConfig({
 		},
 	],
 
-	webServer: {
-		command: process.env.CI ? 'npm run start:mocks' : 'npm run dev',
-		port: Number(PORT),
-		reuseExistingServer: true,
-		stdout: 'pipe',
-		stderr: 'pipe',
-		env: {
-			PORT,
-			NODE_ENV: 'test',
-			DATABASE_PATH: 'file:./test.db',
-		},
-	},
+	// webServer: {
+	// 	command: process.env.CI ? 'npm run start:mocks' : 'npm run dev',
+	// 	port: Number(PORT),
+	// 	reuseExistingServer: true,
+	// 	stdout: 'pipe',
+	// 	stderr: 'pipe',
+	// 	env: {
+	// 		PORT,
+	// 		NODE_ENV: 'test',
+	// 		DATABASE_URL: process.env.DATABASE_URL,
+	// 	},
+	// },
 })

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

@@ -1,3 +1,4 @@
+import { execSync } from 'node:child_process'
 import { faker } from '@faker-js/faker'
 import bcrypt from 'bcryptjs'
 import { UniqueEnforcer } from 'enforce-unique'
@@ -33,8 +34,6 @@ export function generateUserInfo(info?: Partial<TestUserInfo>): TestUserInfo {
 			.toLowerCase()
 			.replace(/[^a-z0-9_]/g, '_')
 
-	console.log({ username })
-
 	return {
 		username,
 		name: info?.name || `${firstName} ${lastName}`,
@@ -164,3 +163,18 @@ export async function getUserImages() {
 
 	return userImages
 }
+
+export function prepareTestDatabase(filePath: string) {
+	const env = {
+		...process.env,
+		DATABASE_URL: `file:${filePath}`,
+	}
+
+	execSync('npx prisma migrate reset --force --skip-seed', {
+		env,
+	})
+
+	execSync('npx prisma migrate deploy', {
+		env,
+	})
+}

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

@@ -2,7 +2,7 @@ import { mockGitHubUser } from '#app/mocks/handlers.ts'
 import { createUser } from '#tests/db-utils.ts'
 import { test, expect } from '#tests/test-extend.ts'
 
-test('onboards a new GitHub user', async ({ navigate, page }) => {
+test('onboards a new GitHub user', async ({ app, navigate, page }) => {
 	await navigate('/login')
 	await page.getByRole('button', { name: 'Login with GitHub' }).click()
 
@@ -31,6 +31,7 @@ test('onboards a new GitHub user', async ({ navigate, page }) => {
 	await expect(
 		page.getByRole('link', { name: mockGitHubUser.name }),
 	).toBeVisible()
+	await expect(page.getByText('Thanks for signing up!')).toBeVisible()
 })
 
 test('authenticates an existing GitHub user', async ({ navigate, page }) => {

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

@@ -1,4 +1,6 @@
+import { type AppProcess, defineLauncher } from '@epic-web/app-launcher'
 import { test as testBase, expect } from '@playwright/test'
+import getPort from 'get-port'
 import {
 	definePersona,
 	combinePersonas,
@@ -7,9 +9,10 @@ import {
 import { href, type Register } from 'react-router'
 import { getPasswordHash } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { generateUserInfo } from '#tests/db-utils'
+import { generateUserInfo, prepareTestDatabase } from '#tests/db-utils'
 
 interface Fixtures {
+	app: AppProcess
 	navigate: <T extends keyof Register['pages']>(
 		...args: Parameters<typeof href<T>>
 	) => Promise<void>
@@ -45,10 +48,46 @@ const user = definePersona('user', {
 	},
 })
 
+const launcher = defineLauncher({
+	async context() {
+		return { port: await getPort() }
+	},
+	env({ context }) {
+		return {
+			PORT: context.port.toString(),
+		}
+	},
+	command() {
+		return 'npm run dev'
+	},
+	url({ context }) {
+		return `http://localhost:${context.port}`
+	},
+})
+
 export const test = testBase.extend<Fixtures>({
-	async navigate({ page }, use) {
+	async app({}, use, testInfo) {
+		const databasePath = `./test-${testInfo.testId}.db`
+		prepareTestDatabase(databasePath)
+
+		/**
+		 * @todo No need to re-run the whole app on test re-runs.
+		 * Would be nice to spawn the app once, then reuse it across re-runs.
+		 * Just clear the DB between re-runs, that's crucial.
+		 */
+		const app = await launcher.run({
+			env: () => ({
+				DATABASE_URL: `file:${databasePath}`,
+			}),
+		})
+
+		await use(app)
+		await app.dispose()
+	},
+	async navigate({ page, app }, use) {
 		await use(async (...args) => {
-			await page.goto(href(...args))
+			const url = new URL(href(...args), app.url)
+			await page.goto(url.href)
 		})
 	},
 	authenticate: combinePersonas(user),