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

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

@@ -5,7 +5,6 @@ describe('component-native-scroll-view', () => {
     await page.waitFor(300);
   });
 
-
   it('scroll-view-screenshot', async () => {
     //禁止滚动条
     await page.setData({
@@ -15,4 +14,94 @@ describe('component-native-scroll-view', () => {
     const image = await program.screenshot({fullPage: true});
     expect(image).toSaveImageSnapshot();
   });
+
+  it('Event scroll-vertical',async()=>{
+    // 纵向滚动
+    await page.setData({scrollTop: 100})
+    await page.waitFor(600)
+    //设置top 是否触发scroll 事件
+    const topScrollInfo = await page.data('scrollTest')
+    // const topScrollResult = {
+    //   "scrollLeft": 0,
+    //   "scrollTop": 100,
+    //   "scrollHeight": 450,
+    //   "scrollWidth": 345,
+    //   "deltaX": 0,
+    //   "deltaY": -100
+    // }
+    const {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY} = topScrollInfo.detail
+    expect(topScrollInfo.type).toBe('scroll')
+    expect(scrollLeft).toBe(0)
+    expect(scrollTop).toBe(100)
+    expect(scrollHeight).toBeGreaterThan(0)
+    expect(scrollWidth).toBeGreaterThan(0)
+    expect(deltaX).toBe(0)
+    expect(deltaY).toBe(-100)
+    expect(topScrollInfo.currentTarget).not.toBeFalsy();
+    expect(topScrollInfo.target).not.toBeFalsy();
+    // expect(topScrollInfo.detail).toEqual(topScrollResult);
+    if(process.env.uniTestPlatformInfo.startsWith('web')){
+      expect(topScrollInfo.timeStamp).toBeGreaterThan(0)
+    }
+  })
+
+  it('Event scroll-horizontal',async()=>{
+    // 横向滚动
+    await page.setData({scrollLeft:220})
+    await page.waitFor(600)
+    //设置left 是否触发scroll 事件
+    const leftScrollInfo = await page.data('scrollTest')
+    // const leftScrollResult = {
+    //   "scrollLeft": 220,
+    //   "scrollTop": 0,
+    //   "scrollHeight": 150,
+    //   "scrollWidth": 1036,
+    //   "deltaX": -100,
+    //   "deltaY": 0
+    // }
+    const {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY} = leftScrollInfo.detail
+    expect(leftScrollInfo.type).toBe('scroll')
+    expect(scrollLeft).toBe(220)
+    expect(scrollTop).toBe(0)
+    expect(scrollHeight).toBeGreaterThan(0)
+    expect(scrollWidth).toBeGreaterThan(0)
+    expect(deltaX).toBe(-100)
+    expect(deltaY).toBe(0)
+    expect(leftScrollInfo.currentTarget).not.toBeFalsy();
+    expect(leftScrollInfo.target).not.toBeFalsy();
+    if(process.env.uniTestPlatformInfo.startsWith('web')){
+      expect(leftScrollInfo.timeStamp).toBeGreaterThan(0)
+    }
+  })
+
+  it('Event scrolltolower-滚动到底部/右边',async()=>{
+    // 滚动到底部scrollTop:300,
+    await page.setData({scrollTop: 300})
+    await page.waitFor(600)
+    //设置top 是否触发scrolltolower事件
+    const toLowerInfo = await page.data('toLowerTest')
+    expect(toLowerInfo.type).toBe('scrolltolower')
+    expect(toLowerInfo.detail.direction).toBe('bottom')
+    expect(toLowerInfo.currentTarget).not.toBeFalsy();
+    expect(toLowerInfo.target).not.toBeFalsy();
+    if(process.env.uniTestPlatformInfo.startsWith('web')){
+      expect(toLowerInfo.timeStamp).toBeGreaterThan(0)
+    }
+  })
+
+  it('Event scrolltoupper-滚动到顶部/左边',async()=>{
+    // 滚动到顶部scrollTop: 0,
+    // await page.setData({scrollTop: 0})
+    await page.callMethod('goTop')
+    await page.waitFor(600)
+    //设置top 是否触发scrolltoupper事件
+    const toUpperInfo = await page.data('toUpperTest')
+    expect(toUpperInfo.type).toBe('scrolltoupper')
+    expect(toUpperInfo.detail.direction).toBe('top')
+    expect(toUpperInfo.currentTarget).not.toBeFalsy();
+    expect(toUpperInfo.target).not.toBeFalsy();
+    if(process.env.uniTestPlatformInfo.startsWith('web')){
+      expect(toUpperInfo.timeStamp).toBeGreaterThan(0)
+    }
+  })
 });

pages/component/scroll-view/scroll-view.uvue

@@ -26,7 +26,7 @@
           <text class="uni-subtitle-text">横向滚动</text>
         </view>
         <view>
-          <scroll-view class="scroll-view_H" direction="horizontal" @scroll="scroll" :scroll-left="120" :show-scrollbar="showScrollbar">
+          <scroll-view class="scroll-view_H" direction="horizontal" @scroll="scroll" :scroll-left="scrollLeft" :show-scrollbar="showScrollbar">
             <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
             <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
             <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
@@ -68,17 +68,25 @@
       return {
         scrollTop: 0,
         oldScrollTop: 0,
-        showScrollbar: true
+        scrollLeft:120,
+        showScrollbar: true,
+        // 自动化测试
+        scrollTest:null as ScrollEvent|null,
+        toUpperTest:null as ScrollToUpperEvent|null,
+        toLowerTest:null as ScrollToLowerEvent|null
       }
     },
     methods: {
       upper: function (e : ScrollToUpperEvent) {
-        console.log(e)
+        console.log('滚动到顶部/左边',e)
+        this.toUpperTest = e
       },
       lower: function (e : ScrollToLowerEvent) {
-        console.log(e)
+        console.log('滚动到底部/右边',e)
+        this.toLowerTest = e
       },
       scroll: function (e : ScrollEvent) {
+        this.scrollTest = e
         this.oldScrollTop = e.detail.scrollTop
       },
       goTop: function () {