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