mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 10:22:44 +08:00
test(Calendar): add demo test
This commit is contained in:
nemo-shen
neverland
parent
c9dbfc570a
commit
7e8a0eb4a9
@ -154,6 +154,7 @@
|
||||
"van-skeleton": "./dist/skeleton/index",
|
||||
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
||||
"van-calendar": "./dist/calendar/index",
|
||||
"van-calendar-demo": "./dist/calendar/demo/index",
|
||||
"van-share-sheet": "./dist/share-sheet/index",
|
||||
"van-config-provider": "./dist/config-provider/index",
|
||||
"van-config-provider-demo": "./dist/config-provider/demo/index"
|
||||
|
||||
@ -1,157 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
date: {
|
||||
maxRange: [],
|
||||
selectSingle: null,
|
||||
selectRange: [],
|
||||
selectMultiple: [],
|
||||
quickSelect1: null,
|
||||
quickSelect2: [],
|
||||
customColor: [],
|
||||
customConfirm: [],
|
||||
customRange: null,
|
||||
customDayText: [],
|
||||
customPosition: null,
|
||||
},
|
||||
type: 'single',
|
||||
round: true,
|
||||
color: undefined,
|
||||
minDate: Date.now(),
|
||||
maxDate: new Date(
|
||||
new Date().getFullYear(),
|
||||
new Date().getMonth() + 6,
|
||||
new Date().getDate()
|
||||
).getTime(),
|
||||
maxRange: undefined,
|
||||
position: undefined,
|
||||
formatter: undefined,
|
||||
showConfirm: false,
|
||||
showCalendar: false,
|
||||
tiledMinDate: new Date(2012, 0, 10).getTime(),
|
||||
tiledMaxDate: new Date(2012, 2, 20).getTime(),
|
||||
confirmText: undefined,
|
||||
confirmDisabledText: undefined,
|
||||
firstDayOfWeek: 0,
|
||||
},
|
||||
|
||||
onConfirm(event) {
|
||||
console.log(event);
|
||||
this.setData({ showCalendar: false });
|
||||
|
||||
this.setData({
|
||||
[`date.${this.data.id}`]: Array.isArray(event.detail)
|
||||
? event.detail.map((date) => date.valueOf())
|
||||
: event.detail.valueOf(),
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(event) {
|
||||
console.log(event);
|
||||
},
|
||||
|
||||
onUnselect(event) {
|
||||
console.log(event);
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ showCalendar: false });
|
||||
},
|
||||
|
||||
onOpen() {
|
||||
console.log('open');
|
||||
},
|
||||
|
||||
onOpened() {
|
||||
console.log('opened');
|
||||
},
|
||||
|
||||
onClosed() {
|
||||
console.log('closed');
|
||||
},
|
||||
|
||||
resetSettings() {
|
||||
this.setData({
|
||||
round: true,
|
||||
color: null,
|
||||
minDate: Date.now(),
|
||||
maxDate: new Date(
|
||||
new Date().getFullYear(),
|
||||
new Date().getMonth() + 6,
|
||||
new Date().getDate()
|
||||
).getTime(),
|
||||
maxRange: null,
|
||||
position: 'bottom',
|
||||
formatter: null,
|
||||
showConfirm: true,
|
||||
confirmText: '确定',
|
||||
confirmDisabledText: '确定',
|
||||
});
|
||||
},
|
||||
|
||||
show(event) {
|
||||
this.resetSettings();
|
||||
const { type, id } = event.currentTarget.dataset;
|
||||
const data = {
|
||||
id,
|
||||
type,
|
||||
showCalendar: true,
|
||||
};
|
||||
|
||||
switch (id) {
|
||||
case 'quickSelect1':
|
||||
case 'quickSelect2':
|
||||
data.showConfirm = false;
|
||||
break;
|
||||
case 'customColor':
|
||||
data.color = '#07c160';
|
||||
break;
|
||||
case 'customConfirm':
|
||||
data.confirmText = '完成';
|
||||
data.confirmDisabledText = '请选择结束时间';
|
||||
break;
|
||||
case 'customRange':
|
||||
data.minDate = new Date(2010, 0, 1).getTime();
|
||||
data.maxDate = new Date(2010, 0, 31).getTime();
|
||||
break;
|
||||
case 'customDayText':
|
||||
data.minDate = new Date(2010, 4, 1).getTime();
|
||||
data.maxDate = new Date(2010, 4, 31).getTime();
|
||||
data.formatter = this.dayFormatter;
|
||||
break;
|
||||
case 'customPosition':
|
||||
data.round = false;
|
||||
data.position = 'right';
|
||||
break;
|
||||
case 'maxRange':
|
||||
data.maxRange = 3;
|
||||
break;
|
||||
}
|
||||
|
||||
this.setData(data);
|
||||
},
|
||||
|
||||
dayFormatter(day) {
|
||||
const month = day.date.getMonth() + 1;
|
||||
const date = day.date.getDate();
|
||||
|
||||
if (month === 5) {
|
||||
if (date === 1) {
|
||||
day.topInfo = '劳动节';
|
||||
} else if (date === 4) {
|
||||
day.topInfo = '五四青年节';
|
||||
} else if (date === 11) {
|
||||
day.text = '今天';
|
||||
}
|
||||
}
|
||||
|
||||
if (day.type === 'start') {
|
||||
day.bottomInfo = '入店';
|
||||
} else if (day.type === 'end') {
|
||||
day.bottomInfo = '离店';
|
||||
}
|
||||
|
||||
return day;
|
||||
},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,142 +1 @@
|
||||
<wxs src="./index.wxs" module="computed"></wxs>
|
||||
|
||||
<demo-block title="基础用法">
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择单个日期"
|
||||
data-type="single"
|
||||
data-id="selectSingle"
|
||||
value="{{ computed.formatFullDate(date.selectSingle) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择多个日期"
|
||||
data-type="multiple"
|
||||
data-id="selectMultiple"
|
||||
value="{{ computed.formatMultiple(date.selectMultiple) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择日期区间"
|
||||
data-type="range"
|
||||
data-id="selectRange"
|
||||
value="{{ computed.formatRange(date.selectRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="快捷选择">
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择单个日期"
|
||||
data-type="single"
|
||||
data-id="quickSelect1"
|
||||
value="{{ computed.formatFullDate(date.quickSelect1) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择日期区间"
|
||||
data-type="range"
|
||||
data-id="quickSelect2"
|
||||
value="{{ computed.formatRange(date.quickSelect2) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义日历">
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义颜色"
|
||||
data-type="range"
|
||||
data-id="customColor"
|
||||
value="{{ computed.formatRange(date.customColor) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义日期范围"
|
||||
data-type="single"
|
||||
data-id="customRange"
|
||||
value="{{ computed.formatFullDate(date.customRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义按钮文字"
|
||||
data-type="range"
|
||||
data-id="customConfirm"
|
||||
value="{{ computed.formatRange(date.customConfirm) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义日期文案"
|
||||
data-type="range"
|
||||
data-id="customDayText"
|
||||
value="{{ computed.formatRange(date.customDayText) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义弹出位置"
|
||||
data-type="single"
|
||||
data-id="customPosition"
|
||||
value="{{ computed.formatFullDate(date.customPosition) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="日期区间最大范围"
|
||||
data-type="range"
|
||||
data-id="maxRange"
|
||||
value="{{ computed.formatRange(date.maxRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="平铺展示">
|
||||
<van-calendar
|
||||
title="日历"
|
||||
poppable="{{ false }}"
|
||||
show-confirm="{{ false }}"
|
||||
min-date="{{ tiledMinDate }}"
|
||||
max-date="{{ tiledMaxDate }}"
|
||||
first-day-of-week="{{ firstDayOfWeek }}"
|
||||
class="tiled-calendar"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-calendar
|
||||
show="{{ showCalendar }}"
|
||||
type="{{ type }}"
|
||||
color="{{ color }}"
|
||||
round="{{ round }}"
|
||||
position="{{ position }}"
|
||||
min-date="{{ minDate }}"
|
||||
max-date="{{ maxDate }}"
|
||||
max-range="{{ maxRange }}"
|
||||
formatter="{{ formatter }}"
|
||||
show-confirm="{{ showConfirm }}"
|
||||
confirm-text="{{ confirmText }}"
|
||||
confirm-disabled-text="{{ confirmDisabledText }}"
|
||||
first-day-of-week="{{ firstDayOfWeek }}"
|
||||
bind:confirm="onConfirm"
|
||||
bind:select="onSelect"
|
||||
bind:unselect="onUnselect"
|
||||
bind:open="onOpen"
|
||||
bind:opened="onOpened"
|
||||
bind:close="onClose"
|
||||
bind:closed="onClosed"
|
||||
>
|
||||
</van-calendar>
|
||||
<van-calendar-demo />
|
||||
|
||||
8
packages/calendar/demo/index.json
Normal file
8
packages/calendar/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-cell": "../../cell/index",
|
||||
"van-calendar": "../../calendar/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
178
packages/calendar/demo/index.ts
Normal file
178
packages/calendar/demo/index.ts
Normal file
@ -0,0 +1,178 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
type Data = {
|
||||
id?: string;
|
||||
type?: 'single' | 'multiple' | 'range';
|
||||
round?: boolean;
|
||||
color?: string;
|
||||
minDate?: number;
|
||||
maxDate?: number;
|
||||
maxRange?: any;
|
||||
position?: 'top' | 'right' | 'bottom' | 'left';
|
||||
formatter?: any;
|
||||
showConfirm?: boolean;
|
||||
showCalendar?: boolean;
|
||||
tiledMinDate?: number;
|
||||
tiledMaxDate?: number;
|
||||
confirmText?: string | '确定';
|
||||
confirmDisabledText?: string | '确定';
|
||||
firstDayOfWeek?: number;
|
||||
};
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
date: {
|
||||
maxRange: [],
|
||||
selectSingle: null,
|
||||
selectRange: [],
|
||||
selectMultiple: [],
|
||||
quickSelect1: null,
|
||||
quickSelect2: [],
|
||||
customColor: [],
|
||||
customConfirm: [],
|
||||
customRange: null,
|
||||
customDayText: [],
|
||||
customPosition: null,
|
||||
},
|
||||
type: 'single',
|
||||
round: true,
|
||||
color: '',
|
||||
minDate: Date.now(),
|
||||
maxDate: new Date(
|
||||
new Date().getFullYear(),
|
||||
new Date().getMonth() + 6,
|
||||
new Date().getDate()
|
||||
).getTime(),
|
||||
maxRange: undefined,
|
||||
position: 'bottom',
|
||||
formatter: undefined,
|
||||
showConfirm: false,
|
||||
showCalendar: false,
|
||||
tiledMinDate: new Date(2012, 0, 10).getTime(),
|
||||
tiledMaxDate: new Date(2012, 2, 20).getTime(),
|
||||
confirmText: '确定',
|
||||
confirmDisabledText: '确定',
|
||||
firstDayOfWeek: 0,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(event) {
|
||||
console.log(event);
|
||||
this.setData({ showCalendar: false });
|
||||
|
||||
this.setData({
|
||||
[`date.${this.data.id}`]: Array.isArray(event.detail)
|
||||
? event.detail.map((date) => date.valueOf())
|
||||
: event.detail.valueOf(),
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(event) {
|
||||
console.log(event);
|
||||
},
|
||||
|
||||
onUnselect(event) {
|
||||
console.log(event);
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({ showCalendar: false });
|
||||
},
|
||||
|
||||
onOpen() {
|
||||
console.log('open');
|
||||
},
|
||||
|
||||
onOpened() {
|
||||
console.log('opened');
|
||||
},
|
||||
|
||||
onClosed() {
|
||||
console.log('closed');
|
||||
},
|
||||
|
||||
resetSettings() {
|
||||
this.setData({
|
||||
round: true,
|
||||
color: '',
|
||||
minDate: Date.now(),
|
||||
maxDate: new Date(
|
||||
new Date().getFullYear(),
|
||||
new Date().getMonth() + 6,
|
||||
new Date().getDate()
|
||||
).getTime(),
|
||||
maxRange: undefined,
|
||||
position: 'bottom',
|
||||
formatter: undefined,
|
||||
showConfirm: true,
|
||||
confirmText: '确定',
|
||||
confirmDisabledText: '确定',
|
||||
});
|
||||
},
|
||||
|
||||
show(event) {
|
||||
this.resetSettings();
|
||||
const { type, id } = event.currentTarget.dataset;
|
||||
const data: Data = {
|
||||
id,
|
||||
type,
|
||||
showCalendar: true,
|
||||
};
|
||||
|
||||
switch (id) {
|
||||
case 'quickSelect1':
|
||||
case 'quickSelect2':
|
||||
data.showConfirm = false;
|
||||
break;
|
||||
case 'customColor':
|
||||
data.color = '#07c160';
|
||||
break;
|
||||
case 'customConfirm':
|
||||
data.confirmText = '完成';
|
||||
data.confirmDisabledText = '请选择结束时间';
|
||||
break;
|
||||
case 'customRange':
|
||||
data.minDate = new Date(2010, 0, 1).getTime();
|
||||
data.maxDate = new Date(2010, 0, 31).getTime();
|
||||
break;
|
||||
case 'customDayText':
|
||||
data.minDate = new Date(2010, 4, 1).getTime();
|
||||
data.maxDate = new Date(2010, 4, 31).getTime();
|
||||
data.formatter = this.dayFormatter;
|
||||
break;
|
||||
case 'customPosition':
|
||||
data.round = false;
|
||||
data.position = 'right';
|
||||
break;
|
||||
case 'maxRange':
|
||||
data.maxRange = 3;
|
||||
break;
|
||||
}
|
||||
|
||||
this.setData(data);
|
||||
},
|
||||
|
||||
dayFormatter(day) {
|
||||
const month = day.date.getMonth() + 1;
|
||||
const date = day.date.getDate();
|
||||
|
||||
if (month === 5) {
|
||||
if (date === 1) {
|
||||
day.topInfo = '劳动节';
|
||||
} else if (date === 4) {
|
||||
day.topInfo = '五四青年节';
|
||||
} else if (date === 11) {
|
||||
day.text = '今天';
|
||||
}
|
||||
}
|
||||
|
||||
if (day.type === 'start') {
|
||||
day.bottomInfo = '入店';
|
||||
} else if (day.type === 'end') {
|
||||
day.bottomInfo = '离店';
|
||||
}
|
||||
|
||||
return day;
|
||||
},
|
||||
},
|
||||
});
|
||||
142
packages/calendar/demo/index.wxml
Normal file
142
packages/calendar/demo/index.wxml
Normal file
@ -0,0 +1,142 @@
|
||||
<wxs src="./index.wxs" module="computed"></wxs>
|
||||
|
||||
<demo-block title="基础用法">
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择单个日期"
|
||||
data-type="single"
|
||||
data-id="selectSingle"
|
||||
value="{{ computed.formatFullDate(date.selectSingle) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择多个日期"
|
||||
data-type="multiple"
|
||||
data-id="selectMultiple"
|
||||
value="{{ computed.formatMultiple(date.selectMultiple) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择日期区间"
|
||||
data-type="range"
|
||||
data-id="selectRange"
|
||||
value="{{ computed.formatRange(date.selectRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="快捷选择">
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择单个日期"
|
||||
data-type="single"
|
||||
data-id="quickSelect1"
|
||||
value="{{ computed.formatFullDate(date.quickSelect1) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="选择日期区间"
|
||||
data-type="range"
|
||||
data-id="quickSelect2"
|
||||
value="{{ computed.formatRange(date.quickSelect2) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义日历">
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义颜色"
|
||||
data-type="range"
|
||||
data-id="customColor"
|
||||
value="{{ computed.formatRange(date.customColor) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义日期范围"
|
||||
data-type="single"
|
||||
data-id="customRange"
|
||||
value="{{ computed.formatFullDate(date.customRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义按钮文字"
|
||||
data-type="range"
|
||||
data-id="customConfirm"
|
||||
value="{{ computed.formatRange(date.customConfirm) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义日期文案"
|
||||
data-type="range"
|
||||
data-id="customDayText"
|
||||
value="{{ computed.formatRange(date.customDayText) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="自定义弹出位置"
|
||||
data-type="single"
|
||||
data-id="customPosition"
|
||||
value="{{ computed.formatFullDate(date.customPosition) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
title="日期区间最大范围"
|
||||
data-type="range"
|
||||
data-id="maxRange"
|
||||
value="{{ computed.formatRange(date.maxRange) }}"
|
||||
bind:click="show"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="平铺展示">
|
||||
<van-calendar
|
||||
title="日历"
|
||||
poppable="{{ false }}"
|
||||
show-confirm="{{ false }}"
|
||||
min-date="{{ tiledMinDate }}"
|
||||
max-date="{{ tiledMaxDate }}"
|
||||
first-day-of-week="{{ firstDayOfWeek }}"
|
||||
class="tiled-calendar"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-calendar
|
||||
show="{{ showCalendar }}"
|
||||
type="{{ type }}"
|
||||
color="{{ color }}"
|
||||
round="{{ round }}"
|
||||
position="{{ position }}"
|
||||
min-date="{{ minDate }}"
|
||||
max-date="{{ maxDate }}"
|
||||
max-range="{{ maxRange }}"
|
||||
formatter="{{ formatter }}"
|
||||
show-confirm="{{ showConfirm }}"
|
||||
confirm-text="{{ confirmText }}"
|
||||
confirm-disabled-text="{{ confirmDisabledText }}"
|
||||
first-day-of-week="{{ firstDayOfWeek }}"
|
||||
bind:confirm="onConfirm"
|
||||
bind:select="onSelect"
|
||||
bind:unselect="onUnselect"
|
||||
bind:open="onOpen"
|
||||
bind:opened="onOpened"
|
||||
bind:close="onClose"
|
||||
bind:closed="onClosed"
|
||||
>
|
||||
</van-calendar>
|
||||
1730
packages/calendar/test/__snapshots__/demo.spec.ts.snap
Normal file
1730
packages/calendar/test/__snapshots__/demo.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
15
packages/calendar/test/demo.spec.ts
Normal file
15
packages/calendar/test/demo.spec.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import path from 'path';
|
||||
import simulate from 'miniprogram-simulate';
|
||||
|
||||
test('should render demo and match snapshot', () => {
|
||||
try {
|
||||
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();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user