feat: fallback to parent element if current element has multiple roots.

Author: dobromir-hristov

src/vue-wrapper.ts

@@ -23,6 +23,13 @@ export class VueWrapper implements WrapperAPI {
     return this.componentVM.$.subTree.shapeFlag === ShapeFlags.ARRAY_CHILDREN
   }
 
+  get element() {
+    return this.__hasMultipleRoots
+      ? // get the parent element of the current component
+        this.componentVM.$el.parentElement
+      : this.componentVM.$el
+  }
+
   classes(): string[] {
     throw Error('TODO: Implement VueWrapper#classes')
   }
@@ -36,15 +43,15 @@ export class VueWrapper implements WrapperAPI {
   }
 
   html() {
-    return this.rootVM.$el.outerHTML
+    return this.element.outerHTML
   }
 
   text() {
-    return this.rootVM.$el.textContent?.trim()
+    return this.element.textContent?.trim()
   }
 
   find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper {
-    const result = this.rootVM.$el.querySelector(selector) as T
+    const result = this.element.querySelector(selector) as T
     if (result) {
       return new DOMWrapper(result)
     }
@@ -53,16 +60,16 @@ export class VueWrapper implements WrapperAPI {
   }
 
   findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
-    const results = (this.rootVM.$el as Element).querySelectorAll<T>(selector)
+    const results = (this.element as Element).querySelectorAll<T>(selector)
     return Array.from(results).map((x) => new DOMWrapper(x))
   }
 
   async setChecked(checked: boolean = true) {
-    return new DOMWrapper(this.rootVM.$el).setChecked(checked)
+    return new DOMWrapper(this.element).setChecked(checked)
   }
 
   trigger(eventString: string) {
-    const rootElementWrapper = new DOMWrapper(this.rootVM.$el)
+    const rootElementWrapper = new DOMWrapper(this.element)
     return rootElementWrapper.trigger(eventString)
   }
 }

tests/find.spec.ts

@@ -2,27 +2,56 @@ import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'
 
-test('find', () => {
-  const Component = defineComponent({
-    render() {
-      return h('div', {}, [h('span', { id: 'my-span' })])
-    }
+describe('find', () => {
+  test('find using single root node', () => {
+    const Component = defineComponent({
+      render() {
+        return h('div', {}, [h('span', { id: 'my-span' })])
+      }
+    })
+
+    const wrapper = mount(Component)
+    expect(wrapper.find('#my-span')).toBeTruthy()
   })
 
-  const wrapper = mount(Component)
-  expect(wrapper.find('#my-span')).toBeTruthy()
+  it('find using multiple root nodes', () => {
+    const Component = defineComponent({
+      render() {
+        return [h('div', 'text'), h('span', { id: 'my-span' })]
+      }
+    })
+
+    const wrapper = mount(Component)
+    expect(wrapper.find('#my-span')).toBeTruthy()
+  })
 })
 
-test('findAll', () => {
-  const Component = defineComponent({
-    render() {
-      return h('div', {}, [
-        h('span', { className: 'span' }),
-        h('span', { className: 'span' })
-      ])
-    }
+describe('findAll', () => {
+  test('findAll using single root node', () => {
+    const Component = defineComponent({
+      render() {
+        return h('div', {}, [
+          h('span', { className: 'span' }),
+          h('span', { className: 'span' })
+        ])
+      }
+    })
+
+    const wrapper = mount(Component)
+    expect(wrapper.findAll('.span')).toHaveLength(2)
   })
 
-  const wrapper = mount(Component)
-  expect(wrapper.findAll('.span')).toHaveLength(2)
-})
+  test('findAll using multiple root nodes', () => {
+    const Component = defineComponent({
+      render() {
+        return [
+          h('span', { className: 'span' }),
+          h('span', { className: 'span' })
+        ]
+      }
+    })
+
+    const wrapper = mount(Component)
+    expect(wrapper.findAll('.span')).toHaveLength(2)
+  })
+})

tests/setChecked.spec.ts

@@ -13,7 +13,7 @@ describe('setChecked', () => {
     const wrapper = mount(Comp)
     await wrapper.setChecked()
 
-    expect(wrapper.vm.$el.checked).toBe(true)
+    expect(wrapper.componentVM.$el.checked).toBe(true)
   })
 
   it('sets element checked true with no option passed', async () => {
@@ -64,11 +64,12 @@ describe('setChecked', () => {
     const listener = jest.fn()
     const Comp = defineComponent({
       setup() {
-        return () => h('input', {
-          onChange: listener,
-          type: 'checkbox',
-          checked: true
-        })
+        return () =>
+          h('input', {
+            onChange: listener,
+            type: 'checkbox',
+            checked: true
+          })
       }
     })