diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 82991d888..8f11a2d33 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -4,10 +4,22 @@ import { FUNCTIONAL_OPTIONS } from 'shared/consts' import { isConstructor } from 'shared/validators' +import { capitalize, camelize } from 'shared/util' -export function vmMatchesName(vm, name) { +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.$options && vm.$options.name) || '' return ( - !!name && (vm.name === name || (vm.$options && vm.$options.name === name)) + !!name && + (componentName === name || + // testComponent -> TestComponent + componentName === capitalize(name) || + // test-component -> TestComponent + componentName === capitalize(camelize(name)) || + // same match as above, but the component name vs query + capitalize(camelize(componentName)) === name) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 809eca23b..d457d0e32 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -431,6 +431,33 @@ describeWithShallowAndMount('find', mountingMethod => { ) }) + it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => { + const component = { + name: 'CamelCase', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase') + }) + + it('returns a Wrapper matching a kebab-case name option and a Pascal Case component name ', () => { + const component = { + name: 'CamelCase', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'camel-case' }).name()).to.equal('CamelCase') + }) + + it('returns a Wrapper matching a Pascal Case name option and a kebab-casecomponent name ', () => { + const component = { + name: 'camel-case', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'CamelCase' }).name()).to.equal('camel-case') + }) + it('returns Wrapper of Vue Component matching the ref in options object', () => { const wrapper = mountingMethod(ComponentWithChild) expect(wrapper.find({ ref: 'child' }).isVueInstance()).to.equal(true)