02/03: reuse navigate fixture

Author: kettanaito

exercises/02.test-setup/03.problem.authentication/tests/e2e/notes.test.ts

@@ -15,8 +15,8 @@ test('creates a new note', async ({
 	//
 	// 🐨 Navigate to the new note route in the app.
 	// Reference the username from the authenticated "user" object.
-	// 💰 `/users/${username}/notes/new`
-	// 💰 await page.goto(ROUTE)
+	// 💰 `/users/:username/notes/new`
+	// 💰 await navigate(ROUTE, PARAMS)
 	//
 	// 🐨 Interact with the "New note" form to fill in the note's title and content.
 	// 💰 await page.getByLabel('Title').fill(NOTE_TITLE)

exercises/02.test-setup/03.problem.authentication/tests/test-extend.ts

@@ -3,10 +3,23 @@ import { test as testBase, expect } from '@playwright/test'
 // from the `playwright-persona` package
 // 💰 import { one, two, three } 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 { createUser } from '#tests/db-utils'
 
+interface Fixtures {
+	navigate: <T extends keyof Register['pages']>(
+		...args: Parameters<typeof href<T>>
+	) => Promise<void>
+
+	// 🐨 Annotate the custom authentication fixture by defining a key
+	// called "authenticate" and its type as "AuthenticateFunction" type
+	// you've imported earlier. Provide the list of persona types as the type
+	// argument to the "AuthenticateFunction" type.
+	// 💰 authenticate: AuthenticateFunction<[typeof personaOne, typeof personaTwo]>
+}
+
 // 🐨 Declare a new variable called `user` and assign it the result of
 // calling the `definePersona` function.
 // 💰 const user = definePersona()
@@ -78,13 +91,13 @@ import { createUser } from '#tests/db-utils'
 // 💰 await destroySession({ session }) {}
 // 💰 await prisma.user.deleteMany({ where: { id: session.user.id } })
 
-export const test = testBase.extend<{
-	// 🐨 Annotate the custom authentication fixture by defining a key
-	// called "authenticate" and its type as "AuthenticateFunction" type
-	// you've imported earlier. Provide the list of persona types as the type
-	// argument to the "AuthenticateFunction" type.
-	// 💰 authenticate: AuthenticateFunction<[typeof personaOne, typeof personaTwo]>
-}>({
+export const test = testBase.extend<Fixtures>({
+	async navigate({ page }, use) {
+		await use(async (...args) => {
+			await page.goto(href(...args))
+		})
+	},
+
 	// 🐨 Declare a new fixture called "authenticate".
 	// As the value of this fixture, provide it the result of calling
 	// the "combinePersonas" function you've imported earlier.

exercises/02.test-setup/03.solution.authentication/tests/e2e/notes.test.ts

@@ -1,9 +1,9 @@
 import { test, expect } from '#tests/test-extend.ts'
 
-test('creates a new note', async ({ authenticate, page }) => {
+test('creates a new note', async ({ navigate, authenticate, page }) => {
 	const { user } = await authenticate({ as: 'user' })
 
-	await page.goto(`/users/${user.username}/notes/new`)
+	await navigate('/users/:username/notes/new', { username: user.username })
 
 	await page.getByLabel('Title').fill('My new note')
 	await page.getByLabel('Content').fill('Hello world')

exercises/02.test-setup/03.solution.authentication/tests/test-extend.ts

@@ -4,10 +4,19 @@ import {
 	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 { createUser } 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({
@@ -35,9 +44,12 @@ const user = definePersona('user', {
 	},
 })
 
-export const test = testBase.extend<{
-	authenticate: AuthenticateFunction<[typeof user]>
-}>({
+export const test = testBase.extend<Fixtures>({
+	async navigate({ page }, use) {
+		await use(async (...args) => {
+			await page.goto(href(...args))
+		})
+	},
 	authenticate: combinePersonas(user),
 })