test: overflow-visible-event 增加拖拽测试例

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)
+  })
 });

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,17 +18,43 @@
       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":"点击红色区域"})
+        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()
@@ -36,6 +63,15 @@
           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))
+        }
       }
     }
   }