fix: using find after using findAllComponents does not match expectations

Fixes vuejs#484

Author: llllllllllx

src/vueWrapper.ts

@@ -104,8 +104,11 @@ export class VueWrapper<T extends ComponentPublicInstance>
   ): DOMWrapper<SVGElementTagNameMap[K]>
   find<T extends Element>(selector: string): DOMWrapper<T>
   find(selector: string): DOMWrapper<Element> {
-    // force using the parentElement to allow finding the root element
-    const result = this.parentElement.querySelector(selector)
+    const result = this.parentElement['__vue_app__']
+      ? // force using the parentElement to allow finding the root element
+        this.parentElement.querySelector(selector)
+      : this.element.querySelector(selector)
+
     if (result) {
       return new DOMWrapper(result)
     }
@@ -202,7 +205,10 @@ export class VueWrapper<T extends ComponentPublicInstance>
   ): DOMWrapper<SVGElementTagNameMap[K]>[]
   findAll<T extends Element>(selector: string): DOMWrapper<T>[]
   findAll(selector: string): DOMWrapper<Element>[] {
-    const results = this.parentElement.querySelectorAll(selector)
+    const results = this.parentElement['__vue_app__']
+      ? this.parentElement.querySelectorAll(selector)
+      : this.element.querySelectorAll(selector)
+
     return Array.from(results).map((element) => new DOMWrapper(element))
   }
 

tests/find.spec.ts

@@ -26,6 +26,32 @@ describe('find', () => {
     expect(wrapper.find('#my-span').exists()).toBe(true)
   })
 
+  test('find using current node after findAllComponents', () => {
+    const ComponentB = defineComponent({
+      name: 'ComponentB',
+      template: '<div><slot></slot></div>'
+    })
+
+    const ComponentA = defineComponent({
+      name: 'ComponentA',
+      template: `
+        <div>
+          <component-b v-for="item in [1, 2]" :key="item">
+            <input type="text" :value="item">
+          </component-b>
+        </div> 
+      `,
+      components: { ComponentB }
+    })
+
+    const wrapper = mount(ComponentA)
+    const firstCompB = wrapper.findComponent({ name: 'ComponentB' })
+    const lastCompB = wrapper.findAllComponents({ name: 'ComponentB' })[1]
+
+    expect(firstCompB.find('input').element.value).toBe('1')
+    expect(lastCompB.find('input').element.value).toBe('2')
+  })
+
   it('returns the root element in single root element', () => {
     const Component = defineComponent({
       render() {
@@ -85,6 +111,32 @@ describe('findAll', () => {
     expect(wrapper.findAll('.span')).toHaveLength(2)
   })
 
+  test('findAll using current node after findAllComponents', () => {
+    const ComponentB = defineComponent({
+      name: 'ComponentB',
+      template: '<div><slot></slot></div>'
+    })
+
+    const ComponentA = defineComponent({
+      name: 'ComponentA',
+      template: `
+        <div>
+          <component-b v-for="item in [1, 2]" :key="item">
+            <input type="text" :value="item">
+          </component-b>
+        </div>
+      `,
+      components: { ComponentB }
+    })
+
+    const wrapper = mount(ComponentA)
+    const firstCompB = wrapper.findComponent({ name: 'ComponentB' })
+    const lastCompB = wrapper.findAllComponents({ name: 'ComponentB' })[1]
+
+    expect(firstCompB.findAll('input')[0].element.value).toBe('1')
+    expect(lastCompB.findAll('input')[0].element.value).toBe('2')
+  })
+
   test('works with suspense', async () => {
     const wrapper = mount(SuspenseComponent)