mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-17 14:20:36 +03:00
Code Activity

refactor: remove date-fns && optimize code

Browse Source
This commit is contained in:
mengxiong10
2020-11-16 11:30:42 +08:00
parent a9b7900f39
commit a5a41096dc
37 changed files with 1908 additions and 1963 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/__snapshots__/calendar-panel.test.js.snap
-245
View File
@@ -1,245 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CalendarPanel prop: type=date 1`] = `
<div
class="mx-calendar mx-calendar-panel-date"
>
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-left"
type="button"
>
<i
class="mx-icon-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<i
class="mx-icon-double-right"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-right"
type="button"
>
<i
class="mx-icon-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<button
class="mx-btn mx-btn-text mx-btn-current-month"
type="button"
>
Oct
</button>
<button
class="mx-btn mx-btn-text mx-btn-current-year"
type="button"
>
2019
</button>
</span>
</div>
<div
class="mx-calendar-content"
>
<table-year-stub
decade="2010"
getcellclasses="function () { [native code] }"
style="display: none;"
/>
<table-month-stub
getcellclasses="function () { [native code] }"
style="display: none;"
/>
<table-date-stub
calendarmonth="9"
calendaryear="2019"
getcellclasses="function () { [native code] }"
getrowclasses="function () { [native code] }"
titleformat="YYYY-MM-DD"
/>
</div>
</div>
`;
exports[`CalendarPanel prop: type=month 1`] = `
<div
class="mx-calendar mx-calendar-panel-month"
>
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-left"
style="display: none;"
type="button"
>
<i
class="mx-icon-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<i
class="mx-icon-double-right"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-right"
style="display: none;"
type="button"
>
<i
class="mx-icon-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<button
class="mx-btn mx-btn-text"
type="button"
>
2019
</button>
</span>
</div>
<div
class="mx-calendar-content"
>
<table-year-stub
decade="2010"
getcellclasses="function () { [native code] }"
style="display: none;"
/>
<table-month-stub
getcellclasses="function () { [native code] }"
/>
<!---->
</div>
</div>
`;
exports[`CalendarPanel prop: type=year 1`] = `
<div
class="mx-calendar mx-calendar-panel-year"
>
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-left"
style="display: none;"
type="button"
>
<i
class="mx-icon-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<i
class="mx-icon-double-right"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-right"
style="display: none;"
type="button"
>
<i
class="mx-icon-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<span>
2010
</span>
<span
class="mx-calendar-decade-separator"
/>
<span>
2019
</span>
</span>
</div>
<div
class="mx-calendar-content"
>
<table-year-stub
decade="2010"
getcellclasses="function () { [native code] }"
/>
<!---->
<!---->
</div>
</div>
`;
__test__/__snapshots__/date-picker.test.js.snap
+58 -87
View File
@@ -14,33 +14,23 @@ exports[`DatePicker prop: attrs of input 1`] = `
placeholder="test placeholder"
type="number"
/>
<!---->
<i
class="mx-icon-calendar"
>
<icon-calendar-stub />
<anonymous-stub />
</i>
</div>
<popup-stub
appendtobody="true"
>
<!---->
<div
class="mx-datepicker-content"
>
<!---->
<div
class="mx-datepicker-body"
>
<div />
</div>
<!---->
</div>
</popup-stub>
</div>
@@ -60,33 +50,23 @@ exports[`DatePicker prop: clearable 1`] = `
placeholder=""
type="text"
/>
<!---->
<i
class="mx-icon-calendar"
>
<icon-calendar-stub />
<anonymous-stub />
</i>
</div>
<popup-stub
appendtobody="true"
>
<!---->
<div
class="mx-datepicker-content"
>
<!---->
<div
class="mx-datepicker-body"
>
<div />
</div>
<!---->
</div>
</popup-stub>
</div>
@@ -107,37 +87,28 @@ exports[`DatePicker prop: editable 1`] = `
readonly="readonly"
type="text"
/>
<i
class="mx-icon-clear"
>
<icon-close-stub />
<anonymous-stub />
</i>
<i
class="mx-icon-calendar"
>
<icon-calendar-stub />
<anonymous-stub />
</i>
</div>
<popup-stub
appendtobody="true"
>
<!---->
<div
class="mx-datepicker-content"
>
<!---->
<div
class="mx-datepicker-body"
>
<div />
</div>
<!---->
</div>
</popup-stub>
</div>
@@ -185,13 +156,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
29
29
</td>
<td
class="cell not-current-month"
data-day="-1"
data-date="1569686400000"
title="2019-09-29"
>
<div>
@@ -200,7 +171,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="0"
data-date="1569772800000"
title="2019-09-30"
>
<div>
@@ -209,7 +180,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="1"
data-date="1569859200000"
title="2019-10-01"
>
<div>
@@ -218,7 +189,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="2"
data-date="1569945600000"
title="2019-10-02"
>
<div>
@@ -227,7 +198,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="3"
data-date="1570032000000"
title="2019-10-03"
>
<div>
@@ -236,7 +207,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="4"
data-date="1570118400000"
title="2019-10-04"
>
<div>
@@ -245,7 +216,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="5"
data-date="1570204800000"
title="2019-10-05"
>
<div>
@@ -260,13 +231,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
6
6
</td>
<td
class="cell"
data-day="6"
data-date="1570291200000"
title="2019-10-06"
>
<div>
@@ -275,7 +246,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="7"
data-date="1570377600000"
title="2019-10-07"
>
<div>
@@ -284,7 +255,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="8"
data-date="1570464000000"
title="2019-10-08"
>
<div>
@@ -293,7 +264,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="9"
data-date="1570550400000"
title="2019-10-09"
>
<div>
@@ -302,7 +273,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="10"
data-date="1570636800000"
title="2019-10-10"
>
<div>
@@ -311,7 +282,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="11"
data-date="1570723200000"
title="2019-10-11"
>
<div>
@@ -320,7 +291,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="12"
data-date="1570809600000"
title="2019-10-12"
>
<div>
@@ -335,13 +306,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
13
13
</td>
<td
class="cell active"
data-day="13"
data-date="1570896000000"
title="2019-10-13"
>
<div>
@@ -350,7 +321,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="14"
data-date="1570982400000"
title="2019-10-14"
>
<div>
@@ -359,7 +330,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="15"
data-date="1571068800000"
title="2019-10-15"
>
<div>
@@ -368,7 +339,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="16"
data-date="1571155200000"
title="2019-10-16"
>
<div>
@@ -377,7 +348,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="17"
data-date="1571241600000"
title="2019-10-17"
>
<div>
@@ -386,7 +357,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="18"
data-date="1571328000000"
title="2019-10-18"
>
<div>
@@ -395,7 +366,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="19"
data-date="1571414400000"
title="2019-10-19"
>
<div>
@@ -410,13 +381,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
20
20
</td>
<td
class="cell"
data-day="20"
data-date="1571500800000"
title="2019-10-20"
>
<div>
@@ -425,7 +396,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="21"
data-date="1571587200000"
title="2019-10-21"
>
<div>
@@ -434,7 +405,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="22"
data-date="1571673600000"
title="2019-10-22"
>
<div>
@@ -443,7 +414,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="23"
data-date="1571760000000"
title="2019-10-23"
>
<div>
@@ -452,7 +423,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="24"
data-date="1571846400000"
title="2019-10-24"
>
<div>
@@ -461,7 +432,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="25"
data-date="1571932800000"
title="2019-10-25"
>
<div>
@@ -470,7 +441,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="26"
data-date="1572019200000"
title="2019-10-26"
>
<div>
@@ -485,13 +456,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
27
27
</td>
<td
class="cell"
data-day="27"
data-date="1572105600000"
title="2019-10-27"
>
<div>
@@ -500,7 +471,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="28"
data-date="1572192000000"
title="2019-10-28"
>
<div>
@@ -509,7 +480,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="29"
data-date="1572278400000"
title="2019-10-29"
>
<div>
@@ -518,7 +489,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="30"
data-date="1572364800000"
title="2019-10-30"
>
<div>
@@ -527,7 +498,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell"
data-day="31"
data-date="1572451200000"
title="2019-10-31"
>
<div>
@@ -536,7 +507,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="32"
data-date="1572537600000"
title="2019-11-01"
>
<div>
@@ -545,7 +516,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="33"
data-date="1572624000000"
title="2019-11-02"
>
<div>
@@ -560,13 +531,13 @@ exports[`DatePicker prop: formatter 1`] = `
class="mx-week-number"
>
3
3
</td>
<td
class="cell not-current-month"
data-day="34"
data-date="1572710400000"
title="2019-11-03"
>
<div>
@@ -575,7 +546,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="35"
data-date="1572796800000"
title="2019-11-04"
>
<div>
@@ -584,7 +555,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="36"
data-date="1572883200000"
title="2019-11-05"
>
<div>
@@ -593,7 +564,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="37"
data-date="1572969600000"
title="2019-11-06"
>
<div>
@@ -602,7 +573,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="38"
data-date="1573056000000"
title="2019-11-07"
>
<div>
@@ -611,7 +582,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="39"
data-date="1573142400000"
title="2019-11-08"
>
<div>
@@ -620,7 +591,7 @@ exports[`DatePicker prop: formatter 1`] = `
</td>
<td
class="cell not-current-month"
data-day="40"
data-date="1573228800000"
title="2019-11-09"
>
<div>
__test__/__snapshots__/table-date.test.js.snap
+513 -445
View File
@@ -1,453 +1,521 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TableDate corrent render 1`] = `
<table
class="mx-table mx-table-date"
firstdayofweek="1"
<div
class="mx-calendar mx-calendar-panel-date"
>
<thead>
<tr>
<!---->
<th>
Su
</th>
<th>
Mo
</th>
<th>
Tu
</th>
<th>
We
</th>
<th>
Th
</th>
<th>
Fr
</th>
<th>
Sa
</th>
</tr>
</thead>
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-left"
type="button"
>
<i
class="mx-icon-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<i
class="mx-icon-double-right"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-right"
type="button"
>
<i
class="mx-icon-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<button
class="mx-btn mx-btn-text mx-btn-current-month"
type="button"
>
Oct
</button>
<button
class="mx-btn mx-btn-text mx-btn-current-year"
type="button"
>
2019
</button>
</span>
</div>
<tbody>
<tr
class="mx-date-row"
<div
class="mx-calendar-content"
>
<table
class="mx-table mx-table-date"
>
<!---->
<thead>
<tr>
<!---->
<th>
Su
</th>
<th>
Mo
</th>
<th>
Tu
</th>
<th>
We
</th>
<th>
Th
</th>
<th>
Fr
</th>
<th>
Sa
</th>
</tr>
</thead>
<td
class="cell"
data-day="-1"
title="29/09/2019"
>
<div>
29
</div>
</td>
<td
class="cell"
data-day="0"
title="30/09/2019"
>
<div>
30
</div>
</td>
<td
class="cell"
data-day="1"
title="01/10/2019"
>
<div>
1
</div>
</td>
<td
class="cell"
data-day="2"
title="02/10/2019"
>
<div>
2
</div>
</td>
<td
class="cell"
data-day="3"
title="03/10/2019"
>
<div>
3
</div>
</td>
<td
class="cell"
data-day="4"
title="04/10/2019"
>
<div>
4
</div>
</td>
<td
class="cell"
data-day="5"
title="05/10/2019"
>
<div>
5
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-day="6"
title="06/10/2019"
>
<div>
6
</div>
</td>
<td
class="cell"
data-day="7"
title="07/10/2019"
>
<div>
7
</div>
</td>
<td
class="cell"
data-day="8"
title="08/10/2019"
>
<div>
8
</div>
</td>
<td
class="cell"
data-day="9"
title="09/10/2019"
>
<div>
9
</div>
</td>
<td
class="cell"
data-day="10"
title="10/10/2019"
>
<div>
10
</div>
</td>
<td
class="cell"
data-day="11"
title="11/10/2019"
>
<div>
11
</div>
</td>
<td
class="cell"
data-day="12"
title="12/10/2019"
>
<div>
12
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-day="13"
title="13/10/2019"
>
<div>
13
</div>
</td>
<td
class="cell"
data-day="14"
title="14/10/2019"
>
<div>
14
</div>
</td>
<td
class="cell"
data-day="15"
title="15/10/2019"
>
<div>
15
</div>
</td>
<td
class="cell"
data-day="16"
title="16/10/2019"
>
<div>
16
</div>
</td>
<td
class="cell"
data-day="17"
title="17/10/2019"
>
<div>
17
</div>
</td>
<td
class="cell"
data-day="18"
title="18/10/2019"
>
<div>
18
</div>
</td>
<td
class="cell"
data-day="19"
title="19/10/2019"
>
<div>
19
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-day="20"
title="20/10/2019"
>
<div>
20
</div>
</td>
<td
class="cell"
data-day="21"
title="21/10/2019"
>
<div>
21
</div>
</td>
<td
class="cell"
data-day="22"
title="22/10/2019"
>
<div>
22
</div>
</td>
<td
class="cell"
data-day="23"
title="23/10/2019"
>
<div>
23
</div>
</td>
<td
class="cell"
data-day="24"
title="24/10/2019"
>
<div>
24
</div>
</td>
<td
class="cell"
data-day="25"
title="25/10/2019"
>
<div>
25
</div>
</td>
<td
class="cell"
data-day="26"
title="26/10/2019"
>
<div>
26
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-day="27"
title="27/10/2019"
>
<div>
27
</div>
</td>
<td
class="cell"
data-day="28"
title="28/10/2019"
>
<div>
28
</div>
</td>
<td
class="cell"
data-day="29"
title="29/10/2019"
>
<div>
29
</div>
</td>
<td
class="cell"
data-day="30"
title="30/10/2019"
>
<div>
30
</div>
</td>
<td
class="cell"
data-day="31"
title="31/10/2019"
>
<div>
31
</div>
</td>
<td
class="cell"
data-day="32"
title="01/11/2019"
>
<div>
1
</div>
</td>
<td
class="cell"
data-day="33"
title="02/11/2019"
>
<div>
2
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-day="34"
title="03/11/2019"
>
<div>
3
</div>
</td>
<td
class="cell"
data-day="35"
title="04/11/2019"
>
<div>
4
</div>
</td>
<td
class="cell"
data-day="36"
title="05/11/2019"
>
<div>
5
</div>
</td>
<td
class="cell"
data-day="37"
title="06/11/2019"
>
<div>
6
</div>
</td>
<td
class="cell"
data-day="38"
title="07/11/2019"
>
<div>
7
</div>
</td>
<td
class="cell"
data-day="39"
title="08/11/2019"
>
<div>
8
</div>
</td>
<td
class="cell"
data-day="40"
title="09/11/2019"
>
<div>
9
</div>
</td>
</tr>
</tbody>
</table>
<tbody>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1569686400000"
title="29/09/2019"
>
<div>
29
</div>
</td>
<td
class="cell"
data-date="1569772800000"
title="30/09/2019"
>
<div>
30
</div>
</td>
<td
class="cell"
data-date="1569859200000"
title="01/10/2019"
>
<div>
1
</div>
</td>
<td
class="cell"
data-date="1569945600000"
title="02/10/2019"
>
<div>
2
</div>
</td>
<td
class="cell"
data-date="1570032000000"
title="03/10/2019"
>
<div>
3
</div>
</td>
<td
class="cell"
data-date="1570118400000"
title="04/10/2019"
>
<div>
4
</div>
</td>
<td
class="cell"
data-date="1570204800000"
title="05/10/2019"
>
<div>
5
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1570291200000"
title="06/10/2019"
>
<div>
6
</div>
</td>
<td
class="cell"
data-date="1570377600000"
title="07/10/2019"
>
<div>
7
</div>
</td>
<td
class="cell"
data-date="1570464000000"
title="08/10/2019"
>
<div>
8
</div>
</td>
<td
class="cell"
data-date="1570550400000"
title="09/10/2019"
>
<div>
9
</div>
</td>
<td
class="cell"
data-date="1570636800000"
title="10/10/2019"
>
<div>
10
</div>
</td>
<td
class="cell"
data-date="1570723200000"
title="11/10/2019"
>
<div>
11
</div>
</td>
<td
class="cell"
data-date="1570809600000"
title="12/10/2019"
>
<div>
12
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1570896000000"
title="13/10/2019"
>
<div>
13
</div>
</td>
<td
class="cell"
data-date="1570982400000"
title="14/10/2019"
>
<div>
14
</div>
</td>
<td
class="cell"
data-date="1571068800000"
title="15/10/2019"
>
<div>
15
</div>
</td>
<td
class="cell"
data-date="1571155200000"
title="16/10/2019"
>
<div>
16
</div>
</td>
<td
class="cell"
data-date="1571241600000"
title="17/10/2019"
>
<div>
17
</div>
</td>
<td
class="cell"
data-date="1571328000000"
title="18/10/2019"
>
<div>
18
</div>
</td>
<td
class="cell"
data-date="1571414400000"
title="19/10/2019"
>
<div>
19
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1571500800000"
title="20/10/2019"
>
<div>
20
</div>
</td>
<td
class="cell"
data-date="1571587200000"
title="21/10/2019"
>
<div>
21
</div>
</td>
<td
class="cell"
data-date="1571673600000"
title="22/10/2019"
>
<div>
22
</div>
</td>
<td
class="cell"
data-date="1571760000000"
title="23/10/2019"
>
<div>
23
</div>
</td>
<td
class="cell"
data-date="1571846400000"
title="24/10/2019"
>
<div>
24
</div>
</td>
<td
class="cell"
data-date="1571932800000"
title="25/10/2019"
>
<div>
25
</div>
</td>
<td
class="cell"
data-date="1572019200000"
title="26/10/2019"
>
<div>
26
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1572105600000"
title="27/10/2019"
>
<div>
27
</div>
</td>
<td
class="cell"
data-date="1572192000000"
title="28/10/2019"
>
<div>
28
</div>
</td>
<td
class="cell"
data-date="1572278400000"
title="29/10/2019"
>
<div>
29
</div>
</td>
<td
class="cell"
data-date="1572364800000"
title="30/10/2019"
>
<div>
30
</div>
</td>
<td
class="cell"
data-date="1572451200000"
title="31/10/2019"
>
<div>
31
</div>
</td>
<td
class="cell"
data-date="1572537600000"
title="01/11/2019"
>
<div>
1
</div>
</td>
<td
class="cell"
data-date="1572624000000"
title="02/11/2019"
>
<div>
2
</div>
</td>
</tr>
<tr
class="mx-date-row"
>
<!---->
<td
class="cell"
data-date="1572710400000"
title="03/11/2019"
>
<div>
3
</div>
</td>
<td
class="cell"
data-date="1572796800000"
title="04/11/2019"
>
<div>
4
</div>
</td>
<td
class="cell"
data-date="1572883200000"
title="05/11/2019"
>
<div>
5
</div>
</td>
<td
class="cell"
data-date="1572969600000"
title="06/11/2019"
>
<div>
6
</div>
</td>
<td
class="cell"
data-date="1573056000000"
title="07/11/2019"
>
<div>
7
</div>
</td>
<td
class="cell"
data-date="1573142400000"
title="08/11/2019"
>
<div>
8
</div>
</td>
<td
class="cell"
data-date="1573228800000"
title="09/11/2019"
>
<div>
9
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
__test__/__snapshots__/table-month.test.js.snap
+146 -110
View File
@@ -1,119 +1,155 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TableMonth correct render 1`] = `
<table
class="mx-table mx-table-month"
getclasses="month => {
if (month === 9) {
return 'active';
}
return '';
}"
<div
class="mx-calendar mx-calendar-panel-month"
>
<tr>
<td
class="cell"
data-month="0"
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<div>
Jan
</div>
</td>
<td
class="cell"
data-month="1"
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<div>
Feb
</div>
</td>
<td
class="cell"
data-month="2"
<i
class="mx-icon-double-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<div>
Mar
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-month="3"
<button
class="mx-btn mx-btn-text"
type="button"
>
2019
</button>
</span>
</div>
<div
class="mx-calendar-content"
>
<table
class="mx-table mx-table-month"
>
<div>
Apr
</div>
</td>
<td
class="cell"
data-month="4"
>
<div>
May
</div>
</td>
<td
class="cell"
data-month="5"
>
<div>
Jun
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-month="6"
>
<div>
Jul
</div>
</td>
<td
class="cell"
data-month="7"
>
<div>
Aug
</div>
</td>
<td
class="cell"
data-month="8"
>
<div>
Sep
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-month="9"
>
<div>
Oct
</div>
</td>
<td
class="cell"
data-month="10"
>
<div>
Nov
</div>
</td>
<td
class="cell"
data-month="11"
>
<div>
Dec
</div>
</td>
</tr>
</table>
<tr>
<td
class="cell"
data-month="0"
>
<div>
Jan
</div>
</td>
<td
class="cell"
data-month="1"
>
<div>
Feb
</div>
</td>
<td
class="cell"
data-month="2"
>
<div>
Mar
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-month="3"
>
<div>
Apr
</div>
</td>
<td
class="cell"
data-month="4"
>
<div>
May
</div>
</td>
<td
class="cell"
data-month="5"
>
<div>
Jun
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-month="6"
>
<div>
Jul
</div>
</td>
<td
class="cell"
data-month="7"
>
<div>
Aug
</div>
</td>
<td
class="cell"
data-month="8"
>
<div>
Sep
</div>
</td>
</tr>
<tr>
<td
class="cell active"
data-month="9"
>
<div>
Oct
</div>
</td>
<td
class="cell"
data-month="10"
>
<div>
Nov
</div>
</td>
<td
class="cell"
data-month="11"
>
<div>
Dec
</div>
</td>
</tr>
</table>
</div>
</div>
`;
__test__/__snapshots__/table-year.test.js.snap
+136 -90
View File
@@ -1,98 +1,144 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TableYear decade=2010 1`] = `
<table
class="mx-table mx-table-year"
<div
class="mx-calendar mx-calendar-panel-year"
>
<tr>
<td
class="cell"
data-year="2010"
<div
class="mx-calendar-header"
>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-left"
type="button"
>
<div>
<i
class="mx-icon-double-left"
/>
</button>
<button
class="mx-btn mx-btn-text mx-btn-icon-double-right"
type="button"
>
<i
class="mx-icon-double-right"
/>
</button>
<span
class="mx-calendar-header-label"
>
<span>
2010
</div>
</td>
<td
class="cell"
data-year="2011"
>
<div>
2011
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2012"
>
<div>
2012
</div>
</td>
<td
class="cell"
data-year="2013"
>
<div>
2013
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2014"
>
<div>
2014
</div>
</td>
<td
class="cell"
data-year="2015"
>
<div>
2015
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2016"
>
<div>
2016
</div>
</td>
<td
class="cell"
data-year="2017"
>
<div>
2017
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2018"
>
<div>
2018
</div>
</td>
<td
class="cell"
data-year="2019"
>
<div>
</span>
<span
class="mx-calendar-decade-separator"
/>
<span>
2019
</div>
</td>
</tr>
</table>
</span>
</span>
</div>
<div
class="mx-calendar-content"
>
<table
class="mx-table mx-table-year"
>
<tr>
<td
class="cell"
data-year="2010"
>
<div>
2010
</div>
</td>
<td
class="cell"
data-year="2011"
>
<div>
2011
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2012"
>
<div>
2012
</div>
</td>
<td
class="cell"
data-year="2013"
>
<div>
2013
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2014"
>
<div>
2014
</div>
</td>
<td
class="cell"
data-year="2015"
>
<div>
2015
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2016"
>
<div>
2016
</div>
</td>
<td
class="cell"
data-year="2017"
>
<div>
2017
</div>
</td>
</tr>
<tr>
<td
class="cell"
data-year="2018"
>
<div>
2018
</div>
</td>
<td
class="cell"
data-year="2019"
>
<div>
2019
</div>
</td>
</tr>
</table>
</div>
</div>
`;
__test__/calendar-panel.test.js
+75 -39
View File
@@ -1,3 +1,4 @@
/* eslint-disable no-await-in-loop */
import { mount, shallowMount } from '@vue/test-utils';
import CalendarPanel from '../src/calendar/calendar-panel';
@@ -14,8 +15,8 @@ describe('CalendarPanel', () => {
value: new Date(2019, 9, 4),
},
});
const tds = wrapper.findAll('.mx-table-date td');
tds.at(0).trigger('click');
const td = wrapper.find('.mx-table-date td');
td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 8, 29));
});
@@ -26,8 +27,8 @@ describe('CalendarPanel', () => {
defaultValue: new Date(2019, 9, 1),
},
});
const tds = wrapper.findAll('.mx-table-month td > div');
tds.at(0).trigger('click');
const td = wrapper.find('.mx-table-month td > div');
td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 0, 1));
});
@@ -38,8 +39,8 @@ describe('CalendarPanel', () => {
defaultValue: new Date(2019, 9, 1),
},
});
const tds = wrapper.findAll('.mx-table-year td > div');
tds.at(0).trigger('click');
const td = wrapper.find('.mx-table-year td > div');
td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 0));
});
@@ -50,22 +51,37 @@ describe('CalendarPanel', () => {
defaultValue: new Date().setFullYear(11),
},
});
const tds = wrapper.findAll('.mx-table-year td > div');
tds.at(0).trigger('click');
const td = wrapper.find('.mx-table-year td > div');
td.trigger('click');
const expectedDate = new Date(10, 0).setFullYear(10);
expect(wrapper.emitted().select[0][0].getTime()).toBe(expectedDate);
});
it('feat: active class', () => {
it('feat: active class', async () => {
wrapper = mount(CalendarPanel);
const td = wrapper.find('.mx-table-date td:nth-child(6)');
expect(td.classes()).not.toContain('active');
wrapper.setProps({ value: new Date(2019, 9, 4) });
await wrapper.setProps({ value: new Date(2019, 9, 4) });
expect(td.classes()).toContain('active');
});
it('feat: click prev/next month', () => {
wrapper = shallowMount(CalendarPanel);
it('feat: panel change', async () => {
wrapper = mount(CalendarPanel);
const { vm } = wrapper;
await wrapper.find('.mx-btn-current-year').trigger('click');
expect(vm.panel).toBe('year');
await wrapper.find('.mx-table-year td > div').trigger('click');
expect(vm.panel).toBe('month');
await wrapper.find('.mx-table-month td > div').trigger('click');
expect(vm.panel).toBe('date');
await wrapper.find('.mx-btn-current-month').trigger('click');
expect(vm.panel).toBe('month');
await wrapper.find('.mx-calendar-header-label > button').trigger('click');
expect(vm.panel).toBe('year');
});
it('feat: click prev/next month', async () => {
wrapper = mount(CalendarPanel);
const nextBtn = wrapper.find('.mx-btn-icon-right');
const lastBtn = wrapper.find('.mx-btn-icon-left');
@@ -74,7 +90,7 @@ describe('CalendarPanel', () => {
while (count--) {
const oldYear = vm.calendarYear;
const oldMonth = vm.calendarMonth;
nextBtn.trigger('click');
await nextBtn.trigger('click');
const newYear = vm.calendarYear;
const newMonth = vm.calendarMonth;
if (oldMonth === 11) {
@@ -89,7 +105,7 @@ describe('CalendarPanel', () => {
while (count--) {
const oldYear = vm.calendarYear;
const oldMonth = vm.calendarMonth;
lastBtn.trigger('click');
await lastBtn.trigger('click');
const newYear = vm.calendarYear;
const newMonth = vm.calendarMonth;
if (oldMonth === 0) {
@@ -102,33 +118,42 @@ describe('CalendarPanel', () => {
}
});
it('feat: click prev/next year', () => {
wrapper = shallowMount(CalendarPanel, {
['date', 'month'].forEach(type => {
it(`feat: click prev/next year in ${type} panel`, async () => {
wrapper = mount(CalendarPanel, {
propsData: {
value: new Date(2018, 4, 5),
defaultPanel: type,
},
});
const nextBtn = wrapper.find('.mx-btn-icon-double-right');
const lastBtn = wrapper.find('.mx-btn-icon-double-left');
const { vm } = wrapper;
const oldYear = vm.calendarYear;
expect(oldYear).toBe(2018);
await nextBtn.trigger('click');
let newYear = vm.calendarYear;
expect(newYear).toBe(2019);
await lastBtn.trigger('click');
newYear = vm.calendarYear;
expect(newYear).toBe(oldYear);
});
});
it('feat: click prev/next decade', () => {
wrapper = mount(CalendarPanel, {
propsData: {
value: new Date(2018, 4, 5),
defaultPanel: 'year',
},
});
const nextBtn = wrapper.find('.mx-btn-icon-double-right');
const lastBtn = wrapper.find('.mx-btn-icon-double-left');
const yearBtn = wrapper.find('.mx-btn-current-year');
const { vm } = wrapper;
const oldYear = vm.calendarYear;
expect(oldYear).toBe(2018);
nextBtn.trigger('click');
let newYear = vm.calendarYear;
expect(newYear).toBe(2019);
lastBtn.trigger('click');
newYear = vm.calendarYear;
expect(newYear).toBe(oldYear);
// 年视图测试
yearBtn.trigger('click');
expect(vm.panel).toBe('year');
expect(vm.calendarDecade).toBe(2010);
nextBtn.trigger('click');
expect(vm.calendarDecade).toBe(2020);
expect(wrapper.vm.calendarYear).toBe(2028);
lastBtn.trigger('click');
lastBtn.trigger('click');
expect(vm.calendarDecade).toBe(2000);
expect(wrapper.vm.calendarYear).toBe(2008);
});
const renderType = type => {
@@ -139,11 +164,24 @@ describe('CalendarPanel', () => {
value: new Date(2019, 9, 1, 10),
},
});
expect(wrapper.element).toMatchSnapshot();
expect(wrapper.vm.panel).toBe(type);
});
};
['date', 'month', 'year'].forEach(renderType);
it('feat: select year to change the calendar', async () => {
wrapper = mount(CalendarPanel, {
propsData: {
value: new Date(2018, 4, 5),
defaultPanel: 'year',
},
});
await wrapper.find('.mx-table-year td > div').trigger('click');
expect(wrapper.vm.calendarYear).toBe(2010);
await wrapper.find('.mx-table-month td > div').trigger('click');
expect(wrapper.vm.calendarMonth).toBe(0);
});
it('prop: disabledDate', () => {
const disabledDate = date => {
return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
@@ -168,11 +206,12 @@ describe('CalendarPanel', () => {
expect(wrapper.emitted().select).toBeUndefined();
});
it('prop: partialUpdate', () => {
it('prop: partialUpdate', async () => {
wrapper = mount(CalendarPanel, {
propsData: {
value: new Date(2019, 9, 4),
partialUpdate: true,
defaultPanel: 'year',
},
});
wrapper
@@ -180,11 +219,8 @@ describe('CalendarPanel', () => {
.at(0)
.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2010, 9, 4));
wrapper.setProps({ value: new Date(2010, 9, 4) });
wrapper
.findAll('.mx-table-month td > div')
.at(0)
.trigger('click');
await wrapper.setProps({ value: new Date(2010, 9, 4) });
wrapper.find('.mx-table-month td > div').trigger('click');
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2010, 0, 4));
});
__test__/calendar-range.test.js
+8 -17
View File
@@ -1,5 +1,4 @@
import { mount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import CalendarRange from '../src/calendar/calendar-range';
import CalendarPanel from '../src/calendar/calendar-panel';
@@ -12,7 +11,6 @@ afterEach(() => {
describe('CalendarRange', () => {
it('feat: correct classes', () => {
wrapper = mount(CalendarRange, {
sync: false,
propsData: {
value: [new Date(2019, 9, 30), new Date(2019, 10, 2)],
},
@@ -29,38 +27,31 @@ describe('CalendarRange', () => {
it('feat: click range', async () => {
wrapper = mount(CalendarRange, {
sync: false,
propsData: {
defaultValue: new Date(2019, 9, 1),
},
});
expect(wrapper.vm.calendars).toEqual([new Date(2019, 9, 1), new Date(2019, 10, 1)]);
const tds = wrapper.findAll('.mx-table-date td');
tds.at(2).trigger('click');
await flushPromises();
await tds.at(2).trigger('click');
expect(wrapper.emitted().select).toBeUndefined();
tds.at(8).trigger('click');
await flushPromises();
await tds.at(8).trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual([new Date(2019, 9, 1), new Date(2019, 9, 7)]);
});
it('feat: calendars min gap', async () => {
wrapper = mount(CalendarRange, {
sync: false,
propsData: {
defaultValue: new Date(2019, 6, 1),
},
});
const panels = wrapper.findAll(CalendarPanel);
const startPanel = panels.at(0);
const endPanel = panels.at(1);
const firstRightIcon = wrapper.find('.mx-calendar-panel-date .mx-btn-icon-right');
const secondLeftIcon = wrapper.find('.mx-calendar-panel-date:nth-child(2) .mx-btn-icon-left');
startPanel.find('.mx-btn-icon-right').trigger('click');
await flushPromises();
await firstRightIcon.trigger('click');
expect(wrapper.vm.calendars).toEqual([new Date(2019, 7, 1), new Date(2019, 8, 1)]);
endPanel.find('.mx-btn-icon-left').trigger('click');
await flushPromises();
await secondLeftIcon.trigger('click');
expect(wrapper.vm.calendars).toEqual([new Date(2019, 6, 1), new Date(2019, 7, 1)]);
});
@@ -70,7 +61,7 @@ describe('CalendarRange', () => {
partialUpdate: true,
},
});
const panels = wrapper.findAll(CalendarPanel);
const panels = wrapper.findAllComponents(CalendarPanel);
const startPanel = panels.at(0);
const endPanel = panels.at(1);
expect(startPanel.vm.partialUpdate).toBe(false);
@@ -83,7 +74,7 @@ describe('CalendarRange', () => {
defaultValue: [new Date(2019, 9, 1), new Date(2019, 11, 1)],
},
});
const panels = wrapper.findAll(CalendarPanel);
const panels = wrapper.findAllComponents(CalendarPanel);
const startPanel = panels.at(0);
const endPanel = panels.at(1);
expect(startPanel.vm.calendarMonth).toBe(9);
__test__/date-picker.test.js
+36 -35
View File
@@ -1,6 +1,7 @@
import { shallowMount, createWrapper, mount } from '@vue/test-utils';
import { format, parse } from 'date-fns';
import DatePicker from '../src/date-picker.vue';
import Popup from '../src/popup';
import DatePicker from '../src/date-picker';
let wrapper;
@@ -9,28 +10,28 @@ afterEach(() => {
});
describe('DatePicker', () => {
it('feat: open and close the popup', () => {
it('feat: open and close the popup', async () => {
wrapper = mount(DatePicker, {
attachToDocument: true,
attachTo: document.body,
});
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
// expect click input should show the popup
const input = wrapper.find('input');
input.trigger('mousedown');
await input.trigger('mousedown');
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
// expect click out side should hide the popup
const bodyWrapper = createWrapper(document.body);
bodyWrapper.trigger('mousedown');
await bodyWrapper.trigger('mousedown');
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
// expect focus input should show the popop
input.trigger('focus');
await input.trigger('focus');
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
// expoce keydown tab should hide the popup
input.trigger('keydown.tab');
await input.trigger('keydown.tab');
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
});
it('feat: should init panel and calendar when reopen', () => {
it('feat: should init panel and calendar when reopen', async () => {
wrapper = mount(DatePicker, {
propsData: {
defaultValue: new Date(2019, 9, 1),
@@ -38,15 +39,15 @@ describe('DatePicker', () => {
},
});
const yearBtn = wrapper.find('.mx-btn-current-year');
yearBtn.trigger('click');
await yearBtn.trigger('click');
// change to year panel
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(true);
wrapper.setProps({ open: false });
wrapper.setProps({ open: true });
await wrapper.setProps({ open: false });
await wrapper.setProps({ open: true });
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(false);
});
it('prop: open', () => {
it('prop: open', async () => {
wrapper = mount(DatePicker, {
propsData: {
open: false,
@@ -55,7 +56,7 @@ describe('DatePicker', () => {
const { vm } = wrapper;
vm.openPopup();
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
wrapper.setProps({ open: true });
await wrapper.setProps({ open: true });
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
vm.closePopup();
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
@@ -161,7 +162,7 @@ describe('DatePicker', () => {
expect(tableDate.element).toMatchSnapshot();
});
it('prop: valueType', () => {
it('prop: valueType', async () => {
const value = new Date(2019, 9, 20);
const emitValue = new Date(2019, 9, 22);
wrapper = shallowMount(DatePicker, {
@@ -173,13 +174,13 @@ describe('DatePicker', () => {
const { vm } = wrapper;
expect(vm.text).toBe('2019/10/20');
vm.emitValue(emitValue);
wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
await wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
expect(vm.text).toBe('2019/10/20');
vm.emitValue(emitValue);
wrapper.setProps({ valueType: 'timestamp', value: value.getTime() });
await wrapper.setProps({ valueType: 'timestamp', value: value.getTime() });
expect(vm.text).toBe('2019/10/20');
vm.emitValue(emitValue);
wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
await wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
expect(vm.text).toBe('2019/10/20');
vm.emitValue(emitValue);
const emitted = wrapper.emitted();
@@ -191,12 +192,13 @@ describe('DatePicker', () => {
]);
});
it('prop: shortcut', () => {
it('prop: shortcut', async () => {
const date = new Date(2019, 4, 10);
wrapper = shallowMount(DatePicker, {
propsData: {
open: true,
valueType: 'YYYY/MM/DD',
range: false,
shortcuts: [
{
text: 'Today',
@@ -207,12 +209,11 @@ describe('DatePicker', () => {
],
},
});
const btn = wrapper.find('.mx-btn-shortcut');
btn.trigger('click');
await btn.trigger('click');
const emitted = wrapper.emitted();
expect(emitted.input).toEqual([['2019/05/10']]);
wrapper.setProps({
await wrapper.setProps({
range: true,
shortcuts: [
{
@@ -234,7 +235,7 @@ describe('DatePicker', () => {
popupClass: 'test',
},
});
const popup = wrapper.find('.mx-datepicker-popup');
const popup = wrapper.findComponent(Popup);
expect(popup.classes()).toContain('test');
});
@@ -247,25 +248,25 @@ describe('DatePicker', () => {
},
},
});
const popup = wrapper.find('.mx-datepicker-popup');
const popup = wrapper.findComponent(Popup);
expect(popup.element.style.color).toBe('red');
});
it('prop: confirm', () => {
it('prop: confirm', async () => {
wrapper = shallowMount(DatePicker, {
propsData: {
confirm: true,
},
});
const { vm } = wrapper;
vm.openPopup();
await wrapper.find('input').trigger('focus');
const btn = wrapper.find('.mx-datepicker-btn-confirm');
expect(btn.exists()).toBe(true);
// click the date expect popup don't close
vm.handleSelectDate(new Date(2018, 5, 5));
expect(wrapper.emitted().input).toBeUndefined();
expect(vm.popupVisible).toBe(true);
btn.trigger('click');
await btn.trigger('click');
expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
expect(vm.popupVisible).toBe(false);
});
@@ -291,7 +292,7 @@ describe('DatePicker', () => {
},
});
const popup = wrapper.find('.mx-datepicker-popup');
const popup = wrapper.findComponent(Popup);
expect(popup.element.parentNode).toBe(document.body);
});
@@ -366,7 +367,7 @@ describe('DatePicker', () => {
expect(wrapper.emitted().pick[0][0]).toEqual(new Date(2019, 8, 29));
});
it('Ignore whitespace around separator on manual range input', () => {
it('Ignore whitespace around separator on manual range input', async () => {
const rangeSeparator = ' ~ ';
const text = '2020-02-12';
wrapper = mount(DatePicker, {
@@ -378,13 +379,13 @@ describe('DatePicker', () => {
});
const input = wrapper.find('input');
input.setValue(`${text} ${rangeSeparator} ${text}`);
input.trigger('change');
input.setValue(`${text}${rangeSeparator.trim()}${text}`);
input.trigger('change');
wrapper.setProps({ rangeSeparator: ' - ' });
input.setValue(`${text} - ${text}`);
input.trigger('change');
await input.setValue(`${text} ${rangeSeparator} ${text}`);
await input.trigger('change');
await input.setValue(`${text}${rangeSeparator.trim()}${text}`);
await input.trigger('change');
await wrapper.setProps({ rangeSeparator: ' - ' });
await input.setValue(`${text} - ${text}`);
await input.trigger('change');
expect(wrapper.emitted().input).toEqual([[[text, text]], [[text, text]], [[text, text]]]);
});
__test__/datetime-panel.test.js
+7 -7
View File
@@ -8,7 +8,7 @@ afterEach(() => {
});
describe('DatetimePanel', () => {
it('feat: click date', () => {
it('feat: click date', async () => {
wrapper = mount(DatetimePanel, {
propsData: {
type: 'datetime',
@@ -16,16 +16,16 @@ describe('DatetimePanel', () => {
},
});
const td = wrapper.find('.mx-table-date td:nth-child(4)');
td.trigger('click');
await td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 2, 12));
let timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.exists()).toBe(true);
timeTitle.trigger('click');
await timeTitle.trigger('click');
timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.exists()).toBe(false);
});
it('feat: disabled time', () => {
it('feat: disabled time', async () => {
const disabledDate = date => date < new Date(2019, 9, 2);
const disabledTime = date => date < new Date(2019, 9, 2, 12);
wrapper = mount(DatetimePanel, {
@@ -36,14 +36,14 @@ describe('DatetimePanel', () => {
},
});
const td = wrapper.find('.mx-table-date td:nth-child(4)');
td.trigger('click');
await td.trigger('click');
expect(wrapper.emitted().select).toBeUndefined();
const timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.text()).toBe('2019-10-02');
// set the defaultValue is not disabled
const defaultValue = new Date(2019, 9, 2, 12);
wrapper.setProps({ defaultValue });
td.trigger('click');
await wrapper.setProps({ defaultValue });
await td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
});
});
__test__/datetime-range.test.js
+7 -14
View File
@@ -1,5 +1,4 @@
import { mount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import DatetimeRange from '../src/datetime/datetime-range';
let wrapper;
@@ -11,7 +10,6 @@ afterEach(() => {
describe('DatetimeRange', () => {
it('feat: click dates', async () => {
wrapper = mount(DatetimeRange, {
sync: false,
propsData: {
type: 'datetime',
value: [new Date(2019, 9, 4, 18), new Date(2019, 9, 6, 12)],
@@ -20,21 +18,18 @@ describe('DatetimeRange', () => {
const td = wrapper.find('.mx-table-date td:nth-child(4)');
const td2 = wrapper.find('.mx-table-date td:nth-child(5)');
td.trigger('click');
td2.trigger('click');
await flushPromises();
await td2.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual([
new Date(2019, 9, 2, 18),
new Date(2019, 9, 3, 12),
]);
let timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.exists()).toBe(true);
timeTitle.trigger('click');
await flushPromises();
await timeTitle.trigger('click');
timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.exists()).toBe(false);
td.trigger('click');
td.trigger('click');
await flushPromises();
await td.trigger('click');
expect(wrapper.emitted().select[1][0]).toEqual([
new Date(2019, 9, 2, 18),
new Date(2019, 9, 2, 18),
@@ -54,16 +49,14 @@ describe('DatetimeRange', () => {
});
const td = wrapper.find('.mx-table-date td:nth-child(4)');
td.trigger('click');
td.trigger('click');
await flushPromises();
await td.trigger('click');
expect(wrapper.emitted().select).toBeUndefined();
const timeTitle = wrapper.find('.mx-time-header-title');
expect(timeTitle.text()).toBe('2019-10-02');
const defaultValue = [new Date(2019, 9, 2, 12), new Date(2019, 9, 2, 12)];
wrapper.setProps({ defaultValue });
td.trigger('click');
td.trigger('click');
await flushPromises();
await wrapper.setProps({ defaultValue });
await td.trigger('click');
await td.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(defaultValue);
});
});
__test__/locale.test.js
+11 -6
View File
@@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils';
import DatePicker from '../src/date-picker.vue';
import DatePicker from '../src/date-picker';
import Calendar from '../src/calendar/calendar-panel';
import '../src/locale/zh-cn';
let wrapper;
@@ -20,7 +21,7 @@ describe('Locale', () => {
expect(wrapper.find('.mx-table-date td').element.title).toBe('2019-09-30');
});
it('prop: lang - string', () => {
it('prop: lang - string', async () => {
wrapper = mount(DatePicker, {
propsData: {
value: new Date(2019, 9, 10),
@@ -30,14 +31,18 @@ describe('Locale', () => {
},
});
expect(wrapper.find('.mx-table-date th').text()).toBe('Su');
expect(wrapper.find('.mx-table-month td').text()).toBe('Jan');
expect(wrapper.find('.mx-btn-current-month').text()).toBe('Oct');
expect(wrapper.find('.mx-table-date .active').element.title).toBe('Oct 10, 2019');
expect(wrapper.find('.mx-btn-current-month').text()).toBe('Oct');
await wrapper.findComponent(Calendar).setData({ panel: 'month' });
// expect(wrapper.vm.panel).toBe('month');
expect(wrapper.find('.mx-table-month td').text()).toBe('Jan');
wrapper.setProps({ lang: 'zh-cn' });
await wrapper.findComponent(Calendar).setData({ panel: 'date' });
expect(wrapper.find('.mx-table-date th').text()).toBe('一');
expect(wrapper.find('.mx-table-month td').text()).toBe('1月');
expect(wrapper.find('.mx-btn-current-month').text()).toBe('10月');
expect(wrapper.find('.mx-table-date .active').element.title).toBe('10月 10, 2019');
expect(wrapper.find('.mx-btn-current-month').text()).toBe('10月');
await wrapper.findComponent(Calendar).setData({ panel: 'month' });
expect(wrapper.find('.mx-table-month td').text()).toBe('1月');
});
it('prop: lang - object', () => {
__test__/table-date.test.js
+1 -3
View File
@@ -11,9 +11,7 @@ describe('TableDate', () => {
it('corrent render', () => {
wrapper = mount(TableDate, {
propsData: {
calendarYear: 2019,
calendarMonth: 9,
firstDayOfWeek: 1,
calendar: new Date(2019, 9, 1, 0, 0, 0),
titleFormat: 'DD/MM/YYYY',
},
});
__test__/table-month.test.js
+2 -1
View File
@@ -11,7 +11,8 @@ describe('TableMonth', () => {
it('correct render', () => {
wrapper = mount(TableMonth, {
propsData: {
getClasses: month => {
calendar: new Date(2019, 9, 1, 0, 0, 0),
getCellClasses: month => {
if (month === 9) {
return 'active';
}
__test__/table-year.test.js
+1 -1
View File
@@ -11,7 +11,7 @@ describe('TableYear', () => {
it('decade=2010', () => {
wrapper = mount(TableYear, {
propsData: {
decade: 2010,
calendar: new Date(2019, 9, 1, 0, 0, 0),
},
});
expect(wrapper.element).toMatchSnapshot();
__test__/time-panel.test.js
+5 -5
View File
@@ -62,7 +62,7 @@ describe('TimePanel', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('feat: emit select event when click', () => {
it('feat: emit select event when click', async () => {
wrapper = mount(TimePanel, {
propsData: {
format: 'hh:mm:ss a',
@@ -72,15 +72,15 @@ describe('TimePanel', () => {
const hour = wrapper.find('[data-type=hour] li:nth-child(2)');
hour.trigger('click');
expect(wrapper.emitted().select[0][0]).toEqual(new Date(2019, 9, 10, 1));
wrapper.setProps({ value: new Date(2019, 9, 10, 1) });
await wrapper.setProps({ value: new Date(2019, 9, 10, 1) });
const minute = wrapper.find('[data-type=minute] li:nth-child(2)');
minute.trigger('click');
expect(wrapper.emitted().select[1][0]).toEqual(new Date(2019, 9, 10, 1, 1));
wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1) });
await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1) });
const second = wrapper.find('[data-type=second] li:nth-child(2)');
second.trigger('click');
expect(wrapper.emitted().select[2][0]).toEqual(new Date(2019, 9, 10, 1, 1, 1));
wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1, 1) });
await wrapper.setProps({ value: new Date(2019, 9, 10, 1, 1, 1) });
const pm = wrapper.find('[data-type=ampm] li:nth-child(2)');
pm.trigger('click');
expect(wrapper.emitted().select[3][0]).toEqual(new Date(2019, 9, 10, 13, 1, 1));
@@ -105,7 +105,7 @@ describe('TimePanel', () => {
format: {},
},
});
const cols = wrapper.find(ListColumns);
const cols = wrapper.findComponent(ListColumns);
expect(cols.props('showHour')).toBe(true);
expect(cols.props('showMinute')).toBe(true);
expect(cols.props('showSecond')).toBe(true);