From be333b2306167e61333cecee9570c02b4cb026bb Mon Sep 17 00:00:00 2001
From: taohebin <taohebin@dcloud.io>
Date: Fri, 14 Jun 2024 12:06:08 +0800
Subject: [PATCH] =?UTF-8?q?test:=20overflow-visible-event=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=8B=96=E6=8B=BD=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overflow/overflow-visible-event.test.js   | 19 +++++++
 .../CSS/overflow/overflow-visible-event.uvue  | 54 +++++++++++++++----
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/pages/CSS/overflow/overflow-visible-event.test.js b/pages/CSS/overflow/overflow-visible-event.test.js
index 9be18dd1..896671b3 100644
--- a/pages/CSS/overflow/overflow-visible-event.test.js
+++ b/pages/CSS/overflow/overflow-visible-event.test.js
@@ -30,4 +30,23 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
     res = await page.data('jest_result');
     expect(res).toBe(true)
   });
+
+  // 此测试针对开发者使用 translate 移动view
+  it('Check Overflow Visible Part Use translate Drag', async ()=> {
+    await page.callMethod('jest_getRect')
+    const point_x = await page.data('jest_click_x');
+    const point_y = await page.data('jest_click_y');
+    const distance = 100;
+    const destY = point_y + 100
+    const duration = 1000
+    await program.adbCommand("input swipe" + " " + point_x + " " + point_y + " " + point_x + " " + destY + " " + duration)
+    await page.waitFor(1500);
+    await page.callMethod('jest_getParentRect')
+    const currentParentTop = await page.data('jest_parent_top');
+    const offset = 2
+    const diff = Math.abs(currentParentTop - distance) < offset
+    console.log("current ", currentParentTop);
+    console.log("diff", diff);
+    expect(diff).toBe(true)
+  })
 });
diff --git a/pages/CSS/overflow/overflow-visible-event.uvue b/pages/CSS/overflow/overflow-visible-event.uvue
index f2c3b4e9..3a52cfe7 100644
--- a/pages/CSS/overflow/overflow-visible-event.uvue
+++ b/pages/CSS/overflow/overflow-visible-event.uvue
@@ -2,9 +2,10 @@
   <view>
     <text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
     <view class="backgroundview">
-      <view class="box-visible-border-radius">
-        <view id="child" style="width: 50px; height: 150px; background-color: red;"
-          @click="handleClickOverflowPart" @touchmove="handleTouchMoveOverflowPart">
+      <view id="parent" class="box-visible-border-radius">
+        <view id="child" style="width: 50px; height: 150px; background-color: red;" @click="handleClickOverflowPart"
+          @touchmove="handleTouchMoveOverflowPart" @touchstart="handleTouchStartOverflowPart"
+          @touchend="handleTouchEndOverflowPart">
         </view>
       </view>
     </view>
@@ -17,25 +18,60 @@
       return {
         jest_result: false,
         jest_click_x: -1,
-        jest_click_y: -1
+        jest_click_y: -1,
+        jest_parent_top: -1.0,
+        startX: 0,
+        startY: 0,
+        moveX: 0,
+        moveY: 0,
+        oldX: 0,
+        oldY: 0,
+        moveEl: null as UniElement | null
       }
     },
+    onReady() {
+      this.moveEl = uni.getElementById('parent')
+    },
     methods: {
       handleClickOverflowPart() {
         console.log("click");
-        this.jest_result = true;
-        uni.showToast({"title":"点击红色区域"})
+        this.jest_result = true;
+        uni.showToast({ "title": "点击红色区域" })
+      },
+      handleTouchStartOverflowPart(e : UniTouchEvent) {
+        this.startX = e.changedTouches[0].clientX
+        this.startY = e.changedTouches[0].clientY
       },
-      handleTouchMoveOverflowPart(e:UniTouchEvent) {
+      handleTouchMoveOverflowPart(e : UniTouchEvent) {
         console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
+        e.preventDefault()
+        e.stopPropagation()
+        const difX = e.changedTouches[0].clientX
+        const difY = e.changedTouches[0].clientY
+        this.moveX = difX - this.startX + this.oldX
+        this.moveY = difY - this.startY + this.oldY
+        this.moveEl?.style?.setProperty('transform', `translate(${this.moveX}px,${this.moveY}px)`)
+      },
+      handleTouchEndOverflowPart(_ : UniTouchEvent) {
+        this.oldX = this.moveX
+        this.oldY = this.moveY
       },
       jest_getRect() {
         const rect = uni.getElementById('child')?.getBoundingClientRect()
-        if (rect != null) {
+        if (rect != null) {
           const ratio = uni.getSystemInfoSync().devicePixelRatio
           this.jest_click_x = rect.x * ratio + 10
           this.jest_click_y = rect.bottom * ratio - 10
-        }
+        }
+      },
+      jest_getParentRect() {
+        const transform = uni.getElementById('parent')?.style.getPropertyValue("transform")
+        if (transform != null) {
+          let value = transform as string
+          value = value.split(",")[1].slice(0, -3)
+          const ratio = uni.getSystemInfoSync().devicePixelRatio
+          this.jest_parent_top = Math.round((parseFloat(value) * ratio))
+        }
       }
     }
   }
-- 
GitLab