fix vuejs#1845: add functional component check in component name match (vuejs#1857)

Author: pimlie

packages/test-utils/src/matches.js

@@ -3,16 +3,20 @@ import {
   COMPONENT_SELECTOR,
   FUNCTIONAL_OPTIONS
 } from 'shared/consts'
-import { isConstructor } from 'shared/validators'
+import { isConstructor, isFunctionalComponent } from 'shared/validators'
 import { capitalize, camelize } from 'shared/util'
 
 function vmMatchesName(vm, name) {
   // We want to mirror how Vue resolves component names in SFCs:
   // For example, <test-component />, <TestComponent /> and `<testComponent />
   // all resolve to the same component
-  const componentName = vm.name || (vm.$options && vm.$options.name) || ''
+  const componentName = isFunctionalComponent(vm)
+    ? vm.name
+    : vm.$options && vm.$options.name
+
   return (
     !!name &&
+    !!componentName &&
     (componentName === name ||
       // testComponent -> TestComponent
       componentName === capitalize(name) ||

test/resources/components/component-with-name-prop.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <p class="prop-name">{{ name }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'component-with-name-prop',
+  props: ['name']
+}
+</script>

test/specs/wrapper/find.spec.js

@@ -3,6 +3,7 @@ import { createLocalVue, shallowMount } from 'packages/test-utils/src'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
+import ComponentWithNameProp from '~resources/components/component-with-name-prop.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
 import ComponentWithVFor from '~resources/components/component-with-v-for.vue'
@@ -556,6 +557,15 @@ describeWithShallowAndMount('find', mountingMethod => {
     expect(wrapper.find({ name: 'CamelCase' }).name()).toEqual('camel-case')
   })
 
+  it('returns a Wrapper matching a component name if Component has a name prop', () => {
+    const wrapper = mountingMethod(ComponentWithNameProp, {
+      propsData: { name: 'prop1' }
+    })
+    expect(
+      wrapper.findComponent({ name: 'component-with-name-prop' }).vnode
+    ).toBeTruthy()
+  })
+
   it('returns Wrapper of Vue Component matching the ref in options object', () => {
     const wrapper = mountingMethod(ComponentWithChild)
     expect(wrapper.find({ ref: 'child' }).isVueInstance()).toEqual(true)