fix(ui): escape html in error diff (#5325)

Author: hi-ogawa

packages/ui/client/components/views/ViewReportError.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ErrorWithDiff } from 'vitest'
 import { openInEditor, shouldOpenInEditor } from '~/composables/error'
+import { escapeHtml } from '~/utils/escape';
 
 const props = defineProps<{
   root: string
@@ -20,7 +21,7 @@ const isDiffShowable = computed(() => {
   return !!props.error?.diff
 })
 
-const diff = computed(() => props.error.diff ? filter.value.toHtml(props.error.diff) : undefined)
+const diff = computed(() => props.error.diff ? filter.value.toHtml(escapeHtml(props.error.diff)) : undefined)
 </script>
 
 <template>

test/ui/fixtures/error.test.ts

@@ -0,0 +1,6 @@
+import { expect, it } from "vitest"
+
+// https://github.com/vitest-dev/vitest/issues/5321
+it('escape html in error diff', () => {
+  expect('<style>* {border: 2px solid green};</style>').toBe("")
+})

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

@@ -32,7 +32,7 @@ test.describe('html report', () => {
     await page.goto(pageUrl)
 
     // dashbaord
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('5 Pass 0 Fail 5 Total')
+    await expect(page.locator('[aria-labelledby=tests]')).toContainText('5 Pass 1 Fail 6 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
@@ -64,4 +64,10 @@ test.describe('html report', () => {
     await page.getByLabel('Show coverage').click()
     await page.frameLocator('#vitest-ui-coverage').getByRole('heading', { name: 'All files' }).click()
   })
+
+  test('error', async ({ page }) => {
+    await page.goto(pageUrl)
+    await page.getByText('fixtures/error.test.ts').click()
+    await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
+  })
 })

test/ui/test/ui.spec.ts

@@ -23,7 +23,7 @@ test.describe('ui', () => {
     await page.goto(pageUrl)
 
     // dashbaord
-    await expect(page.locator('[aria-labelledby=tests]')).toContainText('5 Pass 0 Fail 5 Total')
+    await expect(page.locator('[aria-labelledby=tests]')).toContainText('5 Pass 1 Fail 6 Total')
 
     // unhandled errors
     await expect(page.getByTestId('unhandled-errors')).toContainText(
@@ -63,6 +63,12 @@ test.describe('ui', () => {
     await page.getByText('/(?<char>\\w)/').click()
   })
 
+  test('error', async ({ page }) => {
+    await page.goto(pageUrl)
+    await page.getByText('fixtures/error.test.ts').click()
+    await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
+  })
+
   test('file-filter', async ({ page }) => {
     await page.goto(pageUrl)
 

test/ui/vitest.config.ts

@@ -4,5 +4,8 @@ export default defineConfig({
   test: {
     dir: './fixtures',
     environment: 'happy-dom',
+    coverage: {
+      reportOnFailure: true,
+    },
   },
 })