提交 4d8dab59 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat: 新增 dialogPage 示例及测试

上级 47214979
...@@ -1143,6 +1143,31 @@ ...@@ -1143,6 +1143,31 @@
} }
}, },
// #endif // #endif
{
"path": "pages/API/dialog-page/dialog-page",
"group": "1,4,10",
"style": {
"navigationBarTitleText": "dialogPage | 弹框页面"
}
},
{
"path": "pages/API/dialog-page/next-page",
"style": {
"navigationBarTitleText": "dialogNextPage"
}
},
{
"path": "pages/API/dialog-page/dialog-1",
"style": {
"navigationBarTitleText": "dialogPage1"
}
},
{
"path": "pages/API/dialog-page/dialog-2",
"style": {
"navigationBarTitleText": "dialogPage1"
}
},
{ {
"path": "pages/tabBar/CSS", "path": "pages/tabBar/CSS",
"style": { "style": {
...@@ -2156,6 +2181,10 @@ ...@@ -2156,6 +2181,10 @@
{ {
"id": "api.base.animationFrame", "id": "api.base.animationFrame",
"name": "animationFrame" "name": "animationFrame"
},
{
"id": "api.ui.dialogPage",
"name": "dialogPage"
} }
] ]
}, },
......
<template>
<view id="dialog1" class="dialog-container">
<view class="dialog-content">
<text>title: {{title}}</text>
<text class="mt-10">onBackPress return true</text>
<button class="mt-10" id="dialog1-go-next-page" @click="goNextPage">go next page</button>
<button class="mt-10" id="dialog1-open-dialog2" @click="openDialog2">openDialog2</button>
<button class="mt-10" id="dialog1-close-dialog" @click="closeDialog">closeDialog</button>
<button class="mt-10" id="dialog1-close-this-dialog" @click="closeThisDialog">closeThisDialog</button>
<button class="mt-10" id="dialog1-back" @click="back">back</button>
</view>
</view>
</template>
<script>
import {
state,
setLifeCycleNum
} from '@/store/index.uts'
export default {
data() {
return {
title: 'dialog 1',
}
},
onLoad(options : OnLoadOptions) {
console.log('dialog 1 onLoad', options)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
if (options['name'] == 'dialog1') {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
},
onShow() {
console.log('dialog 1 onShow')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
onReady() {
console.log('dialog 1 onReady')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
const currentPages = getCurrentPages()
const parentPage = this.$getParentPage()!
const grandParentPage = parentPage.$getParentPage()
const dialogPages = parentPage.$getDialogPages()
const dialogPage = this.$dialogPage
if (
currentPages.length == 1 &&
grandParentPage == null &&
dialogPages.indexOf(dialogPage) != -1
) {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
},
onHide() {
console.log('dialog 1 onHide')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
},
onUnload() {
console.log('dialog 1 onUnload')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 5)
},
onBackPress(options : OnBackPressOptions) : boolean | null {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
return true
},
methods: {
goNextPage() {
uni.navigateTo({ url: '/pages/API/dialog-page/next-page' })
},
openDialog2() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-2',
disableEscBack: true,
success(res) {
console.log('openDialog2 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialog2 fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialog2 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
closeDialog() {
uni.closeDialogPage({
success(res) {
console.log('closeDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
closeThisDialog() {
uni.closeDialogPage({
dialogPage: this.$dialogPage,
success(res) {
console.log('closeThisDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeThisDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeThisDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
.dialog-container {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.dialog-content {
width: 80%;
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.mt-10 {
margin-top: 10px;
}
</style>
<template>
<view id="dialog2" class="dialog-container">
<view class="dialog-content">
<text>title: {{title}}</text>
<text class="mt-10">onBackPress return false</text>
<button class="mt-10" @click="goNextPage">go next page</button>
<button class="mt-10" @click="openDialog1">openDialog1</button>
<button class="mt-10" @click="closeDialog">closeDialog</button>
<button class="mt-10" @click="closeThisDialog">closeThisDialog</button>
<button class="mt-10" @click="back">back</button>
</view>
</view>
</template>
<script>
import {
state,
setLifeCycleNum
} from '@/store/index.uts'
export default {
data() {
return {
title: 'dialog 2',
}
},
onLoad(options : OnLoadOptions) {
console.log('dialog 2 onLoad', options)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
onShow() {
console.log('dialog 2 onShow')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
onReady() {
console.log('dialog 2 onReady')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
onHide() {
console.log('dialog 2 onHide')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
},
onUnload() {
console.log('dialog 2 onUnload')
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 5)
},
onBackPress(options : OnBackPressOptions) : boolean | null {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
return false
},
methods: {
goNextPage() {
uni.navigateTo({ url: '/pages/API/dialog-page/next-page' })
},
openDialog1() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-1?name=dialog1',
success(res) {
console.log('openDialog1 success', res)
},
fail(err) {
console.log('openDialog1 fail', err)
},
complete(res) {
console.log('openDialog1 complete', res)
}
})
},
closeDialog() {
uni.closeDialogPage({
success(res) {
console.log('closeDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
closeThisDialog() {
uni.closeDialogPage({
dialogPage: this.$dialogPage,
success(res) {
console.log('closeThisDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeThisDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeThisDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
back() {
uni.navigateBack()
}
}
}
</script>
<style>
.dialog-container {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.dialog-content {
width: 80%;
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.mt-10 {
margin-top: 10px;
}
</style>
jest.setTimeout(20000)
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isWeb = platformInfo.startsWith('web')
const FIRST_PAGE_PATH = '/pages/API/dialog-page/dialog-page'
const NEXT_PAGE_PATH = '/pages/API/dialog-page/next-page'
describe('dialog page', () => {
let page;
let initLifeCycleNum;
let lifecycleNum;
beforeAll(async () => {
page = await program.reLaunch(FIRST_PAGE_PATH)
await page.waitFor('view');
initLifeCycleNum = await page.callMethod('getLifeCycleNum');
await page.callMethod('setLifeCycleNum', 0)
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(0)
});
it('open dialog1', async () => {
await page.callMethod('openDialog1');
// 无法通过获取 dom 元素来判断是否打开了 dialogPage
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
// 不应触发父页面的生命周期,应该触发:
// 1. openDialogPage sucess & complete callback
// 2. dialog page 生命周期
expect(lifecycleNum).toBe(7)
});
it('closeDialogPage', async () => {
await page.callMethod('closeDialog');
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
// closeDialogPage success & complete callback 应被触发
// dialogPage onUnload 应被触发
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(4)
})
it('openDialog with wrong path', async () => {
await page.callMethod('openDialog1WrongPath')
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(1)
})
it('navigateTo nextPage & open Dialog', async () => {
await page.callMethod('goNextPageOpenDialog1')
await page.waitFor(2000)
if (isWeb) {
await page.waitFor(2000)
}
page = await program.currentPage()
expect(page.path).toBe(NEXT_PAGE_PATH.substring(1))
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(-3)
})
it('dialog1 navigateBack', async () => {
await program.navigateBack()
page = await program.currentPage()
// dialogPage onBackPress 返回 true, 应可以拦截 navigateBack
expect(page.path).toBe(NEXT_PAGE_PATH.substring(1))
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
// onBackPress 生命周期应该被触发
expect(lifecycleNum).toBe(-2)
})
it('open dialog2', async () => {
await page.callMethod('openDialog2')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
lifecycleNum = await page.callMethod('getLifeCycleNum')
// 应触发前一个 dialogPage 的 onHide
expect(lifecycleNum).toBe(2)
})
it('closeDialogPage', async () => {
await page.callMethod('closeDialog')
lifecycleNum = await page.callMethod('getLifeCycleNum')
// 应触发 success & complete 回调
// 应触发 dialogPage 的 unload,下层的 dialogPage 会先 show 再 unload
expect(lifecycleNum).toBe(-5)
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
})
it('open multiple dialog page', async () => {
await page.callMethod('openDialog1')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image1 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image1).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(-1)
await page.callMethod('openDialog2')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image2 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image2).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(3)
})
it('openDialogPage to home page', async () => {
await page.callMethod('openDialogPage1ToHomePage')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(7)
})
it('dialog2 navigateBack', async () => {
await program.navigateBack()
page = await program.currentPage()
// dialogPage onBackPress 返回 true, 应可以拦截 navigateBack
expect(page.path).toBe(FIRST_PAGE_PATH.substring(1))
const image = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
// onBackPress 生命周期应该被触发
expect(lifecycleNum).toBe(9)
})
it('close specified dialogPage', async () => {
await page.callMethod('openDialog2')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image1 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image1).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(13)
await page.callMethod('openDialog1')
await page.waitFor(1000)
if (isWeb) {
await page.waitFor(2000)
}
const image2 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image2).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(19)
await page.callMethod('closeSpecifiedDialog', 0)
const image3 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image3).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(16)
await page.callMethod('closeSpecifiedDialog', 1)
const image4 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image4).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(14)
await page.callMethod('closeSpecifiedDialog', 0)
const image5 = await program.screenshot({
deviceShot: true,
area: {
x: 0,
y: 200,
}
});
expect(image5).toSaveImageSnapshot();
lifecycleNum = await page.callMethod('getLifeCycleNum')
expect(lifecycleNum).toBe(11)
})
afterAll(async () => {
await page.callMethod('setLifeCycleNum', initLifeCycleNum)
});
});
<template>
<view class='uni-padding-wrap'>
<button class="uni-common-mt" id="go-next-page" @click="goNextPage">go next page</button>
<button class="uni-common-mt" id="open-dialog1" @click="openDialog1">open dialog 1</button>
<button class="uni-common-mt" id="open-dialog1-wrong-path" @click="openDialog1WrongPath">open dialog page 1 with
wrong path</button>
<button class="uni-common-mt" id="go-next-page-open-dialog1" @click="goNextPageOpenDialog1">go next page & open
dialog1</button>
</view>
</template>
<script lang='uts'>
import {
state,
setLifeCycleNum
} from '@/store/index.uts'
export default {
onLoad() {
console.log('dialogPage parent onLoad')
},
onShow() {
console.log('dialogPage parent onShow')
setLifeCycleNum(state.lifeCycleNum + 10)
},
onReady() {
console.log('dialogPage parent onReady')
},
onHide() {
console.log('dialogPage parent onHide')
setLifeCycleNum(state.lifeCycleNum - 10)
},
onUnload() {
console.log('dialogPage parent onUnload')
},
methods: {
goNextPage() {
uni.navigateTo({
url: '/pages/API/dialog-page/next-page'
})
},
openDialog1() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-1?name=dialog1',
success(res) {
console.log('openDialogPage1 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialogPage1 fail', err)
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialogPage1 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
openDialog2() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-2',
disableEscBack: true,
success(res) {
console.log('openDialog2 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialog2 fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialog2 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
openDialog1WrongPath() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-11?name=dialog1',
success(res) {
console.log('openDialogPage1 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialogPage1 fail', err)
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialogPage1 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
goNextPageOpenDialog1() {
uni.navigateTo({
url: '/pages/API/dialog-page/next-page',
success() {
setTimeout(() => {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-1?name=dialog1',
success(res) {
console.log('openDialogPage1 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialogPage1 fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialogPage1 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
}, 1000)
}
})
},
closeDialog() {
uni.closeDialogPage({
success(res) {
console.log('closeDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
closeSpecifiedDialog(index: number) {
const dialogPages = this.$getDialogPages()
uni.closeDialogPage({
dialogPage: dialogPages[index],
success(res) {
console.log('closeSomeOneDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeSomeOneDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeSomeOneDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
setLifeCycleNum(value: number) {
setLifeCycleNum(value)
},
getLifeCycleNum(): number {
return state.lifeCycleNum
}
}
}
</script>
<template>
<view class='uni-padding-wrap'>
<button class="uni-common-mt" @click="openDialog1">open dialog1</button>
<button class="uni-common-mt" @click="openDialog2">open dialog2</button>
<button class="uni-common-mt" @click="openDialogPage1ToHomePage">open dialog page 1 to home page</button>
</view>
</template>
<script lang='uts'>
import {
state,
setLifeCycleNum
} from '@/store/index.uts'
export default {
onLoad() {
console.log('dialogPage parent onLoad')
},
onShow() {
console.log('dialogPage parent onShow')
},
onReady() {
console.log('dialogPage parent onReady')
},
onHide() {
console.log('dialogPage parent onHide')
},
onUnload() {
console.log('dialogPage parent onUnload')
},
methods: {
openDialog1() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-1?name=dialog1',
success(res) {
console.log('openDialog1 success', res)
},
fail(err) {
console.log('openDialog1 fail', err)
},
complete(res) {
console.log('openDialog1 complete', res)
}
})
},
openDialog2() {
uni.openDialogPage({
url: '/pages/API/dialog-page/dialog-2',
disableEscBack: true,
success(res) {
console.log('openDialog2 success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('openDialog2 fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('openDialog2 complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
closeDialog() {
uni.closeDialogPage({
success(res) {
console.log('closeDialog success', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(err) {
console.log('closeDialog fail', err)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 4)
},
complete(res) {
console.log('closeDialog complete', res)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
}
})
},
openDialogPage1ToHomePage() {
const pages = getCurrentPages()
uni.openDialogPage({
parentPage: pages[0],
url: '/pages/API/dialog-page/dialog-1?name=dialog1',
success(res) {
console.log('openDialogPage1ToHomePage success', res)
},
fail(err) {
console.log('openDialogPage1ToHomePage fail', err)
},
complete(res) {
console.log('openDialogPage1ToHomePage complete', res)
}
})
},
setLifeCycleNum(value: number) {
setLifeCycleNum(value)
},
getLifeCycleNum(): number {
return state.lifeCycleNum
}
}
}
</script>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册