diff --git a/pages/index/index.uvue b/pages/index/index.uvue index 597af114584e0fb69cc94e266af1734e4649ff84..e673da035887c05f52a898f709adbdd0e49088f9 100644 --- a/pages/index/index.uvue +++ b/pages/index/index.uvue @@ -507,6 +507,11 @@ export default { }, ] }, + { + id: 'watch-effect', + name: 'watchEffect', + url: 'watch-effect/watch-effect' + }, ] } ] as Page[] diff --git a/pages/reactivity/core/watch-effect/watch-effect.test.js b/pages/reactivity/core/watch-effect/watch-effect.test.js index 93abcddf20181bc4ca995073f811944d8290f464..29764a080dcdd590d6468f36dc6c1d0ec817eab4 100644 --- a/pages/reactivity/core/watch-effect/watch-effect.test.js +++ b/pages/reactivity/core/watch-effect/watch-effect.test.js @@ -1,72 +1,77 @@ -const PAGE_PATH = '/pages/composition-api/reactivity/watch-effect/watch-effect' +const PAGE_PATH = '/pages/reactivity/core/watch-effect/watch-effect' describe('watchEffect', () => { 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 (flush sync): count: 0') + 'count: 0, count ref text (flush sync): 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: 11') + expect(await watchCountTrackNum.text()).toBe('11') } else { - expect(await watchCountTrackNum.text()).toBe('watch count track number: 6') + expect(await watchCountTrackNum.text()).toBe('6') } const watchCountCleanupRes = await page.$('#watch-count-cleanup-res') - expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 0') + expect(await watchCountCleanupRes.text()).toBe('watch count cleanup: 0') // 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') 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 (flush sync): count: 0') + 'count: 1, count ref text (flush sync): 0') - 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: 19') + if (isAndroid) { + expect(await watchCountTrackNum.text()).toBe('3') + } else if (isIos) { + expect(await watchCountTrackNum.text()).toBe('19') } 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: 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 (flush sync): count: 1') + 'count: 2, count ref text (flush sync): 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: 27') + if (isAndroid) { + expect(await watchCountTrackNum.text()).toBe('3') + } else if (isIos) { + expect(await watchCountTrackNum.text()).toBe('27') } else { - expect(await watchCountTrackNum.text()).toBe('watch count track number: 12') + expect(await watchCountTrackNum.text()).toBe('12') } - 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') @@ -74,82 +79,82 @@ describe('watchEffect', () => { 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 (flush sync): count: 1') + 'count: 2, count ref text (flush sync): 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: 27') + if (isAndroid) { + expect(await watchCountTrackNum.text()).toBe('3') + } else if (isIos) { + expect(await watchCountTrackNum.text()).toBe('27') } else { - expect(await watchCountTrackNum.text()).toBe('watch count track number: 12') + expect(await watchCountTrackNum.text()).toBe('12') } - 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') - if (process.env.uniTestPlatformInfo.startsWith('android')) { + if (isAndroid) { 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"}') } - if (process.env.uniTestPlatformInfo.startsWith('web')) { + if (isWeb) { 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]}') } const watchObjStrRes = await page.$('#watch-obj-str-res') expect(await watchObjStrRes.text()).toBe( - 'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0') + 'str: num: 0, obj.str ref text (flush pre): num: 0') // trigger const watchObjStrTriggerNum = await page.$('#watch-obj-str-trigger-num') - expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 1') + expect(await watchObjStrTriggerNum.text()).toBe('1') const watchObjBoolRes = await page.$('#watch-obj-bool-res') expect(await watchObjBoolRes.text()).toBe( - 'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false') + 'bool: false, obj.bool ref text (flush post): false') 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') 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('android')) { + if (isAndroid) { 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"}') } - if (process.env.uniTestPlatformInfo.startsWith('web')) { + if (isWeb) { 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]}') } expect(await watchObjStrRes.text()).toBe( - 'watch obj.str result: str: num: 1, obj.str ref text (flush pre): obj.str: num: 0') + 'str: num: 1, obj.str ref text (flush pre): num: 0') - expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 2') + expect(await watchObjStrTriggerNum.text()).toBe('2') expect(await watchObjBoolRes.text()).toBe( - 'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true') + 'bool: true, obj.bool ref text (flush post): true') - expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]') + expect(await watchObjArrRes.text()).toBe('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-effect/watch-effect.uvue b/pages/reactivity/core/watch-effect/watch-effect.uvue index 152e31e12b72cba2e5742046d1419c35d6c3a90b..7516714de237b3e49f537c5f2b92dd2c7c20fc24 100644 --- a/pages/reactivity/core/watch-effect/watch-effect.uvue +++ b/pages/reactivity/core/watch-effect/watch-effect.uvue @@ -1,41 +1,82 @@ <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 class="increment-btn mb-10" @click="increment"> - increment - </button> + <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-bool-res" class="mb-10">watch obj.bool result: {{ watchObjBoolRes }}</text> - <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text> + + <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.bool result:</text> + <text id="watch-obj-bool-res">{{ watchObjBoolRes }}</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,