fix: pretty print wrapper.html() output (#510)

Mimics v1 output by using "pretty" on HTML output before returning it from a wrapper.

Fixes #498

Author: tbuteler

package.json

@@ -21,6 +21,7 @@
     "@rollup/plugin-replace": "^2.4.2",
     "@types/jest": "26.0.22",
     "@types/node": "14.14.37",
+    "@types/pretty": "^2.0.0",
     "@vue/compiler-sfc": "3.0.11",
     "babel-jest": "^26.6.3",
     "babel-preset-jest": "^26.6.2",
@@ -31,6 +32,7 @@
     "jsdom-global": "^3.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
+    "pretty": "^2.0.0",
     "reflect-metadata": "^0.1.13",
     "rollup": "^2.44.0",
     "rollup-plugin-typescript2": "^0.30.0",

src/vueWrapper.ts

@@ -2,6 +2,7 @@ import { ComponentPublicInstance, nextTick, App } from 'vue'
 import { ShapeFlags } from '@vue/shared'
 // @ts-ignore todo - No DefinitelyTyped package exists for this
 import eventTypes from 'dom-event-types'
+import pretty from 'pretty'
 
 import { config } from './config'
 import { DOMWrapper } from './domWrapper'
@@ -90,10 +91,10 @@ export class VueWrapper<T extends ComponentPublicInstance>
   html() {
     // cover cases like <Suspense>, multiple root nodes.
     if (this.parentElement['__vue_app__']) {
-      return this.parentElement.innerHTML
+      return pretty(this.parentElement.innerHTML)
     }
 
-    return this.element.outerHTML
+    return pretty(this.element.outerHTML)
   }
 
   find<K extends keyof HTMLElementTagNameMap>(

tests/html.spec.ts

@@ -24,7 +24,9 @@ describe('html', () => {
 
     const wrapper = mount(Component)
 
-    expect(wrapper.html()).toBe('<div>foo</div><div>bar</div><div>baz</div>')
+    expect(wrapper.html()).toBe(
+      '<div>foo</div>\n' + '<div>bar</div>\n' + '<div>baz</div>'
+    )
   })
 
   it('returns the html when mounting a Suspense component', () => {

tests/mountingOptions/global.components.spec.ts

@@ -41,7 +41,9 @@ describe('global.components', () => {
     expect(spy).not.toHaveBeenCalled()
     spy.mockRestore()
     expect(wrapper.html()).toBe(
-      `<div><global-component-stub></global-component-stub></div>`
+      '<div>\n' +
+        '  <global-component-stub></global-component-stub>\n' +
+        '</div>'
     )
   })
 

tests/mountingOptions/stubs.global.spec.ts

@@ -34,7 +34,7 @@ describe('mounting options: stubs', () => {
       }
     })
 
-    expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
+    expect(wrapper.html()).toBe('<div></div>\n' + '<foo-stub></foo-stub>')
   })
 
   // https://github.com/vuejs/vue-test-utils-next/issues/249
@@ -57,7 +57,7 @@ describe('mounting options: stubs', () => {
     })
 
     expect(wrapper.html()).toBe(
-      '<div><foo-stub></foo-stub><a></a><span></span></div>'
+      '<div>\n' + '  <foo-stub></foo-stub><a></a><span></span>\n' + '</div>'
     )
     expect(wrapper.getComponent(RouterLinkStub).vm.to).toBe('/foo')
   })
@@ -79,7 +79,7 @@ describe('mounting options: stubs', () => {
     })
 
     expect(wrapper.html()).toEqual(
-      '<div><functional-foo-stub></functional-foo-stub></div>'
+      '<div>\n' + '  <functional-foo-stub></functional-foo-stub>\n' + '</div>'
     )
   })
 
@@ -94,7 +94,9 @@ describe('mounting options: stubs', () => {
       }
     })
 
-    expect(wrapper.html()).toEqual('<div><foo-stub></foo-stub></div>')
+    expect(wrapper.html()).toEqual(
+      '<div>\n' + '  <foo-stub></foo-stub>\n' + '</div>'
+    )
   })
 
   it('passes all attributes to stubbed components', () => {
@@ -116,7 +118,9 @@ describe('mounting options: stubs', () => {
     })
 
     expect(wrapper.html()).toEqual(
-      '<div><foo-stub class="bar" test-id="foo" dynamic="[object Object]"></foo-stub></div>'
+      '<div>\n' +
+        '  <foo-stub class="bar" test-id="foo" dynamic="[object Object]"></foo-stub>\n' +
+        '</div>'
     )
   })
 
@@ -141,7 +145,7 @@ describe('mounting options: stubs', () => {
       }
     })
 
-    expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
+    expect(wrapper.html()).toBe('<div></div>\n' + '<foo-stub></foo-stub>')
   })
 
   it('prevents lifecycle hooks triggering in a stub', () => {
@@ -236,7 +240,7 @@ describe('mounting options: stubs', () => {
 
     expect(created).not.toHaveBeenCalled()
     expect(wrapper.html()).toBe(
-      '<div id="root"><div id="msg">Hello world</div></div>'
+      '<div id="root">\n' + '  <div id="msg">Hello world</div>\n' + '</div>'
     )
   })
 
@@ -274,7 +278,7 @@ describe('mounting options: stubs', () => {
       }
     })
 
-    expect(wrapper.html()).toBe('<span></span><div></div>')
+    expect(wrapper.html()).toBe('<span></span>\n' + '<div></div>')
   })
 
   it('stubs a component with a kabeb-case name', () => {
@@ -341,7 +345,9 @@ describe('mounting options: stubs', () => {
     const wrapper = mount(Comp)
 
     expect(wrapper.html()).toBe(
-      '<transition-stub><div id="content"></div></transition-stub>'
+      '<transition-stub>\n' +
+        '  <div id="content"></div>\n' +
+        '</transition-stub>'
     )
   })
 
@@ -440,7 +446,9 @@ describe('mounting options: stubs', () => {
         }
       })
       expect(wrapper.html()).toBe(
-        `<div><component-with-slots-stub>Default</component-with-slots-stub></div>`
+        '<div>\n' +
+          '  <component-with-slots-stub>Default</component-with-slots-stub>\n' +
+          '</div>'
       )
     })
 
@@ -452,7 +460,9 @@ describe('mounting options: stubs', () => {
         }
       })
       expect(wrapper.html()).toBe(
-        '<div><component-with-slots-stub></component-with-slots-stub></div>'
+        '<div>\n' +
+          '  <component-with-slots-stub></component-with-slots-stub>\n' +
+          '</div>'
       )
     })
 
@@ -485,10 +495,10 @@ describe('mounting options: stubs', () => {
       })
 
       expect(wrapper.html()).toEqual(
-        '<component-with-slots-stub>' +
-          '<component-with-slots-stub>' +
-          '<simple-slot-stub>nested content</simple-slot-stub>' +
-          '</component-with-slots-stub>' +
+        '<component-with-slots-stub>\n' +
+          '  <component-with-slots-stub>\n' +
+          '    <simple-slot-stub>nested content</simple-slot-stub>\n' +
+          '  </component-with-slots-stub>\n' +
           '</component-with-slots-stub>'
       )
     })

tests/shallowMount.spec.ts

@@ -40,25 +40,25 @@ describe('shallowMount', () => {
   it('stubs all components automatically using { shallow: true }', () => {
     const wrapper = mount(ComponentWithChildren, { shallow: true })
     expect(wrapper.html()).toEqual(
-      '<div class="ComponentWithChildren">' +
-        '<hello-stub></hello-stub>' +
-        '<component-with-input-stub></component-with-input-stub>' +
-        '<component-without-name-stub></component-without-name-stub>' +
-        '<script-setup-stub></script-setup-stub>' +
-        '<with-props-stub></with-props-stub>' +
+      '<div class="ComponentWithChildren">\n' +
+        '  <hello-stub></hello-stub>\n' +
+        '  <component-with-input-stub></component-with-input-stub>\n' +
+        '  <component-without-name-stub></component-without-name-stub>\n' +
+        '  <script-setup-stub></script-setup-stub>\n' +
+        '  <with-props-stub></with-props-stub>\n' +
         '</div>'
     )
   })
 
   it('stubs all components automatically using shallowMount', () => {
     const wrapper = shallowMount(ComponentWithChildren)
     expect(wrapper.html()).toEqual(
-      '<div class="ComponentWithChildren">' +
-        '<hello-stub></hello-stub>' +
-        '<component-with-input-stub></component-with-input-stub>' +
-        '<component-without-name-stub></component-without-name-stub>' +
-        '<script-setup-stub></script-setup-stub>' +
-        '<with-props-stub></with-props-stub>' +
+      '<div class="ComponentWithChildren">\n' +
+        '  <hello-stub></hello-stub>\n' +
+        '  <component-with-input-stub></component-with-input-stub>\n' +
+        '  <component-without-name-stub></component-without-name-stub>\n' +
+        '  <script-setup-stub></script-setup-stub>\n' +
+        '  <with-props-stub></with-props-stub>\n' +
         '</div>'
     )
   })
@@ -73,12 +73,12 @@ describe('shallowMount', () => {
       }
     })
     expect(wrapper.html()).toEqual(
-      '<div class="ComponentWithChildren">' +
-        '<div>Override</div>' +
-        '<component-with-input-stub></component-with-input-stub>' +
-        '<component-without-name-stub></component-without-name-stub>' +
-        '<script-setup-stub></script-setup-stub>' +
-        '<with-props-stub></with-props-stub>' +
+      '<div class="ComponentWithChildren">\n' +
+        '  <div>Override</div>\n' +
+        '  <component-with-input-stub></component-with-input-stub>\n' +
+        '  <component-without-name-stub></component-without-name-stub>\n' +
+        '  <script-setup-stub></script-setup-stub>\n' +
+        '  <with-props-stub></with-props-stub>\n' +
         '</div>'
     )
   })
@@ -93,10 +93,10 @@ describe('shallowMount', () => {
       }
     })
     expect(wrapper.html()).toEqual(
-      '<div>Override</div>' +
-        '<component-with-input-stub></component-with-input-stub>' +
-        '<stub></stub>' +
-        '<stub></stub>' +
+      '<div>Override</div>\n' +
+        '<component-with-input-stub></component-with-input-stub>\n' +
+        '<stub></stub>\n' +
+        '<stub></stub>\n' +
         '<with-props-stub></with-props-stub>'
     )
   })