feat: add option to pretty print html components (#1229)

addisonssense · eddyerburgh · commit 99336c44c937 · 2019-05-18T15:06:09.000+01:00
BREAKING CHANGE: html output will now be formatted
diff --git a/flow/modules.flow.js b/flow/modules.flow.js
@@ -27,3 +27,7 @@ declare module 'cheerio' {
 declare module 'semver' {
   declare module.exports: any
 }
+
+declare module 'pretty' {
+  declare module.exports: any
+}
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "dom-event-types": "^1.0.0",
-    "lodash": "^4.17.4"
+    "lodash": "^4.17.4",
+    "pretty": "^2.0.0"
   }
 }
diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js
@@ -1,6 +1,7 @@
 // @flow
 
 import Vue from 'vue'
+import pretty from 'pretty'
 import getSelector from './get-selector'
 import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts'
 import config from './config'
@@ -222,7 +223,7 @@ export default class Wrapper implements BaseWrapper {
    * Returns HTML of element as a string
    */
   html(): string {
-    return this.element.outerHTML
+    return pretty(this.element.outerHTML)
   }
 
   /**
diff --git a/test/specs/mount.spec.js b/test/specs/mount.spec.js
@@ -340,8 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     if (vueVersion > 2.3) {
       expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' })
     }
+
     expect(wrapper.html()).to.equal(
-      `<div height="50px" extra="attr"><p class="prop-1">prop1</p> <p class="prop-2"></p></div>`
+      '<div height="50px" extra="attr">\n' +
+        '  <p class="prop-1">prop1</p>\n' +
+        '  <p class="prop-2"></p>\n' +
+        '</div>'
     )
   })
 
diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js
@@ -28,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    expect(wrapper.html()).to.equal('<div>\n' + '  <p>bar,123</p>\n' + '</div>')
   })
 
   itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => {
@@ -47,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    expect(wrapper.html()).to.equal('<div>\n' + '  <p>bar</p>\n' + '</div>')
   })
 
   itDoNotRunIf(
@@ -146,38 +146,54 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
       }
     })
     expect(wrapper.find('#destructuring').html()).to.equal(
-      '<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>'
+      '<div id="destructuring">\n' +
+        '  <p>0,1</p>\n' +
+        '  <p>1,2</p>\n' +
+        '  <p>2,3</p>\n' +
+        '</div>'
     )
     expect(wrapper.find('#slots').html()).to.equal(
       '<div id="slots"><span>123</span></div>'
     )
     expect(wrapper.find('#list').html()).to.equal(
-      '<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>'
+      '<div id="list">\n' +
+        '  <p>0,a1</p>\n' +
+        '  <p>1,a2</p>\n' +
+        '  <p>2,a3</p>\n' +
+        '</div>'
     )
     expect(wrapper.find('#single').html()).to.equal(
-      '<div id="single"><p>abc</p></div>'
+      '<div id="single">\n' + '  <p>abc</p>\n' + '</div>'
     )
     expect(wrapper.find('#noProps').html()).to.equal(
-      '<div id="noProps"><p>baz</p></div>'
+      '<div id="noProps">\n' + '  <p>baz</p>\n' + '</div>'
     )
     wrapper.vm.items = [4, 5, 6]
     wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
     wrapper.vm.bar = 'ABC'
     await Vue.nextTick()
     expect(wrapper.find('#destructuring').html()).to.equal(
-      '<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>'
+      '<div id="destructuring">\n' +
+        '  <p>0,4</p>\n' +
+        '  <p>1,5</p>\n' +
+        '  <p>2,6</p>\n' +
+        '</div>'
     )
     expect(wrapper.find('#slots').html()).to.equal(
       '<div id="slots"><span>123</span></div>'
     )
     expect(wrapper.find('#list').html()).to.equal(
-      '<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>'
+      '<div id="list">\n' +
+        '  <p>0,b1</p>\n' +
+        '  <p>1,b2</p>\n' +
+        '  <p>2,b3</p>\n' +
+        '</div>'
     )
     expect(wrapper.find('#single').html()).to.equal(
-      '<div id="single"><p>ABC</p></div>'
+      '<div id="single">\n' + '  <p>ABC</p>\n' + '</div>'
     )
     expect(wrapper.find('#noProps').html()).to.equal(
-      '<div id="noProps"><p>baz</p></div>'
+      '<div id="noProps">\n' + '  <p>baz</p>\n' + '</div>'
     )
   })
 
@@ -197,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    expect(wrapper.html()).to.equal('<div>\n' + '  <p>bar</p>\n' + '</div>')
   })
 
   itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => {
@@ -214,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    expect(wrapper.html()).to.equal('<div>\n' + '  <p>bar,123</p>\n' + '</div>')
   })
 
   itDoNotRunIf(
diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js
@@ -497,7 +497,10 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
       )
     ).to.equal(true)
     expect(ParentComponent.html()).to.equal(
-      '<div><div><span baz="qux">FOO,quux</span></div><div><span baz="qux">FOO,quux</span></div></div>'
+      '<div>\n' +
+        '  <div><span baz="qux">FOO,quux</span></div>\n' +
+        '  <div><span baz="qux">FOO,quux</span></div>\n' +
+        '</div>'
     )
 
     ParentComponent = mount(
@@ -529,6 +532,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
         c => c.$options.name === childComponentName
       )
     ).to.equal(true)
-    expect(ParentComponent.html()).to.equal('<div><p>1234</p></div>')
+    expect(ParentComponent.html()).to.equal(
+      '<div>\n' + '  <p>1234</p>\n' + '</div>'
+    )
   })
 })
diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -89,7 +89,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       localVue
     })
     expect(wrapper.html()).to.equal(
-      '<child-stub><p>Hello</p> <p>World</p></child-stub>'
+      '<child-stub>\n' +
+        '  <p>Hello</p>\n' +
+        '  <p>World</p>\n' +
+        '</child-stub>'
     )
   })
 
@@ -517,11 +520,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     }
     const wrapper = shallowMount(TestComponent)
     expect(wrapper.html()).to.equal(
-      '<div>' +
-        '<childcomponent-stub></childcomponent-stub> ' +
-        '<anonymous-stub></anonymous-stub> ' +
-        '<anonymous-stub></anonymous-stub> ' +
-        '<anonymous-stub></anonymous-stub>' +
+      '<div>\n' +
+        '  <childcomponent-stub></childcomponent-stub>\n' +
+        '  <anonymous-stub></anonymous-stub>\n' +
+        '  <anonymous-stub></anonymous-stub>\n' +
+        '  <anonymous-stub></anonymous-stub>\n' +
         '</div>'
     )
   })
diff --git a/test/specs/wrapper/html.spec.js b/test/specs/wrapper/html.spec.js
@@ -20,7 +20,7 @@ describeWithShallowAndMount('html', mountingMethod => {
         }
       }
     })
-    const expectedHtml = '<div>1<div class="tester">test</div></div>'
+    const expectedHtml = '<div>1<div class="tester">test</div>\n' + '</div>'
     expect(wrapper.html()).to.equal(expectedHtml)
   })
 
@@ -32,9 +32,17 @@ describeWithShallowAndMount('html', mountingMethod => {
     expect(wrapper.html()).to.equal('<div></div>')
   })
 
-  it('returns a Wrappers HTML as a string', () => {
+  it('returns a Wrappers HTML as a pretty printed string', () => {
     const expectedHtml =
-      '<input id="input-submit" type="submit" class="input-submit">'
+      '<body>\n' +
+      '  <div>\n' +
+      '    <ul>\n' +
+      '      <li></li>\n' +
+      '      <li></li>\n' +
+      '    </ul>\n' +
+      '  </div>\n' +
+      '</body>'
+
     const compiled = compileToFunctions(expectedHtml)
     const wrapper = mountingMethod(compiled)
     expect(wrapper.html()).to.equal(expectedHtml)
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -27,3 +27,7 @@ declare module 'cheerio' {`
`27`	`27`	`declare module 'semver' {`
`28`	`28`	`declare module.exports: any`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+declare module 'pretty' {`
	`32`	`+ declare module.exports: any`
	`33`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@`
`39`	`39`	`},`
`40`	`40`	`"dependencies": {`
`41`	`41`	`"dom-event-types": "^1.0.0",`
`42`		`- "lodash": "^4.17.4"`
	`42`	`+ "lodash": "^4.17.4",`
	`43`	`+ "pretty": "^2.0.0"`
`43`	`44`	`}`
`44`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -340,8 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {`
`340`	`340`	`if (vueVersion > 2.3) {`
`341`	`341`	`expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' })`
`342`	`342`	`}`
	`343`	`+`
`343`	`344`	`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>'`
`345`	`349`	`)`
`346`	`350`	`})`
`347`	`351`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`	`)`
`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>')`
`32`	`32`	`})`
`33`	`33`
`34`	`34`	`itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => {`
`@@ -47,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`	`)`
`50`		`- expect(wrapper.html()).to.equal('<div><p>bar</p></div>')`
	`50`	`+ expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')`
`51`	`51`	`})`
`52`	`52`
`53`	`53`	`itDoNotRunIf(`
`@@ -146,38 +146,54 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {`
`146`	`146`	`}`
`147`	`147`	`})`
`148`	`148`	`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>'`
`150`	`154`	`)`
`151`	`155`	`expect(wrapper.find('#slots').html()).to.equal(`
`152`	`156`	`'<div id="slots"><span>123</span></div>'`
`153`	`157`	`)`
`154`	`158`	`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>'`
`156`	`164`	`)`
`157`	`165`	`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>'`
`159`	`167`	`)`
`160`	`168`	`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>'`
`162`	`170`	`)`
`163`	`171`	`wrapper.vm.items = [4, 5, 6]`
`164`	`172`	`wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]`
`165`	`173`	`wrapper.vm.bar = 'ABC'`
`166`	`174`	`await Vue.nextTick()`
`167`	`175`	`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>'`
`169`	`181`	`)`
`170`	`182`	`expect(wrapper.find('#slots').html()).to.equal(`
`171`	`183`	`'<div id="slots"><span>123</span></div>'`
`172`	`184`	`)`
`173`	`185`	`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>'`
`175`	`191`	`)`
`176`	`192`	`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>'`
`178`	`194`	`)`
`179`	`195`	`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>'`
`181`	`197`	`)`
`182`	`198`	`})`
`183`	`199`
`@@ -197,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {`
`197`	`213`	`}`
`198`	`214`	`}`
`199`	`215`	`)`
`200`		`- expect(wrapper.html()).to.equal('<div><p>bar</p></div>')`
	`216`	`+ expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')`
`201`	`217`	`})`
`202`	`218`
`203`	`219`	`itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => {`
`@@ -214,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {`
`214`	`230`	`}`
`215`	`231`	`}`
`216`	`232`	`)`
`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>')`
`218`	`234`	`})`
`219`	`235`
`220`	`236`	`itDoNotRunIf(`