Merge pull request #1398 from vuejs/feature/issue-1232

Allow find to work on both Pascal case and camel case

Author: lmiller1990

Diff for: 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, <test-component />, <TestComponent /> and `<testComponent />
+  // 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 for: 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)