add solution summaries to exercises

Author: kettanaito

exercises/01.fundamentals/01.solution.install-and-configure/README.mdx

@@ -1,7 +1,22 @@
 # Install & configure
 
-- Mention the explicit `workers` value in `playwright.config.ts`.
+## Summary
 
-Good job! 👏
+1. Install Playwright.
+1. Create `playwright.config.ts`.
+1. Specify `projects` using Chromium as the browser.
+1. Specify quality-of-life options like `fullyParallel` or `forbidOnly`.
+1. A brief mention of `workers` set to `1` on CI.
 
-Please wait for the others to finish so we could go through the solution to this exercise together.
+---
+
+1. Create a simple test at `./tests/epicweb.test.ts`.
+1. Test block structure (`test()`).
+1. The `page` fixture.
+1. Use `page.goto()` to visit pages (external and internal).
+1. Promise-based `expect()` assertions (retriability).
+
+---
+
+1. Add the `test:e2e` script in `package.json` that runs Playwright.
+1. Run the test via `npm run test:e2e`. See the result.

exercises/01.fundamentals/02.solution.running-the-app/README.mdx

@@ -1,5 +1,21 @@
 # Running the app
 
-Good job! 👏
+## Summary
 
-Please wait for the others to finish so we could go through the solution to this exercise together.
+1. Introduce to the Epic Stack app, briefly.
+
+---
+
+1. Changes in `playwright.config.ts`, mainly:
+  1. `PORT` at which the app will be running. `use.baseURL` to we can use relative URLs in our tests. 
+  1. The `webServer` option to spawn our app and wait at the given `PORT`.
+  1. `reuseExistingServer` allows us to use an already running app locally for faster tests.
+  1. `testDir` set to `./tests/e2e` since our app now also has other types of tests.
+
+---
+
+1. New test at `tests/e2e/homepage.test.ts`. We need to test our app, not running `epicweb.dev`.
+1. The basic structure of the test remains the same though:
+  1. Visit the homepage `/` (since we enabled relative URLs).
+  1. Assert that the heading text is visible to the user.
+1. Verify the test via `npm run test:e2e`.

exercises/01.fundamentals/03.solution.custom-fixtures/README.mdx

@@ -1,8 +1,9 @@
 # Custom fixtures
 
-Good job! 👏
+## Summary
 
-Please wait for the others to finish so we could go through the solution to this exercise together.
+1. Implement the new `navigate` fixture in `tests/text-extend.ts`. Use generated type definitions from React Router for type-safe navigation in tests. Build the app to generate the type definitions.
+1. Change the existing test at `tests/e2e/homepage.test.ts` to use the new `navigate` fixture instead of `page`. Notice the route suggestions! Neat.
 
 ## Related materials
 

exercises/02.authentication/01.problem.basic/package.json

@@ -145,7 +145,6 @@
     "jsdom": "^25.0.1",
     "msw": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "playwright-persona": "^0.2.8",
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.19.0",
     "prettier-plugin-tailwindcss": "^0.6.11",

exercises/02.authentication/01.problem.basic/tests/test-extend.ts

@@ -1,57 +1,18 @@
 import { test as testBase, expect } from '@playwright/test'
-import {
-	definePersona,
-	combinePersonas,
-	type AuthenticateFunction,
-} from 'playwright-persona'
 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'
 
 interface Fixtures {
 	navigate: <T extends keyof Register['pages']>(
 		...args: Parameters<typeof href<T>>
 	) => Promise<void>
-	authenticate: AuthenticateFunction<[typeof user]>
 }
 
-const user = definePersona('user', {
-	async createSession({ page }) {
-		const user = await prisma.user.create({
-			data: {
-				...generateUserInfo(),
-				roles: { connect: { name: 'user' } },
-				password: { create: { hash: await getPasswordHash('supersecret') } },
-			},
-		})
-
-		await page.goto('/login')
-		await page.getByLabel('Username').fill(user.username)
-		await page.getByLabel('Password').fill('supersecret')
-		await page.getByRole('button', { name: 'Log in' }).click()
-		await page.getByText(user.name!).waitFor({ state: 'visible' })
-
-		return { user }
-	},
-	async verifySession({ page, session }) {
-		await page.goto('/')
-		await expect(page.getByText(session.user.name!)).toBeVisible({
-			timeout: 100,
-		})
-	},
-	async destroySession({ session }) {
-		await prisma.user.deleteMany({ where: { id: session.user.id } })
-	},
-})
-
 export const test = testBase.extend<Fixtures>({
 	async navigate({ page }, use) {
 		await use(async (...args) => {
 			await page.goto(href(...args))
 		})
 	},
-	authenticate: combinePersonas(user),
 })
 
 export { expect }

exercises/02.authentication/01.solution.basic/README.mdx

@@ -2,17 +2,19 @@
 
 - Testing a basic (email+password) authentication.
 
-## Solution
+## Summary
 
-- Explain why `timeout` here is necessary:
+1. Create new test at `tests/e2e/authentication-basic.test.ts`.
+1. Create a new test case for successful authentication using email and password.
+1. In the test, use the existing `createUser()` utility, which generates a new user and creates it in the database.
+1. Log in by filling the log in form as the user would.
+1. Talk about _locators_ in Playwright. They are promises to values.
+1. Assert that the authentication is successful based on the user profile link being visible on the screen.
+1. `npm run test:e2e:run`.
 
-```ts
-	async verifySession({ page, session }) {
-		await page.goto('/')
-		await expect(page.getByText(session.user.name!)).toBeVisible({
-			timeout: 100,
-		})
-	},
-```
+---
 
-Without it, the default Playwright timeout of 5s will make auth extremely slow.
+1. Another test case in the same file focused on displaying an error when authentication fails.
+1. Similar steps but _no setup_ so the user doesn't exist.
+1. Assert the error message being shown (correct _role_ and text).
+1. `npm run test:e2e:run`.

exercises/02.authentication/01.solution.basic/package.json

@@ -145,7 +145,6 @@
     "jsdom": "^25.0.1",
     "msw": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "playwright-persona": "^0.2.8",
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.19.0",
     "prettier-plugin-tailwindcss": "^0.6.11",

exercises/02.authentication/01.solution.basic/tests/test-extend.ts

@@ -1,57 +1,18 @@
 import { test as testBase, expect } from '@playwright/test'
-import {
-	definePersona,
-	combinePersonas,
-	type AuthenticateFunction,
-} from 'playwright-persona'
 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'
 
 interface Fixtures {
 	navigate: <T extends keyof Register['pages']>(
 		...args: Parameters<typeof href<T>>
 	) => Promise<void>
-	authenticate: AuthenticateFunction<[typeof user]>
 }
 
-const user = definePersona('user', {
-	async createSession({ page }) {
-		const user = await prisma.user.create({
-			data: {
-				...generateUserInfo(),
-				roles: { connect: { name: 'user' } },
-				password: { create: { hash: await getPasswordHash('supersecret') } },
-			},
-		})
-
-		await page.goto('/login')
-		await page.getByLabel('Username').fill(user.username)
-		await page.getByLabel('Password').fill('supersecret')
-		await page.getByRole('button', { name: 'Log in' }).click()
-		await page.getByText(user.name!).waitFor({ state: 'visible' })
-
-		return { user }
-	},
-	async verifySession({ page, session }) {
-		await page.goto('/')
-		await expect(page.getByText(session.user.name!)).toBeVisible({
-			timeout: 100,
-		})
-	},
-	async destroySession({ session }) {
-		await prisma.user.deleteMany({ where: { id: session.user.id } })
-	},
-})
-
 export const test = testBase.extend<Fixtures>({
 	async navigate({ page }, use) {
 		await use(async (...args) => {
 			await page.goto(href(...args))
 		})
 	},
-	authenticate: combinePersonas(user),
 })
 
 export { expect }

exercises/02.authentication/02.problem.2fa/package.json

@@ -145,7 +145,6 @@
     "jsdom": "^25.0.1",
     "msw": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "playwright-persona": "^0.2.8",
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.19.0",
     "prettier-plugin-tailwindcss": "^0.6.11",

exercises/02.authentication/02.problem.2fa/tests/test-extend.ts

@@ -1,57 +1,18 @@
 import { test as testBase, expect } from '@playwright/test'
-import {
-	definePersona,
-	combinePersonas,
-	type AuthenticateFunction,
-} from 'playwright-persona'
 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'
 
 interface Fixtures {
 	navigate: <T extends keyof Register['pages']>(
 		...args: Parameters<typeof href<T>>
 	) => Promise<void>
-	authenticate: AuthenticateFunction<[typeof user]>
 }
 
-const user = definePersona('user', {
-	async createSession({ page }) {
-		const user = await prisma.user.create({
-			data: {
-				...generateUserInfo(),
-				roles: { connect: { name: 'user' } },
-				password: { create: { hash: await getPasswordHash('supersecret') } },
-			},
-		})
-
-		await page.goto('/login')
-		await page.getByLabel('Username').fill(user.username)
-		await page.getByLabel('Password').fill('supersecret')
-		await page.getByRole('button', { name: 'Log in' }).click()
-		await page.getByText(user.name!).waitFor({ state: 'visible' })
-
-		return { user }
-	},
-	async verifySession({ page, session }) {
-		await page.goto('/')
-		await expect(page.getByText(session.user.name!)).toBeVisible({
-			timeout: 100,
-		})
-	},
-	async destroySession({ session }) {
-		await prisma.user.deleteMany({ where: { id: session.user.id } })
-	},
-})
-
 export const test = testBase.extend<Fixtures>({
 	async navigate({ page }, use) {
 		await use(async (...args) => {
 			await page.goto(href(...args))
 		})
 	},
-	authenticate: combinePersonas(user),
 })
 
 export { expect }