增加 $nextTick() 子组件测试用例

pages/component-instance/nextTick-function/child.uvue

+<template>
+  <view class="page">
+    <view class="rect" :style="{width: width, height: height}">child component</view>
+    <view class="row"></view>
+    <view class="row">
+      <text ref="text">$nextTick Before Width:</text>
+      <text>{{nextTickBeforeWidth}}</text>
+    </view>
+    <view class="row">
+      <text ref="text">$nextTick Before Height:</text>
+      <text>{{nextTickBeforeHeight}}</text>
+    </view>
+    <view class="row">
+      <text ref="text">$nextTick After Width:</text>
+      <text>{{nextTickAfterWidth}}</text>
+    </view>
+    <view class="row">
+      <text ref="text">$nextTick After Height:</text>
+      <text>{{nextTickAfterHeight}}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "nextTickChild",
+  data () {
+    return {
+      value: 0,
+      width: 100,
+      height: 100,
+
+      nextTickBeforeWidth: 0,
+      nextTickBeforeHeight: 0,
+      nextTickAfterWidth: 0,
+      nextTickAfterHeight: 0,
+    }
+  },
+  mounted () {
+    this.nextTickCallback()
+    this.nextTickPromise()
+  },
+  methods: {
+    nextTickCallback (): void {
+      this.width = 200
+
+      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
+        const rect = ret[0] as NodeInfo
+
+        this.$nextTick(() => {
+          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
+            const rect = ret[0] as NodeInfo
+            this.nextTickAfterWidth = rect!.width!
+          })
+        })
+
+        this.nextTickBeforeWidth = rect!.width!
+      });
+    },
+    nextTickPromise (): void {
+      this.height = 200
+
+      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
+        const rect = ret[0] as NodeInfo
+
+        this.$nextTick().then(() => {
+          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
+            const rect = ret[0] as NodeInfo
+            this.nextTickAfterHeight = rect!.height!
+          })
+        })
+
+        this.nextTickBeforeHeight = rect!.height!
+      });
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  font-size: 16px;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.rect {
+  background-color: blue;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

pages/component-instance/nextTick-function/nextTick-function.test.js

@@ -20,4 +20,20 @@ describe('$nextTick()', () => {
     expect(data.nextTickBeforeHeight).toBe(100)
     expect(data.nextTickAfterHeight).toBe(200)
   });
+
+  it('子组件 $nextTick() 回调方式', async () => {
+    const comp = await page.$('.next-tick-child')
+    const data = await comp.data()
+
+    expect(data.nextTickBeforeWidth).toBe(100)
+    expect(data.nextTickAfterWidth).toBe(200)
+  });
+
+  it('子组件 $nextTick() Promise方式', async () => {
+    const comp = await page.$('.next-tick-child')
+    const data = await comp.data()
+
+    expect(data.nextTickBeforeHeight).toBe(100)
+    expect(data.nextTickAfterHeight).toBe(200)
+  });
 })

pages/component-instance/nextTick-function/nextTick-function.uvue

@@ -18,19 +18,17 @@
       <text ref="text">$nextTick After Height:</text>
       <text>{{nextTickAfterHeight}}</text>
     </view>
+    <next-tick-child class="next-tick-child"></next-tick-child>
   </view>
 </template>
 
 <script lang="ts">
-type INodePosition = {
-  top: number
-  left: number
-  right: number
-  bottom: number
-  width: number
-  height: number
-}
+import child from './child.uvue'
+
 export default {
+  components: {
+    nextTickChild: child
+  },
   data () {
     return {
       value: 0,