From 99336c44c9379a03e1e466279b564526f82f744a Mon Sep 17 00:00:00 2001
From: Addison BG <44577843+addisonssense@users.noreply.github.com>
Date: Sat, 18 May 2019 10:06:09 -0400
Subject: [PATCH] feat: add option to pretty print html components (#1229)

BREAKING CHANGE: html output will now be formatted
---
 flow/modules.flow.js                          |  4 +
 packages/test-utils/package.json              |  3 +-
 packages/test-utils/src/wrapper.js            |  3 +-
 test/specs/mount.spec.js                      |  6 +-
 .../mounting-options/scopedSlots.spec.js      | 40 +++++---
 test/specs/mounting-options/slots.spec.js     |  9 +-
 test/specs/shallow-mount.spec.js              | 15 +--
 test/specs/wrapper/html.spec.js               | 14 ++-
 yarn.lock                                     | 94 +++++++++++++++++--
 9 files changed, 156 insertions(+), 32 deletions(-)

diff --git a/flow/modules.flow.js b/flow/modules.flow.js
index 9df7006e6..305268300 100644
--- 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
index 495fb51b1..3d3300779 100644
--- 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
index 561674b48..60346ce9a 100644
--- 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
index 792b23118..9bf2493d7 100644
--- 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
index 6423aa46f..511c4423a 100644
--- 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
index ee399c333..063b809c9 100644
--- 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
index 807c3f4e2..da422f3a3 100644
--- 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
index 538891032..50f8d809a 100644
--- 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
index 6bf77824e..840e7d194 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2744,6 +2744,11 @@ commander@2.15.1, commander@2.15.x, commander@^2.15.1, commander@~2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
+commander@^2.19.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+
 commander@~2.13.0:
   version "2.13.0"
   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@
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+condense-newlines@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
+  integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-whitespace "^0.3.0"
+    kind-of "^3.0.2"
+
 conditional-specs@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/conditional-specs/-/conditional-specs-1.0.1.tgz#1137ca6f83e5de848853cf0cfac78fe858b40a9a"
 
+config-chain@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
+  integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
 configstore@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
@@ -3801,6 +3823,16 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   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:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
@@ -5571,6 +5615,11 @@ is-whitespace-character@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz#9ae0176f3282b65457a1992cdb084f8a5f833e3b"
 
+is-whitespace@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+  integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
+
 is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5639,6 +5688,17 @@ js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
 
+js-beautify@^1.6.12:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.0.tgz#9753a13c858d96828658cd18ae3ca0e5783ea672"
+  integrity sha512-OMwf/tPDpE/BLlYKqZOhqWsd3/z2N3KOlyn1wsCRGFwViE8LOQTcDtathQvHvZc+q+zWmcNAbwKSC+iJoMaH2Q==
+  dependencies:
+    config-chain "^1.1.12"
+    editorconfig "^0.15.3"
+    glob "^7.1.3"
+    mkdirp "~0.5.1"
+    nopt "~4.0.1"
+
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -6284,6 +6344,14 @@ lru-cache@^4.1.2:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -6870,7 +6938,7 @@ nopt@1.0.10:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
+nopt@^4.0.1, nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   dependencies:
@@ -7738,6 +7806,15 @@ pretty-time@^1.0.0:
     is-number "^5.0.0"
     nanoseconds "^1.0.0"
 
+pretty@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
+  integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
+  dependencies:
+    condense-newlines "^0.2.1"
+    extend-shallow "^2.0.1"
+    js-beautify "^1.6.12"
+
 prismjs@^1.13.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
@@ -7776,6 +7853,11 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+
 prr@~1.0.1:
   version "1.0.1"
   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:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
-regenerator-runtime@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991"
-  integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA==
-
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -8645,6 +8722,11 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"