Skip to content

Commit 99336c4

Browse files
addisonssenseeddyerburgh
addisonssense
authored and
eddyerburgh
committedMay 18, 2019
feat: add option to pretty print html components (#1229)
BREAKING CHANGE: html output will now be formatted
·
v1.3.61.3.1
1 parent 2a4c6ef commit 99336c4

File tree

9 files changed

+156
-32
lines changed

9 files changed

+156
-32
lines changed
 

‎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+
}

‎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
}

‎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
/**

‎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

‎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(

‎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
})

‎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
})

‎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)

‎yarn.lock

+88-6
Original file line numberDiff line numberDiff line change
@@ -2744,6 +2744,11 @@ commander@2.15.1, commander@2.15.x, commander@^2.15.1, commander@~2.15.0:
27442744
version "2.15.1"
27452745
resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
27462746

2747+
commander@^2.19.0:
2748+
version "2.20.0"
2749+
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
2750+
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
2751+
27472752
commander@~2.13.0:
27482753
version "2.13.0"
27492754
resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -2793,10 +2798,27 @@ concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@
27932798
readable-stream "^2.2.2"
27942799
typedarray "^0.0.6"
27952800

2801+
condense-newlines@^0.2.1:
2802+
version "0.2.1"
2803+
resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
2804+
integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
2805+
dependencies:
2806+
extend-shallow "^2.0.1"
2807+
is-whitespace "^0.3.0"
2808+
kind-of "^3.0.2"
2809+
27962810
conditional-specs@^1.0.1:
27972811
version "1.0.1"
27982812
resolved "https://registry.yarnpkg.com/conditional-specs/-/conditional-specs-1.0.1.tgz#1137ca6f83e5de848853cf0cfac78fe858b40a9a"
27992813

2814+
config-chain@^1.1.12:
2815+
version "1.1.12"
2816+
resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
2817+
integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
2818+
dependencies:
2819+
ini "^1.3.4"
2820+
proto-list "~1.2.1"
2821+
28002822
configstore@^3.0.0:
28012823
version "3.1.1"
28022824
resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
@@ -3801,6 +3823,16 @@ ecc-jsbn@~0.1.1:
38013823
dependencies:
38023824
jsbn "~0.1.0"
38033825

3826+
editorconfig@^0.15.3:
3827+
version "0.15.3"
3828+
resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
3829+
integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
3830+
dependencies:
3831+
commander "^2.19.0"
3832+
lru-cache "^4.1.5"
3833+
semver "^5.6.0"
3834+
sigmund "^1.0.1"
3835+
38043836
ee-first@1.1.1:
38053837
version "1.1.1"
38063838
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4728,6 +4760,18 @@ glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
47284760
once "^1.3.0"
47294761
path-is-absolute "^1.0.0"
47304762

4763+
glob@^7.1.3:
4764+
version "7.1.4"
4765+
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
4766+
integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
4767+
dependencies:
4768+
fs.realpath "^1.0.0"
4769+
inflight "^1.0.4"
4770+
inherits "2"
4771+
minimatch "^3.0.4"
4772+
once "^1.3.0"
4773+
path-is-absolute "^1.0.0"
4774+
47314775
global-dirs@^0.1.0:
47324776
version "0.1.1"
47334777
resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -5571,6 +5615,11 @@ is-whitespace-character@^1.0.0:
55715615
version "1.0.1"
55725616
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz#9ae0176f3282b65457a1992cdb084f8a5f833e3b"
55735617

5618+
is-whitespace@^0.3.0:
5619+
version "0.3.0"
5620+
resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
5621+
integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
5622+
55745623
is-windows@^1.0.0, is-windows@^1.0.2:
55755624
version "1.0.2"
55765625
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5639,6 +5688,17 @@ js-base64@^2.1.9:
56395688
version "2.4.3"
56405689
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
56415690

5691+
js-beautify@^1.6.12:
5692+
version "1.10.0"
5693+
resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.0.tgz#9753a13c858d96828658cd18ae3ca0e5783ea672"
5694+
integrity sha512-OMwf/tPDpE/BLlYKqZOhqWsd3/z2N3KOlyn1wsCRGFwViE8LOQTcDtathQvHvZc+q+zWmcNAbwKSC+iJoMaH2Q==
5695+
dependencies:
5696+
config-chain "^1.1.12"
5697+
editorconfig "^0.15.3"
5698+
glob "^7.1.3"
5699+
mkdirp "~0.5.1"
5700+
nopt "~4.0.1"
5701+
56425702
js-tokens@^3.0.0, js-tokens@^3.0.2:
56435703
version "3.0.2"
56445704
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -6284,6 +6344,14 @@ lru-cache@^4.1.2:
62846344
pseudomap "^1.0.2"
62856345
yallist "^2.1.2"
62866346

6347+
lru-cache@^4.1.5:
6348+
version "4.1.5"
6349+
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
6350+
integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
6351+
dependencies:
6352+
pseudomap "^1.0.2"
6353+
yallist "^2.1.2"
6354+
62876355
macaddress@^0.2.8:
62886356
version "0.2.8"
62896357
resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -6870,7 +6938,7 @@ nopt@1.0.10:
68706938
dependencies:
68716939
abbrev "1"
68726940

6873-
nopt@^4.0.1:
6941+
nopt@^4.0.1, nopt@~4.0.1:
68746942
version "4.0.1"
68756943
resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
68766944
dependencies:
@@ -7738,6 +7806,15 @@ pretty-time@^1.0.0:
77387806
is-number "^5.0.0"
77397807
nanoseconds "^1.0.0"
77407808

7809+
pretty@^2.0.0:
7810+
version "2.0.0"
7811+
resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
7812+
integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
7813+
dependencies:
7814+
condense-newlines "^0.2.1"
7815+
extend-shallow "^2.0.1"
7816+
js-beautify "^1.6.12"
7817+
77417818
prismjs@^1.13.0:
77427819
version "1.14.0"
77437820
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
@@ -7776,6 +7853,11 @@ promise-inflight@^1.0.1:
77767853
version "1.0.1"
77777854
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
77787855

7856+
proto-list@~1.2.1:
7857+
version "1.2.4"
7858+
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
7859+
integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
7860+
77797861
prr@~1.0.1:
77807862
version "1.0.1"
77817863
resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -8064,11 +8146,6 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
80648146
version "0.11.1"
80658147
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
80668148

8067-
regenerator-runtime@^0.13.1:
8068-
version "0.13.1"
8069-
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991"
8070-
integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==
8071-
80728149
regenerator-transform@^0.10.0:
80738150
version "0.10.1"
80748151
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -8645,6 +8722,11 @@ shebang-regex@^1.0.0:
86458722
version "1.0.0"
86468723
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
86478724

8725+
sigmund@^1.0.1:
8726+
version "1.0.1"
8727+
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
8728+
integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
8729+
86488730
signal-exit@^3.0.0, signal-exit@^3.0.2:
86498731
version "3.0.2"
86508732
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

0 commit comments

Comments
 (0)
Please sign in to comment.