Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 0c8e97ba 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

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

上级 72813bba
隐藏空白更改
内联 并排
Showing with 70 addition and 166 deletion
pages/CSS/overflow/overflow-visible-event.test.js
浏览文件 @ 0c8e97ba
...@@ -23,43 +23,13 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => { ...@@ -23,43 +23,13 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
}) })
}); });
it('Check Overflow Visible Part Click', async () => { it('Check Overflow Visible Part Click', async () => {
res = await page.callMethod('jest_getRect') res = await page.callMethod('jest_getRect')
const point_x = await page.data('jest_click_x'); const point_x = await page.data('jest_click_x');
const point_y = await page.data('jest_click_y'); const point_y = await page.data('jest_click_y');
await program.adbCommand("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)
});
// 此测试针对开发者使用 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); await page.waitFor(500);
res = await page.data('jest_result'); res = await page.data('jest_result');
expect(res).toBe(true) expect(res).toBe(true)
}) });
}); });
pages/CSS/overflow/overflow-visible-event.uvue
浏览文件 @ 0c8e97ba
<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 class="box-visible-border-radius">
<view id="parent" class="box-visible-border-radius"> <view id="child" style="width: 50px; height: 150px; background-color: red;"
<view id="child" style="width: 50px; height: 150px; background-color: red;" @click="handleClickOverflowPart" @click="handleClickOverflowPart" @touchmove="handleTouchMoveOverflowPart">
@touchmove="handleTouchMoveOverflowPart" @touchstart="handleTouchStartOverflowPart" </view>
@touchend="handleTouchEndOverflowPart"> </view>
</view> </view>
</view> </scroll-view>
</view> </template>
<text style="font-size: 15px;">overflow=visible组件的子view （绿色）被position:
absolute的view（红色）遮挡时，点击事件测试。</text> <script>
<view style="width: 300px;height: 300px;background-color: white;"> export default {
<view style="overflow:visible;height: 100px;width: 100%;"> data() {
<view style="background-color: green;height: 100px;width: 100%;" @click="handleClick('green')"> return {
</view> jest_result: false,
</view> jest_click_x: -1,
<view id="absolute-view" style="position: absolute;background-color: red;width: 100px;height: 200px;right: 0px;" jest_click_y: -1
@click="handleClick('red')"> }
</view> },
</view> methods: {
<text style="font-size: 15px;">overflow=visible组件设置hover-class的测试</text> handleClickOverflowPart() {
<view class="backgroundview"> console.log("click");
<view class="box-visible-border-radius" hover-class="hover-class"> this.jest_result = true;
<view style="background-color: red;height: 100px;width: 100px;margin-left: 20px;margin-top: 20px;"> uni.showToast({"title":"点击红色区域"})
</view> },
</view> handleTouchMoveOverflowPart(e:UniTouchEvent) {
</view> console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
</view> },
</scroll-view> handleClick(str : string) {
</template> console.log(`点击了 ${str} view`);
if (str == 'red') {
<script> this.jest_result = true;
export default { }
data() { },
return { jest_getRect() {
jest_result: false, const rect = uni.getElementById('child')?.getBoundingClientRect()
jest_click_x: -1, if (rect != null) {
jest_click_y: -1, const ratio = uni.getSystemInfoSync().devicePixelRatio
jest_parent_top: -1.0, this.jest_click_x = rect.x * ratio + 10
startX: 0, this.jest_click_y = rect.bottom * ratio - 10
startY: 0, }
moveX: 0, }
moveY: 0, }
oldX: 0, }
oldY: 0, </script>
moveEl: null as UniElement | null
} <style>
}, .backgroundview {
onReady() { width: 300px;
this.moveEl = uni.getElementById('parent') height: 300px;
}, margin-bottom: 20px;
methods: { background-color: white;
handleClickOverflowPart() { justify-content: center;
console.log("click"); align-items: center;
this.jest_result = true; }
uni.showToast({ "title": "点击红色区域" })
}, .box-visible-border-radius {
handleTouchStartOverflowPart(e : UniTouchEvent) { width: 100px;
this.startX = e.changedTouches[0].clientX height: 100px;
this.startY = e.changedTouches[0].clientY border-radius: 20px;
}, overflow: visible;
handleTouchMoveOverflowPart(e : UniTouchEvent) { background-color: green;
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) {
console.log(`点击了 ${str} view`);
if (str == 'red') {
this.jest_result = true;
}
},
jest_getRect() {
const rect = uni.getElementById('child')?.getBoundingClientRect()
if (rect != null) {
const ratio = uni.getSystemInfoSync().devicePixelRatio
this.jest_click_x = rect.x * 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
}
}
}
}
</script>
<style>
.backgroundview {
width: 300px;
height: 300px;
margin-bottom: 20px;
background-color: white;
justify-content: center;
align-items: center;
}
.box-visible-border-radius {
width: 100px;
height: 100px;
border-radius: 20px;
overflow: visible;
background-color: green;
}
.hover-class { .hover-class {
background-color: aqua; background-color: aqua;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或