fix(ui): correctly render ansi diff (#3810)

Co-authored-by: Vladimir Sheremet <[email protected]>

Author: so1ve

packages/ui/client/components/views/ViewReport.cy.tsx

@@ -22,10 +22,22 @@ function makeTextStack() {
 // 5 Stacks
 const textStacks = Array.from(new Array(5)).map(makeTextStack)
 
+const diff = `
+  \x1B[32m- Expected\x1B[39m
+  \x1B[31m+ Received\x1B[39m
+  
+  \x1B[2m  Object {\x1B[22m
+  \x1B[2m    "a": 1,\x1B[22m
+  \x1B[32m-   "b": 2,\x1B[39m
+  \x1B[31m+   "b": 3,\x1B[39m
+  \x1B[2m  }\x1B[22m
+`
+
 const error = {
   name: 'Do some test',
   stacks: textStacks,
   message: 'Error: Transform failed with 1 error:',
+  diff,
 }
 
 const fileWithTextStacks = {
@@ -34,6 +46,7 @@ const fileWithTextStacks = {
   type: 'suite',
   mode: 'run',
   filepath: 'test/plain-stack-trace.ts',
+  meta: {},
   result: {
     state: 'fail',
     error,
@@ -73,12 +86,14 @@ describe('ViewReport', () => {
       type: 'suite',
       mode: 'run',
       filepath: 'test/plain-stack-trace.ts',
+      meta: {},
       result: {
         state: 'fail',
         errors: [{
           name: 'Do some test',
           stack: '\x1B[33mtest/plain-stack-trace.ts\x1B[0m',
           message: 'Error: Transform failed with 1 error:',
+          diff,
         }],
       },
       tasks: [],
@@ -110,18 +125,20 @@ describe('ViewReport', () => {
       type: 'suite',
       mode: 'run',
       filepath: 'test/plain-stack-trace.ts',
+      meta: {},
       result: {
         state: 'fail',
         errors: [{
           name: 'Do some test',
           stack: '\x1B[33mtest/plain-stack-trace.ts\x1B[0m',
           message: '\x1B[44mError: Transform failed with 1 error:\x1B[0m',
+          diff,
         }],
       },
       tasks: [],
     }
-    const container = cy.mount(<ViewReport file={file} />)
-      .get(taskErrorSelector)
+    const component = cy.mount(<ViewReport file={file} />)
+    const container = component.get(taskErrorSelector)
     container.should('exist')
     container.children('pre').then((c) => {
       expect(c.text(), 'error has the correct plain text').equals('Do some test: Error: Transform failed with 1 error:test/plain-stack-trace.ts')
@@ -145,4 +162,15 @@ describe('ViewReport', () => {
       })
     })
   })
+
+  it('test diff display', () => {
+    const component = cy.mount(<ViewReport file={fileWithTextStacks as File} />)
+
+    const diffElement = component.get('[data-testid="diff"]')
+    diffElement.should('exist')
+    diffElement
+      .should('contain.text', 'Expected')
+      .and('contain.text', 'Received')
+      .and('not.contain.text', '\x1B')
+  })
 })

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

@@ -14,13 +14,13 @@ function relative(p: string) {
   return p
 }
 
+const filter = computed(() => createAnsiToHtmlFilter(isDark.value))
+
 const isDiffShowable = computed(() => {
-  return props.error?.expected && props.error?.actual
+  return !!props.error?.diff
 })
 
-function diff() {
-  return props.error.diff
-}
+const diff = computed(() => props.error.diff ? filter.value.toHtml(props.error.diff) : undefined)
 </script>
 
 <template>
@@ -37,9 +37,9 @@ function diff() {
         @click.passive="openInEditor(stack.file, stack.line, stack.column)"
       />
     </div>
-    <pre v-if="isDiffShowable">
-      {{ `\n${diff()}` }}
-    </pre>
+    <template v-if="isDiffShowable">
+      <pre data-testid="diff" v-html="diff" />
+    </template>
   </div>
 </template>