From 073c3550a60bbeacccd79a389b8adce36e31e3d1 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Sun, 15 May 2022 19:13:20 +0300
Subject: [PATCH] fix(findComponent): allow finding top-level component

* allow finding top-level component when findComponent is chained
from dom node rendered by child
---
 src/domWrapper.ts           |  6 +++++-
 tests/findComponent.spec.ts | 29 +++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/domWrapper.ts b/src/domWrapper.ts
index fbb3462e9..f06b7eaeb 100644
--- a/src/domWrapper.ts
+++ b/src/domWrapper.ts
@@ -22,7 +22,11 @@ export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> {
   }
 
   getCurrentComponent() {
-    return this.element.__vueParentComponent
+    let component = this.element.__vueParentComponent
+    while (component?.parent?.vnode.el === this.element) {
+      component = component.parent
+    }
+    return component
   }
 
   find<K extends keyof HTMLElementTagNameMap>(
diff --git a/tests/findComponent.spec.ts b/tests/findComponent.spec.ts
index 0e6c9c90b..346b45e95 100644
--- a/tests/findComponent.spec.ts
+++ b/tests/findComponent.spec.ts
@@ -510,5 +510,34 @@ describe('findComponent', () => {
           .classes('inside')
       ).toBe(true)
     })
+
+    it('finds top component when searching from nested node', () => {
+      const DeepNestedComponent = defineComponent({
+        template: '<div class="deep-nested"></div>'
+      })
+
+      const NestedComponent = defineComponent({
+        components: { DeepNestedComponent },
+        template: '<deep-nested-component />'
+      })
+
+      const RootComponent = defineComponent({
+        components: { NestedComponent },
+        template: '<nested-component />'
+      })
+
+      const wrapper = mount(RootComponent)
+      expect(
+        wrapper.find('.deep-nested').findComponent(DeepNestedComponent).exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.find('.deep-nested').findComponent(NestedComponent).exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.find('.deep-nested').findComponent(RootComponent).exists()
+      ).toBe(true)
+    })
   })
 })