feat(ui): create reference/actual slider for toMatchScreenshot failures

Author: macarie

packages/browser/src/client/tester/expect/toMatchScreenshot.ts

@@ -1,4 +1,5 @@
 import type { AsyncExpectationResult, MatcherState } from '@vitest/expect'
+import type { TestAnnotation } from 'vitest'
 import type { ScreenshotMatcherOptions } from '../../../../context'
 import type { ScreenshotMatcherArguments, ScreenshotMatcherOutput } from '../../../shared/screenshotMatcher/types'
 import type { Locator } from '../locators'
@@ -69,21 +70,50 @@ export default async function toMatchScreenshot(
   if (result.pass === false && 'context' in currentTest) {
     const { annotate } = currentTest.context
 
-    const annotations: ReturnType<typeof annotate>[] = []
+    const attachments: TestAnnotation['attachments'] = []
 
     if (result.reference) {
-      annotations.push(annotate('Reference screenshot', { path: result.reference }))
+      attachments.push({
+        name: 'reference',
+        path: result.reference.path,
+        metadata: {
+          width: result.reference.metadata.width,
+          height: result.reference.metadata.height,
+        },
+      })
     }
 
     if (result.actual) {
-      annotations.push(annotate('Actual screenshot', { path: result.actual }))
+      attachments.push({
+        name: 'actual',
+        path: result.actual.path,
+        metadata: {
+          width: result.actual.metadata.width,
+          height: result.actual.metadata.height,
+        },
+      })
     }
 
     if (result.diff) {
-      annotations.push(annotate('Diff', { path: result.diff }))
+      attachments.push({
+        name: 'diff',
+        path: result.diff,
+      })
     }
 
-    await Promise.all(annotations)
+    if (attachments.length > 0) {
+      await annotate({
+        type: 'assertion-artifact',
+        title: 'Visual Regression',
+        message: result.message,
+        attachments,
+        metadata: {
+          'internal:toMatchScreenshot': {
+            kind: 'visual-regression',
+          },
+        },
+      })
+    }
   }
 
   return {
@@ -96,14 +126,15 @@ export default async function toMatchScreenshot(
             '',
             result.message,
             result.reference
-              ? `\nReference screenshot:\n  ${this.utils.EXPECTED_COLOR(result.reference)}`
+              ? `\nReference screenshot:\n  ${this.utils.EXPECTED_COLOR(result.reference.path)}`
               : null,
             result.actual
-              ? `\nActual screenshot:\n  ${this.utils.RECEIVED_COLOR(result.actual)}`
+              ? `\nActual screenshot:\n  ${this.utils.RECEIVED_COLOR(result.actual.path)}`
               : null,
             result.diff
               ? this.utils.DIM_COLOR(`\nDiff image:\n  ${result.diff}`)
               : null,
+            '',
           ]
             .filter(element => element !== null)
             .join('\n'),

packages/browser/src/node/commands/screenshotMatcher/index.ts

@@ -55,7 +55,7 @@ export const screenshotMatcher: BrowserCommand<
   if (value === null || value.actual === null) {
     return {
       pass: false,
-      reference: referenceFile && paths.reference,
+      reference: referenceFile && { path: paths.reference, metadata: reference!.metadata },
       actual: null,
       diff: null,
       message: `Could not capture a stable screenshot within ${timeout}ms.`,
@@ -80,7 +80,7 @@ export const screenshotMatcher: BrowserCommand<
     if (updateSnapshot !== 'all') {
       return {
         pass: false,
-        reference: referencePath,
+        reference: { path: referencePath, metadata: value.actual.metadata },
         actual: null,
         diff: null,
         message: `No existing reference screenshot found${
@@ -143,8 +143,8 @@ export const screenshotMatcher: BrowserCommand<
   //  - fail
   return {
     pass: false,
-    reference: paths.reference,
-    actual: paths.diffs.actual,
+    reference: { path: paths.reference, metadata: reference.metadata },
+    actual: { path: paths.diffs.actual, metadata: value.actual.metadata },
     diff: finalResult.diff && paths.diffs.diff,
     message: `Screenshot does not match the stored reference.${
       finalResult.message === null

packages/browser/src/shared/screenshotMatcher/types.ts

@@ -12,11 +12,13 @@ export type ScreenshotMatcherArguments<
     },
 ]
 
+interface ScreenshotData { path: string; metadata: { width: number; height: number } }
+
 export type ScreenshotMatcherOutput = Promise<
   {
     pass: false
-    reference: string | null
-    actual: string | null
+    reference: ScreenshotData | null
+    actual: ScreenshotData | null
     diff: string | null
     message: string
   }

packages/ui/client/components/AnnotationAttachmentImage.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
 import type { TestAnnotation } from 'vitest'
 import { computed } from 'vue'
-import { getAttachmentUrl, isExternalAttachment } from '~/composables/attachments'
+import { internalOrExternalUrl, isExternalAttachment } from '~/composables/attachments'
 
 const props = defineProps<{
   annotation: TestAnnotation
 }>()
 
-const href = computed<string>(() => {
-  const attachment = props.annotation.attachment!
-  const potentialUrl = attachment.path || attachment.body
-  if (typeof potentialUrl === 'string' && (potentialUrl.startsWith('http://') || potentialUrl.startsWith('https://'))) {
-    return potentialUrl
-  }
-  else {
-    return getAttachmentUrl(attachment)
-  }
-})
+const href = computed<string>(() => internalOrExternalUrl(props.annotation.attachment!))
 </script>
 
 <template>

packages/ui/client/components/SmallTabs.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { provide, ref, useId } from 'vue'
+import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
+
+const activeTab = ref<string | null>(null)
+const tabs = ref<{ name: string; title: string }[]>([])
+
+function setActive(key: string) {
+  activeTab.value = key
+}
+
+const id = useId()
+
+provide(SMALL_TABS_CONTEXT, {
+  id,
+  activeTab,
+  registerTab: (tab) => {
+    if (!tabs.value.some(({ name }) => name === tab.name)) {
+      tabs.value.push(tab)
+    }
+
+    if (tabs.value.length === 1) {
+      setActive(tab.name)
+    }
+  },
+  unregisterTab: (tab) => {
+    const index = tabs.value.findIndex(({ name }) => name === tab.name)
+
+    if (index > -1) {
+      tabs.value.splice(index, 1)
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center gap-3"
+  >
+    <div
+      role="tablist"
+      aria-orientation="horizontal"
+      class="flex gap-4"
+    >
+      <button
+        v-for="tab in tabs"
+        :id="idFor.tab(tab.name, id)"
+        :key="tab.name"
+        role="tab"
+        :aria-selected="activeTab === tab.name"
+        :aria-controls="idFor.tabpanel(tab.name, id)"
+        type="button"
+        class="aria-[selected=true]:underline underline-offset-4"
+        @click="setActive(tab.name)"
+      >
+        {{ tab.title }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>

packages/ui/client/components/SmallTabsPane.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SmallTabsConfig } from '~/composables/small-tabs'
+import { computed, inject, onMounted, onUnmounted } from 'vue'
+import { idFor, SMALL_TABS_CONTEXT } from '~/composables/small-tabs'
+
+interface TabPaneProps extends SmallTabsConfig {}
+
+const props = defineProps<TabPaneProps>()
+
+const context = inject(SMALL_TABS_CONTEXT)
+
+if (!context) {
+  throw new Error('TabPane must be used within Tabs')
+}
+
+const isActive = computed(() => context.activeTab.value === props.name)
+
+onMounted(() => {
+  context.registerTab(props)
+})
+
+onUnmounted(() => {
+  context.unregisterTab(props)
+})
+</script>
+
+<template>
+  <div
+    :id="idFor.tabpanel(props.name, context.id)"
+    role="tabpanel"
+    :aria-labelledby="idFor.tab(props.name, context.id)"
+    :hidden="!isActive" class="max-w-full"
+  >
+    <slot />
+  </div>
+</template>

packages/ui/client/components/VisualRegression.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { TestAnnotation } from 'vitest'
+import { computed } from 'vue'
+import SmallTabs from './SmallTabs.vue'
+import SmallTabsPane from './SmallTabsPane.vue'
+import VisualRegressionImage from './VisualRegressionImage.vue'
+import VisualRegressionSlider from './VisualRegressionSlider.vue'
+
+const { annotation } = defineProps<{
+  annotation: TestAnnotation
+}>()
+
+if (annotation.metadata?.['internal:toMatchScreenshot'] === undefined) {
+  throw new Error('VisualRegression needs "internal:toMatchScreenshot" to work')
+}
+
+if (!Array.isArray(annotation.attachments) || annotation.attachments.length === 0) {
+  throw new Error('VisualRegression needs at least one attachment to work')
+}
+
+const groups = computed(() => ({
+  diff: annotation.attachments?.find(attachment => attachment.name === 'diff'),
+  reference: annotation.attachments?.find(attachment => attachment.name === 'reference'),
+  actual: annotation.attachments?.find(attachment => attachment.name === 'actual'),
+}))
+</script>
+
+<template>
+  <SmallTabs>
+    <SmallTabsPane v-if="groups.diff" name="diff" title="Diff">
+      <VisualRegressionImage :attachment="groups.diff" />
+    </SmallTabsPane>
+    <SmallTabsPane v-if="groups.reference" name="reference" title="Reference">
+      <VisualRegressionImage :attachment="groups.reference" />
+    </SmallTabsPane>
+    <SmallTabsPane v-if="groups.actual" name="actual" title="Actual">
+      <VisualRegressionImage :attachment="groups.actual" />
+    </SmallTabsPane>
+    <SmallTabsPane v-if="groups.reference && groups.actual" name="slider" title="Slider">
+      <VisualRegressionSlider :actual="groups.actual" :reference="groups.reference" />
+    </SmallTabsPane>
+  </SmallTabs>
+</template>

packages/ui/client/components/VisualRegressionImage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TestArtifactAttachment } from '@vitest/runner/types/tasks'
+import { computed } from 'vue'
+import { internalOrExternalUrl, isExternalAttachment } from '~/composables/attachments'
+import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
+
+const { attachment } = defineProps<{
+  attachment: TestArtifactAttachment
+}>()
+
+const href = computed(() => internalOrExternalUrl(attachment))
+</script>
+
+<template>
+  <VisualRegressionImageContainer>
+    <a
+      target="_blank"
+      :href="href"
+      :referrerPolicy="isExternalAttachment(attachment) ? 'no-referrer' : undefined"
+    >
+      <img :src="href">
+    </a>
+  </VisualRegressionImageContainer>
+</template>

packages/ui/client/components/VisualRegressionImageContainer.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const checkeredBackground = `url("${
+  CSS.escape('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".05"/></svg>')
+}")`
+</script>
+
+<template>
+  <div
+    class="max-w-full w-fit mx-auto bg-[size:16px_16px] bg-[#fafafa] dark:bg-[#3a3a3a] bg-center p-4 rounded user-select-none outline-0 outline-black dark:outline-white outline-offset-4 outline-solid focus-within:has-focus-visible:outline-2"
+    :style="{ backgroundImage: checkeredBackground }"
+  >
+    <slot />
+  </div>
+</template>