chore: improve deprecations

Author: lmiller1990

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

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<any> }> {
+    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`)
     }

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: `

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 } })