Merge pull request #174 from vuejs/issue-173

fix: return correct html depending if outer element is root Vue app

Author: lmiller1990

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() {

tests/findComponent.spec.ts

@@ -170,4 +170,60 @@ describe('findComponent', () => {
     const wrapper = mount(compA)
     expect(wrapper.findComponent(Hello).unmount).toThrowError()
   })
+
+  // 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,
+        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>')
+  })
+
+  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')
+  })
 })

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>')
+  })
 })