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

bca57a74 · hdx · b54f8fe6 · bca57a74 · bca57a74 · bca57a74
3 changed file
--- a/pages/API/nodes-info/nodes-info-child.uvue
+++ b/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>
--- a/pages/API/nodes-info/nodes-info.test.js
+++ b/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

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