From f35714495db8078356450a8336854db72162c115 Mon Sep 17 00:00:00 2001 From: Anne_LXM Date: Tue, 4 Jun 2024 21:53:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Escroll-view=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=8C=96=E6=B5=8B=E8=AF=95=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/scroll-view/scroll-view.test.js | 91 ++++++++++++++++++- pages/component/scroll-view/scroll-view.uvue | 16 +++- 2 files changed, 102 insertions(+), 5 deletions(-) diff --git a/pages/component/scroll-view/scroll-view.test.js b/pages/component/scroll-view/scroll-view.test.js index 646710a3..59ad0fc0 100644 --- a/pages/component/scroll-view/scroll-view.test.js +++ b/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) + } + }) }); diff --git a/pages/component/scroll-view/scroll-view.uvue b/pages/component/scroll-view/scroll-view.uvue index c5e38567..184be4a0 100644 --- a/pages/component/scroll-view/scroll-view.uvue +++ b/pages/component/scroll-view/scroll-view.uvue @@ -26,7 +26,7 @@ 横向滚动 - + A B C @@ -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 () { -- GitLab