refactor: 优化示例及测试

pages/built-in/special-elements/template/template-composition.uvue

 <template>
   <view class="page">
     <template v-if="dataInfo.isShow">
-      <view class="title">{{ title }}</view>
+      <text id="title">{{ title }}</text>
     </template>
-    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
+    <button id="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>
     <template v-for="(item, index) in list" :key="index">
       <view class="item">{{ index + 1 }}.{{ item.name }}</view>
     </template>
@@ -31,14 +31,14 @@ const list = ref<ListItem[]>([
   {
     name: 'foo2'
   }
-] as ListItem[])
+])
 
 const handleShow = () => {
   dataInfo.isShow = !dataInfo.isShow
 }
 
 const goMapStyle = () => {
-  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })
+  uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-composition' })
 }
 
 defineExpose({

pages/built-in/special-elements/template/template-options.uvue

 <template>
   <view class="page">
     <template v-if="dataInfo.isShow">
-      <view class="title">{{ title }}</view>
+      <text id="title">{{ title }}</text>
     </template>
-    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
+    <button id="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>
     <template v-for="(item, index) in list" :key="index">
       <view class="item">{{ index + 1 }}.{{ item.name }}</view>
     </template>
@@ -39,7 +39,7 @@ export default {
       this.dataInfo.isShow = !this.dataInfo.isShow
     },
     goMapStyle() {
-      uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })
+      uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-options' })
     }
   }
 }

pages/built-in/special-elements/template/template.test.js

@@ -5,16 +5,15 @@ describe('built-in/special-elements/component', () => {
   let page
   const test = async () => {
     await page.waitFor('view')
-    expect.assertions(4);
-    const showBtn = await page.$('.show-botton')
+    const showBtn = await page.$('#show-botton')
+    expect(await showBtn.text()).toBe("点击显示")
     await showBtn.tap()
     
     const dataInfo = await page.data('dataInfo')
     expect(dataInfo.isShow).toBeTruthy()
-    const getTitle = await page.$('.title')
+    const getTitle = await page.$('#title')
     expect(await getTitle.text()).toBe("hello")
-    const getShow = await page.$('.show-botton')
-    expect(await getShow.text()).toBe("点击隐藏")
+    expect(await showBtn.text()).toBe("点击隐藏")
     expect((await page.$$('.item')).length).toBe(2)
   }
   it('template Options API', async () => {

pages/reactivity/advanced/shallow-reactive/shallow-reactive.test.js

@@ -15,12 +15,12 @@ describe('shallowReactive', () => {
     const stateNestedCount = await page.$('#state-nested-count')
     expect(await stateNestedCount.text()).toBe('0')
 
-    const incrementStateNestedCountBtn = await page.$('.increment-state-nested-count-btn')
+    const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn')
     await incrementStateNestedCountBtn.tap()
 
     expect(await stateNestedCount.text()).toBe('0')
 
-    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    const incrementStateCountBtn = await page.$('#increment-state-count-btn')
     await incrementStateCountBtn.tap()
 
     if (isWeb) {

pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue

@@ -8,13 +8,14 @@
       <text>state.nested.count:</text>
       <text id="state-nested-count">{{ state.nested.count }}</text>
     </view>
-    <button
-      class="increment-state-count-btn mb-10"
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
       @click="incrementStateCount">
       increment state.count
     </button>
     <button
-      class="increment-state-nested-count-btn"
+      id="increment-state-nested-count-btn"
       @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
@@ -28,13 +29,14 @@ type StateNested = {
 type State = {
   count : number,
   nested : StateNested
-}
-const state = shallowReactive({
+}
+// 可通过泛型指定类型
+const state = shallowReactive<State>({
   count: 0,
   nested: {
     count: 0
-  } as StateNested
-} as State)
+  }
+})
 
 const incrementStateCount = () => {
   state.count++

pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue

@@ -35,13 +35,14 @@ type StateNested = {
 type State = {
   count : number,
   nested : StateNested
-}
-const state = shallowReadonly({
+}
+// 可通过泛型指定类型
+const state = shallowReadonly<State>({
   count: 0,
   nested: {
     count: 0
-  } as StateNested
-} as State)
+  }
+})
 
 // #ifdef APP
 const incrementStateCount = () => {

pages/reactivity/advanced/shallow-ref/shallow-ref.test.js

@@ -10,12 +10,12 @@ describe('shallowRef', () => {
     const stateCount = await page.$('#state-count')
     expect(await stateCount.text()).toBe('0')
 
-    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    const incrementStateCountBtn = await page.$('#increment-state-count-btn')
     await incrementStateCountBtn.tap()
 
     expect(await stateCount.text()).toBe('0')
 
-    const updateStateBtn = await page.$('.update-state-btn')
+    const updateStateBtn = await page.$('#update-state-btn')
     await updateStateBtn.tap()
 
     expect(await stateCount.text()).toBe('1')

pages/reactivity/advanced/shallow-ref/shallow-ref.uvue

@@ -4,12 +4,13 @@
       <text>state.count:</text>
       <text id="state-count">{{ state.count }}</text>
     </view>
-    <button
-      class="increment-state-count-btn mb-10"
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
       @click="incrementStateCount">
       increment state.count
     </button>
-    <button class="update-state-btn" @click="updateState">update state</button>
+    <button id="update-state-btn" @click="updateState">update state</button>
   </view>
 </template>
 
@@ -17,10 +18,10 @@
 type State = {
   count: number
 }
-
-const state = shallowRef({
+// 可通过泛型指定类型
+const state = shallowRef<State>({
   count: 0
-} as State)
+})
 
 const incrementStateCount = () => {
   state.value.count++

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

@@ -19,7 +19,7 @@ describe('reactive', () => {
     const objArr = await page.$('#obj-arr')
     expect(await objArr.text()).toBe('["a","b","c"]')
 
-    const updateBtn = await page.$('.update-btn')
+    const updateBtn = await page.$('#update-btn')
     await updateBtn.tap()
 
     expect(await count.text()).toBe('2')

pages/reactivity/core/reactive/reactive.uvue

@@ -16,7 +16,7 @@
       <text>obj.arr:</text>
       <text id="obj-arr">{{ JSON.stringify(obj['arr']) }}</text>
     </view>
-    <button class="update-btn" @click="update">update</button>
+    <button id="update-btn" @click="update">update</button>
   </view>
 </template>
 

pages/reactivity/core/readonly/readonly.uvue

@@ -40,14 +40,14 @@ type Data = {
   num : number,
   arr : string[]
 }
-
-const data = reactive({
+// 可通过泛型指定类型
+const data = reactive<Data>({
   str: 'default str',
   num: 0,
   arr: ['a', 'b', 'c']
-} as Data)
-
-const readonlyData = readonly(data)
+})
+// 可通过泛型指定类型
+const readonlyData = readonly<Data>(data)
 
 const updateData = () => {
   data.str = 'new str'

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

@@ -14,7 +14,7 @@ describe('ref', () => {
     const counterCount = await page.$('#counter-count')
     expect(await counterCount.text()).toBe('counter.count: 0')
 
-    const incrementBtn = await page.$('.increment-btn')
+    const incrementBtn = await page.$('#increment-btn')
     await incrementBtn.tap()
 
     expect(await count1.text()).toBe('count1: 2')

pages/reactivity/core/ref/ref.uvue

@@ -3,7 +3,7 @@
     <text id="count1" class="mb-10">count1: {{ count1 }}</text>
     <text id="count2" class="mb-10">count2: {{ count2 }}</text>
     <text id="counter-count" class="mb-10">counter.count: {{ counter.count }}</text>
-    <button class="increment-btn" @click="increment">increment</button>
+    <button id="increment-btn" @click="increment">increment</button>
   </view>
 </template>
 
@@ -15,10 +15,10 @@
   type Counter = {
     count : number
   }
-  // TODO: Android 端暂不支持通过泛型指定类型，可通过 as 方式指定类型
-  const counter = ref({
+  // 可通过泛型指定类型
+  const counter = ref<Counter>({
     count: 0
-  } as Counter)
+  })
 
   const increment = () => {
     count1.value++