test: update calendar test
tangjinzhou
parent
590522678a
commit
5757be5150
|
|
@ -156,12 +156,23 @@ export interface CalendarHeaderProps<DateType> {
|
|||
export default defineComponent<CalendarHeaderProps<any>>({
|
||||
name: 'CalendarHeader',
|
||||
inheritAttrs: false,
|
||||
props: [
|
||||
'mode',
|
||||
'prefixCls',
|
||||
'value',
|
||||
'validRange',
|
||||
'generateConfig',
|
||||
'locale',
|
||||
'mode',
|
||||
'fullscreen',
|
||||
] as any,
|
||||
setup(_props, { attrs }) {
|
||||
const divRef = ref<HTMLDivElement>(null);
|
||||
return () => {
|
||||
const { prefixCls, fullscreen, mode, onChange, onModeChange } = attrs;
|
||||
const props = { ..._props, ...attrs };
|
||||
const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
|
||||
const sharedProps = {
|
||||
...attrs,
|
||||
...props,
|
||||
onChange,
|
||||
fullscreen,
|
||||
divRef,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Calendar Calendar should support locale 1`] = `
|
||||
<div class=" ant-fullcalendar-fullscreen">
|
||||
<div class="ant-fullcalendar-header">
|
||||
<div class="ant-select ant-fullcalendar-year-select ant-select-single ant-select-show-arrow">
|
||||
<div class="ant-picker-calendar ant-picker-calendar-full">
|
||||
<div class="ant-picker-calendar-header">
|
||||
<div class="ant-select ant-picker-calendar-year-select ant-select-single ant-select-show-arrow">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item" title="2018年">2018年</span>
|
||||
|
|
@ -11,7 +11,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
|||
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-select ant-fullcalendar-month-select ant-select-single ant-select-show-arrow">
|
||||
<div class="ant-select ant-picker-calendar-month-select ant-select-single ant-select-show-arrow">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item" title="Oct">Oct</span>
|
||||
|
|
@ -19,382 +19,378 @@ exports[`Calendar Calendar should support locale 1`] = `
|
|||
</div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>
|
||||
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>
|
||||
</div>
|
||||
<div class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen" tabindex="0">
|
||||
<!---->
|
||||
<div class="ant-fullcalendar-calendar-body">
|
||||
<table class="ant-fullcalendar-table" cellspacing="0" role="grid">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<!---->
|
||||
<th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
|
||||
<th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
|
||||
<th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
|
||||
<th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
|
||||
<th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
|
||||
<th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
|
||||
<th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-fullcalendar-tbody">
|
||||
<tr role="row" class="">
|
||||
<!---->
|
||||
<td role="gridcell" title="September 30, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">30</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
<div tabindex="0" class="ant-picker-panel">
|
||||
<div class="ant-picker-date-panel">
|
||||
<!---->
|
||||
<div class="ant-picker-body">
|
||||
<table class="ant-picker-content">
|
||||
<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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td title="2018-09-30" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">30</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 1, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">01</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-01" class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">01</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 2, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">02</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-02" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">02</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 3, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">03</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-03" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">03</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 4, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">04</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-04" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">04</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 5, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">05</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-05" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">05</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 6, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">06</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-06" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">06</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="row" class="">
|
||||
<!---->
|
||||
<td role="gridcell" title="October 7, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">07</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2018-10-07" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">07</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 8, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">08</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-08" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">08</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 9, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">09</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-09" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">09</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 10, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">10</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-10" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">10</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 11, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">11</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-11" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">11</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 12, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">12</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-12" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">12</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 13, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">13</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-13" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">13</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
|
||||
<!---->
|
||||
<td role="gridcell" title="October 14, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">14</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2018-10-14" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">14</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 15, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">15</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-15" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">15</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 16, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">16</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-16" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">16</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 17, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">17</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-17" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">17</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 18, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">18</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-18" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">18</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 19, 2018" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">19</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-19" class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today ant-picker-cell-selected">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today">
|
||||
<div class="ant-picker-calendar-date-value">19</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 20, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">20</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-20" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">20</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="row" class="">
|
||||
<!---->
|
||||
<td role="gridcell" title="October 21, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">21</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2018-10-21" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">21</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 22, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">22</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-22" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">22</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 23, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">23</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-23" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">23</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 24, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">24</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-24" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">24</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 25, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">25</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-25" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">25</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 26, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">26</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-26" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">26</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 27, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">27</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-27" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">27</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="row" class="">
|
||||
<!---->
|
||||
<td role="gridcell" title="October 28, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">28</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2018-10-28" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">28</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 29, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">29</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-29" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">29</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 30, 2018" class="ant-fullcalendar-cell">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">30</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-30" class="ant-picker-cell ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">30</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="October 31, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">31</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-10-31" class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">31</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 1, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">01</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-01" class="ant-picker-cell ant-picker-cell-start">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">01</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 2, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">02</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-02" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">02</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 3, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">03</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-03" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">03</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="row" class="">
|
||||
<!---->
|
||||
<td role="gridcell" title="November 4, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">04</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td title="2018-11-04" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">04</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 5, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">05</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-05" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">05</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 6, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">06</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-06" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">06</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 7, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">07</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-07" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">07</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 8, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">08</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-08" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">08</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 9, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">09</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-09" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">09</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td role="gridcell" title="November 10, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
|
||||
<div class="ant-fullcalendar-date">
|
||||
<div class="ant-fullcalendar-value">10</div>
|
||||
<div class="ant-fullcalendar-content">
|
||||
<!---->
|
||||
</td>
|
||||
<td title="2018-11-10" class="ant-picker-cell">
|
||||
<div class="ant-picker-cell-inner ant-picker-calendar-date">
|
||||
<div class="ant-picker-calendar-date-value">10</div>
|
||||
<div class="ant-picker-calendar-date-content">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Moment from 'moment';
|
||||
import dayjs from 'dayjs';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
import MockDate from 'mockdate';
|
||||
|
|
@ -6,15 +6,26 @@ import Calendar from '..';
|
|||
import Header from '../Header';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import generateConfig from '../../vc-picker/generate/dayjs';
|
||||
|
||||
function $$(className) {
|
||||
return document.body.querySelectorAll(className);
|
||||
}
|
||||
describe('Calendar', () => {
|
||||
mountTest(Calendar);
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
function openSelect(wrapper, className) {
|
||||
wrapper.find(className).find('.ant-select-selector').trigger('mousedown');
|
||||
}
|
||||
|
||||
function findSelectItem(wrapper) {
|
||||
return wrapper.findAll('.ant-select-item-option');
|
||||
}
|
||||
|
||||
function clickSelectItem(wrapper, index = 0) {
|
||||
findSelectItem(wrapper)[index].trigger('click');
|
||||
}
|
||||
|
||||
it('Calendar should be selectable', async () => {
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount(
|
||||
|
|
@ -26,18 +37,18 @@ describe('Calendar', () => {
|
|||
{ sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click');
|
||||
wrapper.findAll('.ant-picker-cell')[0].trigger('click');
|
||||
});
|
||||
await asyncExpect(() => {
|
||||
expect(onSelect).toHaveBeenCalledWith(expect.anything());
|
||||
const value = onSelect.mock.calls[0][0];
|
||||
expect(Moment.isMoment(value)).toBe(true);
|
||||
expect(dayjs.isDayjs(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('only Valid range should be selectable', async () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
|
||||
const validRange = [dayjs('2018-02-02'), dayjs('2018-02-18')];
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
|
|
@ -45,7 +56,7 @@ describe('Calendar', () => {
|
|||
<Calendar
|
||||
onSelect={onSelect}
|
||||
validRange={validRange}
|
||||
defaultValue={Moment('2018-02-02')}
|
||||
defaultValue={dayjs('2018-02-02')}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -53,15 +64,15 @@ describe('Calendar', () => {
|
|||
{ sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
wrapper.findAll('[title="February 1, 2018"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="February 2, 2018"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="2018-02-01"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="2018-02-02"]')[0].trigger('click');
|
||||
expect(onSelect.mock.calls.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('dates other than in valid range should be disabled', async () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
|
||||
const validRange = [dayjs('2018-02-02'), dayjs('2018-02-18')];
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
|
|
@ -69,7 +80,7 @@ describe('Calendar', () => {
|
|||
<Calendar
|
||||
onSelect={onSelect}
|
||||
validRange={validRange}
|
||||
defaultValue={Moment('2018-02-02')}
|
||||
defaultValue={dayjs('2018-02-02')}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -77,17 +88,15 @@ describe('Calendar', () => {
|
|||
{ sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
wrapper.findAll('[title="February 20, 2018"]')[0].trigger('click');
|
||||
expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain(
|
||||
'ant-fullcalendar-disabled-cell',
|
||||
);
|
||||
wrapper.findAll('[title="2018-02-20"]')[0].trigger('click');
|
||||
expect(wrapper.find('[title="2018-02-20"]').classes()).toContain('ant-picker-cell-disabled');
|
||||
expect(onSelect.mock.calls.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('months other than in valid range should be disabled', async () => {
|
||||
const onSelect = jest.fn();
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [dayjs('2018-02-02'), dayjs('2018-05-18')];
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
|
|
@ -95,7 +104,7 @@ describe('Calendar', () => {
|
|||
<Calendar
|
||||
onSelect={onSelect}
|
||||
validRange={validRange}
|
||||
defaultValue={Moment('2018-02-02')}
|
||||
defaultValue={dayjs('2018-02-02')}
|
||||
mode="year"
|
||||
/>
|
||||
);
|
||||
|
|
@ -104,24 +113,24 @@ describe('Calendar', () => {
|
|||
{ sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('[title="Jan"]')[0].classes()).toContain(
|
||||
'ant-fullcalendar-month-panel-cell-disabled',
|
||||
expect(wrapper.findAll('[title="2018-01"]')[0].classes()).toContain(
|
||||
'ant-picker-cell-disabled',
|
||||
);
|
||||
expect(wrapper.findAll('[title="Feb"]')[0].classes()).not.toContain(
|
||||
'ant-fullcalendar-month-panel-cell-disabled',
|
||||
expect(wrapper.findAll('[title="2018-02"]')[0].classes()).not.toContain(
|
||||
'ant-picker-cell-disabled',
|
||||
);
|
||||
expect(wrapper.findAll('[title="Jun"]')[0].classes()).toContain(
|
||||
'ant-fullcalendar-month-panel-cell-disabled',
|
||||
expect(wrapper.findAll('[title="2018-06"]')[0].classes()).toContain(
|
||||
'ant-picker-cell-disabled',
|
||||
);
|
||||
wrapper.findAll('[title="Jan"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="Mar"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="2018-01"]')[0].trigger('click');
|
||||
wrapper.findAll('[title="2018-03"]')[0].trigger('click');
|
||||
expect(onSelect.mock.calls.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('months other than in valid range should not be shown in header', async () => {
|
||||
document.body.innerHTML = '';
|
||||
const validRange = [Moment('2017-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [dayjs('2017-02-02'), dayjs('2018-05-18')];
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const wrapper = mount(
|
||||
{
|
||||
|
|
@ -131,30 +140,30 @@ describe('Calendar', () => {
|
|||
},
|
||||
{ sync: false, attachTo: 'body' },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
wrapper
|
||||
.findAll('.ant-fullcalendar-year-select .ant-select-selector')[0]
|
||||
.element.dispatchEvent(new MouseEvent('mousedown'));
|
||||
});
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-select-item-option').length).toBe(2);
|
||||
}, 100);
|
||||
await sleep();
|
||||
openSelect(wrapper, '.ant-picker-calendar-year-select');
|
||||
await sleep();
|
||||
clickSelectItem(wrapper);
|
||||
await sleep();
|
||||
openSelect(wrapper, '.ant-picker-calendar-month-select');
|
||||
await sleep();
|
||||
// 2 years and 11 months
|
||||
expect(wrapper.findAll('.ant-select-item-option').length).toBe(13);
|
||||
});
|
||||
|
||||
it('getDateRange should returns a disabledDate function', async () => {
|
||||
const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
|
||||
const validRange = [dayjs('2018-02-02'), dayjs('2018-05-18')];
|
||||
const wrapper = mount(Calendar, {
|
||||
props: {
|
||||
validRange,
|
||||
defaultValue: Moment('2018-02-02'),
|
||||
defaultValue: dayjs('2018-02-02'),
|
||||
},
|
||||
sync: false,
|
||||
});
|
||||
await asyncExpect(() => {
|
||||
const instance = wrapper.vm;
|
||||
const disabledDate = instance.getDateRange(validRange);
|
||||
expect(disabledDate(Moment('2018-06-02'))).toBe(true);
|
||||
expect(disabledDate(Moment('2018-04-02'))).toBe(false);
|
||||
const { disabledDate } = wrapper.getComponent({ name: 'PickerPanel' }).props();
|
||||
expect(disabledDate(dayjs('2018-06-02'))).toBe(true);
|
||||
expect(disabledDate(dayjs('2018-04-02'))).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -163,10 +172,10 @@ describe('Calendar', () => {
|
|||
const yearMode = 'year';
|
||||
const wrapper = mount(Calendar, { sync: false });
|
||||
await sleep(50);
|
||||
expect(wrapper.vm.sMode).toEqual(monthMode);
|
||||
expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(monthMode);
|
||||
wrapper.setProps({ mode: 'year' });
|
||||
await sleep(50);
|
||||
expect(wrapper.vm.sMode).toEqual(yearMode);
|
||||
expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(yearMode);
|
||||
});
|
||||
|
||||
it('Calendar should switch mode', async () => {
|
||||
|
|
@ -181,17 +190,17 @@ describe('Calendar', () => {
|
|||
sync: false,
|
||||
});
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.vm.sMode).toEqual(yearMode);
|
||||
expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(yearMode);
|
||||
wrapper.setProps({ mode: monthMode });
|
||||
});
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.vm.sMode).toEqual(monthMode);
|
||||
expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(monthMode);
|
||||
expect(onPanelChangeStub).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('Calendar should support locale', async () => {
|
||||
MockDate.set(Moment('2018-10-19'));
|
||||
MockDate.set(dayjs('2018-10-19'));
|
||||
// eslint-disable-next-line
|
||||
const zhCN = require('../locale/zh_CN').default;
|
||||
const wrapper = mount(Calendar, {
|
||||
|
|
@ -208,7 +217,7 @@ describe('Calendar', () => {
|
|||
|
||||
it('should trigger onPanelChange when click last month of date', () => {
|
||||
const onPanelChange = jest.fn();
|
||||
const date = new Moment('1990-09-03');
|
||||
const date = new dayjs('1990-09-03');
|
||||
const wrapper = mount(Calendar, {
|
||||
props: {
|
||||
value: date,
|
||||
|
|
@ -216,7 +225,7 @@ describe('Calendar', () => {
|
|||
},
|
||||
sync: false,
|
||||
});
|
||||
wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click');
|
||||
wrapper.findAll('.ant-picker-cell')[0].trigger('click');
|
||||
|
||||
expect(onPanelChange).toHaveBeenCalled();
|
||||
expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
|
||||
|
|
@ -224,7 +233,7 @@ describe('Calendar', () => {
|
|||
|
||||
it('switch should work correctly without prop mode', async () => {
|
||||
const onPanelChange = jest.fn();
|
||||
const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8)));
|
||||
const date = new dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
|
||||
const wrapper = mount(Calendar, {
|
||||
props: {
|
||||
value: date,
|
||||
|
|
@ -234,13 +243,13 @@ describe('Calendar', () => {
|
|||
attachTo: 'body',
|
||||
});
|
||||
await sleep(300);
|
||||
expect(wrapper.vm.sMode).toBe('month');
|
||||
expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(1);
|
||||
expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(0);
|
||||
expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toBe('month');
|
||||
expect(wrapper.findAll('.ant-picker-date-panel').length).toBe(1);
|
||||
expect(wrapper.findAll('.ant-picker-month-panel').length).toBe(0);
|
||||
await wrapper.findAll('.ant-radio-button-input[value="year"]')[0].trigger('change');
|
||||
await sleep(300);
|
||||
expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(0);
|
||||
expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(1);
|
||||
expect(wrapper.findAll('.ant-picker-date-panel').length).toBe(0);
|
||||
expect(wrapper.findAll('.ant-picker-month-panel').length).toBe(1);
|
||||
expect(onPanelChange).toHaveBeenCalled();
|
||||
expect(onPanelChange.mock.calls[0][1]).toEqual('year');
|
||||
});
|
||||
|
|
@ -252,7 +261,9 @@ describe('Calendar', () => {
|
|||
render() {
|
||||
return (
|
||||
<Header
|
||||
onValueChange={onValueChange}
|
||||
prefixCls="ant-picker-calendar"
|
||||
onChange={onValueChange}
|
||||
generateConfig={generateConfig}
|
||||
value={value}
|
||||
validRange={[start, end]}
|
||||
locale={{ year: '年' }}
|
||||
|
|
@ -266,53 +277,55 @@ describe('Calendar', () => {
|
|||
},
|
||||
);
|
||||
await sleep(50);
|
||||
wrapper.findAll('.ant-select-selector')[0].element.dispatchEvent(new MouseEvent('mousedown'));
|
||||
openSelect(wrapper, '.ant-picker-calendar-year-select');
|
||||
await sleep(50);
|
||||
$$('.ant-select-item-option')[0].click();
|
||||
clickSelectItem(wrapper);
|
||||
await sleep(50);
|
||||
};
|
||||
|
||||
it('if value.month > end.month, set value.month to end.month', async () => {
|
||||
const value = new Moment('1990-01-03');
|
||||
const start = new Moment('2019-04-01');
|
||||
const end = new Moment('2019-11-01');
|
||||
const value = new dayjs('1990-01-03');
|
||||
const start = new dayjs('2019-04-01');
|
||||
const end = new dayjs('2019-11-01');
|
||||
const onValueChange = jest.fn();
|
||||
await createWrapper(start, end, value, onValueChange);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3'));
|
||||
});
|
||||
it('if value.month > end.month, set value.month to end.month1', async () => {
|
||||
const value = new Moment('1990-01-03');
|
||||
const start = new Moment('2019-04-01');
|
||||
const end = new Moment('2019-11-01');
|
||||
const value = new dayjs('1990-01-03');
|
||||
const start = new dayjs('2019-04-01');
|
||||
const end = new dayjs('2019-11-01');
|
||||
const onValueChange = jest.fn();
|
||||
await createWrapper(start, end, value, onValueChange);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3'));
|
||||
});
|
||||
|
||||
it('if start.month > value.month, set value.month to start.month ', async () => {
|
||||
const value = new Moment('1990-01-03');
|
||||
const start = new Moment('2019-11-01');
|
||||
const end = new Moment('2019-03-01');
|
||||
const value = new dayjs('1990-01-03');
|
||||
const start = new dayjs('2019-11-01');
|
||||
const end = new dayjs('2019-03-01');
|
||||
const onValueChange = jest.fn();
|
||||
await createWrapper(start, end, value, onValueChange);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('10'));
|
||||
});
|
||||
|
||||
it('onMonthChange should work correctly', async () => {
|
||||
const start = new Moment('2018-11-01');
|
||||
const end = new Moment('2019-03-01');
|
||||
const value = new Moment('2018-12-03');
|
||||
const start = new dayjs('2018-11-01');
|
||||
const end = new dayjs('2019-03-01');
|
||||
const value = new dayjs('2018-12-03');
|
||||
const onValueChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Header
|
||||
onValueChange={onValueChange}
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={generateConfig}
|
||||
onChange={onValueChange}
|
||||
value={value}
|
||||
validRange={[start, end]}
|
||||
locale={{ year: '年' }}
|
||||
type="month"
|
||||
locale={{ year: '年', locale: 'zh_CN' }}
|
||||
mode="month"
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
@ -322,33 +335,31 @@ describe('Calendar', () => {
|
|||
attachTo: 'body',
|
||||
},
|
||||
);
|
||||
await sleep(50);
|
||||
wrapper
|
||||
.findAll('.ant-fullcalendar-month-select .ant-select-selector')[0]
|
||||
.element.dispatchEvent(new MouseEvent('mousedown'));
|
||||
await sleep(50);
|
||||
wrapper.findAll('.ant-select-item-option')[0].trigger('click');
|
||||
await sleep(50);
|
||||
await sleep();
|
||||
openSelect(wrapper, '.ant-picker-calendar-month-select');
|
||||
await sleep();
|
||||
clickSelectItem(wrapper);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.month(10));
|
||||
});
|
||||
|
||||
it('onTypeChange should work correctly', () => {
|
||||
const onTypeChange = jest.fn();
|
||||
const value = new Moment('2018-12-03');
|
||||
const value = new dayjs('2018-12-03');
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Header
|
||||
onTypeChange={onTypeChange}
|
||||
locale={{ year: '年', month: '月' }}
|
||||
prefixCls="ant-picker-calendar"
|
||||
generateConfig={generateConfig}
|
||||
onModeChange={onTypeChange}
|
||||
locale={{ year: '年', month: '月', locale: 'zh_CN' }}
|
||||
value={value}
|
||||
type="date"
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
const buttons = wrapper.findAll('.ant-radio-button-input');
|
||||
buttons[buttons.length - 1].trigger('change');
|
||||
wrapper.findAll('input[type="radio"]')[1].trigger('change');
|
||||
expect(onTypeChange).toHaveBeenCalledWith('year');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -86,6 +86,12 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
|
|||
emit('update:open', open);
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFocus = () => {
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
const onPanelChange = (date: DateType, mode: PanelMode | null) => {
|
||||
const value = maybeToString(date);
|
||||
emit('panelChange', value, mode);
|
||||
|
|
@ -206,8 +212,8 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
|
|||
direction={direction.value}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={props.onFocus}
|
||||
onBlur={props.onBlur}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue