From 3eadd15c85b3ccf84e733bc4d4c4340bbcca343f Mon Sep 17 00:00:00 2001 From: Roar Larsen Date: Tue, 31 Oct 2023 14:35:18 +0100 Subject: [PATCH] refactor(e2e): utilize test.step in more tests --- .../plugin-form-UncontainedObject.spec.ts | 116 ++++---- e2e/tests/plugin-table-car_list.spec.ts | 172 +++++------ .../plugin-view_selector-car_garage.spec.ts | 275 ++++++++++-------- 3 files changed, 300 insertions(+), 263 deletions(-) diff --git a/e2e/tests/plugin-form-UncontainedObject.spec.ts b/e2e/tests/plugin-form-UncontainedObject.spec.ts index 8c102a787..4a8476bd9 100644 --- a/e2e/tests/plugin-form-UncontainedObject.spec.ts +++ b/e2e/tests/plugin-form-UncontainedObject.spec.ts @@ -28,64 +28,72 @@ test('uncontainedObject', async ({ page }) => { await expect(dialog).not.toBeVisible() } - await page.getByTestId('ceo').getByRole('button', { name: 'Open' }).click() - await expect(page.getByRole('code').getByText('Miranda')).toBeVisible() - await expect(page.getByRole('code').getByText('1337')).toBeVisible() - await page.getByRole('button', { name: 'Close ceo' }).click() + await test.step('Assert CEO and accountant', async () => { + await page.getByTestId('ceo').getByRole('button', { name: 'Open' }).click() + await expect(page.getByRole('code').getByText('Miranda')).toBeVisible() + await expect(page.getByRole('code').getByText('1337')).toBeVisible() + await page.getByRole('button', { name: 'Close ceo' }).click() - await expect( - page.getByTestId('accountant').getByRole('code').getByText('Miranda') - ).toBeVisible() - await expect(page.getByRole('code').getByText('1337')).toBeVisible() + await expect( + page.getByTestId('accountant').getByRole('code').getByText('Miranda') + ).toBeVisible() + await expect(page.getByRole('code').getByText('1337')).toBeVisible() + }) - // Add assistant - await page - .getByTestId('assistant') - .getByRole('button', { name: 'Add and save' }) - .click() - await selectJohn() - - await page - .getByTestId('assistant') - .getByRole('button', { name: 'Open' }) - .click() - await expect(page.getByText('John')).toBeVisible() - await expect(page.getByText('1234')).toBeVisible() - await page.getByRole('button', { name: 'Close assistant' }).click() + await test.step('Add assistant', async () => { + await page + .getByTestId('assistant') + .getByRole('button', { name: 'Add and save' }) + .click() + await selectJohn() + await page + .getByTestId('assistant') + .getByRole('button', { name: 'Open' }) + .click() + await expect(page.getByText('John')).toBeVisible() + await expect(page.getByText('1234')).toBeVisible() + await page.getByRole('button', { name: 'Close assistant' }).click() + }) - // Add trainee - await page - .getByTestId('trainee') - .getByRole('button', { name: 'Add and save' }) - .click() - await selectJohn() - await expect( - page.getByTestId('trainee').getByRole('code').getByText('John') - ).toBeVisible() - await expect( - page.getByTestId('trainee').getByRole('code').getByText('1234') - ).toBeVisible() + await test.step('Add trainee', async () => { + await page + .getByTestId('trainee') + .getByRole('button', { name: 'Add and save' }) + .click() + await selectJohn() + await expect( + page.getByTestId('trainee').getByRole('code').getByText('John') + ).toBeVisible() + await expect( + page.getByTestId('trainee').getByRole('code').getByText('1234') + ).toBeVisible() + }) - // Change accountant - await page - .getByTestId('accountant') - .getByRole('button', { name: 'Edit and save' }) - .click() - await selectJohn() - await expect( - page.getByTestId('accountant').getByRole('code').getByText('John') - ).toBeVisible() - await expect( - page.getByTestId('accountant').getByRole('code').getByText('1234') - ).toBeVisible() + await test.step('Change accountant', async () => { + await page + .getByTestId('accountant') + .getByRole('button', { name: 'Edit and save' }) + .click() + await selectJohn() + await expect( + page.getByTestId('accountant').getByRole('code').getByText('John') + ).toBeVisible() + await expect( + page.getByTestId('accountant').getByRole('code').getByText('1234') + ).toBeVisible() + }) - //Remove trainee - const trainee = page.getByTestId('trainee') - await trainee.getByRole('button', { name: 'Remove and save' }).click() - await expect(trainee.getByRole('code').getByText('John')).not.toBeVisible() - await expect(trainee.getByRole('code').getByText('1234')).not.toBeVisible() + await test.step('Remove trainee', async () => { + const trainee = page.getByTestId('trainee') + await trainee.getByRole('button', { name: 'Remove and save' }).click() + await expect(trainee.getByRole('code').getByText('John')).not.toBeVisible() + await expect(trainee.getByRole('code').getByText('1234')).not.toBeVisible() + }) - // Submit form - await page.getByRole('button', { name: 'Submit' }).click() - await expect(page.getByRole('alert').last()).toHaveText(['Document updated']) + await test.step('Submit form', async () => { + await page.getByRole('button', { name: 'Submit' }).click() + await expect(page.getByRole('alert').last()).toHaveText([ + 'Document updated', + ]) + }) }) diff --git a/e2e/tests/plugin-table-car_list.spec.ts b/e2e/tests/plugin-table-car_list.spec.ts index e12e201a8..aa4c64bb2 100644 --- a/e2e/tests/plugin-table-car_list.spec.ts +++ b/e2e/tests/plugin-table-car_list.spec.ts @@ -9,96 +9,104 @@ test('Table car list example', async ({ page }) => { await page.getByRole('button', { name: 'CarList' }).click() } - //Open form await page.goto('http://localhost:3000/') await navigate() - //Add a new car by using expand (not "open") - await page.getByRole('button', { name: 'Add row' }).click() - await page.getByRole('button', { name: 'Save' }).click() - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - await page.getByRole('button', { name: 'Open expandable row' }).last().click() - await page.getByLabel('Manufacturer').fill('Audi') - await page.getByLabel('Model').fill('e-tron') - await page.getByLabel('Color (optional)').fill('Black') - await page.getByTestId('form-submit').click() - await expect(page.getByRole('alert')).toHaveText(['Document updated']) - await page.getByRole('button', { name: 'close', exact: true }).click() + await test.step('Add a new car by using expand', async () => { + await page.getByRole('button', { name: 'Add row' }).click() + await page.getByRole('button', { name: 'Save' }).click() + await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() + await page + .getByRole('button', { name: 'Open expandable row' }) + .last() + .click() + await page.getByLabel('Manufacturer').fill('Audi') + await page.getByLabel('Model').fill('e-tron') + await page.getByLabel('Color (optional)').fill('Black') + await page.getByTestId('form-submit').click() + await expect(page.getByRole('alert')).toHaveText(['Document updated']) + await page.getByRole('button', { name: 'close', exact: true }).click() - //Currently we need to reload application to view saved values... - await page.reload() - await navigate() - await expect(page.getByText('1 - 2 of 2')).toBeVisible() - await expect(page.getByText('Audi')).toBeVisible() - await expect(page.getByText('e-tron')).toBeVisible() - await expect(page.getByText('Black')).toBeVisible() + //Currently we need to reload application to view saved values... + await page.reload() + await navigate() + await expect(page.getByText('1 - 2 of 2')).toBeVisible() + await expect(page.getByText('Audi')).toBeVisible() + await expect(page.getByText('e-tron')).toBeVisible() + await expect(page.getByText('Black')).toBeVisible() + }) - //Open table item and edit - await page.getByRole('button', { name: 'Open', exact: true }).last().click() - await page.getByLabel('Manufacturer').fill('Polestar') - await page.getByLabel('Model').fill('2023') - await page.getByLabel('Color (optional)').fill('Grey') - await page.getByTestId('form-submit').click() - await page.getByLabel('Close Audi').click() - await expect(page.getByText('name')).toBeVisible() + await test.step('Open table item and edit', async () => { + await page.getByRole('button', { name: 'Open', exact: true }).last().click() + await page.getByLabel('Manufacturer').fill('Polestar') + await page.getByLabel('Model').fill('2023') + await page.getByLabel('Color (optional)').fill('Grey') + await page.getByTestId('form-submit').click() + await page.getByLabel('Close Audi').click() + await expect(page.getByText('name')).toBeVisible() - //Currently we need to reload application to view saved values... - await page.reload() - await navigate() - await expect(page.getByText('1 - 2 of 2')).toBeVisible() - await expect(page.getByText('Polestar')).toBeVisible() - await expect(page.getByText('2023')).toBeVisible() - await expect(page.getByText('Grey')).toBeVisible() + //Currently we need to reload application to view saved values... + await page.reload() + await navigate() + await expect(page.getByText('1 - 2 of 2')).toBeVisible() + await expect(page.getByText('Polestar')).toBeVisible() + await expect(page.getByText('2023')).toBeVisible() + await expect(page.getByText('Grey')).toBeVisible() + }) - //Move table item up - await expect(page.locator('tr').nth(1)).toContainText('Volvo') - await expect(page.locator('tr').nth(2)).toContainText('Polestar') - await page.getByRole('button', { name: 'Move row up' }).last().click() - await page.getByRole('button', { name: 'Save' }).click() - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - await page.reload() - await navigate() - await expect(page.locator('tr').nth(1)).toContainText('Polestar') - await expect(page.locator('tr').nth(2)).toContainText('Volvo') + await test.step('Move table item up', async () => { + await expect(page.locator('tr').nth(1)).toContainText('Volvo') + await expect(page.locator('tr').nth(2)).toContainText('Polestar') + await page.getByRole('button', { name: 'Move row up' }).last().click() + await page.getByRole('button', { name: 'Save' }).click() + await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() + await page.reload() + await navigate() + await expect(page.locator('tr').nth(1)).toContainText('Polestar') + await expect(page.locator('tr').nth(2)).toContainText('Volvo') + }) - //Move table item down - await page.getByRole('button', { name: 'Move row down' }).first().click() - await page.getByRole('button', { name: 'Save' }).click() - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - await page.reload() - await navigate() - await expect(page.locator('tr').nth(1)).toContainText('Volvo') - await expect(page.locator('tr').nth(2)).toContainText('Polestar') + await test.step('Move table item down', async () => { + await page.getByRole('button', { name: 'Move row down' }).first().click() + await page.getByRole('button', { name: 'Save' }).click() + await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() + await page.reload() + await navigate() + await expect(page.locator('tr').nth(1)).toContainText('Volvo') + await expect(page.locator('tr').nth(2)).toContainText('Polestar') + }) - //Delete a car from the table - await page.getByRole('button', { name: 'Delete row' }).last().click() - await page.getByRole('button', { name: 'Save' }).click() - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - await page.reload() - await navigate() - await expect(page.getByText('1 - 1 of 1')).toBeVisible() + await test.step('Delete a car from the table', async () => { + await page.getByRole('button', { name: 'Delete row' }).last().click() + await page.getByRole('button', { name: 'Save' }).click() + await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() + await page.reload() + await navigate() + await expect(page.getByText('1 - 1 of 1')).toBeVisible() + }) - //Adding several cars to test pagination - await page.locator('#rowsPerPage').selectOption('5') - await expect(page.getByRole('button', { name: 'Next page' })).toBeDisabled() - await page.getByRole('button', { name: 'Add row' }).click() - await expect(page.getByText('1 - 2 of 2')).toBeVisible() - await page.getByRole('button', { name: 'Add row' }).click() - await expect(page.getByText('1 - 3 of 3')).toBeVisible() - await page.getByRole('button', { name: 'Add row' }).click() - await expect(page.getByText('1 - 4 of 4')).toBeVisible() - await page.getByRole('button', { name: 'Add row' }).click() - await expect(page.getByText('1 - 5 of 5')).toBeVisible() - await page.getByRole('button', { name: 'Add row' }).click() - await expect(page.getByText('1 - 5 of 6')).toBeVisible() - await page.getByRole('button', { name: 'Save' }).click() - await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() - await page.getByRole('button', { name: 'Next page' }).click() - await expect(page.getByText('6 - 6 of 6')).toBeVisible() - await expect(page.getByRole('button', { name: 'Next page' })).toBeDisabled() - await page.getByRole('button', { name: 'Previous page' }).click() - await expect(page.getByText('1 - 5 of 6')).toBeVisible() - await expect( - page.getByRole('button', { name: 'Previous page' }) - ).toBeDisabled() + await test.step('Adding several cars to test pagination', async () => { + await page.locator('#rowsPerPage').selectOption('5') + await expect(page.getByRole('button', { name: 'Next page' })).toBeDisabled() + await page.getByRole('button', { name: 'Add row' }).click() + await expect(page.getByText('1 - 2 of 2')).toBeVisible() + await page.getByRole('button', { name: 'Add row' }).click() + await expect(page.getByText('1 - 3 of 3')).toBeVisible() + await page.getByRole('button', { name: 'Add row' }).click() + await expect(page.getByText('1 - 4 of 4')).toBeVisible() + await page.getByRole('button', { name: 'Add row' }).click() + await expect(page.getByText('1 - 5 of 5')).toBeVisible() + await page.getByRole('button', { name: 'Add row' }).click() + await expect(page.getByText('1 - 5 of 6')).toBeVisible() + await page.getByRole('button', { name: 'Save' }).click() + await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled() + await page.getByRole('button', { name: 'Next page' }).click() + await expect(page.getByText('6 - 6 of 6')).toBeVisible() + await expect(page.getByRole('button', { name: 'Next page' })).toBeDisabled() + await page.getByRole('button', { name: 'Previous page' }).click() + await expect(page.getByText('1 - 5 of 6')).toBeVisible() + await expect( + page.getByRole('button', { name: 'Previous page' }) + ).toBeDisabled() + }) }) diff --git a/e2e/tests/plugin-view_selector-car_garage.spec.ts b/e2e/tests/plugin-view_selector-car_garage.spec.ts index c927a41bb..f843a96cc 100644 --- a/e2e/tests/plugin-view_selector-car_garage.spec.ts +++ b/e2e/tests/plugin-view_selector-car_garage.spec.ts @@ -1,143 +1,164 @@ import { expect, test } from '@playwright/test' test('View selector - car garage', async ({ page }) => { - // Open self and verify page content and the sidebar: - await page.goto('http://localhost:3000/') - await page.getByRole('button', { name: 'DemoDataSource' }).click() - await page.getByRole('button', { name: 'plugins' }).click() - await page.getByRole('button', { name: 'view_selector' }).click() - await page.getByRole('button', { name: 'car_garage' }).click() - await page.getByRole('button', { name: 'carGarage' }).click() - await expect(page.getByLabel('Name')).toHaveValue('CarGarage') - await expect(page.getByLabel('Description')).toHaveValue( - 'Here you will find detailed information about the cars in our garage' - ) + await test.step('Open self and verify page content and the sidebar', async () => { + await page.goto('http://localhost:3000/') + await page.getByRole('button', { name: 'DemoDataSource' }).click() + await page.getByRole('button', { name: 'plugins' }).click() + await page.getByRole('button', { name: 'view_selector' }).click() + await page.getByRole('button', { name: 'car_garage' }).click() + await page.getByRole('button', { name: 'carGarage' }).click() + await expect(page.getByLabel('Name')).toHaveValue('CarGarage') + await expect(page.getByLabel('Description')).toHaveValue( + 'Here you will find detailed information about the cars in our garage' + ) + }) - // Collapse and expand sidebar: - await page.getByRole('tab', { name: 'Self' }).click() - await page.getByRole('button', { name: 'Collapse' }).click() - await expect(page.getByRole('tab', { name: 'Self' })).not.toBeVisible() - await expect(page.getByRole('tab', { name: 'Audi' })).not.toBeVisible() - await expect(page.getByRole('tab', { name: 'Volvo' })).not.toBeVisible() - await page.getByRole('tab').nth(1).click() - await expect(page.getByRole('tabpanel').locator('#name')).toHaveValue('Audi') - await page.getByRole('tab').first().click() - await expect(page.getByLabel('Name')).toHaveValue('CarGarage') - await page.getByRole('button', { name: 'Expand' }).click() - await expect(page.getByRole('tab', { name: 'Self' })).toBeVisible() - await expect(page.getByRole('tab', { name: 'Audi' })).toBeVisible() - await expect(page.getByRole('tab', { name: 'Volvo' })).toBeVisible() + await test.step('Collapse and expand sidebar', async () => { + await page.getByRole('tab', { name: 'Self' }).click() + await page.getByRole('button', { name: 'Collapse' }).click() + await expect(page.getByRole('tab', { name: 'Self' })).not.toBeVisible() + await expect(page.getByRole('tab', { name: 'Audi' })).not.toBeVisible() + await expect(page.getByRole('tab', { name: 'Volvo' })).not.toBeVisible() + await page.getByRole('tab').nth(1).click() + await expect(page.getByRole('tabpanel').locator('#name')).toHaveValue( + 'Audi' + ) + await page.getByRole('tab').first().click() + await expect(page.getByLabel('Name')).toHaveValue('CarGarage') + await page.getByRole('button', { name: 'Expand' }).click() + await expect(page.getByRole('tab', { name: 'Self' })).toBeVisible() + await expect(page.getByRole('tab', { name: 'Audi' })).toBeVisible() + await expect(page.getByRole('tab', { name: 'Volvo' })).toBeVisible() + }) - // Open a car and verify that tabs opens within the car: - await page.getByRole('tab', { name: 'Audi' }).click() - await expect(page.getByRole('tab', { name: 'Home' })).toBeVisible() + await test.step('Open a car and verify that tabs opens within the car', async () => { + await page.getByRole('tab', { name: 'Audi' }).click() + await expect(page.getByRole('tab', { name: 'Home' })).toBeVisible() - await expect(page.getByRole('tabpanel').locator('#name')).toHaveValue('Audi') + await expect(page.getByRole('tabpanel').locator('#name')).toHaveValue( + 'Audi' + ) - await page - .getByRole('group', { name: 'View owner details and history' }) - .getByRole('button', { name: 'Open in tab' }) - .click() - await expect( - page.getByRole('tab', { name: 'Owner details' }) - ).toHaveAttribute('aria-selected', 'true') - await expect(page.getByRole('tab', { name: 'Owner history' })).toBeVisible() - await expect(page.locator('#name').nth(2)).toHaveValue('Aiden') - await page.getByText('Owner history').click() - await expect( - page.getByRole('tab', { name: 'group Owner history' }) - ).toHaveAttribute('aria-selected', 'true') + await page + .getByRole('group', { name: 'View owner details and history' }) + .getByRole('button', { name: 'Open in tab' }) + .click() + await expect( + page.getByRole('tab', { name: 'Owner details' }) + ).toHaveAttribute('aria-selected', 'true') + await expect(page.getByRole('tab', { name: 'Owner history' })).toBeVisible() + await expect(page.locator('#name').nth(2)).toHaveValue('Aiden') + await page.getByText('Owner history').click() + await expect( + page.getByRole('tab', { name: 'group Owner history' }) + ).toHaveAttribute('aria-selected', 'true') + }) - //Add earlier owner: - await page.getByRole('button', { name: 'Add' }).click() - await page.getByRole('textbox').last().fill(' Joanna') - await page.getByRole('button', { name: 'Submit' }).click() - await expect(page.getByRole('alert')).toHaveText(['Document updated']) - await page.getByRole('button', { name: 'close', exact: true }).click() + await test.step('Add earlier owner', async () => { + await page.getByRole('button', { name: 'Add' }).click() + await page.getByRole('textbox').last().fill(' Joanna') + await page.getByRole('button', { name: 'Submit' }).click() + await expect(page.getByRole('alert')).toHaveText(['Document updated']) + await page.getByRole('button', { name: 'close', exact: true }).click() + }) - // Select "home" and then open "technical". Verify that both owner and techincal tabs are open and selectable. Check also sub-tabs - await page.getByRole('tab', { name: 'Home' }).click() - await page - .getByRole('group', { name: 'View technical information' }) - .getByRole('button', { name: 'Open in tab' }) - .click() - await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( - 'aria-selected', - 'true' - ) - await expect(page.getByRole('tab', { name: 'EU control' })).toHaveAttribute( - 'aria-selected', - 'true' - ) - await expect(page.getByRole('tab', { name: 'car Dimensions' })).toBeVisible() + await test.step('Verify tabs are open and selectable', async () => { + await page.getByRole('tab', { name: 'Home' }).click() + await page + .getByRole('group', { name: 'View technical information' }) + .getByRole('button', { name: 'Open in tab' }) + .click() + await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( + 'aria-selected', + 'true' + ) + await expect(page.getByRole('tab', { name: 'EU control' })).toHaveAttribute( + 'aria-selected', + 'true' + ) + await expect( + page.getByRole('tab', { name: 'car Dimensions' }) + ).toBeVisible() - await page - .getByTestId('nextControl') - .getByTestId('form-textfield') - .fill('2025-06-31') - await page.getByRole('button', { name: 'Submit' }).click() - await expect(page.getByRole('alert')).toHaveText(['Document updated']) - await page.getByRole('button', { name: 'close', exact: true }).first().click() - await page.getByRole('tab', { name: 'Dimensions' }).click() - await page.getByTestId('length').getByTestId('form-textfield').fill('4250') - await page.getByRole('button', { name: 'Submit' }).click() - await expect(page.getByRole('alert')).toHaveText(['Document updated']) - await page.getByRole('button', { name: 'close', exact: true }).first().click() + await page + .getByTestId('nextControl') + .getByTestId('form-textfield') + .fill('2025-06-31') + await page.getByRole('button', { name: 'Submit' }).click() + await expect(page.getByRole('alert')).toHaveText(['Document updated']) + await page + .getByRole('button', { name: 'close', exact: true }) + .first() + .click() + await page.getByRole('tab', { name: 'Dimensions' }).click() + await page.getByTestId('length').getByTestId('form-textfield').fill('4250') + await page.getByRole('button', { name: 'Submit' }).click() + await expect(page.getByRole('alert')).toHaveText(['Document updated']) + await page + .getByRole('button', { name: 'close', exact: true }) + .first() + .click() + }) - // Open another car and se that no other tabs than "home" is open: - await page.getByRole('tab', { name: 'Volvo' }).click() - await expect(page.getByRole('tab', { name: 'Home' })).toBeVisible() - await expect( - page.getByRole('tab', { name: 'Owner', exact: true }) - ).not.toBeVisible() - await expect( - page.getByRole('tab', { name: 'Owner details' }) - ).not.toBeVisible() - await expect( - page.getByRole('tab', { name: 'Owner history' }) - ).not.toBeVisible() + await test.step('Open another car and see that no other tabs than "home" is open', async () => { + await page.getByRole('tab', { name: 'Volvo' }).click() + await expect(page.getByRole('tab', { name: 'Home' })).toBeVisible() + await expect( + page.getByRole('tab', { name: 'Owner', exact: true }) + ).not.toBeVisible() + await expect( + page.getByRole('tab', { name: 'Owner details' }) + ).not.toBeVisible() + await expect( + page.getByRole('tab', { name: 'Owner history' }) + ).not.toBeVisible() + }) - // Testing that tabs are still open for the first car when going back and forth: - await page.getByRole('tab', { name: 'Audi' }).click() - await expect(page.getByRole('tab', { name: 'Owner' })).toBeVisible() - await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( - 'aria-selected', - 'true' - ) - await expect(page.getByRole('tab', { name: 'EU control' })).toBeVisible() - await expect(page.getByRole('tab', { name: 'Dimensions' })).toHaveAttribute( - 'aria-selected', - 'true' - ) + await test.step('Testing that tabs are still open for the first car when going back and forth', async () => { + await page.getByRole('tab', { name: 'Audi' }).click() + await expect(page.getByRole('tab', { name: 'Owner' })).toBeVisible() + await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( + 'aria-selected', + 'true' + ) + await expect(page.getByRole('tab', { name: 'EU control' })).toBeVisible() + await expect(page.getByRole('tab', { name: 'Dimensions' })).toHaveAttribute( + 'aria-selected', + 'true' + ) + }) - // Testing that saving one car does not ovveride the other car: - await page.getByRole('tab', { name: 'Volvo' }).click() - await page - .getByRole('group', { name: 'View technical information' }) - .getByRole('button', { name: 'Open in tab' }) - .click() + await test.step('Testing that saving one car does not override the other car', async () => { + await page.getByRole('tab', { name: 'Volvo' }).click() + await page + .getByRole('group', { name: 'View technical information' }) + .getByRole('button', { name: 'Open in tab' }) + .click() - await expect( - page.getByTestId('nextControl').getByRole('textbox') - ).toHaveValue('2025-06-01') - await page.getByRole('tab', { name: 'Dimensions' }).click() - await expect(page.getByTestId('length').getByRole('textbox')).toHaveValue( - '4500' - ) - await page.getByRole('tab', { name: 'Home' }).click() - await page - .getByRole('group', { name: 'View owner details and history' }) - .getByRole('button', { name: 'Open in tab' }) - .click() - await page.getByRole('tab', { name: 'Owner history' }).click() - await expect(page.getByRole('textbox').first()).toHaveValue('Jack') - await expect(page.getByRole('textbox').last()).toHaveValue('Maria') + await expect( + page.getByTestId('nextControl').getByRole('textbox') + ).toHaveValue('2025-06-01') + await page.getByRole('tab', { name: 'Dimensions' }).click() + await expect(page.getByTestId('length').getByRole('textbox')).toHaveValue( + '4500' + ) + await page.getByRole('tab', { name: 'Home' }).click() + await page + .getByRole('group', { name: 'View owner details and history' }) + .getByRole('button', { name: 'Open in tab' }) + .click() + await page.getByRole('tab', { name: 'Owner history' }).click() + await expect(page.getByRole('textbox').first()).toHaveValue('Jack') + await expect(page.getByRole('textbox').last()).toHaveValue('Maria') + }) - // Close tabs: - await page.getByRole('button', { name: 'Close Owner' }).click() - await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( - 'aria-selected', - 'true' - ) - await expect(page.getByRole('tab', { name: 'Owner' })).not.toBeVisible() + await test.step('Close tabs', async () => { + await page.getByRole('button', { name: 'Close Owner' }).click() + await expect(page.getByRole('tab', { name: 'Technical' })).toHaveAttribute( + 'aria-selected', + 'true' + ) + await expect(page.getByRole('tab', { name: 'Owner' })).not.toBeVisible() + }) })