提交 9e44579e 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor(reactivity): watchSyncEffect

......@@ -517,6 +517,11 @@ export default {
name: 'watchPostEffect',
url: 'watch-post-effect/watch-post-effect'
},
{
id: 'watch-sync-effect',
name: 'watchSyncEffect',
url: 'watch-sync-effect/watch-sync-effect'
},
]
}
] as Page[]
......@@ -717,8 +722,6 @@ export default {
})
return
}
console.log('parentUrl', parentUrl)
console.log('page', page)
uni.navigateTo({
url: `/pages/${parentUrl}/${page.url}`
})
......
const PAGE_PATH = '/pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect'
const PAGE_PATH = '/pages/reactivity/core/watch-sync-effect/watch-sync-effect'
describe('watchSyncEffect', () => {
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: 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')
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: 0')
'count: 1, count ref text: 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')) {
if (isAndroid) {
expect(await watchCountTrackNum.text()).toBe('3')
} else if (isIos) {
// TODO: 确认 IOS 的差异是否正常
expect(await watchCountTrackNum.text()).toBe('watch count track number: 19')
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: count: 1')
'count: 2, 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')) {
if (isAndroid) {
expect(await watchCountTrackNum.text()).toBe('3')
} else if (isIos) {
// TODO: 确认 IOS 的差异是否正常
expect(await watchCountTrackNum.text()).toBe('watch count track number: 27')
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')
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: 1')
'count: 2, 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')) {
if (isAndroid) {
expect(await watchCountTrackNum.text()).toBe('3')
} else if (isIos) {
// TODO: 确认 IOS 的差异是否正常
expect(await watchCountTrackNum.text()).toBe('watch count track number: 27')
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('web') || process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
if (isWeb || 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: 1')
expect(await watchObjStrTriggerNum.text()).toBe('1')
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 (isWeb || 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: 0')
'str: num: 1, obj.str ref text: num: 0')
expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 2')
expect(await watchObjStrTriggerNum.text()).toBe('2')
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
<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,
......
......@@ -122,13 +122,13 @@ function transform(fileInfo, api) {
- [x] circular reference
## reactivity
- [ ] ref
- [ ] reactive
- [ ] computed computed
- [ ] watch watch
- [ ] watchEffect
- [ ] watchPostEffect
- [ ] watchSyncEffect
- [x] ref
- [x] reactive
- [x] computed computed
- [x] watch watch
- [x] watchEffect
- [x] watchPostEffect
- [x] watchSyncEffect
- [ ] readonly
- [ ] customRef
- [ ] effectScope
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
反馈
建议
客服 返回
顶部