Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6132
Star 98
Fork 169
H
hello uni-app x
提交 8ddf83f2 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

更新showToast示例

上级 a50bf236
隐藏空白更改
内联 并排
Showing with 156 addition and 217 deletion
pages/API/show-toast/show-toast.test.js
浏览文件 @ 8ddf83f2
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/ // uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-toast', () => { describe('API-toast', () => {
let page; let page;
const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios"; const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios";
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/API/show-toast/show-toast') page = await program.reLaunch('/pages/API/show-toast/show-toast')
await page.waitFor(600); await page.waitFor("view");
}); });
async function toScreenshot(imgName) {
it("onload-toast-test", async () => {
if (isApp) { if (isApp) {
await page.waitFor(500); await page.waitFor(500);
const res = await page.callMethod('jest_getWindowInfo') const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio; const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio; const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({ const image = await program.screenshot({
deviceShot: true, deviceShot: true,
area: { area: {
...@@ -31,163 +23,53 @@ describe('API-toast', () => { ...@@ -31,163 +23,53 @@ describe('API-toast', () => {
width:windowWidth width:windowWidth
}, },
}); });
expect(image).toSaveImageSnapshot(); expect(image).toSaveImageSnapshot({customSnapshotIdentifier() {
return imgName
}})
}else{ }else{
const image = await program.screenshot({ const image = await program.screenshot({
deviceShot: true, deviceShot: true,
fullPage: true fullPage: true
}); });
expect(image).toSaveImageSnapshot() expect(image).toSaveImageSnapshot({customSnapshotIdentifier() {
return imgName
}})
} }
}) await page.waitFor(500);
}
it("onload-toast-test", async () => {
await toScreenshot('toast-onload')
it("btn-toast-default-1", async () => {
const btnToastDefaultButton = await page.$('#btn-toast-default')
await btnToastDefaultButton.tap()
await page.waitFor(200)
if (isApp) {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 200,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
it("icon-toast-test", async () => {
const icons = await page.$$('.radio-icon')
it("btn-toast-duration-1", async () => { for (let i = 0; i < icons.length; i++) {
const btnToastDurationButton = await page.$('#btn-toast-duration') await icons[i].tap()
await btnToastDurationButton.tap() const iconText = await icons[i].text()
await page.waitFor(2000) await page.callMethod('toast1Tap')
if (isApp) { await page.waitFor(100);
const res = await page.callMethod('jest_getWindowInfo') await toScreenshot(`${iconText}`)
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 200,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
} }
}) })
it("btn-toast-errorIcon-1", async () => { it("image-toast-test", async () => {
const btnToastErrorIconButton = await page.$('#btn-toast-errorIcon') await page.setData({imageSelect: true})
await btnToastErrorIconButton.tap() await page.waitFor(300);
await page.waitFor(200) await page.callMethod('toast1Tap')
if (isApp) { await page.waitFor(300);
const res = await page.callMethod('jest_getWindowInfo') await toScreenshot('toast-image')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 200,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
it("duration-toast-test", async () => {
it("btn-toast-loading-1", async () => { await page.setData({intervalSelect: 4000})
const btnToastLoadingButton = await page.$('#btn-toast-loading') await page.callMethod('toast1Tap')
await btnToastLoadingButton.tap() await page.waitFor(2000);
await page.waitFor(200) await toScreenshot('toast-duration-2000')
await page.waitFor(1000);
const btnToastHideButton = await page.$('#btn-toast-hide') await page.callMethod('hideToast')
await btnToastHideButton.tap() await page.waitFor(300);
await page.waitFor(1000) await toScreenshot('toast-duration-end')
if (isApp) {
const res = await page.callMethod('jest_getWindowInfo')
const windowHeight = res.windowHeight * res.pixelRatio;
const windowWidth = res.windowWidth * res.pixelRatio;
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
height: windowHeight - 200,
width:windowWidth
},
});
expect(image).toSaveImageSnapshot();
}else{
const image = await program.screenshot({
deviceShot: true,
fullPage: true
});
expect(image).toSaveImageSnapshot()
}
}) })
// it("btn-toast-postion-bottom-1", async () => {
// const btnToastButton = await page.$('#btn-toast-postion-bottom')
// await btnToastButton.tap()
// await page.waitFor(200)
// if (isApp) {
// const windowHeight = uni.getWindowInfo().windowHeight;
// const windowWidth = uni.getWindowInfo().windowWidth;
// const image = await program.screenshot({
// deviceShot: true,
// area: {
// x: 0,
// y: 200,
// height: windowHeight,
// width:windowWidth
// },
// });
// expect(image).toSaveImageSnapshot();
// }else{
// const image = await program.screenshot({
// deviceShot: true,
// fullPage: true
// });
// expect(image).toSaveImageSnapshot()
// }
// })
}); });
pages/API/show-toast/show-toast.uvue
浏览文件 @ 8ddf83f2
<template> <template>
<view> <!-- #ifdef APP -->
<scroll-view direction="vertical" style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<view class="uni-padding-wrap">
<text class="uni-title-text uni-common-mb">设置icon</text>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChangeIcon">
<radio class="uni-list-cell uni-list-cell-pd radio-icon" v-for="(icon, index) in icon_enum" :key="icon.value"
:class="index < icon_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="icon.value"
:checked="index === icon_current">{{icon.name}}</radio>
</radio-group>
</view>
<view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">是否显示自定义图标</view>
<switch :checked="imageSelect" @change="change_image_boolean" />
</view>
<view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
<switch :checked="maskSelect" @change="change_mask_boolean" />
</view>
<view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
<view class="uni-list-cell-padding">
<slider @change="sliderChange" foreColor="#007AFF" :value="intervalSelect" :min="1500" :max="5000" :show-value="true" />
</view>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default" >点击弹出默认toast</button> <button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
<button class="uni-btn-v" type="default" @tap="toastTapIconError" id="btn-toast-errorIcon">点击弹出设置icon的toast</button>
<button class="uni-btn-v" type="default" @tap="toast2Tap" id="btn-toast-duration">点击弹出设置duration的toast</button>
<button class="uni-btn-v" type="default" @tap="toast3Tap" id="btn-toast-loading">点击弹出显示loading的toast</button>
<!-- #ifndef MP-ALIPAY -->
<button class="uni-btn-v" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
<!-- #endif -->
<!-- #ifdef APP -->
<button class="uni-btn-v" type="default" @tap="toast5Tap" id="btn-toast-postion-bottom">点击显示无图标的居底toast</button>
<!-- #endif -->
<button class="uni-btn-v" type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button> <button class="uni-btn-v" type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
</view> </view>
<!-- #ifdef APP -->
<view class="uni-padding-wrap uni-common-mt">
<text class="uni-title-text uni-common-mb"> 设置position，仅App生效 </text>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChangePosition">
<radio class="uni-list-cell uni-list-cell-pd radio-position" v-for="(position, index) in position_enum" :key="position.value"
:class="index < position_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="position.value"
:checked="index === position_current">{{position.name}}</radio>
</radio-group>
</view>
<button class="uni-btn uni-btn-v uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
<!-- #endif -->
<text>{{exeRet}}</text> <text>{{exeRet}}</text>
</view> </view>
</view> <!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script> <script lang="uts">
type IconItemType = {
value : "success" | "error" | "fail" | "exception" | "loading" | "none";
name : string
}
type PositionItemType = {
value : "top" | "center" | "bottom";
name : string
}
export default { export default {
data() { data() {
return { return {
title: 'toast', title: 'toast',
exeRet: '' exeRet: '',
imageSelect:false,
maskSelect: false,
intervalSelect: 1500,
position_current:0,
position_enum: [
{ "value": "top", "name": "top: 居上显示" },
{ "value": "center", "name": "center: 居中显示" },
{ "value": "bottom", "name": "bottom: 居底显示" },
] as PositionItemType[],
icon_current:0,
icon_enum: [
{
value: 'success',
name: '显示成功图标',
},
{
value: 'error',
name: '显示错误图标',
},
// {
// value: 'fail',
// name: '显示错误图标',
// },
// {
// value: 'exception',
// name: '显示异常图标，此时title文本无长度显示',
// },
{
value: 'loading',
name: '显示加载图标',
},
{
value: 'none',
name: '不显示图标',
},
] as IconItemType[],
} }
}, },
onLoad() { onLoad() {
...@@ -41,59 +115,40 @@ ...@@ -41,59 +115,40 @@
jest_getWindowInfo() : GetWindowInfoResult { jest_getWindowInfo() : GetWindowInfoResult {
return uni.getWindowInfo(); return uni.getWindowInfo();
}, },
toast1Tap: function () { radioChangeIcon(e : UniRadioGroupChangeEvent) {
uni.showToast({ for (let i = 0; i < this.icon_enum.length; i++) {
title: "默认", if (this.icon_enum[i].value === e.detail.value) {
success: (res) => { this.icon_current = i;
this.exeRet = "success:" + JSON.stringify(res) break;
}, }
fail: (res) => { }
this.exeRet = "fail:" + JSON.stringify(res)
},
})
}, },
toastTapIconError: function () { change_image_boolean: function (e : UniSwitchChangeEvent) {
uni.showToast({ this.imageSelect = e.detail.value
title: "默认",
icon: 'error',
success: (res) => {
this.exeRet = "success:" + JSON.stringify(res)
},
fail: (res) => {
this.exeRet = "fail:" + JSON.stringify(res)
},
})
}, },
toast2Tap: function () { change_mask_boolean: function (e : UniSwitchChangeEvent) {
uni.showToast({ this.maskSelect = e.detail.value
title: "duration 3000",
duration: 3000,
success: (res) => {
this.exeRet = "success:" + JSON.stringify(res)
},
fail: (res) => {
this.exeRet = "fail:" + JSON.stringify(res)
},
})
}, },
toast3Tap: function () { sliderChange(e : UniSliderChangeEvent) {
uni.showToast({ this.intervalSelect = e.detail.value
title: "loading", },
icon: "loading", radioChangePosition(e : UniRadioGroupChangeEvent) {
duration: 5000, for (let i = 0; i < this.position_enum.length; i++) {
success: (res) => { if (this.position_enum[i].value === e.detail.value) {
this.exeRet = "success:" + JSON.stringify(res) this.position_current = i;
}, break;
fail: (res) => { }
this.exeRet = "fail:" + JSON.stringify(res) }
},
})
}, },
toast4Tap: function () { toast1Tap: function () {
uni.showToast({ uni.showToast({
title: "logo", title: "默认",
image: "/static/uni.png", icon: this.icon_enum[this.icon_current].value,
duration: this.intervalSelect,
image: this.imageSelect? "/static/uni.png" : null ,
mask: this.maskSelect,
success: (res) => { success: (res) => {
console.log('success:',res)
this.exeRet = "success:" + JSON.stringify(res) this.exeRet = "success:" + JSON.stringify(res)
}, },
fail: (res) => { fail: (res) => {
...@@ -102,10 +157,11 @@ ...@@ -102,10 +157,11 @@
}) })
}, },
// #ifdef APP // #ifdef APP
toast5Tap: function () { toast2Tap: function () {
let positionValue = this.position_enum[this.position_current].value
uni.showToast({ uni.showToast({
title: "显示一段轻提示", title: "显示一段轻提示,position:" + positionValue,
position: 'bottom', position: positionValue,
success: (res) => { success: (res) => {
this.exeRet = "success:" + JSON.stringify(res) this.exeRet = "success:" + JSON.stringify(res)
}, },
...@@ -121,3 +177,4 @@ ...@@ -121,3 +177,4 @@
} }
} }
</script> </script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或