refactor(e2e): utilize test.step in more tests

equinor · Oct 31, 2023 · 3eadd15 · 3eadd15
1 parent 3465fc7
commit 3eadd15
Show file tree

Hide file tree

Showing 3 changed files with 300 additions and 263 deletions.
diff --git 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
@@ -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()
+  })
 })