vitest.dev / vitest
[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite. vitest.dev
test testing-tools vite
12
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): render ANSI color codes in editor panel inline error widget (#10418)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: hi-ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

authored by

Copilot
copilot-swe-agent[bot]
hi-ogawa
Hiroshi Ogawa and committed by
GitHub (May 22, 2026, 8:55 AM +0200) 766b8d2f ac6971ca

+14 -5
+1 -1
test/ui/playwright.config.ts
··· 10 10 }, 11 11 ], 12 12 use: { 13 - trace: process.env.CI ? 'on-first-retry' : 'on', 13 + trace: process.env.CI ? 'on-first-retry' : undefined, 14 14 }, 15 15 forbidOnly: !!process.env.CI, 16 16 retries: process.env.CI ? 2 : 0,
+7
test/ui/test/ui.spec.ts
··· 391 391 392 392 await getExplorerItem(page, 'colored error message').click() 393 393 await expect(page.getByTestId('report')).toHaveText('Error: this-is-blue - /node/error.test.ts:12:17') 394 + 395 + // switch to Code tab and verify ANSI is rendered as HTML in the editor line widget 396 + await page.getByTestId('btn-code').click() 397 + await expect(page.getByTestId('editor').getByTestId('error-line-gadget')).toHaveText([ 398 + /AssertionError: expected/, 399 + /Error: this-is-blue/, 400 + ]) 394 401 } 395 402 396 403 async function testTagsFilter(page: Page) {
+6 -4
packages/ui/client/components/views/ViewEditor.vue
··· 9 9 import { client, config, isReport } from '~/composables/client' 10 10 import { finished } from '~/composables/client/state' 11 11 import { codemirrorRef } from '~/composables/codemirror' 12 - import { openInEditor } from '~/composables/error' 12 + import { isDark } from '~/composables/dark' 13 + import { createAnsiToHtmlFilter, openInEditor } from '~/composables/error' 13 14 import { columnNumber, lineNumber } from '~/composables/params' 14 15 import { 15 16 activeTraceView, ··· 18 19 isTraceViewEnabled, 19 20 selectActiveTraceStep, 20 21 } from '~/composables/trace-view' 22 + import { escapeHtml } from '~/utils/escape' 21 23 import CodeMirrorContainer from '../CodeMirrorContainer.vue' 22 24 23 25 const props = defineProps<{ ··· 225 227 return 226 228 } 227 229 const div = document.createElement('div') 230 + div.dataset.testid = 'error-line-gadget' 228 231 div.className = 'op80 flex gap-x-2 items-center' 229 232 const pre = document.createElement('pre') 230 233 pre.className = 'c-red-700 dark:c-red-400' 231 - pre.textContent = `${' '.repeat(stack.column)}^ ${e.name}: ${ 232 - e?.message || '' 233 - }` 234 + const filter = createAnsiToHtmlFilter(isDark.value) 235 + pre.innerHTML = `${' '.repeat(stack.column)}^ ${filter.toHtml(escapeHtml(`${e.name}: ${e.message}`))}` 234 236 div.appendChild(pre) 235 237 const span = document.createElement('span') 236 238 span.className