feat(destroy): add destroy wrapper method (#129)

* Added Destroy method to wrapper

* Added Destroy method to wrapper-array

* Changed update to destroy

* Added destroy to type/index.d.ts

* Added destroy array test

* Added doc

* updated doc

* Updated wording

* Added destroy to summary

* Added destroy to wrapper doc

Author: vouill

docs/en/SUMMARY.md

@@ -43,6 +43,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
+    * [destroy](api/wrapper/destroy.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -58,5 +59,6 @@
     * [setProps](api/wrapper-array/setProps.md)
     * [trigger](api/wrapper-array/trigger.md)
     * [update](api/wrapper-array/update.md)
+    * [destroy](api/wrapper-array/destroy.md)
   * [Selectors](api/selectors.md)
   * [createLocalVue](api/createLocalVue.md)

docs/en/api/wrapper-array/destroy.md

@@ -0,0 +1,18 @@
+# destroy()
+
+Destroys each Vue `Wrapper` in `WrapperArray`.
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.contains('p')).toBe(true)
+divArray.destroy()
+expect(divArray.contains('p')).toBe(false)
+
+```

docs/en/api/wrapper/destroy.md

@@ -0,0 +1,20 @@
+# destroy()
+
+Destroys a Vue component instance.
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+
+const spy = sinon.stub()
+mount({
+  render: null,
+  destroyed () {
+    spy()
+  }
+}).destroy()
+expect(spy.calledOnce).to.equal(true)
+```

flow/wrapper.flow.js

@@ -28,7 +28,8 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     setMethods(methods: Object): void,
     setProps(data: Object): void,
     trigger(type: string, options: Object): void,
-    update(): void
+    update(): void,
+    destroy(): void
 }
 
 declare type WrapperOptions = { // eslint-disable-line no-undef

src/wrappers/error-wrapper.js

@@ -99,4 +99,8 @@ export default class ErrorWrapper implements BaseWrapper {
   update (): void {
     throwError(`find did not return ${this.selector}, cannot call update() on empty Wrapper`)
   }
+
+  destroy (): void {
+    throwError(`find did not return ${this.selector}, cannot call destroy() on empty Wrapper`)
+  }
 }

src/wrappers/wrapper-array.js

@@ -154,4 +154,10 @@ export default class WrapperArray implements BaseWrapper {
 
     this.wrappers.forEach(wrapper => wrapper.update())
   }
+
+  destroy (): void {
+    this.throwErrorIfWrappersIsEmpty('destroy')
+
+    this.wrappers.forEach(wrapper => wrapper.destroy())
+  }
 }

src/wrappers/wrapper.js

@@ -384,6 +384,21 @@ export default class Wrapper implements BaseWrapper {
     return this.element.textContent
   }
 
+  /**
+   * Calls destroy on vm
+   */
+  destroy () {
+    if (!this.isVueComponent) {
+      throwError('wrapper.destroy() can only be called on a Vue instance')
+    }
+
+    if (this.vm.$el.parentNode) {
+      this.vm.$el.parentNode.removeChild(this.vm.$el)
+    }
+
+    this.vm.$destroy()
+  }
+
   /**
    * Dispatches a DOM event on wrapper
    */

test/unit/specs/mount/Wrapper/destroy.spec.js

@@ -0,0 +1,35 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+import sinon from 'sinon'
+
+describe('destroy', () => {
+  it('should trigger beforeDestroy ', () => {
+    const spy = sinon.stub()
+    mount({
+      render: null,
+      beforeDestroy () {
+        spy()
+      }
+    }).destroy()
+    expect(spy.calledOnce).to.equal(true)
+  })
+
+  it('should trigger destroy ', () => {
+    const spy = sinon.stub()
+    mount({
+      render: null,
+      destroyed () {
+        spy()
+      }
+    }).destroy()
+    expect(spy.calledOnce).to.equal(true)
+  })
+
+  it('should remove element from document.body', () => {
+    const compiled = compileToFunctions('<div></div>')
+    const wrapper = mount(compiled, { attachToDocument: true })
+    expect(wrapper.vm.$el.parentNode).to.equal(document.body)
+    wrapper.destroy()
+    expect(wrapper.vm.$el.parentNode).to.be.null
+  })
+})

test/unit/specs/wrappers/error-wrapper.spec.js

@@ -154,4 +154,11 @@ describe('ErrorWrapper', () => {
     const error = new ErrorWrapper(selector)
     expect(() => error.update()).to.throw().with.property('message', message)
   })
+
+  it('destroy throws error when called', () => {
+    const selector = 'div'
+    const message = `[vue-test-utils]: find did not return ${selector}, cannot call destroy() on empty Wrapper`
+    const error = new ErrorWrapper(selector)
+    expect(() => error.destroy()).to.throw().with.property('message', message)
+  })
 })

test/unit/specs/wrappers/wrapper-array.spec.js

@@ -258,4 +258,11 @@ describe('WrapperArray', () => {
     wrapperArray.update()
     expect(update.calledTwice).to.equal(true)
   })
+
+  it('destroy calls destroy on each wrapper', () => {
+    const destroy = sinon.stub()
+    const wrapperArray = new WrapperArray([{ destroy }, { destroy }])
+    wrapperArray.destroy()
+    expect(destroy.calledTwice).to.equal(true)
+  })
 })