refactor(composition api): 优化 watch 相关示例及测试

pages/composition-api/reactivity/watch-effect/watch-effect.test.js

@@ -12,14 +12,8 @@ describe('watchEffect', () => {
 
     // watch
     const watchCountRes = await page.$('#watch-count-res')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 0, count ref text (flush sync): count: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 0, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 0, count ref text (flush sync): count: 0')
     // track
     const watchCountTrackNum = await page.$('#watch-count-track-num')
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
@@ -38,14 +32,8 @@ describe('watchEffect', () => {
     await incrementBtn.tap()
 
     expect(await count.text()).toBe('count: 1')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 1, count ref text (flush sync): count: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 1, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 1, count ref text (flush sync): count: 0')
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
     expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
@@ -55,14 +43,9 @@ describe('watchEffect', () => {
     await incrementBtn.tap()
 
     expect(await count.text()).toBe('count: 2')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, count ref text (flush sync): count: 1')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 2, count ref text (flush sync): count: 1')
+
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
     expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
@@ -76,14 +59,9 @@ describe('watchEffect', () => {
     await incrementBtn.tap()
 
     expect(await count.text()).toBe('count: 3')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, count ref text (flush sync): count: 1')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 2, count ref text (flush sync): count: 1')
+
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
     expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
@@ -110,23 +88,13 @@ describe('watchEffect', () => {
         'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}')
     }
     const watchObjStrRes = await page.$('#watch-obj-str-res')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchObjStrRes.text()).toBe(
-        'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjStrRes.text()).toBe(
-        'watch obj.str result: str: num: 0, obj.str ref text (flush pre): null')
-    }
+    expect(await watchObjStrRes.text()).toBe(
+      'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
+
     const watchObjBoolRes = await page.$('#watch-obj-bool-res')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: false, obj.bool ref text (flush post): null')
-    }
+    expect(await watchObjBoolRes.text()).toBe(
+      'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false')
+
     const watchObjArrRes = await page.$('#watch-obj-arr-res')
     expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
 
@@ -146,22 +114,11 @@ describe('watchEffect', () => {
       expect(await watchObjRes.text()).toBe(
         'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}')
     }
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjStrRes.text()).toBe(
         'watch obj.str result: str: num: 1, obj.str ref text (flush pre): obj.str: num: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjStrRes.text()).toBe(
-        'watch obj.str result: str: num: 1, obj.str ref text (flush pre): null')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: true, obj.bool ref text (flush post): null')
-    }
+    expect(await watchObjBoolRes.text()).toBe(
+      'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true')
+
     expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]')
 
     const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')

pages/composition-api/reactivity/watch-effect/watch-effect.uvue

@@ -43,7 +43,7 @@
     arr : number[]
   }
 
-  const countRef = ref<UniElement | null>(null)
+  const countRef = ref<UniTextElement | null>(null)
   const count = ref(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
@@ -52,7 +52,12 @@
 
   const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
-      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
       watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `
     }
@@ -95,11 +100,16 @@
     watchObjRes.value = `obj: ${JSON.stringify(obj)}`
   })
 
-  const objStrRef = ref<UniElement | null>(null)
+  const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
   watchEffect(() => {
     if (objStrRef.value !== null) {
-      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
       watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `
     }
@@ -108,11 +118,16 @@
     flush: 'pre',
   })
 
-  const objBoolRef = ref<UniElement | null>(null)
+  const objBoolRef = ref<UniTextElement | null>(null)
   const watchObjBoolRes = ref('')
   watchEffect(() => {
     if (objBoolRef.value !== null) {
-      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
       watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `
     }

pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue

@@ -42,7 +42,7 @@
     arr : number[]
   }
 
-  const countRef = ref<UniElement | null>(null)
+  const countRef = ref<UniTextElement | null>(null)
   const count = ref<number>(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
@@ -51,7 +51,12 @@
 
   const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
-      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
       watchCountRes.value = `count: ${count.value}, count ref text: `
     }
@@ -94,11 +99,16 @@
     watchObjRes.value = `obj: ${JSON.stringify(obj)}`
   })
 
-  const objStrRef = ref<UniElement | null>(null)
+  const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
   watchPostEffect(() => {
     if (objStrRef.value !== null) {
-      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
       watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
     }

pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue

@@ -42,7 +42,7 @@
     arr : number[]
   }
 
-  const countRef = ref<UniElement | null>(null)
+  const countRef = ref<UniTextElement | null>(null)
   const count = ref(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
@@ -51,12 +51,17 @@
 
   const stopWatchCount = watchSyncEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
-      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`
+      // #endif
+      // #ifdef WEB
+      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.childNodes[0] as HTMLElement).innerText}`
+      // #endif 
     } else {
-      watchCountRes.value = `count: ${count.value}, count ref text: `
+      watchCountRes.value = `count: ${ count.value }, count ref text: `
     }
     const cancel = () => {
-      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`
+      watchCountCleanupRes.value = `watch count cleanup: ${ count.value }`
     }
     onCleanup(cancel)
   },
@@ -91,32 +96,37 @@
 
   const watchObjRes = ref('')
   watchSyncEffect(() => {
-    watchObjRes.value = `obj: ${JSON.stringify(obj)}`
+    watchObjRes.value = `obj: ${ JSON.stringify(obj) }`
   })
 
-  const objStrRef = ref<UniElement | null>(null)
+  const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
   watchSyncEffect(() => {
     if (objStrRef.value !== null) {
-      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.getAttribute('value')}`
+      // #ifdef APP
+      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ objStrRef.value!.value }`
+      // #endif
+      // #ifdef WEB
+      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ (objStrRef.value!.childNodes[0] as HTMLElement).innerText }`
+      // #endif 
     } else {
-      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
+      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: `
     }
   })
 
   const watchObjArrRes = ref('')
   watchSyncEffect(() => {
-    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`
+    watchObjArrRes.value = `arr: ${ JSON.stringify(obj.arr) }`
   })
 
   const watchCountAndObjNumRes = ref('')
   watchSyncEffect(() => {
-    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`
+    watchCountAndObjNumRes.value = `count: ${ count.value }, obj.num: ${ obj.num }`
   })
 
   const updateObj = () => {
     obj.num++
-    obj.str = `num: ${obj.num}`
+    obj.str = `num: ${ obj.num }`
     obj.bool = !obj.bool
     obj.arr.push(obj.num)
   }

pages/composition-api/reactivity/watch/watch.test.js

@@ -33,14 +33,8 @@ describe('watch', () => {
 
     expect(await count.text()).toBe('count: 1')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 1, prevCount: 0, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
 
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
@@ -52,15 +46,8 @@ describe('watch', () => {
     await incrementBtn.tap()
 
     expect(await count.text()).toBe('count: 2')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
-
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
     expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
@@ -77,14 +64,8 @@ describe('watch', () => {
     await incrementBtn.tap()
 
     expect(await count.text()).toBe('count: 3')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchCountRes.text()).toBe(
-        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
-    }
+    expect(await watchCountRes.text()).toBe(
+      'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
     expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
     expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
     expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
@@ -138,24 +119,12 @@ describe('watch', () => {
         'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}, prevObj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}'
       )
     }
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchObjStrRes.text()).toBe(
-        'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjStrRes.text()).toBe(
-        'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): null')
-    }
+    expect(await watchObjStrRes.text()).toBe(
+      'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true'
-        )
-    }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
-      expect(await watchObjBoolRes.text()).toBe(
-        'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): null')
-    }
+    expect(await watchObjBoolRes.text()).toBe(
+      'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true'
+    )
     expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1], prevArr: [0,1]')
 
     const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')

pages/composition-api/reactivity/watch/watch.uvue

@@ -43,7 +43,7 @@
     arr : number[]
   }
 
-  const countRef = ref<UniElement | null>(null)
+  const countRef = ref<UniTextElement | null>(null)
   const count = ref(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
@@ -51,7 +51,12 @@
   const watchCountTriggerNum = ref(0)
 
   const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
-    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.getAttribute('value')}`
+    // #ifdef APP
+    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.value}`
+    // #endif
+    // #ifdef WEB
+    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
+    // #endif 
     const cancel = () => {
       watchCountCleanupRes.value = `watch count cleanup: ${count}`
     }
@@ -88,23 +93,33 @@
 
   // immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值
   const watchObjRes = ref('')
-  watch(obj, (obj : Obj, prevObj?: Obj) => {
+  watch(obj, (obj : Obj, prevObj ?: Obj) => {
     watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`
   }, { immediate: true })
 
-  const objStrRef = ref<UniElement | null>(null)
+  const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
   watch(() : string => obj.str, (str : string, prevStr : string) => {
-    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.getAttribute('value')}`
+    // #ifdef APP
+    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.value}`
+    // #endif
+    // #ifdef WEB
+    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
+    // #endif 
   }, {
     // 侦听器在组件渲染之前触发
     flush: 'pre',
   })
 
-  const objBoolRef = ref<UniElement | null>(null)
+  const objBoolRef = ref<UniTextElement | null>(null)
   const watchObjBoolRes = ref('')
   watch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {
-    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.getAttribute('value')}`
+    // #ifdef APP
+    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`
+    // #endif
+    // #ifdef WEB
+    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`
+    // #endif 
   }, {
     // 侦听器延迟到组件渲染之后触发
     flush: 'post'