test: 新增 element-get-bounding-client-rect-async

pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.test.js

+const PAGE_PATH = '/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async'
+
+const RECT_X = 15;
+const RECT_HEIGHT = 100;
+const RECT_LEFT = 15;
+
+describe('element-get-bounding-client-rect-async', () => {
+  const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('getBoundingClientRectSync', async () => {
+    await invokeGetBoundingClientRect('getBoundingClientRectAsync', 'rectInfo');
+  })
+})
+
+async function invokeGetBoundingClientRect(methodName, dataName) {
+  await page.callMethod(methodName);
+  await page.waitFor(50)
+
+  const data = await page.data()
+  const width = uni.getWindowInfo().windowWidth
+
+  const rectInfo = data[dataName]
+  expect(Math.round(rectInfo.x)).toBe(RECT_X)
+  expect(Math.round(rectInfo.y) > 90).toBe(true)
+  expect(Math.round(rectInfo.width)).toBe(width - 15 * 2)
+  expect(Math.round(rectInfo.height)).toBe(RECT_HEIGHT)
+  expect(Math.round(rectInfo.left)).toBe(RECT_LEFT)
+  expect(Math.round(rectInfo.top) > 90).toBe(true)
+  expect(Math.round(rectInfo.right)).toBe(width - 15)
+  expect(Math.round(rectInfo.bottom) > 200).toBe(true)
+}

pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page-scroll-view">
+  <!-- #endif -->
+    <view class="page" id="page">
+      <!-- <page-head :title="title"></page-head> -->
+      <button class="btn btn-get-all-node-info" @click="getBoundingClientRectAsync">getBoundingClientRectAsync</button>
+      <view id="rect-test" ref="rect-test" class="rect-test"></view>
+      <view class="rect-info" v-if="rectInfo">
+        <view class="node-info-item">
+          <text class="node-info-item-k">x: </text>
+          <text class="node-info-item-v">{{rectInfo.x}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">y: </text>
+          <text class="node-info-item-v">{{rectInfo.y}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">width: </text>
+          <text class="node-info-item-v">{{rectInfo.width}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">height: </text>
+          <text class="node-info-item-v">{{rectInfo.height}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">left: </text>
+          <text class="node-info-item-v">{{rectInfo.left}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">top: </text>
+          <text class="node-info-item-v">{{rectInfo.top}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">right: </text>
+          <text class="node-info-item-v">{{rectInfo.right}}</text>
+        </view>
+        <view class="node-info-item">
+          <text class="node-info-item-k">bottom: </text>
+          <text class="node-info-item-v">{{rectInfo.bottom}}</text>
+        </view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  type DomRectType = {
+    x : number,
+    y : number,
+    left : number,
+    top : number,
+    right : number,
+    bottom : number,
+    width : number,
+    height : number,
+  }
+
+  export default {
+    data() {
+      return {
+        title: 'getBoundingClientRectAsync',
+        rectInfo: {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0,
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+        } as DomRectType,
+      }
+    },
+    methods: {
+      getBoundingClientRectAsync() {
+        (this.$refs["rect-test"] as UniElement).getBoundingClientRectAsync()!.then((rect : DOMRect) => {
+          this.rectInfo = {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+          } as DomRectType;;
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .page {
+    padding: 15px;
+  }
+
+  .btn {
+    margin-top: 15px;
+  }
+
+  .rect-test {
+    margin-top: 15px;
+    height: 100px;
+    background-color: dodgerblue;
+  }
+
+  .rect-info {
+    margin-top: 15px;
+    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>