mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-05-21 13:59:15 +08:00
test(CountDown): add demo test
This commit is contained in:
nemo-shen
neverland
parent
8560eab73c
commit
0df5fa9fca
@ -80,6 +80,7 @@
|
||||
"van-col": "./dist/col/index",
|
||||
"van-col-demo": "./dist/col/demo/index",
|
||||
"van-count-down": "./dist/count-down/index",
|
||||
"van-count-down-demo": "./dist/count-down/demo/index",
|
||||
"van-dialog": "./dist/dialog/index",
|
||||
"van-dialog-demo": "./dist/dialog/demo/index",
|
||||
"van-divider": "./dist/divider/index",
|
||||
|
||||
@ -1,34 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
time: 30 * 60 * 60 * 1000,
|
||||
timeData: {}
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.setData({
|
||||
timeData: e.detail
|
||||
});
|
||||
},
|
||||
|
||||
start() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.start();
|
||||
},
|
||||
|
||||
pause() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.pause();
|
||||
},
|
||||
|
||||
reset() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.reset();
|
||||
},
|
||||
|
||||
finished() {
|
||||
Toast('倒计时结束');
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,49 +1 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-count-down time="{{ time }}" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义格式">
|
||||
<van-count-down
|
||||
time="{{ time }}"
|
||||
format="DD 天 HH 时 mm 分 ss 秒"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="毫秒级渲染">
|
||||
<van-count-down
|
||||
millisecond
|
||||
time="{{ time }}"
|
||||
format="HH:mm:ss:SSS"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义样式">
|
||||
<van-count-down
|
||||
use-slot
|
||||
time="{{ time }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<text class="item">{{ timeData.hours }}</text>
|
||||
<text class="item">{{ timeData.minutes }}</text>
|
||||
<text class="item">{{ timeData.seconds }}</text>
|
||||
</van-count-down>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="手动控制">
|
||||
<van-count-down
|
||||
class="control-count-down"
|
||||
millisecond
|
||||
time="{{ 3000 }}"
|
||||
auto-start="{{ false }}"
|
||||
format="ss:SSS"
|
||||
bind:finish="finished"
|
||||
/>
|
||||
|
||||
<van-grid clickable column-num="3">
|
||||
<van-grid-item text="开始" icon="play-circle-o" bindclick="start" />
|
||||
<van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
|
||||
<van-grid-item text="重置" icon="replay" bind:click="reset" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
<van-count-down-demo />
|
||||
|
||||
10
packages/count-down/demo/index.json
Normal file
10
packages/count-down/demo/index.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-grid": "../../grid/index",
|
||||
"van-toast": "../../toast/index",
|
||||
"van-grid-item": "../../grid-item/index",
|
||||
"van-count-down": "../../count-down/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
39
packages/count-down/demo/index.ts
Normal file
39
packages/count-down/demo/index.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
import Toast from '../../toast/toast';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
time: 30 * 60 * 60 * 1000,
|
||||
timeData: {},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.setData({
|
||||
timeData: e.detail,
|
||||
});
|
||||
},
|
||||
|
||||
start() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.start();
|
||||
},
|
||||
|
||||
pause() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.pause();
|
||||
},
|
||||
|
||||
reset() {
|
||||
const countDown = this.selectComponent('.control-count-down');
|
||||
countDown.reset();
|
||||
},
|
||||
|
||||
finished() {
|
||||
Toast({
|
||||
context: this,
|
||||
message: '倒计时结束',
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
48
packages/count-down/demo/index.wxml
Normal file
48
packages/count-down/demo/index.wxml
Normal file
@ -0,0 +1,48 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-count-down time="{{ time }}" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义格式">
|
||||
<van-count-down
|
||||
time="{{ time }}"
|
||||
format="DD 天 HH 时 mm 分 ss 秒"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="毫秒级渲染">
|
||||
<van-count-down
|
||||
millisecond
|
||||
time="{{ time }}"
|
||||
format="HH:mm:ss:SSS"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义样式">
|
||||
<van-count-down
|
||||
use-slot
|
||||
time="{{ time }}"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<text class="item">{{ timeData.hours }}</text>
|
||||
<text class="item">{{ timeData.minutes }}</text>
|
||||
<text class="item">{{ timeData.seconds }}</text>
|
||||
</van-count-down>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="手动控制">
|
||||
<van-count-down
|
||||
class="control-count-down"
|
||||
millisecond
|
||||
time="{{ 3000 }}"
|
||||
auto-start="{{ false }}"
|
||||
format="ss:SSS"
|
||||
bind:finish="finished"
|
||||
/>
|
||||
<van-grid clickable column-num="3">
|
||||
<van-grid-item text="开始" icon="play-circle-o" bindclick="start" />
|
||||
<van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
|
||||
<van-grid-item text="重置" icon="replay" bind:click="reset" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
228
packages/count-down/test/__snapshots__/demo.spec.ts.snap
Normal file
228
packages/count-down/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,228 @@
|
||||
// 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 "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<van-count-down>
|
||||
<wx-view
|
||||
class="van-count-down"
|
||||
>
|
||||
30:00:00
|
||||
</wx-view>
|
||||
</van-count-down>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义格式
|
||||
</wx-view>
|
||||
<van-count-down>
|
||||
<wx-view
|
||||
class="van-count-down"
|
||||
>
|
||||
01 天 06 时 00 分 00 秒
|
||||
</wx-view>
|
||||
</van-count-down>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
毫秒级渲染
|
||||
</wx-view>
|
||||
<van-count-down>
|
||||
<wx-view
|
||||
class="van-count-down"
|
||||
>
|
||||
30:00:00:000
|
||||
</wx-view>
|
||||
</van-count-down>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义样式
|
||||
</wx-view>
|
||||
<van-count-down
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-count-down"
|
||||
>
|
||||
<wx-text
|
||||
class="item"
|
||||
>
|
||||
|
||||
</wx-text>
|
||||
<wx-text
|
||||
class="item"
|
||||
>
|
||||
|
||||
</wx-text>
|
||||
<wx-text
|
||||
class="item"
|
||||
>
|
||||
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
</van-count-down>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
手动控制
|
||||
</wx-view>
|
||||
<van-count-down
|
||||
class="control-count-down"
|
||||
bind:finish="finished"
|
||||
>
|
||||
<wx-view
|
||||
class="van-count-down"
|
||||
>
|
||||
03:000
|
||||
</wx-view>
|
||||
</van-count-down>
|
||||
<van-grid>
|
||||
<wx-view
|
||||
class="van-grid custom-class van-hairline--top"
|
||||
style="padding-left:0px"
|
||||
>
|
||||
<van-grid-item
|
||||
bind:click="start"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-grid-item"
|
||||
style="width:33.333333333333336%;padding-right:0px"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline--surround"
|
||||
style=""
|
||||
>
|
||||
<wx-view
|
||||
class="van-grid-item__icon icon-class"
|
||||
>
|
||||
<van-icon>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-play-circle-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-grid-item__text text-class"
|
||||
>
|
||||
<wx-text>
|
||||
开始
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-grid-item>
|
||||
<van-grid-item
|
||||
bind:click="pause"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-grid-item"
|
||||
style="width:33.333333333333336%;padding-right:0px"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline--surround"
|
||||
style=""
|
||||
>
|
||||
<wx-view
|
||||
class="van-grid-item__icon icon-class"
|
||||
>
|
||||
<van-icon>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-pause-circle-o"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-grid-item__text text-class"
|
||||
>
|
||||
<wx-text>
|
||||
暂停
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-grid-item>
|
||||
<van-grid-item
|
||||
bind:click="reset"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-grid-item"
|
||||
style="width:33.333333333333336%;padding-right:0px"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline--surround"
|
||||
style=""
|
||||
>
|
||||
<wx-view
|
||||
class="van-grid-item__icon icon-class"
|
||||
>
|
||||
<van-icon>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-replay"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-grid-item__text text-class"
|
||||
>
|
||||
<wx-text>
|
||||
重置
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-grid-item>
|
||||
</wx-view>
|
||||
</van-grid>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<van-toast
|
||||
id="van-toast"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-toast__container"
|
||||
/>
|
||||
</van-toast>
|
||||
</main>
|
||||
`;
|
||||
11
packages/count-down/test/demo.spec.ts
Normal file
11
packages/count-down/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