Issue(1147): Add option to pretty print html components

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

flow/wrapper.flow.js

@@ -5,6 +5,7 @@ import type WrapperArray from '~src/WrapperArray'
 
 declare type Selector = any
 declare type Components = { [name: string]: Component }
+declare type HtmlOptions = { prettyPrint: boolean }
 
 declare interface BaseWrapper {
   // eslint-disable-line no-undef

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

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'
@@ -221,8 +222,11 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Returns HTML of element as a string
    */
-  html(): string {
-    return this.element.outerHTML
+  html(options?: HtmlOptions): string {
+    if (options && !options.prettyPrint) {
+      return this.element.outerHTML
+    }
+    return pretty(this.element.outerHTML)
   }
 
   /**

test/specs/mount.spec.js

@@ -340,7 +340,8 @@ 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(
+    const htmlOptions = { prettyPrint: false }
+    expect(wrapper.html(htmlOptions)).to.equal(
       `<div height="50px" extra="attr"><p class="prop-1">prop1</p> <p class="prop-2"></p></div>`
     )
   })

test/specs/mounting-options/scopedSlots.spec.js

@@ -7,6 +7,7 @@ import Vue from 'vue'
 describeWithShallowAndMount('scopedSlots', mountingMethod => {
   const sandbox = sinon.createSandbox()
   const windowSave = window
+  const htmlOptions = { prettyPrint: false }
 
   afterEach(() => {
     window = windowSave // eslint-disable-line no-native-reassign
@@ -28,7 +29,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar,123</p></div>')
   })
 
   itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => {
@@ -47,7 +48,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar</p></div>')
   })
 
   itDoNotRunIf(
@@ -87,7 +88,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
           }
         }
       )
-      expect(notDestructuringWrapper.html()).to.equal('<p>1,foo</p>')
+      expect(notDestructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
     }
   )
 
@@ -112,7 +113,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
           }
         }
       )
-      expect(destructuringWrapper.html()).to.equal('<p>1,foo</p>')
+      expect(destructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
 
       const notDestructuringWrapper = mountingMethod(
         {
@@ -130,7 +131,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
           }
         }
       )
-      expect(notDestructuringWrapper.html()).to.equal('<p>1,foo</p>')
+      expect(notDestructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
     }
   )
 
@@ -145,38 +146,38 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         noProps: '<p slot-scope="baz">baz</p>'
       }
     })
-    expect(wrapper.find('#destructuring').html()).to.equal(
+    expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal(
       '<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>'
     )
-    expect(wrapper.find('#slots').html()).to.equal(
+    expect(wrapper.find('#slots').html(htmlOptions)).to.equal(
       '<div id="slots"><span>123</span></div>'
     )
-    expect(wrapper.find('#list').html()).to.equal(
+    expect(wrapper.find('#list').html(htmlOptions)).to.equal(
       '<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>'
     )
-    expect(wrapper.find('#single').html()).to.equal(
+    expect(wrapper.find('#single').html(htmlOptions)).to.equal(
       '<div id="single"><p>abc</p></div>'
     )
-    expect(wrapper.find('#noProps').html()).to.equal(
+    expect(wrapper.find('#noProps').html(htmlOptions)).to.equal(
       '<div id="noProps"><p>baz</p></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(
+    expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal(
       '<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>'
     )
-    expect(wrapper.find('#slots').html()).to.equal(
+    expect(wrapper.find('#slots').html(htmlOptions)).to.equal(
       '<div id="slots"><span>123</span></div>'
     )
-    expect(wrapper.find('#list').html()).to.equal(
+    expect(wrapper.find('#list').html(htmlOptions)).to.equal(
       '<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>'
     )
-    expect(wrapper.find('#single').html()).to.equal(
+    expect(wrapper.find('#single').html(htmlOptions)).to.equal(
       '<div id="single"><p>ABC</p></div>'
     )
-    expect(wrapper.find('#noProps').html()).to.equal(
+    expect(wrapper.find('#noProps').html(htmlOptions)).to.equal(
       '<div id="noProps"><p>baz</p></div>'
     )
   })
@@ -197,7 +198,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar</p></div>')
   })
 
   itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => {
@@ -214,7 +215,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         }
       }
     )
-    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar,123</p></div>')
   })
 
   itDoNotRunIf(
@@ -286,7 +287,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         localVue
       })
 
-      expect(wrapper.html()).to.contain('span')
+      expect(wrapper.html(htmlOptions)).to.contain('span')
     }
   )
 })

test/specs/mounting-options/slots.spec.js

@@ -8,6 +8,8 @@ import { itDoNotRunIf } from 'conditional-specs'
 import { mount, createLocalVue } from '~vue/test-utils'
 
 describeWithShallowAndMount('options.slots', mountingMethod => {
+  const htmlOptions = { prettyPrint: false }
+
   it('mounts component with default slot if passed component in slot object', () => {
     const wrapper = mountingMethod(ComponentWithSlots, {
       slots: { default: Component }
@@ -180,8 +182,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
         footer: '<p>world</p>'
       }
     })
-    expect(wrapper.html()).to.contain('<span>hello</span>')
-    expect(wrapper.html()).to.contain('<p>world</p>')
+    expect(wrapper.html(htmlOptions)).to.contain('<span>hello</span>')
+    expect(wrapper.html(htmlOptions)).to.contain('<p>world</p>')
   })
 
   it('mounts component with default and named text slot', () => {
@@ -496,7 +498,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
         c => c.$options.name === childComponentName
       )
     ).to.equal(true)
-    expect(ParentComponent.html()).to.equal(
+    expect(ParentComponent.html(htmlOptions)).to.equal(
       '<div><div><span baz="qux">FOO,quux</span></div><div><span baz="qux">FOO,quux</span></div></div>'
     )
 
@@ -529,6 +531,6 @@ 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(htmlOptions)).to.equal('<div><p>1234</p></div>')
   })
 })

test/specs/shallow-mount.spec.js

@@ -13,6 +13,8 @@ import { describeRunIf, itDoNotRunIf } from 'conditional-specs'
 
 describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
   const sandbox = sinon.createSandbox()
+  const htmlOptions = { prettyPrint: false }
+
   beforeEach(() => {
     sandbox.stub(console, 'info').callThrough()
     sandbox.stub(console, 'error').callThrough()
@@ -69,7 +71,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     const wrapper = shallowMount(TestComponent, {
       localVue
     })
-    expect(wrapper.html()).to.equal('<child-stub>Hello</child-stub>')
+    expect(wrapper.html(htmlOptions)).to.equal('<child-stub>Hello</child-stub>')
   })
 
   it('renders named slots', () => {
@@ -88,7 +90,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     const wrapper = shallowMount(TestComponent, {
       localVue
     })
-    expect(wrapper.html()).to.equal(
+    expect(wrapper.html(htmlOptions)).to.equal(
       '<child-stub><p>Hello</p> <p>World</p></child-stub>'
     )
   })
@@ -99,7 +101,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       components: { Child: {} }
     }
     const wrapper = shallowMount(TestComponent)
-    expect(wrapper.html()).to.equal('<child-stub></child-stub>')
+    expect(wrapper.html(htmlOptions)).to.equal('<child-stub></child-stub>')
   })
 
   it('renders children for functional components', () => {
@@ -114,7 +116,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     const wrapper = shallowMount(TestComponent, {
       localVue
     })
-    expect(wrapper.html()).to.equal('<child-stub>Hello</child-stub>')
+    expect(wrapper.html(htmlOptions)).to.equal('<child-stub>Hello</child-stub>')
   })
 
   it('stubs globally registered components', () => {
@@ -170,7 +172,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
         }
       }
       const wrapper = shallowMount(TestComponent)
-      expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
+      expect(wrapper.html(htmlOptions)).to.contain(
+        '<child-stub prop="a" attr="hello"'
+      )
     }
   )
 
@@ -188,7 +192,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
         }
       }
       const wrapper = shallowMount(TestComponent)
-      expect(wrapper.html()).to.contain('<child-stub class="b a"')
+      expect(wrapper.html(htmlOptions)).to.contain('<child-stub class="b a"')
     }
   )
 
@@ -206,7 +210,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       }
     }
     const wrapper = shallowMount(TestComponent)
-    expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
+    expect(wrapper.html(htmlOptions)).to.contain(
+      '<child-stub prop="a" attr="hello"'
+    )
   })
 
   it('renders classes for functional components', () => {
@@ -223,7 +229,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       components
     }
     const wrapper = shallowMount(TestComponent)
-    expect(wrapper.html()).to.contain('<child-stub class="b a"')
+    expect(wrapper.html(htmlOptions)).to.contain('<child-stub class="b a"')
     const TestComponent2 = {
       template: `<child :class="classA"/>`,
       data: () => ({
@@ -232,7 +238,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       components
     }
     const wrapper2 = shallowMount(TestComponent2)
-    expect(wrapper2.html()).to.contain('<child-stub class="a"')
+    expect(wrapper2.html(htmlOptions)).to.contain('<child-stub class="a"')
     const TestComponent3 = {
       template: `<child class="b" />`,
       data: () => ({
@@ -241,7 +247,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       components
     }
     const wrapper3 = shallowMount(TestComponent3)
-    expect(wrapper3.html()).to.contain('<child-stub class="b"')
+    expect(wrapper3.html(htmlOptions)).to.contain('<child-stub class="b"')
   })
 
   itDoNotRunIf(vueVersion < 2.1, 'handles recursive components', () => {
@@ -254,7 +260,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       name: 'test-component'
     }
     const wrapper = shallowMount(TestComponent)
-    expect(wrapper.html()).to.contain('<test-component-stub>')
+    expect(wrapper.html(htmlOptions)).to.contain('<test-component-stub>')
     expect(console.error).not.calledWith('[Vue warn]')
   })
 
@@ -421,7 +427,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     }
     const wrapper = shallowMount(TestComponent)
 
-    expect(wrapper.html()).to.equal('<custom-element></custom-element>')
+    expect(wrapper.html(htmlOptions)).to.equal(
+      '<custom-element></custom-element>'
+    )
   })
 
   it('stubs lazily registered components', () => {
@@ -468,7 +476,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
 
     localVue.use(myPlugin)
     const wrapper = shallowMount(TestComponent, { localVue })
-    expect(wrapper.html()).to.contain('registered-component-stub')
+    expect(wrapper.html(htmlOptions)).to.contain('registered-component-stub')
   })
 
   it('throws an error when the component fails to mount', () => {
@@ -516,7 +524,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       }
     }
     const wrapper = shallowMount(TestComponent)
-    expect(wrapper.html()).to.equal(
+    expect(wrapper.html(htmlOptions)).to.equal(
       '<div>' +
         '<childcomponent-stub></childcomponent-stub> ' +
         '<anonymous-stub></anonymous-stub> ' +