[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
fix(ui): correctly render ansi diff (#3810)
Co-authored-by: Vladimir Sheremet <sleuths.slews0s@icloud.com>
authored by
Ray
Vladimir Sheremet
and committed by
GitHub
(Sep 18, 2023, 5:22 PM +0200)
8c3152fa
417e8684
+37
-9
+30
-2
packages/ui/client/components/views/ViewReport.cy.tsx
+30
-2
packages/ui/client/components/views/ViewReport.cy.tsx
···
22
22
// 5 Stacks
23
23
const textStacks = Array.from(new Array(5)).map(makeTextStack)
24
24
25
+
const diff = `
26
+
\x1B[32m- Expected\x1B[39m
27
+
\x1B[31m+ Received\x1B[39m
28
+
29
+
\x1B[2m Object {\x1B[22m
30
+
\x1B[2m "a": 1,\x1B[22m
31
+
\x1B[32m- "b": 2,\x1B[39m
32
+
\x1B[31m+ "b": 3,\x1B[39m
33
+
\x1B[2m }\x1B[22m
34
+
`
35
+
25
36
const error = {
26
37
name: 'Do some test',
27
38
stacks: textStacks,
28
39
message: 'Error: Transform failed with 1 error:',
40
+
diff,
29
41
}
30
42
31
43
const fileWithTextStacks = {
···
34
46
type: 'suite',
35
47
mode: 'run',
36
48
filepath: 'test/plain-stack-trace.ts',
49
+
meta: {},
37
50
result: {
38
51
state: 'fail',
39
52
error,
···
73
86
type: 'suite',
74
87
mode: 'run',
75
88
filepath: 'test/plain-stack-trace.ts',
89
+
meta: {},
76
90
result: {
77
91
state: 'fail',
78
92
errors: [{
79
93
name: 'Do some test',
80
94
stack: '\x1B[33mtest/plain-stack-trace.ts\x1B[0m',
81
95
message: 'Error: Transform failed with 1 error:',
96
+
diff,
82
97
}],
83
98
},
84
99
tasks: [],
···
110
125
type: 'suite',
111
126
mode: 'run',
112
127
filepath: 'test/plain-stack-trace.ts',
128
+
meta: {},
113
129
result: {
114
130
state: 'fail',
115
131
errors: [{
116
132
name: 'Do some test',
117
133
stack: '\x1B[33mtest/plain-stack-trace.ts\x1B[0m',
118
134
message: '\x1B[44mError: Transform failed with 1 error:\x1B[0m',
135
+
diff,
119
136
}],
120
137
},
121
138
tasks: [],
122
139
}
123
-
const container = cy.mount(<ViewReport file={file} />)
124
-
.get(taskErrorSelector)
140
+
const component = cy.mount(<ViewReport file={file} />)
141
+
const container = component.get(taskErrorSelector)
125
142
container.should('exist')
126
143
container.children('pre').then((c) => {
127
144
expect(c.text(), 'error has the correct plain text').equals('Do some test: Error: Transform failed with 1 error:test/plain-stack-trace.ts')
···
144
161
}
145
162
})
146
163
})
164
+
})
165
+
166
+
it('test diff display', () => {
167
+
const component = cy.mount(<ViewReport file={fileWithTextStacks as File} />)
168
+
169
+
const diffElement = component.get('[data-testid="diff"]')
170
+
diffElement.should('exist')
171
+
diffElement
172
+
.should('contain.text', 'Expected')
173
+
.and('contain.text', 'Received')
174
+
.and('not.contain.text', '\x1B')
147
175
})
148
176
})
+7
-7
packages/ui/client/components/views/ViewReportError.vue
+7
-7
packages/ui/client/components/views/ViewReportError.vue
···
14
14
return p
15
15
}
16
16
17
+
const filter = computed(() => createAnsiToHtmlFilter(isDark.value))
18
+
17
19
const isDiffShowable = computed(() => {
18
-
return props.error?.expected && props.error?.actual
20
+
return !!props.error?.diff
19
21
})
20
22
21
-
function diff() {
22
-
return props.error.diff
23
-
}
23
+
const diff = computed(() => props.error.diff ? filter.value.toHtml(props.error.diff) : undefined)
24
24
</script>
25
25
26
26
<template>
···
37
37
@click.passive="openInEditor(stack.file, stack.line, stack.column)"
38
38
/>
39
39
</div>
40
-
<pre v-if="isDiffShowable">
41
-
{{ `\n${diff()}` }}
42
-
</pre>
40
+
<template v-if="isDiffShowable">
41
+
<pre data-testid="diff" v-html="diff" />
42
+
</template>
43
43
</div>
44
44
</template>
45
45