refactor(reactive ref): 优化示例及测试

pages/reactivity/core/reactive/reactive.test.js

@@ -19,12 +19,21 @@ describe('reactive', () => {
     const objArr = await page.$('#obj-arr')
     expect(await objArr.text()).toBe('["a","b","c"]')
 
-    const updateBtn = await page.$('#update-btn')
-    await updateBtn.tap()
+    const updateCountBtn = await page.$('#update-count-btn')
+    await updateCountBtn.tap()
+    expect(await count.text()).toBe('1')
 
-    expect(await count.text()).toBe('2')
+    const updateObjStrBtn = await page.$('#update-obj-str-btn')
+    await updateObjStrBtn.tap()
     expect(await objStr.text()).toBe('new str')
+
+    const updateObjNumBtn = await page.$('#update-obj-num-btn')
+    await updateObjNumBtn.tap()
+    expect(await count.text()).toBe('2')
     expect(await objNum.text()).toBe('2')
+
+    const updateObjArrBtn = await page.$('#update-obj-arr-btn')
+    await updateObjArrBtn.tap()
     expect(await objArr.text()).toBe('["a","b","c","d"]')
   })
 })
\ No newline at end of file

pages/reactivity/core/reactive/reactive.uvue

@@ -16,24 +16,36 @@
       <text>obj.arr:</text>
       <text id="obj-arr">{{ JSON.stringify(obj['arr']) }}</text>
     </view>
-    <button id="update-btn" @click="update">update</button>
+    <button class='mb-10' id="update-count-btn" @click="updateCount">update count</button>
+    <button class='mb-10' id="update-obj-str-btn" @click="updateObjStr">update obj.str</button>
+    <button class='mb-10' id="update-obj-num-btn" @click="updateObjNum">update obj.num</button>
+    <button class='mb-10' id="update-obj-arr-btn" @click="updateObjArr">update obj.arr</button>
   </view>
 </template>
 
 <script setup lang="uts">
-const count = ref(0)
+  const count = ref(0)
 
-// TODO: 待支持后补充泛型示例
-const obj = reactive({
-  str: 'default str',
-  num: count,
-  arr: ['a', 'b', 'c']
-})
+  // TODO: 待支持后补充泛型示例
+  const obj = reactive({
+    str: 'default str',
+    num: count,
+    arr: ['a', 'b', 'c']
+  })
 
-const update = () => {
-  obj['str'] = 'new str';
-  obj['num'] = (obj['num'] as number) + 1
-  count.value++
-  (obj['arr'] as string[]).push('d')
-}
-</script>
+  const updateObjStr = () => {
+    obj['str'] = 'new str';
+  }
+
+  const updateObjNum = () => {
+    obj['num'] = (obj['num'] as number) + 1
+  }
+
+  const updateCount = () => {
+    count.value++
+  }
+
+  const updateObjArr = () => {
+    (obj['arr'] as string[]).push('d')
+  }
+</script>
\ No newline at end of file

pages/reactivity/core/ref/ref.test.js

@@ -18,13 +18,24 @@ describe('ref', () => {
     const counterCount = await page.$('#counter-count')
     expect(await counterCount.text()).toBe('0')
 
-    const changeDataBtn = await page.$('#change-data-btn')
-    await changeDataBtn.tap()
-
+    const changeCountBtn = await page.$('#change-count-btn')
+    await changeCountBtn.tap()
     expect(await count.text()).toBe('1')
+
+    const changeStrBtn = await page.$('#change-str-btn')
+    await changeStrBtn.tap()
     expect(await str.text()).toBe('new str')
+
+    const changeBoolBtn = await page.$('#change-bool-btn')
+    await changeBoolBtn.tap()
     expect(await bool.text()).toBe('true')
+
+    const changeArrBtn = await page.$('#change-arr-btn')
+    await changeArrBtn.tap()
     expect(await arr.text()).toBe('[1,2,3,4]')
+
+    const changeCounterBtn = await page.$('#change-counter-btn')
+    await changeCounterBtn.tap()
     expect(await counterCount.text()).toBe('1')
   })
 

pages/reactivity/core/ref/ref.uvue

@@ -20,31 +20,43 @@
       <text>counter.count:</text>
       <text id="counter-count">{{ counter.count }}</text>
     </view>
-    <button id="change-data-btn" @click="changeData">change data</button>
+    <button class='mb-10' id="change-count-btn" @click="changeCount">change count</button>
+    <button class='mb-10' id='change-str-btn' @click='changeStr'>change str</button>
+    <button class='mb-10' id='change-bool-btn' @click='changeBool'>change bool</button>
+    <button class='mb-10' id='change-arr-btn' @click='changeArr'>change arr</button>
+    <button class='mb-10' id='change-counter-btn' @click='changeCounter'>change counter</button>
   </view>
 </template>
 
 <script setup lang="uts">
-// 基础数据类型可自动推导类型
-const count = ref(0)
-const str = ref('default str')
-const bool = ref(false)
+  // 基础数据类型可自动推导类型
+  const count = ref(0)
+  const str = ref('default str')
+  const bool = ref(false)
 
-// 可通过泛型指定类型
-const arr = ref<number[]>([1, 2, 3])
-type Counter = {
-  count : number
-}
-// 可通过泛型指定类型
-const counter = ref<Counter>({
-  count: 0
-})
+  // 可通过泛型指定类型
+  const arr = ref<number[]>([1, 2, 3])
+  type Counter = {
+    count : number
+  }
+  // 可通过泛型指定类型
+  const counter = ref<Counter>({
+    count: 0
+  })
 
-const changeData = () => {
-  count.value++
-  str.value = 'new str'
-  bool.value = !bool.value
-  arr.value.push(arr.value.length + 1)
-  counter.value.count++
-}
-</script>
+  const changeCount = () => {
+    count.value++
+  }
+  const changeStr = () => {
+    str.value = 'new str'
+  }
+  const changeBool = () => {
+    bool.value = !bool.value
+  }
+  const changeArr = () => {
+    arr.value.push(arr.value.length + 1)
+  }
+  const changeCounter = () => {
+    counter.value.count++
+  }
+</script>
\ No newline at end of file