feat(watch): 增加 Array 测试，含子组件

pages.json

@@ -174,6 +174,12 @@
         "navigationBarTitleText": "$watch()"
       }
     },
+    {
+      "path": "pages/component-instance/watch-function/watch-array",
+      "style": {
+        "navigationBarTitleText": "watch-array"
+      }
+    },
     {
       "path": "pages/component-instance/emit-function/emit-function",
       "style": {

pages/component-instance/watch-function/watch-array-child.uvue

+<template>
+  <view>
+    <view v-for="(item, index) in list">
+      <text class="data-item-text">{{JSON.stringify(item)}}</text>
+      <!-- TODO 暂不支持 for UTSJSONObject -->
+      <!-- <view v-for="(value, key) in item">
+        <text class="k">{{key}}</text>
+        <text class="v">{{value}}</text>
+      </view> -->
+    </view>
+    <view>
+      <text class="watch-count">{{watchCount}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { PropType } from 'vue'
+  export default {
+    name: 'ArrayDeep',
+    props: {
+      list: {
+        type: Array as PropType<Array<UTSJSONObject>>,
+        default: [] as Array<UTSJSONObject>
+      },
+    },
+    data() {
+      return {
+        watchCount: 0
+      }
+    },
+    watch: {
+      list: {
+        handler(newValue : Array<UTSJSONObject>) {
+          this.watchCount++
+        },
+        deep: true,
+        immediate: true
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/component-instance/watch-function/watch-array.test.js

+const PAGE_PATH = '/pages/component-instance/watch-function/watch-array'
+
+describe('watch', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+
+  it('change', async () => {
+    // immediate count = 1
+    await validateCount(page, 1)
+
+    const btnChangeData1 = await page.$('.change-data1')
+    await btnChangeData1.tap()
+    await page.waitFor(100)
+    // count = 1, 暂不支持 deep
+    await validateCount(page, 1)
+    // 验证数据正确性
+    await validateData1(page, 1, 2)
+
+    const btnChangeData2 = await page.$('.change-data2')
+    await btnChangeData2.tap()
+    await page.waitFor(100)
+    // count = 2，重新赋值触发
+    await validateCount(page, 2)
+    // 验证数据正确性
+    await validateData2(page, 3, 4)
+  })
+})
+
+async function validateCount(page, count) {
+  // page
+  const count_text = await page.$('.watch-count')
+  expect(await count_text.text()).toBe(count + '')
+
+  // page.child
+  const count_child = await page.$('.watch-array-child')
+  const count_child_text = await count_child.$('.watch-count')
+  expect(await count_child_text.text()).toBe(count + '')
+}
+
+async function validateData1(page, value1, value2) {
+  const page_text = await page.$('.data-item-text')
+  const page_json = JSON.parse(await page_text.text())
+  expect(page_json.a).toBe(value1)
+  expect(page_json.b).toBe(value2)
+
+  const child = await page.$('.watch-array-child')
+  const child_text = await child.$('.data-item-text')
+  const child_json = JSON.parse(await child_text.text())
+  expect(child_json.a).toBe(value1)
+  expect(child_json.b).toBe(value2)
+}
+
+async function validateData2(page, value1, value2) {
+  const page_text = await page.$('.data-item-text')
+  const page_json = JSON.parse(await page_text.text())
+  expect(page_json.c).toBe(value1)
+  expect(page_json.d).toBe(value2)
+
+  const child = await page.$('.watch-array-child')
+  const child_text = await child.$('.data-item-text')
+  const child_json = JSON.parse(await child_text.text())
+  expect(child_json.c).toBe(value1)
+  expect(child_json.d).toBe(value2)
+}
\ No newline at end of file

pages/component-instance/watch-function/watch-array.uvue

+<template>
+  <view>
+    <view v-for="(item, index) in dataList">
+      <text class="data-item-text">{{JSON.stringify(item)}}</text>
+      <!-- TODO 暂不支持 for UTSJSONObject -->
+      <!-- <view v-for="(value, key) in item">
+        <text class="k">{{key}}</text>
+        <text class="v">{{value}}</text>
+      </view> -->
+    </view>
+    <view>
+      <text class="watch-count">{{watchCount}}</text>
+    </view>
+    <view>
+      <text>Watch array in component</text>
+    </view>
+    <watch-array-child class="watch-array-child" :list="dataList"></watch-array-child>
+    <button class="change-data1" @click="changeData1">changeData1(push)</button>
+    <button class="change-data2" @click="changeData2">changeData2(allocate)</button>
+  </view>
+</template>
+
+<script>
+  import WatchArrayChild from './watch-array-child.uvue'
+  export default {
+    components: {
+      WatchArrayChild
+    },
+    data() {
+      return {
+        dataList: [] as Array<UTSJSONObject>,
+        watchCount: 0
+      }
+    },
+    watch: {
+      dataList: {
+        handler(newValue : Array<UTSJSONObject>) {
+          this.watchCount++
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+    methods: {
+      changeData1() {
+        let item = {
+          "a": 1,
+          "b": 2
+        }
+        this.dataList.push(item)
+      },
+      changeData2() {
+        let list = [{
+          "c": 3,
+          "d": 4
+        }] as Array<UTSJSONObject>
+        this.dataList = list
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/index.uvue

@@ -272,6 +272,11 @@
                 url: 'watch-function',
                 enable: true,
               },
+              {
+                name: 'watch-array',
+                url: 'watch-function/watch-array',
+                enable: true,
+              },
               {
                 name: '$emit',
                 url: 'emit-function',