Skip to content

test: add type-safe navigate utility #1032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 25, 2025
Merged

test: add type-safe navigate utility #1032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions tests/e2e/2fa.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { expect, test } from '#tests/playwright-utils.ts'

test('Users can add 2FA to their account and use it when logging in', async ({
page,
navigate,
login,
}) => {
const password = faker.internet.password()
const user = await login({ password })
await page.goto('/settings/profile')
await navigate('/settings/profile')

await page.getByRole('link', { name: /enable 2fa/i }).click()

Expand Down Expand Up @@ -40,7 +41,7 @@ test('Users can add 2FA to their account and use it when logging in', async ({
await page.getByRole('menuitem', { name: /logout/i }).click()
await expect(page).toHaveURL(`/`)

await page.goto('/login')
await navigate('/login')
await expect(page).toHaveURL(`/login`)
await page.getByRole('textbox', { name: /username/i }).fill(user.username)
await page.getByLabel(/^password$/i).fill(password)
Expand Down
4 changes: 2 additions & 2 deletions tests/e2e/error-boundary.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { expect, test } from '#tests/playwright-utils.ts'

test('Test root error boundary caught', async ({ page }) => {
test('Test root error boundary caught', async ({ page, navigate }) => {
const pageUrl = '/does-not-exist'
const res = await page.goto(pageUrl)
const res = await navigate(pageUrl as any)

expect(res?.status()).toBe(404)
await expect(page.getByText(/We can't find this page/i)).toBeVisible()
Expand Down
31 changes: 23 additions & 8 deletions tests/e2e/note-images.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ import { type NoteImage, type Note } from '@prisma/client'
import { prisma } from '#app/utils/db.server.ts'
import { expect, test } from '#tests/playwright-utils.ts'

test('Users can create note with an image', async ({ page, login }) => {
test('Users can create note with an image', async ({
page,
navigate,
login,
}) => {
const user = await login()
await page.goto(`/users/${user.username}/notes`)
await navigate('/users/:username/notes', { username: user.username })

const newNote = createNote()
const altText = 'cute koala'
Expand All @@ -28,9 +32,13 @@ test('Users can create note with an image', async ({ page, login }) => {
).toBeVisible()
})

test('Users can create note with multiple images', async ({ page, login }) => {
test('Users can create note with multiple images', async ({
page,
navigate,
login,
}) => {
const user = await login()
await page.goto(`/users/${user.username}/notes`)
await navigate('/users/:username/notes', { username: user.username })

const newNote = createNote()
const altText1 = 'cute koala'
Expand Down Expand Up @@ -60,7 +68,7 @@ test('Users can create note with multiple images', async ({ page, login }) => {
await expect(page.getByAltText(altText2)).toBeVisible()
})

test('Users can edit note image', async ({ page, login }) => {
test('Users can edit note image', async ({ page, navigate, login }) => {
const user = await login()

const note = await prisma.note.create({
Expand All @@ -70,7 +78,10 @@ test('Users can edit note image', async ({ page, login }) => {
ownerId: user.id,
},
})
await page.goto(`/users/${user.username}/notes/${note.id}`)
await navigate('/users/:username/notes/:noteId', {
username: user.username,
noteId: note.id,
})

// edit the image
await page.getByRole('link', { name: 'Edit', exact: true }).click()
Expand All @@ -86,7 +97,7 @@ test('Users can edit note image', async ({ page, login }) => {
await expect(page.getByAltText(updatedImage.altText)).toBeVisible()
})

test('Users can delete note image', async ({ page, login }) => {
test('Users can delete note image', async ({ page, navigate, login }) => {
const user = await login()

const note = await prisma.note.create({
Expand All @@ -96,7 +107,10 @@ test('Users can delete note image', async ({ page, login }) => {
ownerId: user.id,
},
})
await page.goto(`/users/${user.username}/notes/${note.id}`)
await navigate('/users/:username/notes/:noteId', {
username: user.username,
noteId: note.id,
})

await expect(page.getByRole('heading', { name: note.title })).toBeVisible()
const images = page
Expand All @@ -118,6 +132,7 @@ function createNote() {
content: faker.lorem.paragraphs(3),
} satisfies Omit<Note, 'id' | 'createdAt' | 'updatedAt' | 'type' | 'ownerId'>
}

function createNoteWithImage() {
return {
...createNote(),
Expand Down
18 changes: 12 additions & 6 deletions tests/e2e/notes.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { faker } from '@faker-js/faker'
import { prisma } from '#app/utils/db.server.ts'
import { expect, test } from '#tests/playwright-utils.ts'

test('Users can create notes', async ({ page, login }) => {
test('Users can create notes', async ({ page, navigate, login }) => {
const user = await login()
await page.goto(`/users/${user.username}/notes`)
await navigate('/users/:username/notes', { username: user.username })

const newNote = createNote()
await page.getByRole('link', { name: /New Note/i }).click()
Expand All @@ -17,14 +17,17 @@ test('Users can create notes', async ({ page, login }) => {
await expect(page).toHaveURL(new RegExp(`/users/${user.username}/notes/.*`))
})

test('Users can edit notes', async ({ page, login }) => {
test('Users can edit notes', async ({ page, navigate, login }) => {
const user = await login()

const note = await prisma.note.create({
select: { id: true },
data: { ...createNote(), ownerId: user.id },
})
await page.goto(`/users/${user.username}/notes/${note.id}`)
await navigate('/users/:username/notes/:noteId', {
username: user.username,
noteId: note.id,
})

// edit the note
await page.getByRole('link', { name: 'Edit', exact: true }).click()
Expand All @@ -41,14 +44,17 @@ test('Users can edit notes', async ({ page, login }) => {
).toBeVisible()
})

test('Users can delete notes', async ({ page, login }) => {
test('Users can delete notes', async ({ page, navigate, login }) => {
const user = await login()

const note = await prisma.note.create({
select: { id: true },
data: { ...createNote(), ownerId: user.id },
})
await page.goto(`/users/${user.username}/notes/${note.id}`)
await navigate('/users/:username/notes/:noteId', {
username: user.username,
noteId: note.id,
})

// find links with href prefix
const noteLinks = page
Expand Down
56 changes: 38 additions & 18 deletions tests/e2e/onboarding.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ import {
USERNAME_MIN_LENGTH,
} from '#app/utils/user-validation'
import { readEmail } from '#tests/mocks/utils.ts'
import { createUser, expect, test as base } from '#tests/playwright-utils.ts'
import {
createUser,
expect,
test as base,
type AppPages,
} from '#tests/playwright-utils.ts'

const URL_REGEX = /(?<url>https?:\/\/[^\s$.?#].[^\s]*)/
const CODE_REGEX = /Here's your verification code: (?<code>[\d\w]+)/
Expand Down Expand Up @@ -40,10 +45,10 @@ const test = base.extend<{
},
})

test('onboarding with link', async ({ page, getOnboardingData }) => {
test('onboarding with link', async ({ page, navigate, getOnboardingData }) => {
const onboardingData = getOnboardingData()

await page.goto('/')
await navigate('/')

await page.getByRole('link', { name: /log in/i }).click()
await expect(page).toHaveURL(`/login`)
Expand All @@ -67,9 +72,9 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
expect(email.to).toBe(onboardingData.email.toLowerCase())
expect(email.from).toBe('[email protected]')
expect(email.subject).toMatch(/welcome/i)
const onboardingUrl = extractUrl(email.text)
const onboardingUrl = extractUrl(email.text) as AppPages
invariant(onboardingUrl, 'Onboarding URL not found')
await page.goto(onboardingUrl)
await navigate(onboardingUrl)

await expect(page).toHaveURL(/\/verify/)

Expand Down Expand Up @@ -109,10 +114,14 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
await expect(page).toHaveURL(`/`)
})

test('onboarding with a short code', async ({ page, getOnboardingData }) => {
test('onboarding with a short code', async ({
page,
navigate,
getOnboardingData,
}) => {
const onboardingData = getOnboardingData()

await page.goto('/signup')
await navigate('/signup')

const emailTextbox = page.getByRole('textbox', { name: /email/i })
await emailTextbox.click()
Expand All @@ -137,6 +146,7 @@ test('onboarding with a short code', async ({ page, getOnboardingData }) => {

test('completes onboarding after GitHub OAuth given valid user details', async ({
page,
navigate,
prepareGitHubUser,
}) => {
const ghUser = await prepareGitHubUser()
Expand All @@ -148,7 +158,7 @@ test('completes onboarding after GitHub OAuth given valid user details', async (
}),
).toBeNull()

await page.goto('/signup')
await navigate('/signup')
await page.getByRole('button', { name: /signup with github/i }).click()

await expect(page).toHaveURL(/\/onboarding\/github/)
Expand Down Expand Up @@ -186,6 +196,7 @@ test('completes onboarding after GitHub OAuth given valid user details', async (

test('logs user in after GitHub OAuth if they are already registered', async ({
page,
navigate,
prepareGitHubUser,
}) => {
const ghUser = await prepareGitHubUser()
Expand Down Expand Up @@ -214,7 +225,7 @@ test('logs user in after GitHub OAuth if they are already registered', async ({
})
expect(connection).toBeNull()

await page.goto('/signup')
await navigate('/signup')
await page.getByRole('button', { name: /signup with github/i }).click()

await expect(page).toHaveURL(`/`)
Expand All @@ -235,11 +246,12 @@ test('logs user in after GitHub OAuth if they are already registered', async ({

test('shows help texts on entering invalid details on onboarding page after GitHub OAuth', async ({
page,
navigate,
prepareGitHubUser,
}) => {
const ghUser = await prepareGitHubUser()

await page.goto('/signup')
await navigate('/signup')
await page.getByRole('button', { name: /signup with github/i }).click()

await expect(page).toHaveURL(/\/onboarding\/github/)
Expand Down Expand Up @@ -322,11 +334,11 @@ test('shows help texts on entering invalid details on onboarding page after GitH
await expect(page.getByText(/thanks for signing up/i)).toBeVisible()
})

test('login as existing user', async ({ page, insertNewUser }) => {
test('login as existing user', async ({ page, navigate, insertNewUser }) => {
const password = faker.internet.password()
const user = await insertNewUser({ password })
invariant(user.name, 'User name not found')
await page.goto('/login')
await navigate('/login')
await page.getByRole('textbox', { name: /username/i }).fill(user.username)
await page.getByLabel(/^password$/i).fill(password)
await page.getByRole('button', { name: /log in/i }).click()
Expand All @@ -335,11 +347,15 @@ test('login as existing user', async ({ page, insertNewUser }) => {
await expect(page.getByRole('link', { name: user.name })).toBeVisible()
})

test('reset password with a link', async ({ page, insertNewUser }) => {
test('reset password with a link', async ({
page,
navigate,
insertNewUser,
}) => {
const originalPassword = faker.internet.password()
const user = await insertNewUser({ password: originalPassword })
invariant(user.name, 'User name not found')
await page.goto('/login')
await navigate('/login')

await page.getByRole('link', { name: /forgot password/i }).click()
await expect(page).toHaveURL('/forgot-password')
Expand All @@ -356,9 +372,9 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
expect(email.subject).toMatch(/password reset/i)
expect(email.to).toBe(user.email.toLowerCase())
expect(email.from).toBe('[email protected]')
const resetPasswordUrl = extractUrl(email.text)
const resetPasswordUrl = extractUrl(email.text) as AppPages
invariant(resetPasswordUrl, 'Reset password URL not found')
await page.goto(resetPasswordUrl)
await navigate(resetPasswordUrl)

await expect(page).toHaveURL(/\/verify/)

Expand Down Expand Up @@ -389,9 +405,13 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
await expect(page.getByRole('link', { name: user.name })).toBeVisible()
})

test('reset password with a short code', async ({ page, insertNewUser }) => {
test('reset password with a short code', async ({
page,
navigate,
insertNewUser,
}) => {
const user = await insertNewUser()
await page.goto('/login')
await navigate('/login')

await page.getByRole('link', { name: /forgot password/i }).click()
await expect(page).toHaveURL('/forgot-password')
Expand Down
Loading