mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Calendar): add test cases
This commit is contained in:
陈嘉涵
neverland
parent
87ecdf9425
commit
dec732daac
@ -12,10 +12,7 @@ export default createComponent({
|
||||
methods: {
|
||||
genTitle() {
|
||||
const title = this.slots('title') || this.title || t('title');
|
||||
|
||||
if (title) {
|
||||
return <div class={bem('header-title')}>{title}</div>;
|
||||
}
|
||||
return <div class={bem('header-title')}>{title}</div>;
|
||||
},
|
||||
|
||||
genMonth() {
|
||||
|
||||
@ -49,10 +49,6 @@ export default createComponent({
|
||||
},
|
||||
|
||||
days() {
|
||||
if (!this.visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const days = [];
|
||||
const year = this.date.getFullYear();
|
||||
const month = this.date.getMonth();
|
||||
@ -95,6 +91,7 @@ export default createComponent({
|
||||
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (type === 'range') {
|
||||
const [startDay, endDay] = this.currentDate;
|
||||
|
||||
|
||||
@ -60,6 +60,8 @@
|
||||
:title="$t('calendar')"
|
||||
:poppable="false"
|
||||
:show-confirm="false"
|
||||
:min-date="tiledMinDate"
|
||||
:max-date="tiledMaxDate"
|
||||
:style="{ height: '500px' }"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -136,6 +138,8 @@ export default {
|
||||
formatter: undefined,
|
||||
showConfirm: false,
|
||||
showCalendar: false,
|
||||
tiledMinDate: new Date(2012, 0, 10),
|
||||
tiledMaxDate: new Date(2012, 2, 20),
|
||||
confirmText: undefined,
|
||||
confirmDisabledText: undefined,
|
||||
};
|
||||
|
||||
@ -89,6 +89,7 @@ export default createComponent({
|
||||
return !this.currentDate;
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.type === 'range') {
|
||||
return !this.currentDate[0] || !this.currentDate[1];
|
||||
}
|
||||
@ -137,6 +138,7 @@ export default createComponent({
|
||||
return defaultDate || minDate;
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (type === 'range') {
|
||||
const [startDay, endDay] = defaultDate || [];
|
||||
return [startDay || minDate, endDay || getNextDay(minDate)];
|
||||
@ -153,6 +155,7 @@ export default createComponent({
|
||||
const heightSum = heights.reduce((a, b) => a + b, 0);
|
||||
|
||||
// iOS scroll bounce may exceed the range
|
||||
/* istanbul ignore next */
|
||||
if (top < 0 || (bottom > heightSum && top > 0)) {
|
||||
return;
|
||||
}
|
||||
@ -171,6 +174,7 @@ export default createComponent({
|
||||
height += heights[i];
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (firstMonth) {
|
||||
this.monthTitle = firstMonth.title;
|
||||
}
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>选择单个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>选择日期区间</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>选择单个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>选择日期区间</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义日期范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义按钮文字</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义日期文案</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-calendar" style="height: 500px;">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日历</div>
|
||||
<div class="van-calendar__month-title">2012年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 85.71428571428571%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
<div class="van-calendar__day van-calendar__day">30</div>
|
||||
<div class="van-calendar__day van-calendar__day">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年2月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">2</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 28.571428571428573%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年3月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">3</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,213 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">
|
||||
<div class="van-calendar__top-info">Top Info</div>11
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">Text</div>
|
||||
<div class="van-calendar__day van-calendar__day test">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`popup wrapper 1`] = ``;
|
||||
|
||||
exports[`popup wrapper 2`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-calendar__popup" name="van-popup-slide-bottom" style="z-index: 2002;">
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`row-height prop 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 250px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%; height: 50px;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
|
||||
<div class="van-calendar__day" style="height: 50px;">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title & footer slot 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">Custom Title</div>
|
||||
<div class="van-calendar__month-title">2010年1月</div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">Custom Footer</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,377 @@
|
||||
import Calendar from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
import { getNextDay } from '../utils';
|
||||
|
||||
const now = new Date();
|
||||
const minDate = new Date(2010, 0, 10);
|
||||
const maxDate = new Date(2010, 0, 20);
|
||||
|
||||
function formatDate(date) {
|
||||
if (date) {
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
function formatRange([start, end]) {
|
||||
return `${formatDate(start)}-${formatDate(end)}`;
|
||||
}
|
||||
|
||||
test('select event when type is single', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper
|
||||
.findAll('.van-calendar__day')
|
||||
.at(15)
|
||||
.trigger('click');
|
||||
|
||||
expect(formatDate(wrapper.emitted('select')[0][0])).toEqual('2010/1/16');
|
||||
});
|
||||
|
||||
test('select event when type is range', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
days.at(15).trigger('click');
|
||||
days.at(16).trigger('click');
|
||||
days.at(15).trigger('click');
|
||||
days.at(12).trigger('click');
|
||||
|
||||
const emittedSelect = wrapper.emitted('select');
|
||||
expect(formatRange(emittedSelect[0][0])).toEqual('2010/1/16-');
|
||||
expect(formatRange(emittedSelect[1][0])).toEqual('2010/1/16-2010/1/17');
|
||||
expect(formatRange(emittedSelect[2][0])).toEqual('2010/1/16-');
|
||||
expect(formatRange(emittedSelect[3][0])).toEqual('2010/1/13-');
|
||||
});
|
||||
|
||||
test('should not trigger select event when click disabled day', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper
|
||||
.findAll('.van-calendar__day')
|
||||
.at(1)
|
||||
.trigger('click');
|
||||
|
||||
expect(formatDate(wrapper.emitted('select'))).toBeFalsy();
|
||||
});
|
||||
|
||||
test('confirm event when type is single', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper
|
||||
.findAll('.van-calendar__day')
|
||||
.at(15)
|
||||
.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/16');
|
||||
});
|
||||
|
||||
test('confirm event when type is range', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
days.at(18).trigger('click');
|
||||
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual(
|
||||
'2010/1/16-2010/1/19'
|
||||
);
|
||||
});
|
||||
|
||||
test('default single date', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual(formatDate(now));
|
||||
});
|
||||
|
||||
test('default range date', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual(
|
||||
formatRange([now, getNextDay(now)])
|
||||
);
|
||||
});
|
||||
|
||||
test('reset method', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
type: 'range',
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
days.at(18).trigger('click');
|
||||
|
||||
wrapper.vm.reset();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual(
|
||||
'2010/1/10-2010/1/11'
|
||||
);
|
||||
});
|
||||
|
||||
test('set show-confirm to false', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
type: 'range',
|
||||
poppable: false,
|
||||
showConfirm: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
days.at(18).trigger('click');
|
||||
|
||||
expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual(
|
||||
'2010/1/16-2010/1/19'
|
||||
);
|
||||
});
|
||||
|
||||
test('row-height prop', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
rowHeight: 50
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('formatter prop', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
formatter(day) {
|
||||
const date = day.date.getDate();
|
||||
|
||||
switch (date) {
|
||||
case 11:
|
||||
day.topInfo = 'Top Info';
|
||||
break;
|
||||
case 12:
|
||||
day.bottomInfo = 'Bottom Info';
|
||||
break;
|
||||
case 13:
|
||||
day.text = 'Text';
|
||||
break;
|
||||
case 14:
|
||||
day.className = 'test';
|
||||
break;
|
||||
}
|
||||
|
||||
return day;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title & footer slot', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
},
|
||||
scopedSlots: {
|
||||
title: () => 'Custom Title',
|
||||
footer: () => 'Custom Footer'
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should reset when type changed', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/10');
|
||||
|
||||
wrapper.setProps({ type: 'range' });
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatRange(wrapper.emitted('confirm')[1][0])).toEqual(
|
||||
'2010/1/10-2010/1/11'
|
||||
);
|
||||
});
|
||||
|
||||
test('default-date prop in single type', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
defaultDate: getNextDay(minDate),
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/11');
|
||||
|
||||
wrapper.setProps({ defaultDate: maxDate });
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[1][0])).toEqual('2010/1/20');
|
||||
});
|
||||
|
||||
test('default-date prop in range type', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.setProps({ defaultDate: [] });
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
days.at(18).trigger('click');
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual(
|
||||
'2010/1/16-2010/1/19'
|
||||
);
|
||||
});
|
||||
|
||||
test('popup wrapper', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate
|
||||
},
|
||||
listeners: {
|
||||
input(value) {
|
||||
wrapper.setProps({ value });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({ value: true });
|
||||
await later();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.element.style.display).toEqual('none');
|
||||
});
|
||||
|
||||
test('set show-mark prop to false', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
showMark: false,
|
||||
poppable: false
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.find('.van-calendar__month-mark').element).toBeFalsy();
|
||||
});
|
||||
26
src/calendar/test/utils.spec.js
Normal file
26
src/calendar/test/utils.spec.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { compareDay, compareMonth, getNextDay } from '../utils';
|
||||
|
||||
const date1 = new Date(2010, 0, 1);
|
||||
const date2 = new Date(2010, 0, 2);
|
||||
const date3 = new Date(2010, 1, 1);
|
||||
const date4 = new Date(2011, 0, 1);
|
||||
|
||||
test('compareMonth', () => {
|
||||
expect(compareMonth(date1, date1)).toEqual(0);
|
||||
expect(compareMonth(date1, date2)).toEqual(0);
|
||||
expect(compareMonth(date2, date3)).toEqual(-1);
|
||||
expect(compareMonth(date1, date4)).toEqual(-1);
|
||||
expect(compareMonth(date4, date1)).toEqual(1);
|
||||
});
|
||||
|
||||
test('compareDay', () => {
|
||||
expect(compareDay(date1, date1)).toEqual(0);
|
||||
expect(compareDay(date1, date2)).toEqual(-1);
|
||||
expect(compareDay(date2, date3)).toEqual(-1);
|
||||
expect(compareDay(date4, date1)).toEqual(1);
|
||||
});
|
||||
|
||||
test('getNextDay', () => {
|
||||
expect(getNextDay(date1).getDate()).toEqual(2);
|
||||
expect(getNextDay(date2).getDate()).toEqual(3);
|
||||
});
|
||||
@ -1,5 +1,4 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { padZero } from '../utils/format/string';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('calendar');
|
||||
|
||||
@ -8,7 +7,7 @@ export { createComponent, bem, t };
|
||||
export const ROW_HEIGHT = 64;
|
||||
|
||||
export function formatMonthTitle(date: Date) {
|
||||
return t('monthTitle', date.getFullYear(), padZero(date.getMonth() + 1));
|
||||
return t('monthTitle', date.getFullYear(), date.getMonth() + 1);
|
||||
}
|
||||
|
||||
export function compareMonth(date1: Date, date2: Date) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user