test: ref

pages/component/general-attribute/general-attribute.test.js

@@ -7,14 +7,20 @@ describe('general attribute', () => {
     page = await program.navigateTo(PAGE_PATH)
     await page.waitFor(1000)
   })
-  it('screenshot', async () => {
-    const image = await program.screenshot()
-    expect(image).toMatchImageSnapshot()
-  })
+  it("class & style", async () => {
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
   it('validateGeneralAttributes', async () => {
-    const button = await page.$('.btn')
+    const button = await page.$(".btn-style");
     await button.tap()
     const btnInner = await page.$('.btn-inner')
     expect(await btnInner.text()).toBe('基础属性验证成功')
   })
+  it("ref", async () => {
+    const button = await page.$(".btn-ref");
+    await button.tap();
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
 })

pages/component/general-attribute/general-attribute.uvue

@@ -4,16 +4,43 @@
     <!-- #endif -->
     <view>
       <page-head :title="title"></page-head>
-      <view class="uni-padding-wrap uni-common-mt container">
-        <view :id="generalId" :class="generalClass" :name="generalName" :title="generalTitle" :data-test="generalData" style="background-color: aqua" ref="general-target"> </view>
-        <view class="btn uni-common-mt" @click="validateGeneralAttributes">
+      <view class="uni-padding-wrap container">
+        <view
+          :id="generalId"
+          :class="generalClass"
+          :name="generalName"
+          :title="generalTitle"
+          :data-test="generalData"
+          :style="generalStyle"
+          ref="general-target"
+        >
+          <text>id: {{ generalId }}</text>
+          <text>class: {{ generalClass }}</text>
+          <text>name: {{ generalName }}</text>
+          <text>title: {{ generalTitle }}</text>
+          <text>data-test: {{ generalData }}</text>
+          <text>style: {{ generalStyle }}</text>
+        </view>
+        <view
+          class="btn btn-style uni-common-mt"
+          @click="validateGeneralAttributes"
+        >
           <text class="btn-inner">{{ validateGeneralAttrText }}</text>
         </view>
+        <view class="btn btn-ref uni-common-mt" @click="changeHeight">
+          <text class="btn-inner">通过 ref 修改高度</text>
+        </view>
         <view class="view-class" :hover-class="hoverClass" ref="view-target">
           <text class="text">按下 50 ms 后背景变红</text>
           <text class="text">抬起 400 ms 后背景恢复</text>
         </view>
-        <view class="view-class" :hover-class="hoverClass" :hover-start-time="1000" :hover-stay-time="1000" ref="view-target">
+        <view
+          class="view-class"
+          :hover-class="hoverClass"
+          :hover-start-time="1000"
+          :hover-stay-time="1000"
+          ref="view-target"
+        >
           <text class="text">按下 1000 ms 后背景变红</text>
           <text class="text">抬起 1000 ms 后背景恢复</text>
         </view>
@@ -34,6 +61,7 @@ export default {
       generalName: 'general-name',
       generalTitle: 'general-title',
       generalData: 'general-data',
+      generalStyle: 'background-color: aqua',
       validateGeneralAttrText: '验证基础属性',
       hoverClass: 'hover-class',
       validateViewAttrText: '验证 view 属性',
@@ -69,6 +97,10 @@ export default {
       }
       this.validateGeneralAttrText = '基础属性验证成功'
     },
+    changeHeight(){
+      const generalTarget = this.$refs.get('general-target') as INode
+      generalTarget.style.set('height', '200px')
+    }
   },
 }
 </script>
@@ -86,9 +118,10 @@ export default {
   color: #fff;
 }
 .general-class {
-  margin: 20px 0 0 50px;
-  width: 240px;
-  height: 100px;
+  margin-left: 40px;
+  padding: 10px;
+  width: 260px;
+  height: 160px;
   background-color: antiquewhite;
 }
 .view-class {