Merge pull request #168 from cexbrayat/feat/find-component-in-suspense

feat: findComponent can find component inside a Suspense
vuejs · Aug 1, 2020 · 6cb26ee · 6cb26ee
2 parents 4c7c9dc + 4ef9a0e
commit 6cb26ee
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/src/utils/find.ts b/src/utils/find.ts
@@ -106,10 +106,23 @@ function findAllVNodes(
   const nodes: VNode[] = [vnode]
   while (nodes.length) {
     const node = nodes.shift()!
+    // match direct children
     aggregateChildren(nodes, node.children)
     if (node.component) {
+      // match children of the wrapping component
       aggregateChildren(nodes, node.component.subTree.children)
     }
+    if (node.suspense) {
+      // match children if component is Suspense
+      const { isResolved, fallbackTree, subTree } = node.suspense
+      if (isResolved) {
+        // if the suspense is resolved, we match its children
+        aggregateChildren(nodes, subTree.children)
+      } else {
+        // otherwise we match its fallback tree
+        aggregateChildren(nodes, fallbackTree.children)
+      }
+    }
     if (matches(node, selector)) {
       matchingNodes.push(node)
     }

diff --git a/tests/find.spec.ts b/tests/find.spec.ts
@@ -2,7 +2,6 @@ import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'
 import SuspenseComponent from './components/Suspense.vue'
-import Hello from './components/Hello.vue'
 
 describe('find', () => {
   it('find using single root node', () => {

diff --git a/tests/findComponent.spec.ts b/tests/findComponent.spec.ts
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
 import ComponentWithoutName from './components/ComponentWithoutName.vue'
@@ -112,6 +112,35 @@ describe('findComponent', () => {
     expect(wrapper.findComponent(compC).text()).toBe('C')
   })
 
+  it('finds component in a Suspense', async () => {
+    const AsyncComponent = defineComponent({
+      template: '{{ result }}',
+      async setup() {
+        return { result: 'Hello world' }
+      }
+    })
+    const SuspenseComponent = defineComponent({
+      template: `<Suspense>
+        <template #default><AsyncComponent/></template>
+        <template #fallback><CompC/></template>
+      </Suspense>`,
+      components: {
+        AsyncComponent,
+        CompC: compC
+      }
+    })
+    const wrapper = mount(SuspenseComponent)
+    expect(wrapper.html()).toContain('<div class="C">C</div>')
+    expect(wrapper.findComponent(compC).exists()).toBe(true)
+    expect(wrapper.findComponent(AsyncComponent).exists()).toBe(false)
+    await nextTick()
+    await nextTick()
+    expect(wrapper.html()).toContain('Hello world')
+    expect(wrapper.findComponent(compC).exists()).toBe(false)
+    expect(wrapper.findComponent(AsyncComponent).exists()).toBe(true)
+    expect(wrapper.findComponent(AsyncComponent).text()).toBe('Hello world')
+  })
+
   it('finds a stub by name', () => {
     const wrapper = mount(compA, {
       global: {