From 3c89221996ba70c9f3cc183d9a205f2b06a8f68e Mon Sep 17 00:00:00 2001
From: root <root@LAPTOP-VOQ3N65A.localdomain>
Date: Sat, 14 Mar 2020 18:17:37 +0100
Subject: [PATCH] feat(test-utils): add 'debug' function

close #1461
---
 packages/test-utils/src/wrapper-array.js | 13 ++++++
 packages/test-utils/src/wrapper.js       | 12 ++++++
 test/specs/vue-wrapper.spec.js           | 24 +++++++++++
 test/specs/wrapper-array.spec.js         | 53 ++++++++++++++++++++++++
 test/specs/wrapper.spec.js               | 24 +++++++++++
 5 files changed, 126 insertions(+)

diff --git a/packages/test-utils/src/wrapper-array.js b/packages/test-utils/src/wrapper-array.js
index 6a15bcb6d..c271b6d9b 100644
--- a/packages/test-utils/src/wrapper-array.js
+++ b/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 --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js
index ea31cf192..1d33f9dd8 100644
--- a/packages/test-utils/src/wrapper.js
+++ b/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 --git a/test/specs/vue-wrapper.spec.js b/test/specs/vue-wrapper.spec.js
index 53b585c37..b79bbabd2 100644
--- a/test/specs/vue-wrapper.spec.js
+++ b/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 --git a/test/specs/wrapper-array.spec.js b/test/specs/wrapper-array.spec.js
index 38bf4c03f..2154884ba 100644
--- a/test/specs/wrapper-array.spec.js
+++ b/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 --git a/test/specs/wrapper.spec.js b/test/specs/wrapper.spec.js
index aaa013719..27373c131 100644
--- a/test/specs/wrapper.spec.js
+++ b/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()
+    })
+  })
 })