test(avatar): refactor to use the util fn in pw tests

Author: carwack

packages/vue/src/components/_tests/avatar/avatar.pw.test.ts

@@ -1,91 +1,56 @@
-import AxeBuilder from '@axe-core/playwright'
 import { expect, test } from '@playwright/test'
-import { gotoStory } from '../utils'
+import { gotoStory, testA11yWithAttachedResults } from '../utils'
 
 test.describe('basic variant', () => {
-  test('has avatar image', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await gotoStory('avatar', 'basic', page)
-
     await page.getByAltText('avatar').waitFor()
-
+  })
+  test('has avatar image', async ({ page }) => {
     expect(page.getByAltText('avatar')).toHaveAttribute(
       'src',
       'https://avatars.githubusercontent.com/u/1846056?v=4',
     )
-
     expect(page).toHaveScreenshot()
   })
   test('has no a11y violations', async ({ page }, testInfo) => {
-    await gotoStory('avatar', 'basic', page)
-
-    await page.getByAltText('avatar').waitFor()
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .include('[data-scope="avatar"][data-part="root"]')
-      .analyze()
-
-    await testInfo.attach('accessibility-scan-results', {
-      body: JSON.stringify(accessibilityScanResults, null, 2),
-      contentType: 'application/json',
-    })
-
+    const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar')
     expect(accessibilityScanResults.violations).toEqual([])
   })
 })
 
 test.describe('closed variant', () => {
-  test('displays avatar with name', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await gotoStory('avatar', 'closed', page)
-
     await page.getByAltText('Christian').waitFor()
+  })
+  test('displays avatar with name', async ({ page }) => {
     expect(page.getByAltText('Christian')).toHaveAttribute(
       'src',
       'https://avatars.githubusercontent.com/u/1846056?v=4',
     )
     expect(page).toHaveScreenshot()
   })
   test('has no a11y violations', async ({ page }, testInfo) => {
-    await gotoStory('avatar', 'closed', page)
-    await page.getByAltText('Christian').waitFor()
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .include('[data-scope="avatar"][data-part="root"]')
-      .analyze()
-
-    await testInfo.attach('accessibility-scan-results', {
-      body: JSON.stringify(accessibilityScanResults, null, 2),
-      contentType: 'application/json',
-    })
-
+    const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar')
     expect(accessibilityScanResults.violations).toEqual([])
   })
 })
 
 test.describe('root-provided variant', () => {
-  test('has avatar image', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await gotoStory('avatar', 'root-provider', page)
-
     await page.getByAltText('avatar').waitFor()
+  })
+  test('has avatar image', async ({ page }) => {
     expect(page.getByAltText('avatar')).toHaveAttribute(
       'src',
       'https://avatars.githubusercontent.com/u/1846056?v=4',
     )
     expect(page).toHaveScreenshot()
   })
   test('has no a11y violations', async ({ page }, testInfo) => {
-    await gotoStory('avatar', 'root-provider', page)
-
-    await page.getByAltText('avatar').waitFor()
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .include('[data-scope="avatar"][data-part="root"]')
-      .analyze()
-
-    await testInfo.attach('accessibility-scan-results', {
-      body: JSON.stringify(accessibilityScanResults, null, 2),
-      contentType: 'application/json',
-    })
-
+    const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar')
     expect(accessibilityScanResults.violations).toEqual([])
   })
 })