diff --git a/packages/shared/merge-options.js b/packages/shared/merge-options.js index 5905808e8..a1ba05d6a 100644 --- a/packages/shared/merge-options.js +++ b/packages/shared/merge-options.js @@ -1,5 +1,6 @@ // @flow import { normalizeStubs, normalizeProvide } from './normalize' +import { warn } from 'shared/util' function getOption(option, config?: Object): any { if (option === false) { @@ -33,6 +34,13 @@ export function mergeOptions( const methods = (getOption(options.methods, config.methods): { [key: string]: Function }) + + if (config.methods && Object.keys(config.methods).length) { + warn( + `config.methods has been deprecated. It will be removed in a future release` + ) + } + const provide = (getOption(options.provide, config.provide): Object) const stubs = (getStubs(options.stubs, config.stubs): Object) // $FlowIgnore diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 1b21b6cf7..7fa5699e8 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -3,11 +3,16 @@ import Vue from 'vue' import pretty from 'pretty' import getSelector from './get-selector' -import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts' +import { + REF_SELECTOR, + FUNCTIONAL_OPTIONS, + VUE_VERSION, + DOM_SELECTOR +} from 'shared/consts' import config from './config' import WrapperArray from './wrapper-array' import ErrorWrapper from './error-wrapper' -import { throwError, getCheckedEvent, isPhantomJS } from 'shared/util' +import { throwError, getCheckedEvent, isPhantomJS, warn } from 'shared/util' import find from './find' import createWrapper from './create-wrapper' import { recursivelySetData } from './recursively-set-data' @@ -117,6 +122,9 @@ export default class Wrapper implements BaseWrapper { * Checks if wrapper contains provided selector. */ contains(rawSelector: Selector): boolean { + warn( + 'contains is deprecated and will be removed in a future release. Use `wrapper.find`, `wrapper.findComponent` or `wrapper.get` instead' + ) const selector = getSelector(rawSelector, 'contains') const nodes = find(this.rootNode, this.vm, selector) return nodes.length > 0 @@ -163,6 +171,9 @@ export default class Wrapper implements BaseWrapper { * Returns an Array containing custom events emitted by the Wrapper vm */ emittedByOrder(): Array<{ name: string, args: Array }> { + warn( + 'emittedByOrder is deprecated and will be removed in a future release. Use `wrapper.emitted` instead' + ) if (!this._emittedByOrder && !this.vm) { throwError( `wrapper.emittedByOrder() can only be called on a Vue instance` @@ -190,6 +201,9 @@ export default class Wrapper implements BaseWrapper { * matches the provided selector. */ get(rawSelector: Selector): Wrapper { + warn( + 'get is deprecated and will be removed in a future release. Use `find` or `findComponent` instead' + ) const found = this.find(rawSelector) if (found instanceof ErrorWrapper) { throw new Error(`Unable to find ${rawSelector} within: ${this.html()}`) @@ -198,11 +212,16 @@ export default class Wrapper implements BaseWrapper { } /** - * Finds first node in tree of the current wrapper that + * Finds first DOM node in tree of the current wrapper that * matches the provided selector. */ find(rawSelector: Selector): Wrapper | ErrorWrapper { const selector = getSelector(rawSelector, 'find') + if (selector.type !== DOM_SELECTOR) { + warn( + 'finding components with `find` is deprecated and will be removed in a future release. Use `findComponent` instead' + ) + } const node = find(this.rootNode, this.vm, selector)[0] if (!node) { @@ -215,11 +234,63 @@ export default class Wrapper implements BaseWrapper { } /** - * Finds node in tree of the current wrapper that matches + * 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) { + warn( + 'finding components with `findAll` is deprecated and will be removed in a future release. 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 + } + + /** + * Finds first component in tree of the current wrapper that + * matches the provided selector. + */ + findComponent(rawSelector: Selector): Wrapper | ErrorWrapper { + const selector = getSelector(rawSelector, 'findComponent') + if (selector.type === DOM_SELECTOR) { + throwError( + 'findComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` 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 components in tree of the current wrapper that matches + * the provided selector. + */ + findAllComponents(rawSelector: Selector): WrapperArray { + const selector = getSelector(rawSelector, 'findAll') + 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' + ) + } const nodes = find(this.rootNode, this.vm, selector) const wrappers = nodes.map(node => { // Using CSS Selector, returns a VueWrapper instance if the root element @@ -245,6 +316,9 @@ export default class Wrapper implements BaseWrapper { * Checks if node matches selector */ is(rawSelector: Selector): boolean { + warn( + `is is deprecated and will be removed in a future release. Use element.tagName instead` + ) const selector = getSelector(rawSelector, 'is') if (selector.type === REF_SELECTOR) { @@ -258,6 +332,10 @@ export default class Wrapper implements BaseWrapper { * Checks if node is empty */ isEmpty(): boolean { + warn( + `isEmpty is deprecated and will be removed in a future release. ` + + `Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobeempty` + ) if (!this.vnode) { return this.element.innerHTML === '' } @@ -282,6 +360,8 @@ export default class Wrapper implements BaseWrapper { * Checks if node is visible */ isVisible(): boolean { + warn(`isEmpty is deprecated and will be removed in a future release. + Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobevisible`) let element = this.element while (element) { if ( @@ -302,6 +382,7 @@ export default class Wrapper implements BaseWrapper { * Checks if wrapper is a vue instance */ isVueInstance(): boolean { + warn(`isVueInstance is deprecated and will be removed in a future release`) return !!this.vm } @@ -529,6 +610,7 @@ export default class Wrapper implements BaseWrapper { * Sets vm methods */ setMethods(methods: Object): void { + warn(`setMethods is deprecated and will be removed in a future release`) if (!this.isVueInstance()) { throwError(`wrapper.setMethods() can only be called on a Vue instance`) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index d457d0e32..19e748f58 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -137,6 +137,21 @@ describeWithShallowAndMount('find', mountingMethod => { expect(wrapper.find(Component).vnode).to.be.an('object') }) + it('returns Wrapper of Vue Components matching component using findComponent', () => { + const wrapper = mountingMethod(ComponentWithChild) + expect(wrapper.findComponent(Component).vnode).to.be.an('object') + }) + + it('throws an error if findComponent selector is a CSS selector', () => { + const wrapper = mountingMethod(Component) + const message = + '[vue-test-utils]: findComponent requires a Vue constructor or valid find object. If you are searching for DOM nodes, use `find` instead' + const fn = () => wrapper.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 c0ac72a5f..2839b0bd1 100644 --- a/test/specs/wrapper/findAll.spec.js +++ b/test/specs/wrapper/findAll.spec.js @@ -145,6 +145,22 @@ describeWithShallowAndMount('findAll', mountingMethod => { expect(componentArr.length).to.equal(1) }) + it('returns an array of VueWrappers of Vue Components matching componentusing 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', () => { + 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' + const fn = () => wrapper.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 } })