From ab60bf8dff46c05bc67194c3cc2a5fa753916609 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 5 Mar 2024 05:02:36 +0900
Subject: [PATCH] fix(ui): escape html in error diff (#5325)

---
 packages/ui/client/components/views/ViewReportError.vue | 3 ++-
 test/ui/fixtures/error.test.ts                          | 6 ++++++
 test/ui/test/html-report.spec.ts                        | 8 +++++++-
 test/ui/test/ui.spec.ts                                 | 8 +++++++-
 test/ui/vitest.config.ts                                | 3 +++
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 test/ui/fixtures/error.test.ts

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>
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)
 
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,
+    },
   },
 })