feat(test-utils): add 'debug' function

close vuejs#1461

Author: root

Diff for: packages/test-utils/src/wrapper-array.js

@@ -101,6 +101,19 @@ export default class WrapperArray implements BaseWrapper {
     )
   }
 
+  /**
+   * Prety print element HTML content
+   */
+  debug(): void {
+    this.throwErrorIfWrappersIsEmpty('debug')
+
+    console.log(`Wrapper-Array (Length: ${this.wrappers.length}):\n`)
+    this.wrappers.forEach((wrapper, idx) => {
+      console.log(`(At ${idx})`)
+      wrapper.debug()
+    })
+  }
+
   html(): void {
     this.throwErrorIfWrappersIsEmpty('html')
 

Diff for: packages/test-utils/src/wrapper.js

@@ -234,6 +234,18 @@ export default class Wrapper implements BaseWrapper {
     return wrapperArray
   }
 
+  /**
+   * Pretty print HTML of element with useful
+   * information for debugging
+   */
+  debug(): void {
+    const pretyHtml = pretty(this.element.outerHTML)
+    const title = 'Wrapper'
+
+    console.log(`${title}:`)
+    console.log(`${pretyHtml}\n`)
+  }
+
   /**
    * Returns HTML of element as a string
    */

Diff for: test/specs/vue-wrapper.spec.js

@@ -13,4 +13,28 @@ describeWithShallowAndMount('VueWrapper', mountingMethod => {
         .with.property('message', message)
     })
   })
+
+  describe('debug function', () => {
+    const sandbox = sinon.createSandbox()
+
+    beforeEach(() => {
+      sandbox.spy(console, 'log')
+    })
+
+    it('writes to the console formated html content of the vue-wrapper', () => {
+      const basicComponent = { template: '<div><p>Debug me please</p></div>' }
+      const wrapper = mountingMethod(basicComponent)
+
+      wrapper.debug()
+
+      expect(console.log).to.have.been.calledWith('Wrapper:')
+      expect(console.log).to.have.been.calledWith(
+        '<div>\n' + '  <p>Debug me please</p>\n' + '</div>\n'
+      )
+    })
+
+    afterEach(() => {
+      sandbox.restore()
+    })
+  })
 })

Diff for: test/specs/wrapper-array.spec.js

@@ -268,4 +268,57 @@ describeWithShallowAndMount('WrapperArray', mountingMethod => {
     wrapperArray.destroy()
     expect(destroy.calledTwice).to.equal(true)
   })
+
+  describe('debug function', () => {
+    const sandbox = sinon.createSandbox()
+
+    beforeEach(() => {
+      sandbox.spy(console, 'log')
+    })
+
+    it('calls debug on each wrapper with aditional information', () => {
+      function getNestedElement(text, level = 1) {
+        const nestElement = element => {
+          const div = document.createElement('div')
+          div.appendChild(element)
+          return div
+        }
+        let element = document.createElement('p')
+        element.textContent = text
+
+        for (let i = 0; i < level; i++) {
+          element = nestElement(element)
+        }
+        return element
+      }
+      const wrapperArray = getWrapperArray([
+        new Wrapper(getNestedElement('One level', 1)),
+        new Wrapper(getNestedElement('Two levels', 2))
+      ])
+
+      wrapperArray.debug()
+
+      expect(console.log).to.have.been.calledWith(
+        'Wrapper-Array (Length: 2):\n'
+      )
+      expect(console.log).to.have.been.calledWith('(At 0)')
+      expect(console.log).to.have.been.calledWith('Wrapper:')
+      expect(console.log).to.have.been.calledWith(
+        '<div>\n' + '  <p>One level</p>\n' + '</div>\n'
+      )
+      expect(console.log).to.have.been.calledWith('(At 1)')
+      expect(console.log).to.have.been.calledWith('Wrapper:')
+      expect(console.log).to.have.been.calledWith(
+        '<div>\n' +
+          '  <div>\n' +
+          '    <p>Two levels</p>\n' +
+          '  </div>\n' +
+          '</div>\n'
+      )
+    })
+
+    afterEach(() => {
+      sandbox.restore()
+    })
+  })
 })

Diff for: test/specs/wrapper.spec.js

@@ -53,4 +53,28 @@ describeWithShallowAndMount('Wrapper', mountingMethod => {
       expect(() => enableAutoDestroy(noop)).to.throw()
     })
   })
+
+  describe('debug function', () => {
+    const sandbox = sinon.createSandbox()
+
+    beforeEach(() => {
+      sandbox.spy(console, 'log')
+    })
+
+    it('writes to the console formated html content of the wrapper', () => {
+      const basicComponent = { template: '<div><p>Debug me please</p></div>' }
+      const wrapper = mountingMethod(basicComponent)
+
+      wrapper.debug()
+
+      expect(console.log).to.have.been.calledWith('Wrapper:')
+      expect(console.log).to.have.been.calledWith(
+        '<div>\n' + '  <p>Debug me please</p>\n' + '</div>\n'
+      )
+    })
+
+    afterEach(() => {
+      sandbox.restore()
+    })
+  })
 })