From 6a6dd4118ab22e765c92e767a5c07d68f4cd6aa5 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Wed, 12 Aug 2020 23:38:57 +1000
Subject: [PATCH 1/2] fix: return correct html depending if outer element is
 root Vue app

---
 src/vueWrapper.ts           |  7 ++++++-
 tests/findComponent.spec.ts | 28 ++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
index bf0f8fcc9..58c24a7ab 100644
--- a/src/vueWrapper.ts
+++ b/src/vueWrapper.ts
@@ -79,7 +79,12 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   }
 
   html() {
-    return this.parentElement.innerHTML
+    // cover cases like <Suspense>, multiple root nodes.
+    if (this.parentElement['__vue_app__']) {
+      return this.parentElement.innerHTML
+    }
+
+    return this.element.outerHTML
   }
 
   text() {
diff --git a/tests/findComponent.spec.ts b/tests/findComponent.spec.ts
index a1d95fab4..21b13dedf 100644
--- a/tests/findComponent.spec.ts
+++ b/tests/findComponent.spec.ts
@@ -170,4 +170,32 @@ describe('findComponent', () => {
     const wrapper = mount(compA)
     expect(wrapper.findComponent(Hello).unmount).toThrowError()
   })
+
+  it('finds nested componens', () => {
+    // https://github.com/vuejs/vue-test-utils-next/issues/173
+    const ComponentA = {
+      name: 'ComponentA',
+      template: `<div><slot></slot></div>`
+    }
+
+    const ComponentB = {
+      name: 'ComponentB',
+      template: '<div><slot></slot></div>'
+    }
+    const wrapper = mount({
+      components: {
+        ComponentA,
+        ComponentB
+      },
+      template: `
+        <ComponentA>
+          <ComponentB>1</ComponentB>
+          <ComponentB>2</ComponentB>
+          <ComponentB>3</ComponentB>
+        </ComponentA>
+      `
+    })
+    const com1 = wrapper.findComponent(ComponentB)
+    expect(com1.html()).toBe('<div>1</div>')
+  })
 })

From fc045f7e83fe2f2a499c26ae6e6a28f2e1d6e3ff Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Fri, 14 Aug 2020 16:28:35 +1000
Subject: [PATCH 2/2] tests: add more tests

---
 tests/findComponent.spec.ts | 50 +++++++++++++++++++++++++++++--------
 tests/html.spec.ts          | 29 +++++++++++++++++++++
 2 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/tests/findComponent.spec.ts b/tests/findComponent.spec.ts
index 21b13dedf..818d175a7 100644
--- a/tests/findComponent.spec.ts
+++ b/tests/findComponent.spec.ts
@@ -171,17 +171,18 @@ describe('findComponent', () => {
     expect(wrapper.findComponent(Hello).unmount).toThrowError()
   })
 
-  it('finds nested componens', () => {
-    // https://github.com/vuejs/vue-test-utils-next/issues/173
-    const ComponentA = {
-      name: 'ComponentA',
-      template: `<div><slot></slot></div>`
-    }
-
-    const ComponentB = {
-      name: 'ComponentB',
-      template: '<div><slot></slot></div>'
-    }
+  // https://github.com/vuejs/vue-test-utils-next/issues/173
+  const ComponentA = {
+    name: 'ComponentA',
+    template: `<div><slot></slot></div>`
+  }
+
+  const ComponentB = {
+    name: 'ComponentB',
+    template: '<div><slot></slot></div>'
+  }
+
+  it('finds nested components and obtains expected html and innerText', () => {
     const wrapper = mount({
       components: {
         ComponentA,
@@ -198,4 +199,31 @@ describe('findComponent', () => {
     const com1 = wrapper.findComponent(ComponentB)
     expect(com1.html()).toBe('<div>1</div>')
   })
+
+  it('finds nested components and obtains expected html and innerText', () => {
+    const wrapper = mount({
+      components: {
+        ComponentA,
+        ComponentB
+      },
+      template: `
+        <ComponentA>
+          <ComponentB>
+            <div class="content" id="1">1</div>
+          </ComponentB>
+          <ComponentB>
+            <div class="content" id="2">2</div>
+          </ComponentB>
+          <ComponentB>
+            <div class="content" id="3">3</div>
+          </ComponentB>
+        </ComponentA>
+      `
+    })
+
+    const compB = wrapper.findAllComponents(ComponentB)
+    expect(compB[0].find('.content').text()).toBe('1')
+    expect(compB[0].vm.$el.querySelector('.content').innerHTML).toBe('1')
+    expect(compB[0].vm.$el.querySelector('.content').textContent).toBe('1')
+  })
 })
diff --git a/tests/html.spec.ts b/tests/html.spec.ts
index 382a2112a..57e5335ed 100644
--- a/tests/html.spec.ts
+++ b/tests/html.spec.ts
@@ -50,4 +50,33 @@ describe('html', () => {
     const wrapper = mount(Component)
     expect(wrapper.html()).toEqual('<div class="Foo">FOO</div>')
   })
+
+  it('returns the html with findComponent in a nested Suspense component', () => {
+    const Foo = defineComponent({
+      template: '<div class="Foo">FOO</div>',
+      setup() {
+        return {}
+      }
+    })
+    const Component = {
+      template: `
+      <div>
+        <span>
+          <Suspense>
+            <template #default>
+              <Foo />
+            </template>
+
+            <template #fallback>
+              Fallback
+            </template>
+          </Suspense>
+        </span>
+      </div>`,
+      components: { Foo }
+    }
+    const wrapper = mount(Component)
+    const foo = wrapper.findComponent(Foo)
+    expect(foo.html()).toEqual('<div class="Foo">FOO</div>')
+  })
 })