From 9bf1dfb6da2e506c144aae42e0687578ae4677d2 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 5 Dec 2024 16:00:25 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=E6=96=B0=E5=A2=9E=20element-get-boundi?=
 =?UTF-8?q?ng-client-rect-async?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ent-get-bounding-client-rect-async.test.js |  35 +++++
 ...lement-get-bounding-client-rect-async.uvue | 129 ++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.test.js
 create mode 100644 pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.uvue

diff --git a/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.test.js b/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.test.js
new file mode 100644
index 00000000..d1b23c01
--- /dev/null
+++ b/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.test.js
@@ -0,0 +1,35 @@
+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)
+}
diff --git a/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.uvue b/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.uvue
new file mode 100644
index 00000000..2f93d91a
--- /dev/null
+++ b/pages/API/element-get-bounding-client-rect-async/element-get-bounding-client-rect-async.uvue
@@ -0,0 +1,129 @@
+<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>
-- 
GitLab