mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Dialog): add demo test
This commit is contained in:
nemo-shen
neverland
parent
8248ff50d1
commit
03ee861ca6
@ -81,6 +81,7 @@
|
||||
"van-col-demo": "./dist/col/demo/index",
|
||||
"van-count-down": "./dist/count-down/index",
|
||||
"van-dialog": "./dist/dialog/index",
|
||||
"van-dialog-demo": "./dist/dialog/demo/index",
|
||||
"van-divider": "./dist/divider/index",
|
||||
"van-empty": "./dist/empty/index",
|
||||
"van-field": "./dist/field/index",
|
||||
|
||||
@ -1,79 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
import Dialog from '../../dist/dialog/dialog';
|
||||
|
||||
const message = '代码是写出来给人看的，附带能在机器上运行';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
showCustomDialog() {
|
||||
this.setData({ show: true });
|
||||
},
|
||||
|
||||
getUserInfo(event) {
|
||||
console.log(event.detail);
|
||||
},
|
||||
|
||||
onClickThemeAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
theme: 'round-button',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickThemeAlert2() {
|
||||
Dialog.alert({
|
||||
theme: 'round-button',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAsyncClose() {
|
||||
const beforeClose = (action) =>
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
if (action === 'confirm') {
|
||||
resolve(true);
|
||||
} else {
|
||||
// 拦截取消操作
|
||||
resolve(false);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message,
|
||||
beforeClose,
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,35 +1 @@
|
||||
<demo-block card title="提示弹窗" padding>
|
||||
<van-cell title="提示弹窗" bind:click="onClickAlert" is-link />
|
||||
<van-cell title="提示弹窗（无标题）" bind:click="onClickAlert2" is-link />
|
||||
<van-cell title="确认弹窗" bind:click="onClickConfirm" is-link />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="圆角按钮样式" padding>
|
||||
<van-cell title="提示弹窗" bind:click="onClickThemeAlert" is-link />
|
||||
<van-cell title="提示弹窗（无标题）" bind:click="onClickThemeAlert2" is-link />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="异步关闭" padding>
|
||||
<van-cell title="异步关闭" bind:click="onClickAsyncClose" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="组件调用" padding>
|
||||
<van-cell title="组件调用" bind:click="showCustomDialog" />
|
||||
</demo-block>
|
||||
|
||||
<van-dialog
|
||||
use-slot
|
||||
title="标题"
|
||||
show="{{ show }}"
|
||||
show-cancel-button
|
||||
bind:close="onClose"
|
||||
confirm-button-open-type="getUserInfo"
|
||||
bind:getuserinfo="getUserInfo"
|
||||
>
|
||||
<image
|
||||
class="demo-image"
|
||||
src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"
|
||||
/>
|
||||
</van-dialog>
|
||||
|
||||
<van-dialog id="van-dialog" />
|
||||
<van-dialog-demo />
|
||||
|
||||
8
packages/dialog/demo/index.json
Normal file
8
packages/dialog/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-cell": "../../cell/index",
|
||||
"van-dialog": "../../dialog/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
87
packages/dialog/demo/index.ts
Normal file
87
packages/dialog/demo/index.ts
Normal file
@ -0,0 +1,87 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
import Dialog, { Action } from '../../dialog/dialog';
|
||||
|
||||
const message = '代码是写出来给人看的，附带能在机器上运行';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
showCustomDialog() {
|
||||
this.setData({ show: true });
|
||||
},
|
||||
|
||||
getUserInfo(event) {
|
||||
console.log(event.detail);
|
||||
},
|
||||
|
||||
onClickThemeAlert() {
|
||||
Dialog.alert({
|
||||
context: this,
|
||||
title: '标题',
|
||||
theme: 'round-button',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickThemeAlert2() {
|
||||
Dialog.alert({
|
||||
context: this,
|
||||
theme: 'round-button',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
context: this,
|
||||
title: '标题',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
context: this,
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
context: this,
|
||||
title: '标题',
|
||||
message,
|
||||
});
|
||||
},
|
||||
|
||||
onClickAsyncClose() {
|
||||
const beforeClose = (action: Action): Promise<boolean> =>
|
||||
new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
if (action === 'confirm') {
|
||||
resolve(true);
|
||||
} else {
|
||||
// 拦截取消操作
|
||||
resolve(false);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
Dialog.confirm({
|
||||
context: this,
|
||||
title: '标题',
|
||||
message,
|
||||
beforeClose,
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
35
packages/dialog/demo/index.wxml
Normal file
35
packages/dialog/demo/index.wxml
Normal file
@ -0,0 +1,35 @@
|
||||
<demo-block card title="提示弹窗" padding>
|
||||
<van-cell title="提示弹窗" bind:click="onClickAlert" is-link />
|
||||
<van-cell title="提示弹窗（无标题）" bind:click="onClickAlert2" is-link />
|
||||
<van-cell title="确认弹窗" bind:click="onClickConfirm" is-link />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="圆角按钮样式" padding>
|
||||
<van-cell title="提示弹窗" bind:click="onClickThemeAlert" is-link />
|
||||
<van-cell title="提示弹窗（无标题）" bind:click="onClickThemeAlert2" is-link />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="异步关闭" padding>
|
||||
<van-cell title="异步关闭" bind:click="onClickAsyncClose" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="组件调用" padding>
|
||||
<van-cell title="组件调用" bind:click="showCustomDialog" />
|
||||
</demo-block>
|
||||
|
||||
<van-dialog
|
||||
use-slot
|
||||
title="标题"
|
||||
show="{{ show }}"
|
||||
show-cancel-button
|
||||
bind:close="onClose"
|
||||
confirm-button-open-type="getUserInfo"
|
||||
bind:getuserinfo="getUserInfo"
|
||||
>
|
||||
<image
|
||||
class="demo-image"
|
||||
src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"
|
||||
/>
|
||||
</van-dialog>
|
||||
|
||||
<van-dialog id="van-dialog" />
|
||||
@ -22,7 +22,7 @@ interface DialogOptions {
|
||||
* @deprecated use beforeClose instead
|
||||
*/
|
||||
asyncClose?: boolean;
|
||||
beforeClose?: null | ((action: Action) => Promise<void> | void);
|
||||
beforeClose?: null | ((action: Action) => Promise<void | boolean> | void);
|
||||
businessId?: number;
|
||||
sessionFrom?: string;
|
||||
overlayStyle?: string;
|
||||
|
||||
298
packages/dialog/test/__snapshots__/demo.spec.ts.snap
Normal file
298
packages/dialog/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,298 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
提示弹窗
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
bind:click="onClickAlert"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
提示弹窗
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
bind:click="onClickAlert2"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
提示弹窗（无标题）
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
bind:click="onClickConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
确认弹窗
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
圆角按钮样式
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
bind:click="onClickThemeAlert"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
提示弹窗
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
bind:click="onClickThemeAlert2"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
提示弹窗（无标题）
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
异步关闭
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
bind:click="onClickAsyncClose"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
异步关闭
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
组件调用
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
bind:click="showCustomDialog"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
组件调用
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<van-dialog
|
||||
bind:close="onClose"
|
||||
bind:getuserinfo="getUserInfo"
|
||||
>
|
||||
<van-popup
|
||||
customClass="van-dialog van-dialog--default "
|
||||
bind:close="onClickOverlay"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-dialog>
|
||||
<van-dialog>
|
||||
<van-popup
|
||||
customClass="van-dialog van-dialog--default "
|
||||
bind:close="onClickOverlay"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-dialog>
|
||||
</main>
|
||||
`;
|
||||
11
packages/dialog/test/demo.spec.ts
Normal file
11
packages/dialog/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import path from 'path';
|
||||
import simulate from 'miniprogram-simulate';
|
||||
|
||||
test('should render demo and match snapshot', () => {
|
||||
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||
rootPath: path.resolve(__dirname, '../../'),
|
||||
});
|
||||
const comp = simulate.render(id);
|
||||
comp.attach(document.createElement('parent-wrapper'));
|
||||
expect(comp.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user