From 6742358469d47fe0f2a11291f0f57c6afff1de2b Mon Sep 17 00:00:00 2001 From: acd02 Date: Mon, 29 Jul 2024 14:06:46 +0200 Subject: [PATCH] refactor: split tests into multiple steps --- e2e/combobox-within-dialog/index.spec.tsx | 21 +++++++++-------- .../index.spec.tsx | 23 +++++++++++-------- e2e/dropdown-within-dialog/index.spec.tsx | 21 +++++++++-------- 3 files changed, 37 insertions(+), 28 deletions(-) diff --git a/e2e/combobox-within-dialog/index.spec.tsx b/e2e/combobox-within-dialog/index.spec.tsx index 7b7af8468..fcb11133b 100644 --- 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 index ee43677ca..b3d59fee5 100644 --- 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 index 11de661b5..44ee222d5 100644 --- 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() + }) })