增加 $nextTick() 测试用例

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

+const PAGE_PATH = '/pages/component-instance/nextTick-function/nextTick-function'
+
+describe('$nextTick()', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+
+  it('$nextTick() 回调方式', async () => {
+    const data = await page.data()
+
+    expect(data.nextTickBeforeWidth).toBe(100)
+    expect(data.nextTickAfterWidth).toBe(200)
+  });
+
+  it('$nextTick() Promise方式', async () => {
+    const data = await page.data()
+
+    expect(data.nextTickBeforeHeight).toBe(100)
+    expect(data.nextTickAfterHeight).toBe(200)
+  });
+})

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

 <template>
   <view class="page">
+    <view class="rect" :style="{width: width, height: height}"></view>
+    <view class="row"></view>
     <view class="row">
-      <text ref="text">{{value}}</text>
+      <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">
+type INodePosition = {
+  top: number
+  left: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+}
 export default {
   data () {
     return {
-      value: 0
+      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!
+      });
     }
   }
 }
@@ -27,4 +95,8 @@ export default {
   justify-content: space-between;
   margin-bottom: 10px;
 }
+
+.rect {
+  background-color: red;
+}
 </style>

pages/index.uvue

@@ -254,7 +254,7 @@
               {
                 name: '$forceUpdate',
                 url: 'forceUpdate-function',
-                enable: true
+                enable: false
               },
               {
                 name: '$nextTick',
@@ -343,4 +343,4 @@
   .arrow-down {
     transform: rotate(-135deg);
   }
-</style>
\ No newline at end of file
+</style>