refactor(component instance): ref

pages/component-instance/refs/child-composition.uvue

@@ -3,5 +3,5 @@ const value = ref<string>('child value')
 </script>
 
 <template>
-  {{ value }}
+  <text>{{ value }}</text>
 </template>
\ No newline at end of file

pages/component-instance/refs/child-options.uvue

@@ -9,5 +9,5 @@ export default {
 </script>
 
 <template>
-  {{ value }}
+  <text>{{ value }}</text>
 </template>

pages/component-instance/refs/refs-composition.uvue

 <template>
   <view class="page">
-    <view ref="nodeRef">NodeRef: {{ refObject.existRef }}</view>
-    <view ref="nodeRef">childRef: {{ refObject.exisChildRef }}</view>
-    <Child ref="childRef">ComponentRef</Child>
+    <view class="row">
+      <text>NodeRef: </text>
+      <text ref="nodeRef">{{ dataInfo.existRef }}</text>
+    </view>
+    <view class="row">
+      <text>childRef:</text>
+      <text>{{ dataInfo.existChildRef }}</text>
+    </view>
+    <view class="row">
+      <text>existTextItems:</text>
+      <text>{{ dataInfo.existTextItems }}</text>
+    </view>
+    <view>
+      <text v-for="item in dataInfo.textItemsExpectNum" ref="textItems" :key="item">{{
+        item
+      }}</text>
+    </view>
+    <child class="mt-10" ref="childRef">ComponentRef</child>
   </view>
 </template>
 
 <script setup lang="uts">
 import Child from './child-composition.uvue'
 
-type RefObject = { existRef: boolean; exisChildRef: boolean }
+type DataInfo = {
+  existRef: boolean
+  existChildRef: boolean
+  textItemsExpectNum: number
+  existTextItems: boolean
+}
 
-// NOTE 由于自动化测试读不到 ref，composition 改为使用 reactive
-const refObject = reactive<RefObject>({
+const dataInfo = reactive<DataInfo>({
   existRef: false,
-  exisChildRef: false
-} as RefObject)
+  existChildRef: false,
+  textItemsExpectNum: 3,
+  existTextItems: false
+})
 
-const nodeRef = ref<ComponentPublicInstance | null>(null)
-const childRef = ref<ComponentPublicInstance | null>(null)
+const nodeRef = ref<UniElement | null>(null)
+const childRef = ref<UniElement | null>(null)
+const textItems = ref<UniElement[] | null>(null)
 
 onReady(() => {
-  refObject.existRef = nodeRef.value !== null
-  refObject.exisChildRef = childRef.value !== null
+  dataInfo.existRef = nodeRef.value !== null
+  dataInfo.existChildRef = childRef.value !== null
+  dataInfo.existTextItems = textItems.value?.length === dataInfo.textItemsExpectNum
 })
 
 defineExpose({
-  refObject
+  dataInfo
 })
 </script>
 

pages/component-instance/refs/refs-options.uvue

 <template>
   <view class="page">
-    <view ref="node">NodeRef: {{ existRef }}</view>
-    <view ref="nodeRef">childRef: {{ exisChildRef }}</view>
-    <child ref="childRef">ComponentRef</child>
+    <view class="row">
+      <text>NodeRef: </text>
+      <text ref="node">{{ dataInfo.existRef }}</text>
+    </view>
+    <view class="row">
+      <text>childRef:</text>
+      <text>{{ dataInfo.existChildRef }}</text>
+    </view>
+    <view class="row">
+      <text>existTextItems:</text>
+      <text>{{ dataInfo.existTextItems }}</text>
+    </view>
+    <view>
+      <text v-for="item in dataInfo.textItemsExpectNum" ref="textItems" :key="item">{{
+        item
+      }}</text>
+    </view>
+    <child class="mt-10" ref="childRef">ComponentRef</child>
   </view>
 </template>
 
 <script lang="uts">
 import child from './child-options.uvue'
 
+type DataInfo = {
+  existRef: boolean
+  existChildRef: boolean
+  textItemsExpectNum: number
+  existTextItems: boolean
+}
 export default {
   components: {
     child
   },
   data() {
     return {
-      existRef: false,
-      exisChildRef: false
+      dataInfo: {
+        existRef: false,
+        existChildRef: false,
+        textItemsExpectNum: 3,
+        existTextItems: false
+      } as DataInfo
     }
   },
   onReady() {
-    this.existRef = this.$refs['node'] !== null
-    this.exisChildRef = this.$refs['childRef'] !== null
+    this.dataInfo.existRef = this.$refs['node'] !== null
+    this.dataInfo.existChildRef = this.$refs['childRef'] !== null
+    const textItems = this.$refs['textItems'] as Array<UniElement>
+    this.dataInfo.existTextItems = textItems.length === this.dataInfo.textItemsExpectNum
   }
 }
 </script>
@@ -33,4 +60,4 @@ export default {
   justify-content: space-between;
   margin-bottom: 10px;
 }
-</style>
\ No newline at end of file
+</style>

pages/component-instance/refs/refs.test.js

@@ -4,25 +4,21 @@ const PAGE_COMPOSITION_PATH = '/pages/component-instance/refs/refs-composition'
 describe('$refs', () => {
   let page
 
-  it('$refs 选项式 API 属性生效', async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
+  const test = async (path) => {
+    page = await program.reLaunch(path)
+    await page.waitFor('view')
 
-    expect.assertions(2)
-    const data = await page.data()
+    const dataInfo = await page.data('dataInfo')
+    expect(dataInfo.existRef).toBe(true)
+    expect(dataInfo.existChildRef).toBe(true)
+    expect(dataInfo.existTextItems).toBe(true)
+  }
 
-    expect(data.existRef).toBe(true)
-    expect(data.exisChildRef).toBe(true)
+  it('$refs 选项式 API', async () => {
+    await test(PAGE_PATH)
   })
 
-  it('$refs 组合式 API 属性生效', async () => {
-    page = await program.reLaunch(PAGE_COMPOSITION_PATH)
-    await page.waitFor(500)
-
-    expect.assertions(2)
-    const data = await page.data()
-    console.log('data: ',data);
-    expect(data.refObject.existRef).toBe(true)
-    expect(data.refObject.exisChildRef).toBe(true)
+  it('$refs 组合式 API', async () => {
+    await test(PAGE_COMPOSITION_PATH)
   })
 })