diff --git a/packages/ui/client/components/views/ViewReport.cy.tsx b/packages/ui/client/components/views/ViewReport.cy.tsx
index 14626e25b6b4..7b65b60ff7d4 100644
--- a/packages/ui/client/components/views/ViewReport.cy.tsx
+++ b/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()
- .get(taskErrorSelector)
+ const component = cy.mount()
+ 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()
+
+ const diffElement = component.get('[data-testid="diff"]')
+ diffElement.should('exist')
+ diffElement
+ .should('contain.text', 'Expected')
+ .and('contain.text', 'Received')
+ .and('not.contain.text', '\x1B')
+ })
})
diff --git a/packages/ui/client/components/views/ViewReportError.vue b/packages/ui/client/components/views/ViewReportError.vue
index 2e962f03503f..3df1c1782841 100644
--- a/packages/ui/client/components/views/ViewReportError.vue
+++ b/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)
@@ -37,9 +37,9 @@ function diff() {
@click.passive="openInEditor(stack.file, stack.line, stack.column)"
/>
-
- {{ `\n${diff()}` }}
-
+
+
+