新增 touch-events-bubbles.test.js 自动化测试例测试 touch 事件冒泡

pages/component/global-events/touch-events-bubbles.test.js

+const PAGE_PATH = '/pages/component/global-events/touch-events-bubbles'
+
+describe('touch-events-test', () => {
+
+  // 先屏蔽 android 及 web 平台
+  if (process.env.uniTestPlatformInfo.startsWith('android') || process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  if (process.env.UNI_TEST_DEVICES_DIRECTION == 'landscape') {
+    it('跳过横屏模式', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500);
+  })
+
+
+  it('touch-event-bubbles-test1', async () => {
+
+    let iconRect = await page.data('iconRect')
+    let x = iconRect.x + iconRect.width / 2.0
+    let y = iconRect.y + 5
+
+    // 滑动事件
+    await program.swipe({
+      startPoint: {x: x, y: y},
+      endPoint: {x: x,y: y+35},
+      duration: 200
+    })
+
+    await page.waitFor(1500);
+    await page.callMethod('isPassTest1')
+    const ret = await page.data('ret1')
+    expect(ret).toBe(true)
+  })
+
+  it('touch-event-bubbles-test2', async () => {
+
+    let viewEleRect = await page.data('viewEleRect')
+    let x = viewEleRect.x + viewEleRect.width / 2.0
+    let y = viewEleRect.y + 5
+
+    // 滑动事件
+    await program.swipe({
+      startPoint: {x: x, y: y},
+      endPoint: {x: x,y: y+35},
+      duration: 200
+    })
+
+    await page.waitFor(1500);
+    await page.callMethod('isPassTest2')
+    const ret = await page.data('ret2')
+    expect(ret).toBe(true)
+  })
+
+})

pages/component/global-events/touch-events-bubbles.uvue

+<template>
+  <scroll-view style="flex: 1">
+    <page-head title="事件冒泡测试"></page-head>
+    <view class="container">
+      <view class="view-box" id="view1" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+        <view class="mid-view" id="view1-2" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+          <image class="icon" id="view1-3" src="../image/logo.png" @touchstart="onTouchStart" @touchmove="onTouchMove"
+            @touchend="onTouchEnd"></image>
+        </view>
+      </view>
+      <view class="view-box" id="view2" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+        <view class="mid-view" id="view2-2" @touchend="onTouchEnd">
+          <view style="background-color: beige;" class="icon" id="view2-3" @touchstart="onTouchStart" @touchend="onTouchEnd"></view>
+        </view>
+      </view>
+
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        iconRect: null as DOMRect | null,
+        viewEleRect: null as DOMRect | null,
+        touchstartValue: [],
+        touchmoveValue: [],
+        touchendValue: [],
+        ret1: false,
+        ret2: false
+      }
+    },
+    onReady() {
+      // #ifdef APP-IOS
+      let iconEle = uni.getElementById("view1-3")
+      this.iconRect = iconEle?.getBoundingClientRect()
+      // 加上导航栏及状态栏高度
+      this.iconRect.y += uni.getSystemInfoSync().safeArea.top + 44
+
+      let viewEle = uni.getElementById("view2-3")
+      this.viewEleRect = viewEle?.getBoundingClientRect()
+      // 加上导航栏及状态栏高度
+      this.viewEleRect.y += uni.getSystemInfoSync().safeArea.top + 44
+
+      // #endif
+    },
+    methods: {
+      clearValue() {
+        this.touchstartValue = []
+        this.touchmoveValue = []
+        this.touchendValue = []
+      },
+      isPassTest1() {
+        let result = this.touchstartValue.join("") == "view1-3view1-2view1" &&
+          this.touchmoveValue.join("") == "view1-3view1-2view1" &&
+          this.touchendValue.join("") == "view1-3view1-2view1"
+        console.log('isPassTest1', result)
+        this.ret1 = result
+        this.clearValue()
+      },
+      isPassTest2() {
+        let result = this.touchstartValue.join("") == "view2-3view2" &&
+          this.touchmoveValue.join("") == "view2" &&
+          this.touchendValue.join("") == "view2-3view2-2view2"
+        console.log('isPassTest2', result)
+        this.ret2 = result
+        this.clearValue()
+      },
+      onTouchStart(e : TouchEvent) {
+        let _id = e.currentTarget!.attributes.get("id")
+
+
+        if (!this.touchstartValue.includes(_id)) {
+          this.touchstartValue.push(_id)
+        }
+
+        console.log('onTouchStart', e.currentTarget!.attributes.get("id"))
+      },
+      onTouchMove(e : TouchEvent) {
+
+
+        let _id = e.currentTarget!.attributes.get("id")
+
+        if (!this.touchmoveValue.includes(_id)) {
+          this.touchmoveValue.push(_id)
+        }
+
+        console.log('onTouchMove', e.currentTarget!.attributes.get("id"))
+      },
+      onTouchEnd(e : TouchEvent) {
+
+        let _id = e.currentTarget!.attributes.get("id")
+
+        if (!this.touchendValue.includes(_id)) {
+          this.touchendValue.push(_id)
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .container {
+    width: 100%;
+    height: 80%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .view-box {
+    width: 200px;
+    height: 200px;
+    align-items: center;
+    justify-content: center;
+    border-style: solid;
+  }
+
+  .mid-view {
+    width: 150px;
+    height: 150px;
+    align-items: center;
+    justify-content: center;
+    background-color: aqua;
+  }
+
+  .icon {
+    width: 100px;
+    height: 100px;
+  }
+</style>

pages/component/global-events/touch-events.uvue

@@ -49,7 +49,7 @@
       onViewTouchStart(e : TouchEvent) {
         this.touchTargets += e.target!.tagName + e.currentTarget!.tagName
         this.touchTargetsCount++
-        console.log(this.touchTargets, this.touchTargetsCount)
+        // console.log(this.touchTargets, this.touchTargetsCount)
       },
       onTouchStart(e : TouchEvent) {
         this.touchTargetsCount++

testSequencer.js

@@ -6,6 +6,7 @@ const sortTestFilePaths = [
   "pages/component/list-view/list-view-refresh.test.js",
   "pages/component/scroll-view/scroll-view-refresher.test.js",
   "pages/component/global-events/touch-events.test.js",
+  "pages/component/global-events/touch-events-bubbles.test.js",
   "pages/component/swiper/swiper2.test.js",
   "pages/component/rich-text/rich-text-complex.test.js"
 ]