feat(find): support functional components

Author: eddyerburgh

src/lib/find-vue-components.js

@@ -31,6 +31,21 @@ function findAllVueComponentsFromVnode (
   return components
 }
 
+function findAllFunctionalComponentsFromVnode (
+  vnode: Component,
+  components: Array<Component> = []
+): Array<Component> {
+  if (vnode.fnOptions) {
+    components.push(vnode)
+  }
+  if (vnode.children) {
+    vnode.children.forEach((child) => {
+      findAllFunctionalComponentsFromVnode(child, components)
+    })
+  }
+  return components
+}
+
 export function vmCtorMatchesName (vm: Component, name: string): boolean {
   return (vm.$vnode && vm.$vnode.componentOptions &&
     vm.$vnode.componentOptions.Ctor.options.name === name) ||
@@ -44,11 +59,22 @@ export function vmCtorMatchesSelector (component: Component, Ctor: Object) {
   return Ctors.some(c => Ctor[c] === component.__proto__.constructor)
 }
 
+export function vmFunctionalCtorMatchesSelector (component: VNode, Ctor: Object) {
+  const Ctors = Object.keys(component.fnOptions._Ctor)
+  return Ctors.some(c => Ctor[c] === component.fnOptions._Ctor[c])
+}
+
 export default function findVueComponents (
   root: Component,
   selectorType: ?string,
   selector: Object
 ): Array<Component> {
+  if (selector.functional) {
+    const components = root._vnode
+    ? findAllFunctionalComponentsFromVnode(root._vnode)
+    : findAllFunctionalComponentsFromVnode(root)
+    return components.filter(component => vmFunctionalCtorMatchesSelector(component, selector._Ctor))
+  }
   const components = root._isVue
     ? findAllVueComponentsFromVm(root)
     : findAllVueComponentsFromVnode(root)

src/shallow.js

@@ -9,16 +9,18 @@ import {
 import mount from './mount'
 import type VueWrapper from './wrappers/vue-wrapper'
 
-export default function shallow (component: Component, options: Options = {}): VueWrapper {
+export default function shallow (
+  component: Component,
+  options: Options = {}
+): VueWrapper {
   const vue = options.localVue || Vue
-
   const stubbedComponents = createComponentStubsForAll(component)
-
   const stubbedGlobalComponents = createComponentStubsForGlobals(vue)
 
   return mount(component, {
     ...options,
     components: {
+      // stubbed components are used instead of original components components
       ...stubbedGlobalComponents,
       ...stubbedComponents,
       ...options

test/resources/components/functional-component.vue

@@ -0,0 +1,3 @@
+<template functional>
+  <div />
+</template>

test/resources/test-utils.js

@@ -13,3 +13,7 @@ export function attrsSupported () {
 export function listenersSupported () {
   return vueVersion > 2.3
 }
+
+export function functionalSFCsSupported () {
+  return vueVersion >= 2.5
+}

test/test.sh

@@ -14,3 +14,4 @@ test_version_number "2.1.10"
 test_version_number "2.2.6"
 test_version_number "2.3.4"
 test_version_number "2.4.2"
+test_version_number "2.5.13"

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

@@ -6,6 +6,8 @@ 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 { functionalSFCsSupported } from '~resources/test-utils'
 
 describe('find', () => {
   it('returns a Wrapper matching tag selector passed', () => {
@@ -102,6 +104,25 @@ describe('find', () => {
     expect(wrapper.find(Component).vnode).to.be.an('object')
   })
 
+  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.find(FunctionalComponent).vnode).to.be.an('object')
+  })
+
   it('returns correct number of Vue Wrappers when component has a v-for', () => {
     const items = [{ id: 1 }, { id: 2 }, { id: 3 }]
     const wrapper = mount(ComponentWithVFor, { propsData: { items }})