提交 0c8e97ba 编写于 作者: 雪洛's avatar 雪洛

revert: test: overflow-visible-event 增加拖拽测试例

上级 72813bba
...@@ -32,34 +32,4 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => { ...@@ -32,34 +32,4 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
res = await page.data('jest_result'); res = await page.data('jest_result');
expect(res).toBe(true) expect(res).toBe(true)
}); });
// 此测试针对开发者使用 translate 移动view
it('Check Overflow Visible Part Use translate Drag', async ()=> {
await page.callMethod('jest_getRect')
const point_x = await page.data('jest_click_x');
const point_y = await page.data('jest_click_y');
const distance = 100;
const destY = point_y + 100
const duration = 1000
await program.adbCommand("input swipe" + " " + point_x + " " + point_y + " " + point_x + " " + destY + " " + duration)
await page.waitFor(1500);
await page.callMethod('jest_getParentRect')
const currentParentTop = await page.data('jest_parent_top');
const offset = 2
const diff = Math.abs(currentParentTop - distance) < offset
console.log("current ", currentParentTop);
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)
})
}); });
<template> <template>
<scroll-view style="flex: 1;">
<view> <view>
<text style="font-size: 15px;">overflow=visible 父view(绿色),子view(红色),点击超出父view区域的部分也可触发事件。</text> <text style="font-size: 15px;">overflow=visible 父view(绿色),子view(红色),点击超出父view区域的部分也可触发事件。</text>
<view class="backgroundview"> <view class="backgroundview">
<view id="parent" class="box-visible-border-radius"> <view class="box-visible-border-radius">
<view id="child" style="width: 50px; height: 150px; background-color: red;" @click="handleClickOverflowPart" <view id="child" style="width: 50px; height: 150px; background-color: red;"
@touchmove="handleTouchMoveOverflowPart" @touchstart="handleTouchStartOverflowPart" @click="handleClickOverflowPart" @touchmove="handleTouchMoveOverflowPart">
@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>
</view> </view>
...@@ -38,43 +17,17 @@ ...@@ -38,43 +17,17 @@
return { return {
jest_result: false, jest_result: false,
jest_click_x: -1, jest_click_x: -1,
jest_click_y: -1, jest_click_y: -1
jest_parent_top: -1.0,
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
oldX: 0,
oldY: 0,
moveEl: null as UniElement | null
} }
}, },
onReady() {
this.moveEl = uni.getElementById('parent')
},
methods: { methods: {
handleClickOverflowPart() { handleClickOverflowPart() {
console.log("click"); console.log("click");
this.jest_result = true; this.jest_result = true;
uni.showToast({ "title": "点击红色区域" }) uni.showToast({"title":"点击红色区域"})
}, },
handleTouchStartOverflowPart(e : UniTouchEvent) { handleTouchMoveOverflowPart(e:UniTouchEvent) {
this.startX = e.changedTouches[0].clientX
this.startY = e.changedTouches[0].clientY
},
handleTouchMoveOverflowPart(e : UniTouchEvent) {
console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY); console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
e.preventDefault()
e.stopPropagation()
const difX = e.changedTouches[0].clientX
const difY = e.changedTouches[0].clientY
this.moveX = difX - this.startX + this.oldX
this.moveY = difY - this.startY + this.oldY
this.moveEl?.style?.setProperty('transform', `translate(${this.moveX}px,${this.moveY}px)`)
},
handleTouchEndOverflowPart(_ : UniTouchEvent) {
this.oldX = this.moveX
this.oldY = this.moveY
}, },
handleClick(str : string) { handleClick(str : string) {
console.log(`点击了 ${str} view`); console.log(`点击了 ${str} view`);
...@@ -89,25 +42,6 @@ ...@@ -89,25 +42,6 @@
this.jest_click_x = rect.x * ratio + 10 this.jest_click_x = rect.x * ratio + 10
this.jest_click_y = rect.bottom * ratio - 10 this.jest_click_y = rect.bottom * ratio - 10
} }
},
jest_getParentRect() {
const transform = uni.getElementById('parent')?.style.getPropertyValue("transform")
if (transform != null) {
let value = transform as string
value = value.split(",")[1].slice(0, -3)
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
}
} }
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册