feat(nodes-info): 补充子组件的 mounted 生命周期测试

pages/API/nodes-info/nodes-info-child.uvue

+<template>
+  <view class="selector-query-child-view">
+    <text class="selector-query-child-text">selector-query-child</text>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        top: 0
+      }
+    },
+    mounted() {
+      uni.createSelectorQuery().in(this).select('.selector-query-child-view').boundingClientRect().exec((ret) => {
+        if (ret.length == 1) {
+          const nodeInfo = ret[0] as NodeInfo;
+          this.top = nodeInfo.top!
+        }
+      })
+    }
+  }
+</script>
+
+<style>
+  .selector-query-child-view {
+    margin-top: 15px;
+  }
+</style>

pages/API/nodes-info/nodes-info.test.js

@@ -53,6 +53,11 @@ describe('nodes-info', () => {
     expect(nodeInfo2.top > 220).toBe(true)
     expect(Math.round(nodeInfo2.width)).toBe(RECT_WIDTH)
     expect(Math.round(nodeInfo2.height)).toBe(RECT_HEIGHT)
+  })
+  it('get-node-info-child', async () => {
+    const child = await page.$('.node-child')
+    const childData = await child.data()
+    expect(childData.top > 100).toBe(true)
   })
 
   // #ifdef APP

pages/API/nodes-info/nodes-info.uvue

-<template>
-  <view class="page" id="page">
-    <page-head :title="title"></page-head>
-    <button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
-    <button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
-    <view id="rect-1-2" class="rect-1-2">
-      <view class="rect rect1"></view>
-      <view class="rect rect2"></view>
-    </view>
-    <view class="rect-info-1-2">
-      <view class="rect-info" v-for="(nodeInfo, index) in nodeInfoList" :key="index">
-        <view class="node-info-item">
-          <text class="node-info-item-k">left: </text>
-          <text class="node-info-item-v">{{nodeInfo.left}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">top: </text>
-          <text class="node-info-item-v">{{nodeInfo.top}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">right: </text>
-          <text class="node-info-item-v">{{nodeInfo.right}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">bottom: </text>
-          <text class="node-info-item-v">{{nodeInfo.bottom}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">width: </text>
-          <text class="node-info-item-v">{{nodeInfo.width}}</text>
-        </view>
-        <view class="node-info-item">
-          <text class="node-info-item-k">height: </text>
-          <text class="node-info-item-v">{{nodeInfo.height}}</text>
-        </view>
+<template>
+  <view class="page" id="page">
+    <page-head :title="title"></page-head>
+    <button class="btn btn-get-node-info" @click="getNodeInfo">getNodeInfo</button>
+    <button class="btn btn-get-all-node-info" @click="getAllNodeInfo">getAllNodeInfo</button>
+    <view id="rect-1-2" class="rect-1-2">
+      <view class="rect rect1"></view>
+      <view class="rect rect2"></view>
+    </view>
+    <view class="rect-info-1-2">
+      <view class="rect-info" v-for="(nodeInfo, index) in nodeInfoList" :key="index">
+        <view class="node-info-item">
+          <text class="node-info-item-k">left: </text>
+          <text class="node-info-item-v">{{nodeInfo.left}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">top: </text>
+          <text class="node-info-item-v">{{nodeInfo.top}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">right: </text>
+          <text class="node-info-item-v">{{nodeInfo.right}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">bottom: </text>
+          <text class="node-info-item-v">{{nodeInfo.bottom}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">width: </text>
+          <text class="node-info-item-v">{{nodeInfo.width}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">height: </text>
+          <text class="node-info-item-v">{{nodeInfo.height}}</text>
+        </view>
       </view>
-    </view>
-  </view>
-</template>
-
-<script>
-  type NodeInfoType = {
-    left : number | null,
-    top : number | null,
-    right : number | null,
-    bottom : number | null,
-    width : number | null,
-    height : number | null,
-  }
-
-  export default {
-    data() {
-      return {
-        title: 'createSelectorQuery',
-        nodeInfoList: [] as NodeInfoType[],
-        // 仅用于自动化测试
-        rootNodeInfo: null as NodeInfoType | null,
-        //供自动化测试使用
-        // resizeRectValid: false
-      }
-    },
-    onResize() {
-      //供自动化测试使用
-      /* var rect12Element = uni.getElementById("rect-1-2")
-      if(rect12Element != null) {
-        var domRect = rect12Element.getBoundingClientRect()
-        if(domRect.width > 100) {
-          this.resizeRectValid = true
-        }
-      } */
-    },
-    methods: {
-      // 仅用于自动化测试
-      getRootNodeInfo(selector: string) {
-        uni.createSelectorQuery().select(selector).boundingClientRect().exec((ret) => {
-          if (ret.length == 1) {
-            const nodeInfo = ret[0] as NodeInfo;
-            const nodeType = {
-              left: nodeInfo.left,
-              top: nodeInfo.top,
-              right: nodeInfo.right,
-              bottom: nodeInfo.bottom,
-              width: nodeInfo.width,
-              height: nodeInfo.height,
-            } as NodeInfoType;
-            this.rootNodeInfo = nodeType
-          }
-        })
-      },
-      getNodeInfo() {
-        uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
-          this.nodeInfoList.length = 0
-          const i = ret[0] as NodeInfo
-          this.nodeInfoList.push({
-            left: i.left,
-            top: i.top,
-            right: i.right,
-            bottom: i.bottom,
-            width: i.width,
-            height: i.height,
-          } as NodeInfoType)
-        })
-      },
-      getAllNodeInfo() {
-        uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
-          this.nodeInfoList.length = 0
-          const array = ret[0] as NodeInfo[]
-          array.forEach((i) => {
-            this.nodeInfoList.push({
-              left: i.left,
-              top: i.top,
-              right: i.right,
-              bottom: i.bottom,
-              width: i.width,
-              height: i.height,
-            } as NodeInfoType)
-          })
-        })
-      }
-    }
-  }
-</script>
-
-<style>
-  .page {
-    padding: 15px;
-    flex: 1;
-  }
-
-  .btn {
-    margin-top: 15px;
-  }
-
-  .rect-1-2 {
-    flex-direction: row;
-    margin-top: 15px;
-  }
-
-  .rect {
-    width: 150px;
-    height: 100px;
-  }
-
-  .rect1 {
-    background-color: dodgerblue;
-  }
-
-  .rect2 {
-    margin-left: auto;
-    background-color: seagreen;
-  }
-
-  .rect-info-1-2 {
-    flex-direction: row;
-    margin-top: 15px;
-  }
-
-  .rect-info {
-    flex: 1;
-    flex-direction: column;
-  }
-
-  .node-info-item {
-    flex-direction: row;
-  }
-
-  .node-info-item-k {
-    width: 72px;
-    line-height: 2;
-  }
-
-  .node-info-item-v {
-    font-weight: bold;
-    line-height: 2;
-  }
+      <node-child class="node-child"></node-child>
+    </view>
+  </view>
+</template>
+
+<script>
+  import nodeChild from './nodes-info-child.uvue'
+
+  type NodeInfoType = {
+    left : number | null,
+    top : number | null,
+    right : number | null,
+    bottom : number | null,
+    width : number | null,
+    height : number | null,
+  }
+
+  export default {
+    components: {
+      nodeChild
+    },
+    data() {
+      return {
+        title: 'createSelectorQuery',
+        nodeInfoList: [] as NodeInfoType[],
+        // 仅用于自动化测试
+        rootNodeInfo: null as NodeInfoType | null,
+        //供自动化测试使用
+        // resizeRectValid: false
+      }
+    },
+    onResize() {
+      //供自动化测试使用
+      /* var rect12Element = uni.getElementById("rect-1-2")
+      if(rect12Element != null) {
+        var domRect = rect12Element.getBoundingClientRect()
+        if(domRect.width > 100) {
+          this.resizeRectValid = true
+        }
+      } */
+    },
+    methods: {
+      // 仅用于自动化测试
+      getRootNodeInfo(selector : string) {
+        uni.createSelectorQuery().select(selector).boundingClientRect().exec((ret) => {
+          if (ret.length == 1) {
+            const nodeInfo = ret[0] as NodeInfo;
+            const nodeType = {
+              left: nodeInfo.left,
+              top: nodeInfo.top,
+              right: nodeInfo.right,
+              bottom: nodeInfo.bottom,
+              width: nodeInfo.width,
+              height: nodeInfo.height,
+            } as NodeInfoType;
+            this.rootNodeInfo = nodeType
+          }
+        })
+      },
+      getNodeInfo() {
+        uni.createSelectorQuery().select('.rect1').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          const i = ret[0] as NodeInfo
+          this.nodeInfoList.push({
+            left: i.left,
+            top: i.top,
+            right: i.right,
+            bottom: i.bottom,
+            width: i.width,
+            height: i.height,
+          } as NodeInfoType)
+        })
+      },
+      getAllNodeInfo() {
+        uni.createSelectorQuery().selectAll('.rect').boundingClientRect().exec((ret) => {
+          this.nodeInfoList.length = 0
+          const array = ret[0] as NodeInfo[]
+          array.forEach((i) => {
+            this.nodeInfoList.push({
+              left: i.left,
+              top: i.top,
+              right: i.right,
+              bottom: i.bottom,
+              width: i.width,
+              height: i.height,
+            } as NodeInfoType)
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .page {
+    padding: 15px;
+    flex: 1;
+  }
+
+  .btn {
+    margin-top: 15px;
+  }
+
+  .rect-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
+  .rect {
+    width: 150px;
+    height: 100px;
+  }
+
+  .rect1 {
+    background-color: dodgerblue;
+  }
+
+  .rect2 {
+    margin-left: auto;
+    background-color: seagreen;
+  }
+
+  .rect-info-1-2 {
+    flex-direction: row;
+    margin-top: 15px;
+  }
+
+  .rect-info {
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .node-info-item {
+    flex-direction: row;
+  }
+
+  .node-info-item-k {
+    width: 72px;
+    line-height: 2;
+  }
+
+  .node-info-item-v {
+    font-weight: bold;
+    line-height: 2;
+  }
 </style>