From 2d369efb8ffa7fbc8bfa7dc47ce6e5c235586989 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sat, 2 Mar 2024 14:35:51 +0900
Subject: [PATCH 1/3] fix(ui): escape html in error diff

---
 packages/ui/client/components/views/ViewReportError.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/client/components/views/ViewReportError.vue b/packages/ui/client/components/views/ViewReportError.vue
index 9a9bf01d96a6..5a1de0a9fe2c 100644
--- a/packages/ui/client/components/views/ViewReportError.vue
+++ b/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>

From b04c8d1d70c2d636862aab68040c53c9848a4e82 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sat, 2 Mar 2024 14:58:42 +0900
Subject: [PATCH 2/3] test: add test

---
 test/ui/fixtures/error.test.ts   | 6 ++++++
 test/ui/test/html-report.spec.ts | 8 +++++++-
 test/ui/test/ui.spec.ts          | 8 +++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 test/ui/fixtures/error.test.ts

diff --git a/test/ui/fixtures/error.test.ts b/test/ui/fixtures/error.test.ts
new file mode 100644
index 000000000000..b2fa62d7a405
--- /dev/null
+++ b/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("")
+})
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index 71398fbf7d65..0fd7530b024d 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/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>')
+  })
 })
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 3245b1fc5274..a54e1a2c608d 100644
--- a/test/ui/test/ui.spec.ts
+++ b/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)
 

From 770a00dac85203be6abcd205e6bee39bdf63c08d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sat, 2 Mar 2024 15:08:09 +0900
Subject: [PATCH 3/3] test: enable coverage.reportOnFailure

---
 test/ui/vitest.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/ui/vitest.config.ts b/test/ui/vitest.config.ts
index 47a9163b7cbc..990367300149 100644
--- a/test/ui/vitest.config.ts
+++ b/test/ui/vitest.config.ts
@@ -4,5 +4,8 @@ export default defineConfig({
   test: {
     dir: './fixtures',
     environment: 'happy-dom',
+    coverage: {
+      reportOnFailure: true,
+    },
   },
 })