From c93a406739f31ea5e9f264ae6d2dd6044f6d900b Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sun, 21 Apr 2024 11:54:42 +0800
Subject: [PATCH] refactor(reactivity): watchPostEffect

---
 pages/index/index.uvue                        |   5 +
 .../watch-post-effect.test.js                 | 135 +++++++++---------
 .../watch-post-effect/watch-post-effect.uvue  |  85 ++++++++---
 3 files changed, 138 insertions(+), 87 deletions(-)

diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index e673da0..c40b314 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -512,6 +512,11 @@ export default {
                   name: 'watchEffect',
                   url: 'watch-effect/watch-effect'
                 },
+                {
+                  id: 'watch-post-effect',
+                  name: 'watchPostEffect',
+                  url: 'watch-post-effect/watch-post-effect'
+                },
               ]
             }
           ] as Page[]
diff --git a/pages/reactivity/core/watch-post-effect/watch-post-effect.test.js b/pages/reactivity/core/watch-post-effect/watch-post-effect.test.js
index db152f5..f31b027 100644
--- a/pages/reactivity/core/watch-post-effect/watch-post-effect.test.js
+++ b/pages/reactivity/core/watch-post-effect/watch-post-effect.test.js
@@ -1,158 +1,165 @@
-const PAGE_PATH = '/pages/composition-api/reactivity/watch-post-effect/watch-post-effect'
+const PAGE_PATH = '/pages/reactivity/core/watch-post-effect/watch-post-effect'
 
 describe('watchPostEffect', () => {
-  const isWeb = process.env.uniTestPlatformInfo.startsWith('web')
   let page = null
+  const platformInfo = process.env.uniTestPlatformInfo.toLowerCase()
+  const isAndroid = platformInfo.startsWith('android')
+  const isIos = platformInfo.startsWith('ios')
+  const isWeb = platformInfo.startsWith('web')
+  
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
     await page.waitFor('view')
   })
   it('count', async () => {
     const count = await page.$('#count')
-    expect(await count.text()).toBe('count: 0')
+    expect(await count.text()).toBe('0')
 
     // watch
     const watchCountRes = await page.$('#watch-count-res')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 0, count ref text: count: 0')
+      'count: 0, count ref text: 0')
 
     // track
     const watchCountTrackNum = await page.$('#watch-count-track-num')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
       // TODO: 确认 IOS 的差异是否正常
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 8')
+      expect(await watchCountTrackNum.text()).toBe('8')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
+      expect(await watchCountTrackNum.text()).toBe('3')
     }
 
     const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
-    // TODO web端自动化测试text方法应使用textContent获取内容来保留空格,目前text方法未保留首尾空格
-    expect(await watchCountCleanupRes.text()).toBe(isWeb ? 'watch count cleanup result:' :
-      'watch count cleanup result: ')
+    if (isAndroid || isWeb) {
+      expect(await watchCountCleanupRes.text()).toBe('')
+    }
+    if (isIos) {
+      expect(await watchCountCleanupRes.text()).toBe(null)
+    }
 
     // watch count and obj.num
     const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 0, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 0, obj.num: 0')
 
-    const incrementBtn = await page.$('#increment-btn')
+    const incrementBtn = await page.$('.increment-btn')
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 1')
+    expect(await count.text()).toBe('1')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 1, count ref text: count: 1')
+      'count: 1, count ref text: 1')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 16')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('16')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 6')
+      expect(await watchCountTrackNum.text()).toBe('6')
     }
 
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup: 1')
 
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 1, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 1, obj.num: 0')
 
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 2')
+    expect(await count.text()).toBe('2')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 2, count ref text: count: 2')
+      'count: 2, count ref text: 2')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 24')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('24')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 9')
+      expect(await watchCountTrackNum.text()).toBe('9')
     }
 
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup: 2')
 
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 2, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 2, obj.num: 0')
 
     // stop watch
-    const stopWatchCountBtn = await page.$('#stop-watch-count-btn')
+    const stopWatchCountBtn = await page.$('.stop-watch-count-btn')
     await stopWatchCountBtn.tap()
 
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 3')
+    expect(await count.text()).toBe('3')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 2, count ref text: count: 2')
+      'count: 2, count ref text: 2')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 24')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('24')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 9')
+      expect(await watchCountTrackNum.text()).toBe('9')
     }
 
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup: 2')
 
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 3, obj.num: 0')
   })
   it('obj', async () => {
     const objStr = await page.$('#obj-str')
-    expect(await objStr.text()).toBe('obj.str: num: 0')
+    expect(await objStr.text()).toBe('num: 0')
     const objNum = await page.$('#obj-num')
-    expect(await objNum.text()).toBe('obj.num: 0')
+    expect(await objNum.text()).toBe('0')
     const objBool = await page.$('#obj-bool')
-    expect(await objBool.text()).toBe('obj.bool: false')
+    expect(await objBool.text()).toBe('false')
     const objArr = await page.$('#obj-arr')
-    expect(await objArr.text()).toBe('obj.arr: [0]')
+    expect(await objArr.text()).toBe('[0]')
 
     const watchObjRes = await page.$('#watch-obj-res')
     // TODO web端和安卓端JSON.stringify对属性的排序不一致
-    if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
+    if (process.env.uniTestPlatformInfo.startsWith('web') || isIos) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}'
+        'obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}'
       )
     } else {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}'
+        'obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}'
       )
     }
     const watchObjStrRes = await page.$('#watch-obj-str-res')
     expect(await watchObjStrRes.text()).toBe(
-      'watch obj.str result: str: num: 0, obj.str ref text: obj.str: num: 0')
+      'str: num: 0, obj.str ref text: num: 0')
 
     // trigger
     const watchObjStrTriggerNum = await page.$('#watch-obj-str-trigger-num')
-    expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 0')
+    expect(await watchObjStrTriggerNum.text()).toBe('0')
 
     const watchObjArrRes = await page.$('#watch-obj-arr-res')
-    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
+    expect(await watchObjArrRes.text()).toBe('arr: [0]')
 
-    const updateObjBtn = await page.$('#update-obj-btn')
+    const updateObjBtn = await page.$('.update-obj-btn')
     await updateObjBtn.tap()
 
-    expect(await objStr.text()).toBe('obj.str: num: 1')
-    expect(await objNum.text()).toBe('obj.num: 1')
-    expect(await objBool.text()).toBe('obj.bool: true')
-    expect(await objArr.text()).toBe('obj.arr: [0,1]')
+    expect(await objStr.text()).toBe('num: 1')
+    expect(await objNum.text()).toBe('1')
+    expect(await objBool.text()).toBe('true')
+    expect(await objArr.text()).toBe('[0,1]')
 
-    if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
+    if (process.env.uniTestPlatformInfo.startsWith('web') || isIos) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}'
+        'obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}'
       )
     } else {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}'
+        'obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}'
       )
     }
     expect(await watchObjStrRes.text()).toBe(
-      'watch obj.str result: str: num: 1, obj.str ref text: obj.str: num: 1')
+      'str: num: 1, obj.str ref text: num: 1')
 
-    expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 1')
+    expect(await watchObjStrTriggerNum.text()).toBe('1')
 
     expect(await watchObjArrRes.text()).toBe(
-      'watch obj.arr result: arr: [0,1]')
+      'arr: [0,1]')
 
     const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 1')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 3, obj.num: 1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue b/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue
index 8f96a3a..b63bc45 100644
--- a/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue
+++ b/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue
@@ -1,39 +1,78 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1; padding-bottom: 20px">
-  <!-- #endif -->
+    <!-- #endif -->
     <view class="page">
-      <text id="count" ref="countRef" class="mb-10">count: {{ count }}</text>
-      <text id="watch-count-res" class="mb-10">watch count result: {{ watchCountRes }}</text>
-      <text id="watch-count-track-num" class="mb-10">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-cleanup-res" class="mb-10">watch count cleanup result: {{ watchCountCleanupRes }}</text>
-      <button id="increment-btn" class="mb-10" @click="increment">
-        increment
-      </button>
-      <button id="stop-watch-count-btn" class="mb-10" @click="triggerStopWatchCount">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <text id="obj-str" ref="objStrRef" class="mb-10">obj.str: {{ obj.str }}</text>
-      <text id="watch-obj-str-trigger-num" class="mb-10">watch obj.str trigger number:
-        {{ watchObjStrTriggerNum }}</text>
-      <text id="obj-num" class="mb-10">obj.num: {{ obj.num }}</text>
-      <text id="obj-bool" ref="objBoolRef" class="mb-10">obj.bool: {{ obj.bool }}</text>
-      <text id="obj-arr" ref="objArrRef" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-      <text id="watch-obj-res" class="mb-10">watch obj result: {{ watchObjRes }}</text>
-      <text id="watch-obj-str-res" class="mb-10">watch obj.str result: {{ watchObjStrRes }}</text>
-      <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text>
-      <button id="update-obj-btn" class="mb-10" @click="updateObj">
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
+      <button class="update-obj-btn mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
-        {{ watchCountAndObjNumRes }}</text>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
     </view>
-  <!-- #ifdef APP -->
+    <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
-<script setup>
+<script setup lang='uts'>
   type Obj = {
     num : number,
     str : string,
-- 
GitLab