feat(find): improve support for functional components

Author: eddyerburgh

.babelrc

@@ -1,4 +1,5 @@
 {
   "presets": ["env", "stage-2", "flow-vue"],
+  "plugins": ["transform-decorators-legacy"],
   "comments": false
 }

package.json

@@ -22,7 +22,7 @@
     "setup": "node build/install-hooks.js",
     "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma",
     "test:compatibility": "test/test.sh",
-    "test:unit": "npm run build:test && mocha-webpack --webpack-config build/webpack.test.config.js test/unit/specs --recursive --require test/unit/setup/mocha.setup.js",
+    "test:unit": "npm run build:test && cross-env BABEL_ENV=test && mocha-webpack --webpack-config build/webpack.test.config.js test/unit/specs --recursive --require test/unit/setup/mocha.setup.js",
     "test:unit:karma": "npm run build:test && cross-env BABEL_ENV=test TARGET=browser karma start test/unit/setup/karma.conf.js --single-run",
     "test:types": "tsc -p types",
     "release": "bash build/release.sh",
@@ -42,6 +42,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-flow-vue": "^1.0.0",
@@ -86,6 +87,7 @@
     "sinon-chai": "^2.10.0",
     "typescript": "^2.4.1",
     "vue": "^2.4.2",
+    "vue-class-component": "^6.1.2",
     "vue-loader": "^13.0.5",
     "vue-router": "^2.7.0",
     "vue-template-compiler": "^2.4.2",

src/lib/create-functional-component.js

@@ -1,6 +1,5 @@
 // @flow
 
-import cloneDeep from 'lodash/cloneDeep'
 import { compileToFunctions } from 'vue-template-compiler'
 import { throwError } from './util'
 
@@ -46,11 +45,10 @@ export default function createFunctionalComponent (component: Component, mountin
     throwError('mount.context must be an object')
   }
 
-  const clonedComponent = cloneDeep(component)
   return {
     render (h: Function) {
       return h(
-        clonedComponent,
+        component,
         mountingOptions.context || component.FunctionalRenderContext,
         (mountingOptions.context && mountingOptions.context.children && mountingOptions.context.children.map(x => typeof x === 'function' ? x(h) : x)) || createFunctionalSlots(mountingOptions.slots, h)
       )

src/lib/find-vue-components.js

@@ -54,12 +54,16 @@ export function vmCtorMatchesName (vm: Component, name: string): boolean {
         vm.$options && vm.$options.name === name
 }
 
-export function vmCtorMatchesSelector (component: Component, Ctor: Object) {
+export function vmCtorMatchesSelector (component: Component, selector: Object) {
+  const Ctor = selector._Ctor || selector.options && selector.options._Ctor
   const Ctors = Object.keys(Ctor)
   return Ctors.some(c => Ctor[c] === component.__proto__.constructor)
 }
 
 export function vmFunctionalCtorMatchesSelector (component: VNode, Ctor: Object) {
+  if (!component.fnOptions) {
+    return false
+  }
   const Ctors = Object.keys(component.fnOptions._Ctor)
   return Ctors.some(c => Ctor[c] === component.fnOptions._Ctor[c])
 }
@@ -83,7 +87,7 @@ export default function findVueComponents (
       return false
     }
     return selectorType === COMPONENT_SELECTOR
-      ? vmCtorMatchesSelector(component, selector._Ctor)
+      ? vmCtorMatchesSelector(component, selector)
       : vmCtorMatchesName(component, selector.name)
   })
 }

src/lib/validators.js

@@ -23,8 +23,8 @@ export function isDomSelector (selector: any): boolean {
 }
 
 export function isVueComponent (component: any): boolean {
-  if (typeof component === 'function') {
-    return false
+  if (typeof component === 'function' && component.options) {
+    return true
   }
 
   if (component === null) {

src/wrappers/wrapper.js

@@ -9,7 +9,8 @@ import {
 } from '../lib/consts'
 import {
   vmCtorMatchesName,
-  vmCtorMatchesSelector
+  vmCtorMatchesSelector,
+  vmFunctionalCtorMatchesSelector
 } from '../lib/find-vue-components'
 import VueWrapper from './vue-wrapper'
 import WrapperArray from './wrapper-array'
@@ -268,7 +269,10 @@ export default class Wrapper implements BaseWrapper {
       if (!this.vm) {
         return false
       }
-      return vmCtorMatchesSelector(this.vm, selector._Ctor)
+      if (selector.functional) {
+        return vmFunctionalCtorMatchesSelector(this.vm._vnode, selector._Ctor)
+      }
+      return vmCtorMatchesSelector(this.vm, selector)
     }
 
     if (selectorType === REF_SELECTOR) {

test/resources/components/component-as-a-class.vue

@@ -0,0 +1,17 @@
+<template>
+  <div />
+</template>
+
+<script>
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component({
+  props: {
+    propMessage: String
+  }
+})
+export default class App extends Vue {
+  msg = 123
+}
+</script>

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

@@ -2,6 +2,9 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { mount } from '~vue-test-utils'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import Component from '~resources/components/component.vue'
+import FunctionalComponent from '~resources/components/functional-component.vue'
+import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
+import { functionalSFCsSupported } from '~resources/test-utils'
 
 describe('contains', () => {
   it('returns true if wrapper contains element', () => {
@@ -15,6 +18,39 @@ describe('contains', () => {
     expect(wrapper.contains(Component)).to.equal(true)
   })
 
+  it('returns true if wrapper contains functional Vue component', () => {
+    if (!functionalSFCsSupported()) {
+      return false
+    }
+    const TestComponent = {
+      template: `
+        <div>
+          <functional-component />
+        </div>
+      `,
+      components: {
+        FunctionalComponent
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.contains(FunctionalComponent)).to.equal(true)
+  })
+
+  it('returns true if wrapper contains Vue class component', () => {
+    const TestComponent = {
+      template: `
+        <div>
+          <component-as-a-class />
+        </div>
+      `,
+      components: {
+        ComponentAsAClass
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.contains(ComponentAsAClass)).to.equal(true)
+  })
+
   it('returns true if wrapper contains element specified by ref selector', () => {
     const compiled = compileToFunctions('<div><input ref="foo" /></div>')
     const wrapper = mount(compiled)

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

@@ -7,6 +7,7 @@ import ComponentWithSlots from '~resources/components/component-with-slots.vue'
 import ComponentWithVFor from '~resources/components/component-with-v-for.vue'
 import Component from '~resources/components/component.vue'
 import FunctionalComponent from '~resources/components/functional-component.vue'
+import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
 import { functionalSFCsSupported } from '~resources/test-utils'
 
 describe('find', () => {
@@ -104,6 +105,22 @@ describe('find', () => {
     expect(wrapper.find(Component).vnode).to.be.an('object')
   })
 
+  it('returns Wrapper of class component', () => {
+    const TestComponent = {
+      template: `
+        <div>
+          <component-as-a-class />
+        </div>
+      `,
+      components: {
+        ComponentAsAClass
+      }
+    }
+
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find(ComponentAsAClass).vnode).to.be.an('object')
+  })
+
   it('returns Wrapper of Vue Component matching functional component', () => {
     if (!functionalSFCsSupported()) {
       return

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

@@ -6,6 +6,9 @@ import ComponentWithoutName from '~resources/components/component-without-name.v
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
 import ComponentWithVFor from '~resources/components/component-with-v-for.vue'
 import Component from '~resources/components/component.vue'
+import FunctionalComponent from '~resources/components/functional-component.vue'
+import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
+import { functionalSFCsSupported } from '~resources/test-utils'
 
 describe('findAll', () => {
   it('returns an WrapperArray of elements matching tag selector passed', () => {
@@ -175,6 +178,41 @@ describe('findAll', () => {
     expect(wrapper.findAll(ComponentWithoutName).length).to.equal(3)
   })
 
+  it('returns Wrapper of class component', () => {
+    const TestComponent = {
+      template: `
+        <div>
+          <component-as-a-class />
+        </div>
+      `,
+      components: {
+        ComponentAsAClass
+      }
+    }
+
+    const wrapper = mount(TestComponent)
+    expect(wrapper.findAll(ComponentAsAClass).length).to.equal(1)
+  })
+
+  it('returns Wrapper of Vue Component matching functional component', () => {
+    if (!functionalSFCsSupported()) {
+      return
+    }
+    const TestComponent = {
+      template: `
+        <div>
+          <functional-component />
+        </div>
+      `,
+      components: {
+        FunctionalComponent
+      }
+    }
+
+    const wrapper = mount(TestComponent)
+    expect(wrapper.findAll(FunctionalComponent).length).to.equal(1)
+  })
+
   it('returns VueWrapper with length 0 if no nodes matching selector are found', () => {
     const wrapper = mount(Component)
     const preArray = wrapper.findAll('pre')