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

pages/CSS/overflow/overflow-visible-event.test.js

@@ -23,43 +23,13 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
     })
   });
 
-  it('Check Overflow Visible Part Click', async () => {
+  it('Check Overflow Visible Part Click', async () => {
     res = await page.callMethod('jest_getRect')
     const point_x = await page.data('jest_click_x');
     const point_y = await page.data('jest_click_y');
     await program.adbCommand("input tap" + " " + point_x + " " + point_y)
-    await page.waitFor(500);
-    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)
-  })
-
-  it('Check Overflow Visible Block View Click', async () => {
-    await page.callMethod('jest_getAbsoluteViewRect')
-    const point_x = await page.data('jest_click_x');
-    const point_y = await page.data('jest_click_y');
-    console.log("input tap" + " " + point_x + " " + point_y);
-    await program.adbCommand("input tap" + " " + point_x + " " + point_y)
     await page.waitFor(500);
     res = await page.data('jest_result');
     expect(res).toBe(true)
-  })
+  });
 });

pages/CSS/overflow/overflow-visible-event.uvue

-<template>
-  <scroll-view style="flex: 1;">
-    <view>
-      <text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
-      <view class="backgroundview">
-        <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>
-      <text style="font-size: 15px;">overflow=visible组件的子view （绿色）被position:
-        absolute的view（红色）遮挡时，点击事件测试。</text>
-      <view style="width: 300px;height: 300px;background-color: white;">
-        <view style="overflow:visible;height: 100px;width: 100%;">
-          <view style="background-color: green;height: 100px;width: 100%;" @click="handleClick('green')">
-          </view>
-        </view>
-        <view id="absolute-view" style="position: absolute;background-color: red;width: 100px;height: 200px;right: 0px;"
-          @click="handleClick('red')">
-        </view>
-      </view>
-      <text style="font-size: 15px;">overflow=visible组件设置hover-class的测试</text>
-      <view class="backgroundview">
-        <view class="box-visible-border-radius" hover-class="hover-class">
-          <view style="background-color: red;height: 100px;width: 100px;margin-left: 20px;margin-top: 20px;">
-          </view>
-        </view>
-      </view>
-    </view>
-  </scroll-view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        jest_result: false,
-        jest_click_x: -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": "点击红色区域" })
-      },
-      handleTouchStartOverflowPart(e : UniTouchEvent) {
-        this.startX = e.changedTouches[0].clientX
-        this.startY = e.changedTouches[0].clientY
-      },
-      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
-      },
-      handleClick(str : string) {
-        console.log(`点击了 ${str} view`);
-        if (str == 'red') {
-          this.jest_result = true;
-        }
-      },
-      jest_getRect() {
-        const rect = uni.getElementById('child')?.getBoundingClientRect()
-        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))
-        }
-      },
-      jest_getAbsoluteViewRect() {
-        const rect = uni.getElementById('absolute-view')?.getBoundingClientRect()
-        if (rect != null) {
-          const systemInfo = uni.getSystemInfoSync()
-          const titleBarHeight = systemInfo.screenHeight - systemInfo.windowHeight
-          const ratio = systemInfo.devicePixelRatio
-          this.jest_click_x = rect.x * ratio + 10
-          this.jest_click_y = (rect.top + titleBarHeight + 10) * ratio
-        }
-      }
-    }
-  }
-</script>
-
-<style>
-  .backgroundview {
-    width: 300px;
-    height: 300px;
-    margin-bottom: 20px;
-    background-color: white;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .box-visible-border-radius {
-    width: 100px;
-    height: 100px;
-    border-radius: 20px;
-    overflow: visible;
-    background-color: green;
-  }
-
+<template>
+  <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>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        jest_result: false,
+        jest_click_x: -1,
+        jest_click_y: -1
+      }
+    },
+    methods: {
+      handleClickOverflowPart() {
+        console.log("click");
+        this.jest_result = true;
+        uni.showToast({"title":"点击红色区域"})
+      },
+      handleTouchMoveOverflowPart(e:UniTouchEvent) {
+        console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
+      },
+      handleClick(str : string) {
+        console.log(`点击了 ${str} view`);
+        if (str == 'red') {
+          this.jest_result = true;
+        }
+      },
+      jest_getRect() {
+        const rect = uni.getElementById('child')?.getBoundingClientRect()
+        if (rect != null) {
+          const ratio = uni.getSystemInfoSync().devicePixelRatio
+          this.jest_click_x = rect.x * ratio + 10
+          this.jest_click_y = rect.bottom * ratio - 10
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .backgroundview {
+    width: 300px;
+    height: 300px;
+    margin-bottom: 20px;
+    background-color: white;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .box-visible-border-radius {
+    width: 100px;
+    height: 100px;
+    border-radius: 20px;
+    overflow: visible;
+    background-color: green;
+  }
+
   .hover-class {
     background-color: aqua;
-  }
+  }
 </style>