From 3d90c86d9ad84c5f6566c10a0b8ab32ed70d824d Mon Sep 17 00:00:00 2001 From: dobromir-hristov Date: Fri, 1 May 2020 11:23:29 +0300 Subject: [PATCH 1/4] refactor: cleanup find methods --- packages/test-utils/src/wrapper.js | 71 +++++++++++++++--------------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 91fd02406..56c5cba60 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -225,41 +225,8 @@ export default class Wrapper implements BaseWrapper { 'Use `findComponent` instead' ) } - const node = find(this.rootNode, this.vm, selector)[0] - - if (!node) { - return new ErrorWrapper(rawSelector) - } - const wrapper = createWrapper(node, this.options) - wrapper.selector = rawSelector - return wrapper - } - - /** - * Finds DOM elements in tree of the current wrapper that matches - * the provided selector. - */ - findAll(rawSelector: Selector): WrapperArray { - const selector = getSelector(rawSelector, 'findAll') - if (selector.type !== DOM_SELECTOR) { - warnDeprecated( - 'finding components with `findAll`', - 'Use `findAllComponents` instead' - ) - } - const nodes = find(this.rootNode, this.vm, selector) - const wrappers = nodes.map(node => { - // Using CSS Selector, returns a VueWrapper instance if the root element - // binds a Vue instance. - const wrapper = createWrapper(node, this.options) - wrapper.selector = rawSelector - return wrapper - }) - - const wrapperArray = new WrapperArray(wrappers) - wrapperArray.selector = rawSelector - return wrapperArray + return this.__find(rawSelector, selector) } /** @@ -273,6 +240,16 @@ export default class Wrapper implements BaseWrapper { 'findComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' ) } + if (!this.vm) { + throwError( + 'You cannot chain findComponent off a DOM element. It can only be used on Vue Components.' + ) + } + + return this.__find(rawSelector, selector) + } + + __find(rawSelector: Selector, selector: Object): Wrapper | ErrorWrapper { const node = find(this.rootNode, this.vm, selector)[0] if (!node) { @@ -284,17 +261,41 @@ export default class Wrapper implements BaseWrapper { return wrapper } + /** + * Finds DOM elements in tree of the current wrapper that matches + * the provided selector. + */ + findAll(rawSelector: Selector): WrapperArray { + const selector = getSelector(rawSelector, 'findAll') + if (selector.type !== DOM_SELECTOR) { + warnDeprecated( + 'finding components with `findAll`', + 'Use `findAllComponents` instead' + ) + } + return this.__findAll(rawSelector, selector) + } + /** * Finds components in tree of the current wrapper that matches * the provided selector. */ findAllComponents(rawSelector: Selector): WrapperArray { const selector = getSelector(rawSelector, 'findAll') + if (!this.vm) { + throwError( + 'You cannot chain findAllComponents off a DOM element. It can only be used on Vue Components.' + ) + } if (selector.type === DOM_SELECTOR) { throwError( - 'findAllComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' + 'findAllComponents requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' ) } + return this.__findAll(rawSelector, selector) + } + + __findAll(rawSelector: Selector, selector: Object): WrapperArray { const nodes = find(this.rootNode, this.vm, selector) const wrappers = nodes.map(node => { // Using CSS Selector, returns a VueWrapper instance if the root element From 671b982a0ab48626225aeb92b23d694659b19e98 Mon Sep 17 00:00:00 2001 From: dobromir-hristov Date: Fri, 1 May 2020 11:28:04 +0300 Subject: [PATCH 2/4] refactor: add deprecation jsdoc tags --- packages/test-utils/src/wrapper.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 56c5cba60..d478b0226 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -126,6 +126,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks if wrapper contains provided selector. + * @deprecated */ contains(rawSelector: Selector): boolean { warnDeprecated( @@ -176,6 +177,7 @@ export default class Wrapper implements BaseWrapper { /** * Returns an Array containing custom events emitted by the Wrapper vm + * @deprecated */ emittedByOrder(): Array<{ name: string, args: Array }> { warnDeprecated('emittedByOrder', 'Use `wrapper.emitted` instead') @@ -319,6 +321,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks if node matches selector + * @deprecated */ is(rawSelector: Selector): boolean { warnDeprecated('is', 'Use element.tagName instead') @@ -333,6 +336,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks if node is empty + * @deprecated */ isEmpty(): boolean { warnDeprecated( @@ -361,6 +365,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks if node is visible + * @deprecated */ isVisible(): boolean { warnDeprecated( @@ -385,6 +390,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks if wrapper is a vue instance + * @deprecated */ isVueInstance(): boolean { warnDeprecated(`isVueInstance`) @@ -393,6 +399,7 @@ export default class Wrapper implements BaseWrapper { /** * Returns name of component, or tag name if node is not a Vue component + * @deprecated */ name(): string { warnDeprecated(`name`) @@ -415,6 +422,7 @@ export default class Wrapper implements BaseWrapper { /** * Prints a simple overview of the wrapper current state * with useful information for debugging + * @deprecated */ overview(): void { warnDeprecated(`overview`) @@ -518,6 +526,7 @@ export default class Wrapper implements BaseWrapper { /** * Checks radio button or checkbox element + * @deprecated */ setChecked(checked: boolean = true): Promise<*> { warnDeprecated( @@ -569,6 +578,7 @@ export default class Wrapper implements BaseWrapper { /** * Selects element + * @deprecated */ setSelected(): Promise { warnDeprecated( @@ -626,6 +636,7 @@ export default class Wrapper implements BaseWrapper { /** * Sets vm methods + * @deprecated */ setMethods(methods: Object): void { warnDeprecated(`setMethods`) From 176d853a250dc9a1ce19da54adc55e522cc1d365 Mon Sep 17 00:00:00 2001 From: dobromir-hristov Date: Fri, 1 May 2020 11:36:46 +0300 Subject: [PATCH 3/4] refactor: cleanup tests --- test/specs/wrapper/find.spec.js | 10 ++++++++++ test/specs/wrapper/findAll.spec.js | 16 +++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 19e748f58..ed3a306f4 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -152,6 +152,16 @@ describeWithShallowAndMount('find', mountingMethod => { .with.property('message', message) }) + it('throws an error if findComponent is chained off a DOM element', () => { + const wrapper = mountingMethod(ComponentWithChild) + const message = + '[vue-test-utils]: You cannot chain findComponent off a DOM element. It can only be used on Vue Components.' + const fn = () => wrapper.find('span').findComponent('#foo') + expect(fn) + .to.throw() + .with.property('message', message) + }) + itSkipIf(isRunningPhantomJS, 'returns Wrapper of class component', () => { const TestComponent = { template: ` diff --git a/test/specs/wrapper/findAll.spec.js b/test/specs/wrapper/findAll.spec.js index 2839b0bd1..515ff0bbf 100644 --- a/test/specs/wrapper/findAll.spec.js +++ b/test/specs/wrapper/findAll.spec.js @@ -145,22 +145,32 @@ describeWithShallowAndMount('findAll', mountingMethod => { expect(componentArr.length).to.equal(1) }) - it('returns an array of VueWrappers of Vue Components matching componentusing findAllComponents', () => { + it('returns an array of VueWrappers of Vue Components matching components using findAllComponents', () => { const wrapper = mountingMethod(ComponentWithChild) const componentArr = wrapper.findAllComponents(Component) expect(componentArr.length).to.equal(1) }) - it('throws an error if findComponent selector is a CSS selector', () => { + it('throws an error if findAllComponents selector is a CSS selector', () => { const wrapper = mountingMethod(Component) const message = - '[vue-test-utils]: findAllComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' + '[vue-test-utils]: findAllComponents requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' const fn = () => wrapper.findAllComponents('#foo') expect(fn) .to.throw() .with.property('message', message) }) + it('throws an error if chaining findAllComponents off a DOM element', () => { + const wrapper = mountingMethod(ComponentWithChild) + const message = + '[vue-test-utils]: You cannot chain findAllComponents off a DOM element. It can only be used on Vue Components.' + const fn = () => wrapper.find('span').findAllComponents('#foo') + expect(fn) + .to.throw() + .with.property('message', message) + }) + it('returns correct number of Vue Wrapper when component has a v-for', () => { const items = [{ id: 1 }, { id: 2 }, { id: 3 }] const wrapper = mountingMethod(ComponentWithVFor, { propsData: { items } }) From a0e76b67c7821d327bbfdaf8af707f5013cc7f2e Mon Sep 17 00:00:00 2001 From: dobromir-hristov Date: Fri, 1 May 2020 11:44:15 +0300 Subject: [PATCH 4/4] fix: fix order of errors --- packages/test-utils/src/wrapper.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index d478b0226..3ae6a0e42 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -237,14 +237,15 @@ export default class Wrapper implements BaseWrapper { */ findComponent(rawSelector: Selector): Wrapper | ErrorWrapper { const selector = getSelector(rawSelector, 'findComponent') - if (selector.type === DOM_SELECTOR) { + if (!this.vm) { throwError( - 'findComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' + 'You cannot chain findComponent off a DOM element. It can only be used on Vue Components.' ) } - if (!this.vm) { + + if (selector.type === DOM_SELECTOR) { throwError( - 'You cannot chain findComponent off a DOM element. It can only be used on Vue Components.' + 'findComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' ) }