chore: improved testing examples

Author: lmammino

10-testing/04-subtests/example.test.js

@@ -1,11 +1,11 @@
 import { test } from 'node:test'
 
-test('Top level test', async t => {
-  await t.test('Subtest 1', async _t => {
+test('Top level test', t => {
+  t.test('Subtest 1', _t => {
     // ...
   })
 
-  await t.test('Subtest 2', async _t => {
+  t.test('Subtest 2', _t => {
     // ...
   })
 })

10-testing/05-test-concurrency/example.test.js

@@ -1,11 +1,11 @@
 import { test } from 'node:test'
 
 test('Top level test', { concurrency: true }, t => {
-  t.test('Subtest 1', async _t => {
+  t.test('Subtest 1', _t => {
     // ...
   })
 
-  t.test('Subtest 2', async _t => {
+  t.test('Subtest 2', _t => {
     // ...
   })
 })

10-testing/17-e2e-test/e2e/userFlow.spec.ts

@@ -11,10 +11,7 @@ test('A user can sign up and book an event', async ({ page }) => {
 
   await page.goto('http://localhost:3000')
 
-  await page
-    .getByRole('navigation')
-    .getByRole('link', { name: 'Sign In' })
-    .click()
+  await page.getByRole('link', { name: 'Sign In' }).click()
 
   await page.getByRole('link', { name: 'Sign up' }).click()
 
@@ -23,13 +20,13 @@ test('A user can sign up and book an event', async ({ page }) => {
   const email = `test${seed}@example.com`
   const password = `someRandomPassword${seed}`
 
-  await page.locator('[name="name"]').fill(name)
-  await page.locator('[name="email"]').fill(email)
-  await page.locator('[name="password"]').fill(password)
+  await page.getByRole('textbox', { name: 'name' }).fill(name)
+  await page.getByRole('textbox', { name: 'email' }).fill(email)
+  await page.getByRole('textbox', { name: 'password' }).fill(password)
 
   await page.getByRole('button', { name: 'Create account' }).click()
 
-  await page.getByRole('heading', { name: 'Italian Cooking Workshop' }).click()
+  await page.getByRole('link', { name: 'Marathon City Run' }).click()
 
   // get the value of the current available capacity
   const availableCapacity = Number.parseInt(
@@ -38,40 +35,29 @@ test('A user can sign up and book an event', async ({ page }) => {
 
   await page.getByRole('button', { name: 'Reserve your spot' }).click()
 
-  await page.waitForResponse(
-    response =>
-      response.url().includes('/events/') &&
-      response.request().method() === 'POST' &&
-      response.status() === 200
-  )
-
   // check that the reservation was successful by looking that we have
   // a "Booked" note on the page and that
-  // the "reserve" button is now disabled
+  // the "reserve" button says "You have booked this event!" and is now disabled
   await expect(page.getByTestId('badge').first()).toHaveText('Booked')
-
-  expect(
-    await page.getByRole('button', { name: 'You have booked this event!' })
-  ).toBeDisabled()
+  const bookButton = await page.getByRole('button', {
+    name: 'You have booked this event!',
+  })
+  await expect(bookButton).toBeDisabled()
+  await expect(bookButton).toBeVisible()
 
   // check that the count of spots available went down
   const newAvailableCapacity = Number.parseInt(
     (await page.getByTestId('available-capacity').textContent()) as string
   )
   expect(newAvailableCapacity).toBeLessThan(availableCapacity)
 
-  await page
-    .getByRole('navigation')
-    .getByRole('link', { name: 'My Reservations' })
-    .click()
+  await page.getByRole('link', { name: 'My Reservations' }).click()
 
-  await page.waitForSelector('h1:has-text("My Reservations")', {
-    state: 'visible',
-  })
+  await expect(
+    page.getByRole('heading', { name: 'My Reservations' })
+  ).toBeVisible()
 
   expect(
-    await page
-      .getByRole('heading', { name: 'Italian Cooking Workshop' })
-      .isVisible()
-  ).toBeTruthy()
+    await page.getByRole('heading', { name: 'Marathon City Run' })
+  ).toBeVisible()
 })