tests: improve findComponent tests

Author: dobromir-hristov

src/utils/find.ts

@@ -2,19 +2,35 @@ import { VNode, ComponentPublicInstance } from 'vue'
 import { FindAllComponentsSelector } from '../types'
 import { matchName } from './matchName'
 
+/**
+ * Detect whether a selector matches a VNode
+ * @param node
+ * @param selector
+ * @return {boolean | ((value: any) => boolean)}
+ */
 function matches(node: VNode, selector: FindAllComponentsSelector): boolean {
+  // do not return none Vue components
+  if (!node.component) return false
+
   if (typeof selector === 'string') {
     return node.el?.matches?.(selector)
   }
+
   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
 }
 
+/**
+ * Collect all children
+ * @param nodes
+ * @param children
+ */
 function aggregateChildren(nodes, children) {
   if (children && Array.isArray(children)) {
     ;[...children].reverse().forEach((n: VNode) => {

tests/findAllComponents.spec.ts

@@ -19,10 +19,10 @@ describe('findAllComponents', () => {
     const wrapper = mount(compA)
     // find by DOM selector
     expect(wrapper.findAllComponents('.C')).toHaveLength(2)
-    expect(wrapper.findAllComponents({ name: 'Hello' })[0].el.textContent).toBe(
-      'Hello world'
-    )
-    expect(wrapper.findAllComponents(Hello)[0].el.textContent).toBe(
+    expect(
+      wrapper.findAllComponents({ name: 'Hello' })[0].$el.textContent
+    ).toBe('Hello world')
+    expect(wrapper.findAllComponents(Hello)[0].$el.textContent).toBe(
       'Hello world'
     )
   })

tests/findComponent.spec.ts

@@ -5,17 +5,41 @@ const compC = {
   name: 'ComponentC',
   template: '<div class="C">C</div>'
 }
+
+const compD = {
+  name: 'ComponentD',
+  template: '<comp-c class="c-as-root-on-d" />',
+  components: { compC }
+}
+
 const compB = {
   name: 'component-b',
-  template: '<div class="B">TextBefore<comp-c/>TextAfter<comp-c/></div>',
-  components: { compC }
+  template: `
+    <div class="B">
+      TextBefore
+      <comp-c />
+      TextAfter
+      <comp-c />
+      <comp-d id="compD" />
+    </div>`,
+  components: { compC, compD }
 }
 const compA = {
-  template: '<div class="A"><comp-b/><hello ref="b"/></div>',
+  template: `
+    <div class="A">
+      <comp-b />
+      <hello ref="b" />
+      <div class="domElement" />
+    </div>`,
   components: { compB, Hello }
 }
 
 describe('findComponent', () => {
+  it('does not find plain dom elements', () => {
+    const wrapper = mount(compA)
+    expect(wrapper.findComponent('.domElement')).toBeFalsy()
+  })
+
   it('finds component by ref', () => {
     const wrapper = mount(compA)
     // find by ref
@@ -28,6 +52,19 @@ describe('findComponent', () => {
     expect(wrapper.findComponent('.C').$options.name).toEqual('ComponentC')
   })
 
+  it('does allows using complicated DOM selector query', () => {
+    const wrapper = mount(compA)
+    expect(wrapper.findComponent('.B > .C').$options.name).toEqual('ComponentC')
+  })
+
+  it('finds a component when root of mounted component', async () => {
+    const wrapper = mount(compD)
+    // make sure it finds the component, not its root
+    expect(wrapper.findComponent('.c-as-root-on-d').$options.name).toEqual(
+      'ComponentC'
+    )
+  })
+
   it('finds component by name', () => {
     const wrapper = mount(compA)
     expect(wrapper.findComponent({ name: 'Hello' }).$el.textContent).toBe(