test: overflow:visible 补充测试例

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

@@ -18,6 +18,8 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
   beforeEach(async () => {
     await page.setData({
       jest_result: false,
+      jest_click_x: -1,
+      jest_click_y: -1
     })
   });
 
@@ -49,4 +51,15 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
     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>
-  <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">
+  <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>
-  </view>
+  </scroll-view>
 </template>
 
 <script>
@@ -56,6 +76,12 @@
         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) {
@@ -72,6 +98,16 @@
           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
+        }
       }
     }
   }
@@ -94,4 +130,8 @@
     overflow: visible;
     background-color: green;
   }
+
+  .hover-class {
+    background-color: aqua;
+  }
 </style>