refactor(component instance): circular reference

pages.json

@@ -455,14 +455,14 @@
         "navigationBarTitleText": "defineExpose"
       }
     },
-
-
     {
       "path": "pages/component-instance/circular-reference/circular-reference",
       "style": {
         "navigationBarTitleText": "circular reference"
       }
     },
+
+
     {
       "path": "pages/state/data/data",
       "style": {

pages/component-instance/circular-reference/child-a.uvue → pages/component-instance/circular-reference/ChildA.uvue

-<template>
-  <view>
-    <text>child-a::{{text}}</text>
-    <child-b v-if="!end" class="child-a-child-b" :text="text" :limit="limit-1"></child-b>
-  </view>
-</template>
-
-<script>
-  import childB from './child-b.uvue'
-  export default {
-    components: {
-      childB
-    },
-    props: {
-      text: {
-        type: String,
-        default: ''
-      },
-      limit: {
-        type: Number,
-        default: 0
-      }
-    },
-    computed: {
-      end() : boolean {
-        return this.limit <= 0
-      }
-    }
-  }
-</script>
\ No newline at end of file
+<template>
+  <view class="child-a">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child A limit:</text>
+      <text>{{limit}}</text>
+    </view>
+    <child-b v-if="limit>1" :limit="limit-1"></child-b>
+  </view>
+</template>
+
+<script lang='uts'>
+  import childB from './childB.uvue'
+
+  export default {
+    components: {
+      childB
+    },
+    props: {
+      limit: {
+        type: Number,
+        default: 0
+      }
+    }
+  }
+</script>

pages/component-instance/circular-reference/child-b.uvue → pages/component-instance/circular-reference/ChildB.uvue

 <template>
-  <view>
-    <text>child-b::{{text}}</text>
-    <child-a v-if="!end" class="child-b-child-a" :text="text" :limit="limit-1"></child-a>
+  <view class="child-b">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child B limit:</text>
+      <text>{{limit}}</text>
+    </view>
+    <child-a v-if="limit>1" :limit="limit-1"></child-a>
   </view>
 </template>
 
-<script>
-  import childA from './child-a.uvue'
+<script lang='uts'>
+  import childA from './childA.uvue'
+
   export default {
     components: {
       childA
     },
     props: {
-      text: {
-        type: String,
-        default: ''
-      },
       limit: {
         type: Number,
         default: 0
       }
-    },
-    computed: {
-      end() : boolean {
-        return this.limit <= 0
-      }
     }
   }
-</script>
\ No newline at end of file
+</script>

pages/component-instance/circular-reference/child-c.uvue → pages/component-instance/circular-reference/ChildC.uvue

-<template>
-  <view>
-    <text>child-c::{{text}}</text>
-    <child-c v-if="!end" class="child-c-child-c" :text="text" :limit="limit-1"></child-c>
-  </view>
-</template>
-
-<script>
-  export default {
-    name: "child-c",
-    props: {
-      text: {
-        type: String,
-        default: ''
-      },
-      limit: {
-        type: Number,
-        default: 0
-      }
-    },
-    computed: {
-      end() : boolean {
-        return this.limit <= 0
-      }
-    }
-  }
+<template>
+  <view class="child-c">
+    <view class="flex justify-between flex-row mb-10">
+      <text>child C limit:</text>
+      <text>{{limit}}</text>
+    </view>
+    <child-c v-if="limit>1" :limit="limit-1"></child-c>
+  </view>
+</template>
+
+<script lang='uts'>
+  export default {
+    name: "child-c",
+    props: {
+      limit: {
+        type: Number,
+        default: 0
+      }
+    }
+  }
 </script>
\ No newline at end of file

pages/component-instance/circular-reference/circular-reference.test.js

-const PAGE_PATH = '/pages/component-instance/circular-reference/circular-reference'
-
-describe('circular-reference', () => {
-  let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-
-  it('render', async () => {
-    // const child_a = await page.$$('.child-a-child-b')
-    // expect(child_a.length).toBe(5)
-
-    // const child_b = await page.$$('.child-b-child-a')
-    // expect(child_b.length).toBe(5)
-
-    const child_c = await page.$$('.child-c-child-c')
-    expect(child_c.length).toBe(10)
-  })
+const PAGE_PATH = '/pages/component-instance/circular-reference/circular-reference'
+
+describe('circular-reference', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(1000)
+  })
+
+  if (process.env.uniTestPlatformInfo.toLowerCase().includes('android')) {
+    it('cross reference', async () => {
+      const childA = await page.$$('.child-a')
+      expect(childA.length).toBe(3)
+
+      const childB = await page.$$('.child-b')
+      expect(childB.length).toBe(2)
+    })
+  }
+
+  it('reference self', async () => {
+    const childC = await page.$$('.child-c')
+    expect(childC.length).toBe(5)
+  })
 })
\ No newline at end of file

pages/component-instance/circular-reference/circular-reference.uvue

-<template>
-  <view>
-    <!-- <child-a class="page-child-a" :text="text" :limit="10"></child-a> -->
-    <child-c class="page-child-c" :text="text" :limit="10"></child-c>
-  </view>
-</template>
-
-<script>
-  // import childA from './child-a.uvue'
-  import childC from './child-c.uvue'
-  export default {
-    components: {
-      // childA,
-      childC
-    },
-    data() {
-      return {
-        text: ''
-      }
-    },
-    onLoad() {
-      this.text = "Date.now().toString()"
-    }
-  }
+<template>
+  <view class="page">
+    <!-- #ifdef APP-ANDROID -->
+    <!-- TODO: ios & web 不支持 a b 互相引用 -->
+    <child-a :limit="5"></child-a>
+    <!-- #endif -->
+    <child-c :limit="5"></child-c>
+  </view>
+</template>
+
+<script lang='uts'>
+  // #ifdef APP-ANDROID
+  import childA from './childA.uvue'
+  // #endif
+  import childC from './childC.uvue'
+
+  export default {
+    components: {
+      // #ifdef APP-ANDROID
+      childA,
+      // #endif
+      childC
+    },
+    data() {
+      return {
+        text: ''
+      }
+    },
+  }
 </script>
\ No newline at end of file

pages/index/index.uvue

@@ -378,6 +378,11 @@ export default {
               id: 'define-expose',
               name: 'defineExpose',
               url: 'define-expose/define-expose'
+            },
+            {
+              id: 'circular-reference',
+              name: 'circular reference',
+              url: 'circular-reference/circular-reference'
             }
           ] as Page[]
         },