diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 477d66cd1..6acba7661 100644 --- a/packages/test-utils/src/matches.js +++ b/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, , and ` // 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) || diff --git a/test/resources/components/component-with-name-prop.vue b/test/resources/components/component-with-name-prop.vue new file mode 100644 index 000000000..394222356 --- /dev/null +++ b/test/resources/components/component-with-name-prop.vue @@ -0,0 +1,12 @@ + + + diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 5c7c34483..2e53577ee 100644 --- a/test/specs/wrapper/find.spec.js +++ b/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)