refactor: update find matching methods

Author: dobromir-hristov

src/types.ts

@@ -12,3 +12,14 @@ export interface WrapperAPI {
   text: () => string
   trigger: (eventString: string) => Promise<(fn?: () => void) => Promise<void>>
 }
+
+interface RefSelector {
+  ref: string
+}
+
+interface NameSelector {
+  name: string
+}
+
+export type FindComponentSelector = RefSelector | NameSelector | string
+export type FindAllComponentsSelector = NameSelector | string

src/utils/find.ts

@@ -1,13 +1,15 @@
 import { VNode, ComponentPublicInstance } from 'vue'
+import { FindAllComponentsSelector } from '../types'
+import { matchName } from './matchName'
 
-function matches(node: VNode, selector): boolean {
+function matches(node: VNode, selector: FindAllComponentsSelector): boolean {
   if (typeof selector === 'string') {
     return node.el?.matches?.(selector)
   }
-  if (typeof selector === 'object') {
-    if (selector.name && typeof node.type === 'object') {
-      // @ts-ignore
-      return node.type.name === selector.name
+  if (typeof selector === 'object' && typeof node.type === 'object') {
+    if (selector.name && ('name' in node.type || 'displayName' in node.type)) {
+      // match normal component definitions or functional components
+      return matchName(selector.name, node.type.name || node.type.displayName)
     }
   }
   return false

src/utils/matchName.ts

@@ -0,0 +1,14 @@
+import { camelize, capitalize } from '@vue/shared'
+
+export function matchName(target, sourceName) {
+  const camelized = camelize(target)
+  const capitalized = capitalize(camelized)
+
+  return (
+    sourceName &&
+    (sourceName === target ||
+      sourceName === camelized ||
+      sourceName === capitalized ||
+      capitalize(camelize(sourceName)) === capitalized)
+  )
+}

src/vue-wrapper.ts

@@ -2,22 +2,15 @@ import { ComponentPublicInstance, nextTick } from 'vue'
 import { ShapeFlags } from '@vue/shared'
 
 import { DOMWrapper } from './dom-wrapper'
-import { WrapperAPI } from './types'
+import {
+  FindAllComponentsSelector,
+  FindComponentSelector,
+  WrapperAPI
+} from './types'
 import { ErrorWrapper } from './error-wrapper'
 import { MOUNT_ELEMENT_ID } from './constants'
 import { find } from './utils/find'
 
-interface RefSelector {
-  ref: string
-}
-
-interface NameSelector {
-  name: string
-}
-
-type FindComponentSelector = RefSelector | NameSelector | string
-type FindAllComponentsSelector = NameSelector | string
-
 export class VueWrapper implements WrapperAPI {
   private componentVM: ComponentPublicInstance
   private __emitted: Record<string, unknown[]> = {}

tests/findComponent.spec.ts

@@ -1,28 +1,45 @@
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
 
+const compC = {
+  name: 'ComponentC',
+  template: '<div class="C">C</div>'
+}
+const compB = {
+  name: 'component-b',
+  template: '<div class="B">TextBefore<comp-c/>TextAfter<comp-c/></div>',
+  components: { compC }
+}
+const compA = {
+  template: '<div class="A"><comp-b/><hello ref="b"/></div>',
+  components: { compB, Hello }
+}
+
 describe('findComponent', () => {
-  it('finds deeply nested vue components', () => {
-    const compC = {
-      name: 'ComponentC',
-      template: '<div class="C">C</div>'
-    }
-    const compB = {
-      template: '<div class="B">TextBefore<comp-c/>TextAfter<comp-c/></div>',
-      components: { compC }
-    }
-    const compA = {
-      template: '<div class="A"><comp-b/><hello ref="b"/></div>',
-      components: { compB, Hello }
-    }
+  it('finds component by ref', () => {
     const wrapper = mount(compA)
     // find by ref
     expect(wrapper.findComponent({ ref: 'b' })).toBeTruthy()
+  })
+
+  it('finds component by dom selector', () => {
+    const wrapper = mount(compA)
     // find by DOM selector
     expect(wrapper.findComponent('.C').$options.name).toEqual('ComponentC')
+  })
+
+  it('finds component by name', () => {
+    const wrapper = mount(compA)
     expect(wrapper.findComponent({ name: 'Hello' }).$el.textContent).toBe(
       'Hello world'
     )
+    expect(wrapper.findComponent({ name: 'ComponentB' })).toBeTruthy()
+    expect(wrapper.findComponent({ name: 'component-c' })).toBeTruthy()
+  })
+
+  it('finds component by imported SFC file', () => {
+    const wrapper = mount(compA)
     expect(wrapper.findComponent(Hello).$el.textContent).toBe('Hello world')
+    expect(wrapper.findComponent(compC).$el.textContent).toBe('C')
   })
 })