Test data
createNotes() utility
I will start from implementing the
createNotes() utility that will help me seed any notes for any user in tests.// ...
export async function createNotes(args: {
ownerId: string
notes: Array<Omit<Prisma.NoteCreateManyInput, 'ownerId'>>
}) {
const notes = await prisma.note.createManyAndReturn({
data: args.notes.map((note) => {
return {
ownerId: args.ownerId,
...note,
}
}),
})
return {
async [Symbol.asyncDispose]() {
await prisma.note.deleteMany({
where: { ownerId: args.ownerId },
})
},
values: notes,
}
}
Here, I'm implementing a utility not unlike
createUser() or createPasskey() we've created before: a standalone function that uses the Prisma client to provision the server-side resources I need and returns a disposable object that describes the cleanup.Completing the test
Now that I have the way to prepare the notes for any given user, I will head to the test file and use it to arrange my test:
import { createNotes } from '#tests/db-utils.ts'
import { test, expect } from '#tests/test-extend.ts'
test('displays all user notes', async ({ navigate, authenticate, page }) => {
const { user } = await authenticate({ as: 'user' })
await using _ = await createNotes({
ownerId: user.id,
notes: [
{
title: 'First Note',
content: 'Hello world',
},
{
title: 'Second Note',
content: 'Goodbye cosmos',
},
],
})
})
This way, the authenticated user has two distinct note records in the database. Enough for me to assert them in the UI!
Let's visit the notes page and make sure that those two notes are visible in the list of all user's notes:
import { createNotes } from '#tests/db-utils.ts'
import { test, expect } from '#tests/test-extend.ts'
test('displays all user notes', async ({ navigate, authenticate, page }) => {
const { user } = await authenticate({ as: 'user' })
await using _ = await createNotes({
ownerId: user.id,
notes: [
{
title: 'First Note',
content: 'Hello world',
},
{
title: 'Second Note',
content: 'Goodbye cosmos',
},
],
})
await navigate('/users/:username/notes', { username: user.username })
const notes = page
.getByRole('list', { name: 'Notes' })
.getByRole('listitem')
.getByRole('link')
await expect(notes).toHaveText(['First Note', 'Second Note'])
})
This is a good start. Now, I will visit each note and make sure that its contents is correct:
import { createNotes } from '#tests/db-utils.ts'
import { test, expect } from '#tests/test-extend.ts'
test('displays all user notes', async ({ navigate, authenticate, page }) => {
const { user } = await authenticate({ as: 'user' })
await using _ = await createNotes({
ownerId: user.id,
notes: [
{
title: 'First Note',
content: 'Hello world',
},
{
title: 'Second Note',
content: 'Goodbye cosmos',
},
],
})
await navigate('/users/:username/notes', { username: user.username })
const notes = page
.getByRole('list', { name: 'Notes' })
.getByRole('listitem')
.getByRole('link')
await expect(notes).toHaveText(['First Note', 'Second Note'])
await notes.getByText('First Note').click()
await expect(page.getByRole('heading', { name: 'First Note' })).toBeVisible()
await expect(
page.getByLabel('First Note').getByText('Hello world'),
).toBeVisible()
await notes.getByText('Second Note').click()
await expect(page.getByRole('heading', { name: 'Second Note' })).toBeVisible()
await expect(
page.getByLabel('Second Note').getByText('Goodbye cosmos'),
).toBeVisible()
})
And, of course, let's run the tests to see them passing.
npm run test:e2e