新增list-view事件自动化测试例

pages/component/list-view/list-view-refresh.test.js

@@ -20,5 +20,27 @@ describe('component-native-list-view-refresh', () => {
     await page.waitFor(500)
     const image = await program.screenshot({fullPage: true});
     expect(image).toSaveImageSnapshot();
+    // 手动设置下拉刷新状态refresher-triggered为true时，在iOS不触发@refresherpulling事件
+    if(process.env.UNI_UTS_PLATFORM.startsWith('app-android')){
+      expect(await page.data('onRefresherpullingTest')).toBe('refresherpulling:Success')
+    }
+    expect(await page.data('refresherrefreshTest')).toBe('refresherrefresh:Success')
+    await page.waitFor(1000);
+    expect(await page.data('onRefresherrestoreTest')).toBe('refresherrestore:Success')
+  })
+
+  it('check_refresherabort', async () => {
+    // 仅App端支持手势下拉刷新
+    await program.swipe({
+      startPoint: {x: 100,y: 400},
+      endPoint: {x: 100,y: 500},
+      duration: 1000
     })
+    await page.waitFor(1500)
+    // 下拉刷新被中止，在iOS不触发@refresherabort事件
+    if(process.env.UNI_UTS_PLATFORM.startsWith('app-android')){
+      expect(await page.data('onRefresherabortTest')).toBe('refresherabort:Success')
+    }
+  });
+
 })

pages/component/list-view/list-view-refresh.uvue

 <template>
   <list-view v-if="list_show" id="listview" style="flex: 1;" show-scrollbar=false :refresher-enabled="true"
-    :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresherrefresh">
+    :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresherrefresh" @refresherabort="onRefresherabort" @refresherrestore="onRefresherrestore" @refresherpulling="onRefresherpulling">
     <list-item class="item">
       <text>向下滑动触发下拉刷新</text>
     </list-item>
@@ -11,12 +11,23 @@
 </template>
 
 <script>
+  type RefresherEventTest = {
+    type: string;
+    target: UniElement | null;
+    currentTarget: UniElement | null;
+    dy:number;
+  }
   export default {
     data() {
       return {
         item_count: 20,
         list_show: false,
-        refresherTriggered: true
+        refresherTriggered: true,
+        // 自动化测试使用
+        refresherrefreshTest:"",
+        onRefresherabortTest:"",
+        onRefresherrestoreTest:"",
+        onRefresherpullingTest:""
       }
     },
     onLoad() {
@@ -26,11 +37,66 @@
       }, 500)
     },
     methods: {
-      onRefresherrefresh() {
+      onRefresherrefresh(e:UniRefresherEvent) {
+        console.log('refresherrefresh-----下拉刷新被触发', e.detail.dy);
         this.refresherTriggered = true;
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          dy:e.detail.dy,
+        } as RefresherEventTest,'refresherrefresh')
         setTimeout(() => {
           this.refresherTriggered = false;
         }, 1000)
+      },
+      onRefresherabort(e:UniRefresherEvent) {
+        console.log("onRefresherabort------下拉刷新被中止",e.detail)
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          dy:e.detail.dy,
+        } as RefresherEventTest,'refresherabort')
+      },
+      onRefresherrestore(e:UniRefresherEvent) {
+        console.log("onRefresherrestore------下拉刷新被复位",e.detail.dy)
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          dy:e.detail.dy,
+        } as RefresherEventTest,'refresherrestore')
+      },
+      onRefresherpulling(e:UniRefresherEvent) {
+        console.log("onRefresherpulling------拉刷新控件被下拉-dy=" + e.detail.dy)
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          dy:e.detail.dy,
+        } as RefresherEventTest,'refresherpulling')
+      },
+      // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）
+      checkEventTest(e:RefresherEventTest, eventName:String){
+        const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement && e.dy>0;
+        const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;
+        switch (eventName){
+          case 'refresherrefresh':
+            this.refresherrefreshTest = result
+            break;
+          case 'refresherpulling':
+            this.onRefresherpullingTest =  result
+            break;
+          case 'refresherrestore':
+            this.onRefresherrestoreTest =  result
+            break;
+          case 'refresherabort':
+            this.onRefresherabortTest =  result
+            break;
+          default:
+            break;
+        }
       }
     }
   }

pages/component/list-view/list-view.test.js

@@ -32,10 +32,63 @@ describe('component-native-list-view', () => {
     expect(scrollLeft-600).toBeGreaterThanOrEqual(0)
   })
 
+  it('Event check_scroll', async () => {
+    await page.callMethod('change_scroll_y_boolean', true)
+    await page.callMethod('change_scroll_x_boolean', false)
+    await page.waitFor(600)
+    await page.callMethod('confirm_scroll_top_input', 300)
+    await page.waitFor(600)
+    // 在web端scroll事件event参数中detail类型报错，先忽略测试
+    if(!process.env.UNI_UTS_PLATFORM.startsWith('web')){
+      const scrollDetail = await page.data('scrollDetailTest')
+      expect(scrollDetail.scrollLeft).toBe(0)
+      expect(scrollDetail.scrollTop).toBe(300)
+      expect(scrollDetail.scrollHeight).toBeGreaterThan(0)
+      // 在安卓端 "scrollWidth":0
+      if(!process.env.UNI_UTS_PLATFORM.startsWith('app-android')){
+        expect(scrollDetail.scrollWidth).toBeGreaterThan(0)
+      }
+      expect(scrollDetail.deltaX).toBe(0)
+      expect(scrollDetail.deltaY).toBe(300)
+    }
+    expect(await page.data('isScrollTest')).toBe('scroll:Success')
+  })
+
+  it('Event scrolltolower-滚动到底部/右边',async()=>{
+    // 滚动到底部,是否触发scrolltolower事件
+    await page.callMethod('confirm_scroll_top_input', 2500)
+    await page.waitFor(600)
+    expect(await page.data('isScrolltolowerTest')).toBe('scrolltolower:Success-bottom')
+  })
+
+  it('Event scrolltoupper-滚动到顶部/左边',async()=>{
+    // 滚动到顶部50,是否触发scrolltoupper事件
+    await page.callMethod('confirm_scroll_top_input', 50)
+    await page.waitFor(600)
+    expect(await page.data('isScrolltoupperTest')).toBe('scrolltoupper:Success-top')
+  })
+
   if (process.env.uniTestPlatformInfo.indexOf('web') > -1) {
     return
   }
 
+  it('Event scrollend-滚动结束时触发',async()=>{
+    // 仅App端支持,向下滑动页面
+    await program.swipe({
+      startPoint: { x: 100, y: 500 },
+      endPoint: { x: 100, y: 200 },
+      duration: 1000
+    })
+    await page.waitFor(600)
+    const endDetail = await page.data('scrollEndDetailTest')
+    expect(endDetail.deltaY).toBe(0)
+    expect(endDetail.deltaX).toBe(0)
+    expect(endDetail.scrollLeft).toBe(0)
+    expect(endDetail.scrollTop).toBeGreaterThan(0)
+    expect(endDetail.scrollHeight).toBeGreaterThan(0)
+    // 在安卓端 "scrollWidth":0
+    // expect(endDetail.scrollWidth).toBeGreaterThan(0)
+  })
 
   if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
     return

pages/component/list-view/list-view.uvue

 <script>
+  type ScrollEventTest = {
+    type: string;
+    target: UniElement | null;
+    currentTarget: UniElement | null;
+    direction?:string
+  }
   import { ItemType } from '@/components/enum-data/enum-data'
   export default {
     data() {
@@ -23,7 +29,16 @@
         refresher_default_style_input: "black",
         text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', ""],
         state: 3,
-        reset: true
+        reset: true,
+        // 自动化测试
+        isScrollTest:'',
+        isScrolltolowerTest:'',
+        isScrolltoupperTest:'',
+        // 在web端scroll事件event参数中detail类型报错，先条件编译处理
+        // #ifndef WEB
+        scrollDetailTest:null as UniScrollEventDetail|null,
+        scrollEndDetailTest:null as UniScrollEventDetail|null,
+        // #endif
       }
     },
     onLoad() {
@@ -68,9 +83,46 @@
         console.log("下拉刷新被复位")
       },
       list_view_refresherabort() { console.log("下拉刷新被中止") },
-      list_view_scrolltoupper(e : ScrollToUpperEvent) { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件  direction=" + e.detail.direction) },
-      list_view_scrolltolower(e : ScrollToLowerEvent) { console.log("滚动到底部/右边，会触发 scrolltolower 事件  direction=" + e.detail.direction) },
-      list_view_scroll() { console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}") },
+      list_view_scrolltoupper(e : UniScrollToUpperEvent) {
+        console.log("滚动到顶部/左边，会触发 scrolltoupper 事件  direction=" + e.detail.direction)
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          direction:e.detail.direction,
+        } as ScrollEventTest,'scrolltoupper')
+      },
+      list_view_scrolltolower(e : UniScrollToLowerEvent) {
+        console.log("滚动到底部/右边，会触发 scrolltolower 事件  direction=" + e.detail.direction)
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget,
+          direction:e.detail.direction,
+        } as ScrollEventTest,'scrolltolower')
+      },
+      list_view_scroll(e:UniScrollEvent) {
+        console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}")
+        // #ifndef WEB
+        this.scrollDetailTest = e.detail
+        // #endif
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget
+        } as ScrollEventTest,'scroll')
+      },
+      list_view_scrollend(e:UniScrollEvent){
+        console.log("滚动结束时触发",e.detail)
+        // #ifndef WEB
+        this.scrollEndDetailTest = e.detail
+        // #endif
+        this.checkEventTest({
+          type:e.type,
+          target:e.target,
+          currentTarget:e.currentTarget
+        } as ScrollEventTest,'scrollend')
+      },
       list_item_click() { console.log("list-item组件被点击时触发") },
       list_item_touchstart() { console.log("手指触摸list-item组件动作开始") },
       list_item_touchmove() { console.log("手指触摸list-item组件后移动") },
@@ -106,6 +158,24 @@
       confirm_scroll_left_input(value : number) { this.scroll_left_input = value },
       confirm_refresher_background_input(value : string) { this.refresher_background_input = value },
       item_change_size_enum(index : number) { this.scrollIntoView = "item---" + index },
+      // 自动化测试专用（由于事件event参数对象中存在循环引用，在ios端JSON.stringify报错，自动化测试无法page.data获取）
+      checkEventTest(e:ScrollEventTest, eventName:String){
+        const isPass = e.type === eventName && e.target instanceof UniElement && e.currentTarget instanceof UniElement;
+        const result = isPass ? `${eventName}:Success` : `${eventName}:Fail`;
+        switch (eventName){
+          case 'scroll':
+            this.isScrollTest = result
+            break;
+          case 'scrolltolower':
+            this.isScrolltolowerTest =  result + `-${e.direction}`
+            break;
+          case 'scrolltoupper':
+            this.isScrolltoupperTest =  result + `-${e.direction}`
+            break;
+          default:
+            break;
+        }
+      },
       //自动化测试例专用
       check_scroll_height() : Boolean {
         var listElement = this.$refs["listview"] as UniElement
@@ -148,7 +218,7 @@
       @refresherpulling="list_view_refresherpulling" @refresherrefresh="list_view_refresherrefresh"
       @refresherrestore="list_view_refresherrestore" @refresherabort="list_view_refresherabort"
       @scrolltoupper="list_view_scrolltoupper" ref="listview" @scrolltolower="list_view_scrolltolower"
-      @scroll="list_view_scroll" style="width:100%;" id="listview">
+      @scroll="list_view_scroll" @scrollend="list_view_scrollend" style="width:100%;" id="listview">
       <list-item v-for="key in scrollData" :key="key" :id="key" @click="list_item_click"
         @touchstart="list_item_touchstart" @touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel"
         @touchend="list_item_touchend" @tap="list_item_tap" @longpress="list_item_longpress" class="list-item">