mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(DatetimePicker): add demo test
This commit is contained in:
nemo-shen
neverland
parent
460607c2c4
commit
8560eab73c
@ -147,6 +147,7 @@
|
||||
"van-tree-select": "./dist/tree-select/index",
|
||||
"van-tree-select-demo": "./dist/tree-select/demo/index",
|
||||
"van-datetime-picker": "./dist/datetime-picker/index",
|
||||
"van-datetime-picker-demo": "./dist/datetime-picker/demo/index",
|
||||
"van-rate": "./dist/rate/index",
|
||||
"van-rate-demo": "./dist/rate/demo/index",
|
||||
"van-collapse": "./dist/collapse/index",
|
||||
|
||||
@ -1,55 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(2018, 0, 1).getTime(),
|
||||
maxDate: new Date(2019, 10, 1).getTime(),
|
||||
currentDate1: new Date(2018, 2, 31).getTime(),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2018, 0, 1),
|
||||
currentDate4: '12:00',
|
||||
loading: false,
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter(option => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
},
|
||||
|
||||
onInput(event) {
|
||||
const { detail, currentTarget } = event;
|
||||
const result = this.getResult(detail, currentTarget.dataset.type);
|
||||
|
||||
Toast(result);
|
||||
},
|
||||
|
||||
getResult(time, type) {
|
||||
const date = new Date(time);
|
||||
switch (type) {
|
||||
case 'datetime':
|
||||
return date.toLocaleString();
|
||||
case 'date':
|
||||
return date.toLocaleDateString();
|
||||
case 'year-month':
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}`;
|
||||
case 'time':
|
||||
return time;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,52 +1 @@
|
||||
<demo-block title="选择完整时间">
|
||||
<van-datetime-picker
|
||||
type="datetime"
|
||||
data-type="datetime"
|
||||
loading="{{ loading }}"
|
||||
value="{{ currentDate1 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择日期（年月日）">
|
||||
<van-datetime-picker
|
||||
type="date"
|
||||
data-type="date"
|
||||
value="{{ currentDate2 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
formatter="{{ formatter }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择日期（年月）">
|
||||
<van-datetime-picker
|
||||
type="year-month"
|
||||
data-type="year-month"
|
||||
value="{{ currentDate3 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择时间">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
data-type="time"
|
||||
value="{{ currentDate4 }}"
|
||||
min-hour="{{ minHour }}"
|
||||
max-hour="{{ maxHour }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选项过滤器">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
value="{{ currentDate4 }}"
|
||||
filter="{{ filter }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
<van-datetime-picker-demo />
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
8
packages/datetime-picker/demo/index.json
Normal file
8
packages/datetime-picker/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-toast": "../../toast/index",
|
||||
"van-datetime-picker": "../../datetime-picker/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
60
packages/datetime-picker/demo/index.ts
Normal file
60
packages/datetime-picker/demo/index.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
import Toast from '../../toast/toast';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(2018, 0, 1).getTime(),
|
||||
maxDate: new Date(2019, 10, 1).getTime(),
|
||||
currentDate1: new Date(2018, 2, 31).getTime(),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2018, 0, 1),
|
||||
currentDate4: '12:00',
|
||||
loading: false,
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(event) {
|
||||
const { detail, currentTarget } = event;
|
||||
const result = this.getResult(detail, currentTarget.dataset.type);
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
message: result,
|
||||
});
|
||||
},
|
||||
|
||||
getResult(time, type) {
|
||||
const date = new Date(time);
|
||||
switch (type) {
|
||||
case 'datetime':
|
||||
return date.toLocaleString();
|
||||
case 'date':
|
||||
return date.toLocaleDateString();
|
||||
case 'year-month':
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}`;
|
||||
case 'time':
|
||||
return time;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
52
packages/datetime-picker/demo/index.wxml
Normal file
52
packages/datetime-picker/demo/index.wxml
Normal file
@ -0,0 +1,52 @@
|
||||
<demo-block title="选择完整时间">
|
||||
<van-datetime-picker
|
||||
type="datetime"
|
||||
data-type="datetime"
|
||||
loading="{{ loading }}"
|
||||
value="{{ currentDate1 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择日期（年月日）">
|
||||
<van-datetime-picker
|
||||
type="date"
|
||||
data-type="date"
|
||||
value="{{ currentDate2 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
formatter="{{ formatter }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择日期（年月）">
|
||||
<van-datetime-picker
|
||||
type="year-month"
|
||||
data-type="year-month"
|
||||
value="{{ currentDate3 }}"
|
||||
min-date="{{ minDate }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选择时间">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
data-type="time"
|
||||
value="{{ currentDate4 }}"
|
||||
min-hour="{{ minHour }}"
|
||||
max-hour="{{ maxHour }}"
|
||||
bind:input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="选项过滤器">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
value="{{ currentDate4 }}"
|
||||
filter="{{ filter }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
360
packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
Normal file
360
packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,360 @@
|
||||
// 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-datetime-picker
|
||||
data-type="datetime"
|
||||
bind:input="onInput"
|
||||
>
|
||||
<van-picker
|
||||
activeClass="active-class"
|
||||
class="van-datetime-picker"
|
||||
columnClass="column-class"
|
||||
toolbarClass="toolbar-class"
|
||||
bind:cancel="onCancel"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__toolbar toolbar-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__cancel"
|
||||
data-type="cancel"
|
||||
hoverClass="van-picker__cancel--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
取消
|
||||
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__confirm"
|
||||
data-type="confirm"
|
||||
hoverClass="van-picker__confirm--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
确认
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__columns"
|
||||
style="height:264px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__mask"
|
||||
style="background-size:100% 110px"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height:44px"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-picker>
|
||||
</van-datetime-picker>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
选择日期（年月日）
|
||||
</wx-view>
|
||||
<van-datetime-picker
|
||||
data-type="date"
|
||||
bind:input="onInput"
|
||||
>
|
||||
<van-picker
|
||||
activeClass="active-class"
|
||||
class="van-datetime-picker"
|
||||
columnClass="column-class"
|
||||
toolbarClass="toolbar-class"
|
||||
bind:cancel="onCancel"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__toolbar toolbar-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__cancel"
|
||||
data-type="cancel"
|
||||
hoverClass="van-picker__cancel--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
取消
|
||||
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__confirm"
|
||||
data-type="confirm"
|
||||
hoverClass="van-picker__confirm--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
确认
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__columns"
|
||||
style="height:264px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__mask"
|
||||
style="background-size:100% 110px"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height:44px"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-picker>
|
||||
</van-datetime-picker>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
选择日期（年月）
|
||||
</wx-view>
|
||||
<van-datetime-picker
|
||||
data-type="year-month"
|
||||
bind:input="onInput"
|
||||
>
|
||||
<van-picker
|
||||
activeClass="active-class"
|
||||
class="van-datetime-picker"
|
||||
columnClass="column-class"
|
||||
toolbarClass="toolbar-class"
|
||||
bind:cancel="onCancel"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__toolbar toolbar-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__cancel"
|
||||
data-type="cancel"
|
||||
hoverClass="van-picker__cancel--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
取消
|
||||
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__confirm"
|
||||
data-type="confirm"
|
||||
hoverClass="van-picker__confirm--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
确认
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__columns"
|
||||
style="height:264px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__mask"
|
||||
style="background-size:100% 110px"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height:44px"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-picker>
|
||||
</van-datetime-picker>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
选择时间
|
||||
</wx-view>
|
||||
<van-datetime-picker
|
||||
data-type="time"
|
||||
bind:input="onInput"
|
||||
>
|
||||
<van-picker
|
||||
activeClass="active-class"
|
||||
class="van-datetime-picker"
|
||||
columnClass="column-class"
|
||||
toolbarClass="toolbar-class"
|
||||
bind:cancel="onCancel"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__toolbar toolbar-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__cancel"
|
||||
data-type="cancel"
|
||||
hoverClass="van-picker__cancel--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
取消
|
||||
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__confirm"
|
||||
data-type="confirm"
|
||||
hoverClass="van-picker__confirm--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
确认
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__columns"
|
||||
style="height:264px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__mask"
|
||||
style="background-size:100% 110px"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height:44px"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-picker>
|
||||
</van-datetime-picker>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
选项过滤器
|
||||
</wx-view>
|
||||
<van-datetime-picker>
|
||||
<van-picker
|
||||
activeClass="active-class"
|
||||
class="van-datetime-picker"
|
||||
columnClass="column-class"
|
||||
toolbarClass="toolbar-class"
|
||||
bind:cancel="onCancel"
|
||||
bind:change="onChange"
|
||||
bind:confirm="onConfirm"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__toolbar toolbar-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__cancel"
|
||||
data-type="cancel"
|
||||
hoverClass="van-picker__cancel--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
取消
|
||||
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__confirm"
|
||||
data-type="confirm"
|
||||
hoverClass="van-picker__confirm--hover"
|
||||
hoverStayTime="70"
|
||||
bind:tap="emit"
|
||||
>
|
||||
|
||||
确认
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-picker__columns"
|
||||
style="height:264px"
|
||||
catch:touchmove="noop"
|
||||
>
|
||||
<wx-view
|
||||
class="van-picker__mask"
|
||||
style="background-size:100% 110px"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-picker__frame van-hairline--top-bottom"
|
||||
style="height:44px"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-picker>
|
||||
</van-datetime-picker>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<van-toast
|
||||
id="van-toast"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-toast__container"
|
||||
/>
|
||||
</van-toast>
|
||||
</main>
|
||||
`;
|
||||
11
packages/datetime-picker/test/demo.spec.ts
Normal file
11
packages/datetime-picker/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