Skip to content

Commit 99336c4

Browse files
addisonssenseeddyerburgh
addisonssense
authored and
eddyerburgh
committed
feat: add option to pretty print html components (#1229)
BREAKING CHANGE: html output will now be formatted
1 parent 2a4c6ef commit 99336c4

File tree

9 files changed

+156
-32
lines changed

9 files changed

+156
-32
lines changed

Diff for: ‎flow/modules.flow.js

+4
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,7 @@ declare module 'cheerio' {
2727
declare module 'semver' {
2828
declare module.exports: any
2929
}
30+
31+
declare module 'pretty' {
32+
declare module.exports: any
33+
}

Diff for: ‎packages/test-utils/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
},
4040
"dependencies": {
4141
"dom-event-types": "^1.0.0",
42-
"lodash": "^4.17.4"
42+
"lodash": "^4.17.4",
43+
"pretty": "^2.0.0"
4344
}
4445
}

Diff for: ‎packages/test-utils/src/wrapper.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22

33
import Vue from 'vue'
4+
import pretty from 'pretty'
45
import getSelector from './get-selector'
56
import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts'
67
import config from './config'
@@ -222,7 +223,7 @@ export default class Wrapper implements BaseWrapper {
222223
* Returns HTML of element as a string
223224
*/
224225
html(): string {
225-
return this.element.outerHTML
226+
return pretty(this.element.outerHTML)
226227
}
227228

228229
/**

Diff for: ‎test/specs/mount.spec.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -340,8 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
340340
if (vueVersion > 2.3) {
341341
expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' })
342342
}
343+
343344
expect(wrapper.html()).to.equal(
344-
`<div height="50px" extra="attr"><p class="prop-1">prop1</p> <p class="prop-2"></p></div>`
345+
'<div height="50px" extra="attr">\n' +
346+
' <p class="prop-1">prop1</p>\n' +
347+
' <p class="prop-2"></p>\n' +
348+
'</div>'
345349
)
346350
})
347351

Diff for: ‎test/specs/mounting-options/scopedSlots.spec.js

+28-12
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
2828
}
2929
}
3030
)
31-
expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
31+
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar,123</p>\n' + '</div>')
3232
})
3333

3434
itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => {
@@ -47,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
4747
}
4848
}
4949
)
50-
expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
50+
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')
5151
})
5252

5353
itDoNotRunIf(
@@ -146,38 +146,54 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
146146
}
147147
})
148148
expect(wrapper.find('#destructuring').html()).to.equal(
149-
'<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>'
149+
'<div id="destructuring">\n' +
150+
' <p>0,1</p>\n' +
151+
' <p>1,2</p>\n' +
152+
' <p>2,3</p>\n' +
153+
'</div>'
150154
)
151155
expect(wrapper.find('#slots').html()).to.equal(
152156
'<div id="slots"><span>123</span></div>'
153157
)
154158
expect(wrapper.find('#list').html()).to.equal(
155-
'<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>'
159+
'<div id="list">\n' +
160+
' <p>0,a1</p>\n' +
161+
' <p>1,a2</p>\n' +
162+
' <p>2,a3</p>\n' +
163+
'</div>'
156164
)
157165
expect(wrapper.find('#single').html()).to.equal(
158-
'<div id="single"><p>abc</p></div>'
166+
'<div id="single">\n' + ' <p>abc</p>\n' + '</div>'
159167
)
160168
expect(wrapper.find('#noProps').html()).to.equal(
161-
'<div id="noProps"><p>baz</p></div>'
169+
'<div id="noProps">\n' + ' <p>baz</p>\n' + '</div>'
162170
)
163171
wrapper.vm.items = [4, 5, 6]
164172
wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
165173
wrapper.vm.bar = 'ABC'
166174
await Vue.nextTick()
167175
expect(wrapper.find('#destructuring').html()).to.equal(
168-
'<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>'
176+
'<div id="destructuring">\n' +
177+
' <p>0,4</p>\n' +
178+
' <p>1,5</p>\n' +
179+
' <p>2,6</p>\n' +
180+
'</div>'
169181
)
170182
expect(wrapper.find('#slots').html()).to.equal(
171183
'<div id="slots"><span>123</span></div>'
172184
)
173185
expect(wrapper.find('#list').html()).to.equal(
174-
'<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>'
186+
'<div id="list">\n' +
187+
' <p>0,b1</p>\n' +
188+
' <p>1,b2</p>\n' +
189+
' <p>2,b3</p>\n' +
190+
'</div>'
175191
)
176192
expect(wrapper.find('#single').html()).to.equal(
177-
'<div id="single"><p>ABC</p></div>'
193+
'<div id="single">\n' + ' <p>ABC</p>\n' + '</div>'
178194
)
179195
expect(wrapper.find('#noProps').html()).to.equal(
180-
'<div id="noProps"><p>baz</p></div>'
196+
'<div id="noProps">\n' + ' <p>baz</p>\n' + '</div>'
181197
)
182198
})
183199

@@ -197,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
197213
}
198214
}
199215
)
200-
expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
216+
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')
201217
})
202218

203219
itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => {
@@ -214,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
214230
}
215231
}
216232
)
217-
expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
233+
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar,123</p>\n' + '</div>')
218234
})
219235

220236
itDoNotRunIf(

Diff for: ‎test/specs/mounting-options/slots.spec.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,10 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
497497
)
498498
).to.equal(true)
499499
expect(ParentComponent.html()).to.equal(
500-
'<div><div><span baz="qux">FOO,quux</span></div><div><span baz="qux">FOO,quux</span></div></div>'
500+
'<div>\n' +
501+
' <div><span baz="qux">FOO,quux</span></div>\n' +
502+
' <div><span baz="qux">FOO,quux</span></div>\n' +
503+
'</div>'
501504
)
502505

503506
ParentComponent = mount(
@@ -529,6 +532,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
529532
c => c.$options.name === childComponentName
530533
)
531534
).to.equal(true)
532-
expect(ParentComponent.html()).to.equal('<div><p>1234</p></div>')
535+
expect(ParentComponent.html()).to.equal(
536+
'<div>\n' + ' <p>1234</p>\n' + '</div>'
537+
)
533538
})
534539
})

Diff for: ‎test/specs/shallow-mount.spec.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
8989
localVue
9090
})
9191
expect(wrapper.html()).to.equal(
92-
'<child-stub><p>Hello</p> <p>World</p></child-stub>'
92+
'<child-stub>\n' +
93+
' <p>Hello</p>\n' +
94+
' <p>World</p>\n' +
95+
'</child-stub>'
9396
)
9497
})
9598

@@ -517,11 +520,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
517520
}
518521
const wrapper = shallowMount(TestComponent)
519522
expect(wrapper.html()).to.equal(
520-
'<div>' +
521-
'<childcomponent-stub></childcomponent-stub> ' +
522-
'<anonymous-stub></anonymous-stub> ' +
523-
'<anonymous-stub></anonymous-stub> ' +
524-
'<anonymous-stub></anonymous-stub>' +
523+
'<div>\n' +
524+
' <childcomponent-stub></childcomponent-stub>\n' +
525+
' <anonymous-stub></anonymous-stub>\n' +
526+
' <anonymous-stub></anonymous-stub>\n' +
527+
' <anonymous-stub></anonymous-stub>\n' +
525528
'</div>'
526529
)
527530
})

Diff for: ‎test/specs/wrapper/html.spec.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describeWithShallowAndMount('html', mountingMethod => {
2020
}
2121
}
2222
})
23-
const expectedHtml = '<div>1<div class="tester">test</div></div>'
23+
const expectedHtml = '<div>1<div class="tester">test</div>\n' + '</div>'
2424
expect(wrapper.html()).to.equal(expectedHtml)
2525
})
2626

@@ -32,9 +32,17 @@ describeWithShallowAndMount('html', mountingMethod => {
3232
expect(wrapper.html()).to.equal('<div></div>')
3333
})
3434

35-
it('returns a Wrappers HTML as a string', () => {
35+
it('returns a Wrappers HTML as a pretty printed string', () => {
3636
const expectedHtml =
37-
'<input id="input-submit" type="submit" class="input-submit">'
37+
'<body>\n' +
38+
' <div>\n' +
39+
' <ul>\n' +
40+
' <li></li>\n' +
41+
' <li></li>\n' +
42+
' </ul>\n' +
43+
' </div>\n' +
44+
'</body>'
45+
3846
const compiled = compileToFunctions(expectedHtml)
3947
const wrapper = mountingMethod(compiled)
4048
expect(wrapper.html()).to.equal(expectedHtml)

0 commit comments

Comments
 (0)