Merge pull request #2330 from adevinta/refactor-split-tests

refactor: split tests into multiple steps
adevinta · Jul 29, 2024 · ef92a49 · ef92a49
2 parents 95ce1a5 + 6742358
commit ef92a49
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/e2e/combobox-within-dialog/index.spec.tsx b/e2e/combobox-within-dialog/index.spec.tsx
@@ -2,19 +2,22 @@ import { expect, test } from '@playwright/test'
 
 import { BASE_URL } from '../constant'
 
-test('can interact with a combobox within a dialog', async ({ page }) => {
+test('combobox within a dialog', async ({ page }) => {
   await page.goto(`${BASE_URL}/combobox-within-dialog`)
 
-  const openDialogButton = page.getByRole('button', { name: 'Create account' })
+  await test.step('can interact with a combobox within a dialog', async () => {
+    const openDialogButton = page.getByRole('button', { name: 'Create account' })
 
-  await openDialogButton.click()
+    await openDialogButton.click()
 
-  await page.getByPlaceholder('Pick a book').click()
-  await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()
+    await page.getByPlaceholder('Pick a book').click()
+    await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()
 
-  await expect(page.getByRole('combobox', { name: 'books' })).toHaveValue('To Kill a Mockingbird')
+    await expect(page.getByRole('combobox', { name: 'books' })).toHaveValue('To Kill a Mockingbird')
+  })
 
-  // testing that we can also interact with adjacent button
-  await page.getByRole('button', { name: 'hello' }).click()
-  await expect(page.getByRole('button', { name: 'clicked' })).toBeVisible()
+  await test.step('can also interact with adjacent button', async () => {
+    await page.getByRole('button', { name: 'hello' }).click()
+    await expect(page.getByRole('button', { name: 'clicked' })).toBeVisible()
+  })
 })
diff --git a/e2e/dropdown-with-adjacent-buttons/index.spec.tsx b/e2e/dropdown-with-adjacent-buttons/index.spec.tsx
@@ -2,20 +2,23 @@ import { expect, test } from '@playwright/test'
 
 import { BASE_URL } from '../constant'
 
-test('can interact with a dropdown that has adjacent buttons', async ({ page }) => {
+test('dropdown that has adjacent buttons', async ({ page }) => {
   await page.goto(`${BASE_URL}/dropdown-with-adjacent-buttons`)
 
-  const combobox = page.getByRole('combobox', { name: 'Book' })
+  await test.step('can interact with a dropdown within a dialog', async () => {
+    const combobox = page.getByRole('combobox', { name: 'Book' })
 
-  await combobox.click()
-  await page.getByRole('option', { name: 'War and Peace' }).click()
+    await combobox.click()
+    await page.getByRole('option', { name: 'War and Peace' }).click()
 
-  await expect(combobox).toHaveText('War and Peace')
+    await expect(combobox).toHaveText('War and Peace')
+  })
 
-  // testing that we can also interact with adjacent buttons
-  await page.getByRole('button', { name: 'hello' }).click()
-  await expect(page.getByRole('button', { name: 'clicked on first btn' })).toBeVisible()
+  await test.step('can also interact with adjacent buttons', async () => {
+    await page.getByRole('button', { name: 'hello' }).click()
+    await expect(page.getByRole('button', { name: 'clicked on first btn' })).toBeVisible()
 
-  await page.getByRole('button', { name: 'there' }).click()
-  await expect(page.getByRole('button', { name: 'clicked on second btn' })).toBeVisible()
+    await page.getByRole('button', { name: 'there' }).click()
+    await expect(page.getByRole('button', { name: 'clicked on second btn' })).toBeVisible()
+  })
 })
diff --git a/e2e/dropdown-within-dialog/index.spec.tsx b/e2e/dropdown-within-dialog/index.spec.tsx
@@ -2,19 +2,22 @@ import { expect, test } from '@playwright/test'
 
 import { BASE_URL } from '../constant'
 
-test('can interact with a dropdown within a dialog', async ({ page }) => {
+test('dropdown within a dialog', async ({ page }) => {
   await page.goto(`${BASE_URL}/dropdown-within-dialog`)
 
-  const openDialogButton = page.getByRole('button', { name: 'Create account' })
+  await test.step('can interact with a dropdown within a dialog', async () => {
+    const openDialogButton = page.getByRole('button', { name: 'Create account' })
 
-  await openDialogButton.click()
+    await openDialogButton.click()
 
-  await page.getByRole('combobox', { name: 'books' }).click()
-  await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()
+    await page.getByRole('combobox', { name: 'books' }).click()
+    await page.getByRole('option', { name: 'To Kill a Mockingbird' }).click()
 
-  await expect(page.getByRole('combobox', { name: 'books' })).toHaveText('To Kill a Mockingbird')
+    await expect(page.getByRole('combobox', { name: 'books' })).toHaveText('To Kill a Mockingbird')
+  })
 
-  // testing that we can also interact with adjacent button
-  await page.getByRole('button', { name: 'hello' }).click()
-  await expect(page.getByRole('button', { name: 'clicked' })).toBeVisible()
+  await test.step('can also interact with adjacent button', async () => {
+    await page.getByRole('button', { name: 'hello' }).click()
+    await expect(page.getByRole('button', { name: 'clicked' })).toBeVisible()
+  })
 })