From 2b1ef0a264caf6d4ac78b2247176116c9b07d053 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:03:08 -0300 Subject: [PATCH 01/11] feat(wrapper): allow destroy() method to work with functional components Currently when calling `wrapper.destroy()`, only non-functional components are removed from the DOM. This PR allows functional components to be removed from the DOM as well. --- packages/test-utils/src/wrapper.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index c2eece65f..dd0189e8d 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -124,16 +124,19 @@ export default class Wrapper implements BaseWrapper { * Calls destroy on vm */ destroy(): void { - if (!this.isVueInstance()) { - throwError(`wrapper.destroy() can only be called on a Vue instance`) + if (!this.isVueInstance() || !this.isFunctionalComponent) { + throwError(`wrapper.destroy() can only be called on a Vue instance or functional component`) } if (this.element.parentNode) { this.element.parentNode.removeChild(this.element) } - // $FlowIgnore - this.vm.$destroy() - throwIfInstancesThrew(this.vm) + + if (!this.isFunctionalComponent) { + // $FlowIgnore + this.vm.$destroy() + throwIfInstancesThrew(this.vm) + } } /** From 319e7da2ddd31c043a523cd30fe0b99d153679ec Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:05:11 -0300 Subject: [PATCH 02/11] Update wrapper.js --- packages/test-utils/src/wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index dd0189e8d..09b46be78 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -124,7 +124,7 @@ export default class Wrapper implements BaseWrapper { * Calls destroy on vm */ destroy(): void { - if (!this.isVueInstance() || !this.isFunctionalComponent) { + if (!this.isVueInstance() && !this.isFunctionalComponent) { throwError(`wrapper.destroy() can only be called on a Vue instance or functional component`) } From 5119f57d396fba5e76428f7f634114af312fa54d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:10:52 -0300 Subject: [PATCH 03/11] Update destroy.spec.js --- test/specs/wrapper/destroy.spec.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/test/specs/wrapper/destroy.spec.js b/test/specs/wrapper/destroy.spec.js index a326339db..f68652d1d 100644 --- a/test/specs/wrapper/destroy.spec.js +++ b/test/specs/wrapper/destroy.spec.js @@ -40,6 +40,16 @@ describeWithShallowAndMount('destroy', mountingMethod => { expect(wrapper.vm.$el.parentNode).to.be.null }) + it('removes functional component element from document.body', () => { + const wrapper = mountingMethod( + { template: '
', functional: true }, + { attachToDocument: true } + ) + expect(wrapper.element.parentNode).to.equal(document.body) + wrapper.destroy() + expect(wrapper.element.parentNode).to.be.null + }) + it('throws if component throws during destroy', () => { const TestComponent = { template: '
', From c758262a0fb186413bd015a6bb08348060e3b80c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:18:29 -0300 Subject: [PATCH 04/11] Update wrapper.js --- packages/test-utils/src/wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 09b46be78..dbe52e386 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -132,7 +132,7 @@ export default class Wrapper implements BaseWrapper { this.element.parentNode.removeChild(this.element) } - if (!this.isFunctionalComponent) { + if (this.isVueInstance()) { // $FlowIgnore this.vm.$destroy() throwIfInstancesThrew(this.vm) From c43e6a936e1307b0147803b564de817c53336e45 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:24:18 -0300 Subject: [PATCH 05/11] Update wrapper.js --- packages/test-utils/src/wrapper.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index dbe52e386..561674b48 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -125,7 +125,10 @@ export default class Wrapper implements BaseWrapper { */ destroy(): void { if (!this.isVueInstance() && !this.isFunctionalComponent) { - throwError(`wrapper.destroy() can only be called on a Vue instance or functional component`) + throwError( + `wrapper.destroy() can only be called on a Vue instance or ` + + `functional component.` + ) } if (this.element.parentNode) { From bbe1b0af8ba2e5664a19ce1df576387a44d260a4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 16 Mar 2019 15:47:35 -0300 Subject: [PATCH 06/11] Update destroy.spec.js --- test/specs/wrapper/destroy.spec.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/test/specs/wrapper/destroy.spec.js b/test/specs/wrapper/destroy.spec.js index f68652d1d..3b698f834 100644 --- a/test/specs/wrapper/destroy.spec.js +++ b/test/specs/wrapper/destroy.spec.js @@ -42,7 +42,12 @@ describeWithShallowAndMount('destroy', mountingMethod => { it('removes functional component element from document.body', () => { const wrapper = mountingMethod( - { template: '
', functional: true }, + { + functional: true, + render: h => { + return h('div', {}, []) + } + }, { attachToDocument: true } ) expect(wrapper.element.parentNode).to.equal(document.body) From d1027a5e06e968c31b520f8ef5f7f58ef4aa7ee7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 17 Mar 2019 19:59:55 -0300 Subject: [PATCH 07/11] Update destroy.md --- docs/api/wrapper/destroy.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/api/wrapper/destroy.md b/docs/api/wrapper/destroy.md index 1825ca7a0..ecaf05837 100644 --- a/docs/api/wrapper/destroy.md +++ b/docs/api/wrapper/destroy.md @@ -17,3 +17,8 @@ mount({ }).destroy() expect(spy.calledOnce).toBe(true) ``` + +if `attachToDocument` was set to `true` when mounted, the component dom elements will +also be removed from the document. + +For functional components, `destroy` only removes the rendered dom elements from the document. From 5dfed2756598b680ea6c21fbea4b56450fee003e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 17 Mar 2019 20:03:13 -0300 Subject: [PATCH 08/11] Update options.md --- docs/api/options.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/api/options.md b/docs/api/options.md index 39ac9178d..9ab5206dd 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -206,6 +206,9 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) Component will be attached to DOM when rendered if set to `true`. +When attaching to the DOM, you should call `wrapper.destroy()` at the end of your test to +remove the rendered elements from the document and destroy the component insatance. + ## attrs - type: `Object` From 5f738054416af9c9e3517b0ea757d0199a0a26d3 Mon Sep 17 00:00:00 2001 From: Edd Yerburgh Date: Fri, 22 Mar 2019 09:03:49 -0300 Subject: [PATCH 09/11] Update docs/api/options.md Co-Authored-By: tmorehouse --- docs/api/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/options.md b/docs/api/options.md index 9ab5206dd..13f9f7788 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -207,7 +207,7 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) Component will be attached to DOM when rendered if set to `true`. When attaching to the DOM, you should call `wrapper.destroy()` at the end of your test to -remove the rendered elements from the document and destroy the component insatance. +remove the rendered elements from the document and destroy the component instance. ## attrs From 8f279e8364265af60f46e55d3f2ae86a5095e60c Mon Sep 17 00:00:00 2001 From: Edd Yerburgh Date: Fri, 22 Mar 2019 09:04:17 -0300 Subject: [PATCH 10/11] Update docs/api/wrapper/destroy.md Co-Authored-By: tmorehouse --- docs/api/wrapper/destroy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/wrapper/destroy.md b/docs/api/wrapper/destroy.md index ecaf05837..f806d3aea 100644 --- a/docs/api/wrapper/destroy.md +++ b/docs/api/wrapper/destroy.md @@ -18,7 +18,7 @@ mount({ expect(spy.calledOnce).toBe(true) ``` -if `attachToDocument` was set to `true` when mounted, the component dom elements will +if `attachToDocument` was set to `true` when mounted, the component DOM elements will also be removed from the document. For functional components, `destroy` only removes the rendered dom elements from the document. From 8d6b768587ed37b3e51e7332962a3c0eaa244f49 Mon Sep 17 00:00:00 2001 From: Edd Yerburgh Date: Fri, 22 Mar 2019 09:05:10 -0300 Subject: [PATCH 11/11] Update docs/api/wrapper/destroy.md Co-Authored-By: tmorehouse --- docs/api/wrapper/destroy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/wrapper/destroy.md b/docs/api/wrapper/destroy.md index f806d3aea..5857c1867 100644 --- a/docs/api/wrapper/destroy.md +++ b/docs/api/wrapper/destroy.md @@ -21,4 +21,4 @@ expect(spy.calledOnce).toBe(true) if `attachToDocument` was set to `true` when mounted, the component DOM elements will also be removed from the document. -For functional components, `destroy` only removes the rendered dom elements from the document. +For functional components, `destroy` only removes the rendered DOM elements from the document.