test: test recursive and async component (#8)

Author: yodagg

.gitignore

@@ -2,3 +2,4 @@ dist
 node_modules
 TODOs.md
 temp
+.DS_Store

playground/App.vue

@@ -9,6 +9,7 @@ import TestCustomBlock from './custom/TestCustomBlock.vue'
 import TestHmr from './hmr/TestHmr.vue'
 import TestAssets from './test-assets/TestAssets.vue'
 import TestES2020Features from './TestES2020Features.vue'
+import TestComponent from './test-component/TestComponent.vue'
 import TestCssVBind from './css/TestCssVBind.vue'
 </script>
 
@@ -25,6 +26,7 @@ import TestCssVBind from './css/TestCssVBind.vue'
     <TestHmr />
     <TestAssets />
     <TestES2020Features />
+    <TestComponent />
     <TestCssVBind/>
   </div>
 </template>

playground/test-component/TestComponent.vue

@@ -0,0 +1,21 @@
+<script>
+import TestRecursive from './recursive/TestRecursive.vue'
+import TestAsyncComponent from './async/TestAsyncComponent.vue'
+
+export default {
+  name: 'TestRecursion',
+  components: {
+    TestRecursive,
+    TestAsyncComponent
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2>Vue Component</h2>
+
+    <TestRecursive />
+    <TestAsyncComponent />
+  </div>
+</template>

playground/test-component/async/TestAsyncComponent.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  components: {
+    componentA: () => import('./componentA.vue')
+  },
+  beforeCreate() {
+    this.$options.components.componentB = () => import('./componentB.vue')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h3>Async Component</h3>
+    <componentA />
+    <componentB />
+
+    <pre>
+export default {
+  components: {
+    componentA: () => import('./componentA.vue')
+  },
+  beforeCreate() {
+    this.$options.components.componentB = () => import('./componentB.vue')
+  }
+}
+    </pre>
+  </div>
+</template>

playground/test-component/async/componentA.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="async-component-a">This is componentA</p>
+</template>

playground/test-component/async/componentB.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="async-component-b">This is componentB</p>
+</template>

playground/test-component/recursive/TestRecursive.vue

@@ -0,0 +1,23 @@
+<script>
+import TestRecursiveTree from './TestRecursiveTree.vue'
+import treedata from './treedata.json'
+
+export default {
+  name: 'TestRecursion',
+  components: {
+    TestRecursiveTree
+  },
+  data() {
+    return {
+      treedata: treedata
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h3>Recursive Component</h3>
+    <TestRecursiveTree :treedata="treedata"></TestRecursiveTree>
+  </div>
+</template>

playground/test-component/recursive/TestRecursiveTree.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'TestRecursiveTree',
+  props: ['treedata'],
+  methods: {
+    isEmpty(data) {
+      return !data || !data.length
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="test-recursive-tree">
+    <div class="test-recursive-item" v-for="item in treedata" :key="item.label">
+      <h5>{{ item.label }}</h5>
+
+      <TestRecursiveTree
+        v-if="!isEmpty(item.children)"
+        :treedata="item.children"
+      >
+      </TestRecursiveTree>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.test-recursive-item {
+  padding-left: 10px;
+}
+</style>

playground/test-component/recursive/treedata.json

@@ -0,0 +1,15 @@
+[
+  {
+    "label": "name-1",
+    "children": [
+      {
+        "label": "name-1-1",
+        "children": [
+          {
+            "label": "name-1-1-1"
+          }
+        ]
+      }
+    ]
+  }
+]

test/test.spec.ts

@@ -140,6 +140,15 @@ export function declareTests(isBuild: boolean) {
     }
   })
 
+  test('SFC Recursive Component', async () => {
+    expect(await getText('.test-recursive-item')).toMatch(/name-1-1-1/)
+  })
+
+  test('SFC Async Component', async () => {
+    expect(await getText('.async-component-a')).toMatch('This is componentA')
+    expect(await getText('.async-component-b')).toMatch('This is componentB')
+  })
+
   test('css v-bind', async () => {
     const el = await getEl('.css-v-bind')
     expect(await getComputedColor(el!)).toBe(`rgb(255, 0, 0)`)