fix(ui): process artifact attachments when generating HTML reporter (#9472)

Author: macarie

packages/ui/node/reporter.ts

@@ -91,6 +91,14 @@ export default class HTMLReporter implements Reporter {
             promises.push(this.processAttachment(attachment))
           }
         })
+        task.artifacts.forEach((artifact) => {
+          const attachments = artifact.attachments
+          if (attachments) {
+            attachments.forEach((attachment) => {
+              promises.push(this.processAttachment(attachment))
+            })
+          }
+        })
       }
       else {
         task.tasks.forEach(processAttachments)

pnpm-lock.yaml

@@ -0,0 +1,16 @@
+import { test } from 'vitest'
+import { server } from 'vitest/browser'
+
+test('visual regression test', async ({ expect, onTestFinished }) => {
+  const screenshotName = 'visual-regression-screenshot.png'
+
+  onTestFinished(async () => {
+    if (server.config.snapshotOptions.updateSnapshot !== 'none') {
+      await server.commands.removeFile(`fixtures-browser/${screenshotName}`)
+    }
+  })
+
+  await expect(expect(document.body).toMatchScreenshot(screenshotName)).rejects.toThrowError(
+    'No existing reference screenshot found',
+  )
+})

test/ui/fixtures-browser/visual-regression.test.ts

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
+    "@vitest/browser-playwright": "workspace:*",
     "happy-dom": "latest",
     "vitest": "workspace:*"
   }

test/ui/package.json

@@ -66,7 +66,7 @@ test.describe('html report', () => {
     await page.goto(pageUrl)
 
     // dashboard
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('13 Pass 1 Fail 14 Total')
+    await expect(page.locator('[aria-labelledby=tests]')).toContainText('14 Pass 1 Fail 15 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
@@ -190,4 +190,23 @@ test.describe('html report', () => {
     await expect(annotations.last().getByRole('link')).toHaveAttribute('href', /data\/\w+/)
     await expect(annotations.nth(3).getByRole('link')).toHaveAttribute('href', /data\/\w+/)
   })
+
+  test('visual regression in the report tab', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    await test.step('attachments get processed', async () => {
+      const item = page.getByLabel('visual regression test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const artifact = page.getByRole('note')
+      await expect(artifact).toHaveCount(1)
+
+      await expect(artifact.getByRole('heading')).toContainText('Visual Regression')
+      await expect(artifact).toContainText('fixtures-browser/visual-regression.test.ts:13:3')
+      await expect(artifact.getByRole('tablist')).toHaveText('Reference')
+      await expect(artifact.getByRole('tabpanel').getByRole('link')).toHaveAttribute('href', /data\/\w+\.png/)
+      await expect(artifact.getByRole('tabpanel').getByRole('img')).toHaveAttribute('src', /data\/\w+\.png/)
+    })
+  })
 })

test/ui/test/html-report.spec.ts

@@ -70,7 +70,7 @@ test.describe('ui', () => {
     await page.goto(pageUrl)
 
     // dashboard
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('13 Pass 1 Fail 14 Total')
+    await expect(page.locator('[aria-labelledby=tests]')).toContainText('14 Pass 1 Fail 15 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
@@ -212,7 +212,7 @@ test.describe('ui', () => {
 
     // match all files when no filter
     await page.getByPlaceholder('Search...').fill('')
-    await page.getByText('PASS (5)').click()
+    await page.getByText('PASS (6)').click()
     await expect(page.getByTestId('details-panel').getByText('fixtures/sample.test.ts', { exact: true })).toBeVisible()
 
     // match nothing
@@ -289,6 +289,25 @@ test.describe('ui', () => {
     await expect(page.getByLabel(/fail/i)).not.toBeChecked()
     await expect(page.getByLabel(/skip/i)).not.toBeChecked()
   })
+
+  test('visual regression in the report tab', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    await test.step('attachments get processed', async () => {
+      const item = page.getByLabel('visual regression test')
+      await item.click({ force: true })
+      await page.getByTestId('btn-report').click({ force: true })
+
+      const artifact = page.getByRole('note')
+      await expect(artifact).toHaveCount(1)
+
+      await expect(artifact.getByRole('heading')).toContainText('Visual Regression')
+      await expect(artifact).toContainText('fixtures-browser/visual-regression.test.ts:13:3')
+      await expect(artifact.getByRole('tablist')).toHaveText('Reference')
+      await expect(artifact.getByRole('tabpanel').getByRole('link')).toHaveAttribute('href', /__vitest_attachment__\?path=.*?\.png/)
+      await expect(artifact.getByRole('tabpanel').getByRole('img')).toHaveAttribute('src', /__vitest_attachment__\?path=.*?\.png/)
+    })
+  })
 })
 
 test.describe('standalone', () => {

test/ui/test/ui.spec.ts

@@ -1,11 +1,37 @@
+import { resolve } from 'node:path'
+import { playwright } from '@vitest/browser-playwright'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    dir: './fixtures',
-    environment: 'happy-dom',
     coverage: {
       reportOnFailure: true,
     },
+    projects: [{
+      extends: true,
+      test: {
+        name: 'fixtures',
+        dir: './fixtures',
+        environment: 'happy-dom',
+      },
+    }, {
+      extends: true,
+      test: {
+        name: 'browser',
+        dir: './fixtures-browser',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright(),
+          instances: [{ browser: 'chromium' }],
+          screenshotFailures: false,
+          expect: {
+            toMatchScreenshot: {
+              resolveScreenshotPath: ({ root, testFileDirectory, arg, ext }) => resolve(root, testFileDirectory, `${arg}${ext}`),
+            },
+          },
+        },
+      },
+    }],
   },
 })