From 7e8a0eb4a912c194249296677920faee7292e1d1 Mon Sep 17 00:00:00 2001 From: nemo-shen Date: Mon, 6 Dec 2021 23:48:55 +0800 Subject: [PATCH] test(Calendar): add demo test --- example/app.json | 1 + example/pages/calendar/index.js | 156 +- example/pages/calendar/index.wxml | 143 +- packages/calendar/demo/index.json | 8 + .../calendar/demo/index.less | 0 packages/calendar/demo/index.ts | 178 ++ packages/calendar/demo/index.wxml | 142 ++ .../calendar/demo}/index.wxs | 0 .../test/__snapshots__/demo.spec.ts.snap | 1730 +++++++++++++++++ packages/calendar/test/demo.spec.ts | 15 + 10 files changed, 2076 insertions(+), 297 deletions(-) create mode 100644 packages/calendar/demo/index.json rename example/pages/calendar/index.wxss => packages/calendar/demo/index.less (100%) create mode 100644 packages/calendar/demo/index.ts create mode 100644 packages/calendar/demo/index.wxml rename {example/pages/calendar => packages/calendar/demo}/index.wxs (100%) create mode 100644 packages/calendar/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/calendar/test/demo.spec.ts diff --git a/example/app.json b/example/app.json index b9fcb959..73a0d48b 100644 --- a/example/app.json +++ b/example/app.json @@ -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" diff --git a/example/pages/calendar/index.js b/example/pages/calendar/index.js index 0778baef..cc11dfda 100644 --- a/example/pages/calendar/index.js +++ b/example/pages/calendar/index.js @@ -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(); diff --git a/example/pages/calendar/index.wxml b/example/pages/calendar/index.wxml index 2c351681..b760ab6b 100644 --- a/example/pages/calendar/index.wxml +++ b/example/pages/calendar/index.wxml @@ -1,142 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/packages/calendar/demo/index.json b/packages/calendar/demo/index.json new file mode 100644 index 00000000..405443da --- /dev/null +++ b/packages/calendar/demo/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "van-cell": "../../cell/index", + "van-calendar": "../../calendar/index", + "demo-block": "../../../example/components/demo-block/index" + } +} diff --git a/example/pages/calendar/index.wxss b/packages/calendar/demo/index.less similarity index 100% rename from example/pages/calendar/index.wxss rename to packages/calendar/demo/index.less diff --git a/packages/calendar/demo/index.ts b/packages/calendar/demo/index.ts new file mode 100644 index 00000000..ad753882 --- /dev/null +++ b/packages/calendar/demo/index.ts @@ -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; + }, + }, +}); diff --git a/packages/calendar/demo/index.wxml b/packages/calendar/demo/index.wxml new file mode 100644 index 00000000..2c351681 --- /dev/null +++ b/packages/calendar/demo/index.wxml @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/example/pages/calendar/index.wxs b/packages/calendar/demo/index.wxs similarity index 100% rename from example/pages/calendar/index.wxs rename to packages/calendar/demo/index.wxs diff --git a/packages/calendar/test/__snapshots__/demo.spec.ts.snap b/packages/calendar/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 00000000..83502b7e --- /dev/null +++ b/packages/calendar/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,1730 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+ + + + 基础用法 + + + + + 选择单个日期 + + + + + + + + + + + 选择多个日期 + + + + + + + + + + + 选择日期区间 + + + + + + + + + + + + + 快捷选择 + + + + + 选择单个日期 + + + + + + + + + + + 选择日期区间 + + + + + + + + + + + + + 自定义日历 + + + + + 自定义颜色 + + + + + + + + + + + 自定义日期范围 + + + + + + + + + + + 自定义按钮文字 + + + + + + + + + + + 自定义日期文案 + + + + + + + + + + + 自定义弹出位置 + + + + + + + + + + + 日期区间最大范围 + + + + + + + + + + + + + 平铺展示 + + + +
+ + + + 日历 + + + + + + + + + + 日 + + + + + 一 + + + + + 二 + + + + + 三 + + + + + 四 + + + + + 五 + + + + + 六 + + + + +
+ + + + + + + 1 + + + + + + 1 + + + + + + + 2 + + + + + + + 3 + + + + + + + 4 + + + + + + + 5 + + + + + + + 6 + + + + + + + 7 + + + + + + + 8 + + + + + + + 9 + + + + + + + 10 + + + + + + + 11 + + + + + + + 12 + + + + + + + 13 + + + + + + + 14 + + + + + + + 15 + + + + + + + 16 + + + + + + + 17 + + + + + + + 18 + + + + + + + 19 + + + + + + + 20 + + + + + + + 21 + + + + + + + 22 + + + + + + + 23 + + + + + + + 24 + + + + + + + 25 + + + + + + + 26 + + + + + + + 27 + + + + + + + 28 + + + + + + + 29 + + + + + + + 30 + + + + + + + 31 + + + + + + + + + + + 2012年2月 + + + + + + 2 + + + + + + 1 + + + + + + + 2 + + + + + + + 3 + + + + + + + 4 + + + + + + + 5 + + + + + + + 6 + + + + + + + 7 + + + + + + + 8 + + + + + + + 9 + + + + + + + 10 + + + + + + + 11 + + + + + + + 12 + + + + + + + 13 + + + + + + + 14 + + + + + + + 15 + + + + + + + 16 + + + + + + + 17 + + + + + + + 18 + + + + + + + 19 + + + + + + + 20 + + + + + + + 21 + + + + + + + 22 + + + + + + + 23 + + + + + + + 24 + + + + + + + 25 + + + + + + + 26 + + + + + + + 27 + + + + + + + 28 + + + + + + + 29 + + + + + + + + + + + 2012年3月 + + + + + + 3 + + + + + + 1 + + + + + + + 2 + + + + + + + 3 + + + + + + + 4 + + + + + + + 5 + + + + + + + 6 + + + + + + + 7 + + + + + + + 8 + + + + + + + 9 + + + + + + + 10 + + + + + + + 11 + + + + + + + 12 + + + + + + + 13 + + + + + + + 14 + + + + + + + 15 + + + + + + + 16 + + + + + + + 17 + + + + + + + 18 + + + + + + + 19 + + + + + + + 20 + + + + + + + 21 + + + + + + + 22 + + + + + + + 23 + + + + + + + 24 + + + + + + + 25 + + + + + + + 26 + + + + + + + 27 + + + + + + + 28 + + + + + + + 29 + + + + + + + 30 + + + + + + + 31 + + + + + + + + + + + + + + + + + + + + + + + + + + +
+`; diff --git a/packages/calendar/test/demo.spec.ts b/packages/calendar/test/demo.spec.ts new file mode 100644 index 00000000..48f5c77b --- /dev/null +++ b/packages/calendar/test/demo.spec.ts @@ -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); + } +});