Skip to content

Commit

Permalink
feat(module: calendar): update testing coverage (#474)
Browse files Browse the repository at this point in the history
  • Loading branch information
@3fuyu @fisherspy
3fuyu authored and fisherspy committed Jun 18, 2019
1 parent 51772f7 commit 7dd77ba
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 7 deletions.
159 changes: 157 additions & 2 deletions components/calendar/calendar.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { By } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
Expand All @@ -9,6 +9,7 @@ import { ModalService } from '../modal/modal.service';
import { ModalComponent } from '../modal/modal.component';
import { CalendarModule } from './calendar.module';
import { dispatchTouchEvent } from '../core/testing';
import { CalendarComponent } from './calendar.component';

describe('CalendarComponent', () => {
let component: TestCalendarBasicComponent;
Expand Down Expand Up @@ -63,6 +64,17 @@ describe('CalendarComponent', () => {
);
});

it('should check same day', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
fixture.detectChanges();

expect(component.datepicker.isSameDate()).toContain(
'need two params',
'check same day is right'
);
});

it('should ngModel one', () => {
component.state.date = new Date(2018, 8, 2);
component.state.show = true;
Expand Down Expand Up @@ -99,6 +111,66 @@ describe('CalendarComponent', () => {
);
});

it('should trigger clear', () => {
component.state.date = new Date(2018, 8, 2);
component.state.now = new Date(2018, 8, 2);
component.state.type = 'one';
component.state.show = true;
fixture.detectChanges();

calendarEle.nativeElement
.querySelectorAll('.date .row')[1]
.querySelector('.cell')
.click();
fixture.detectChanges();

calendarEle.nativeElement
.querySelector('.right')
.click();
fixture.detectChanges();

expect(calendarEle.nativeElement.querySelector('.right').innerText).toBe(
'清除',
'trigger clear is right'
);
});

it('should write ngModel one throw error 1', () => {
component.state.date = [new Date(2018, 8, 2), new Date(new Date(2018, 8, 2).getFullYear(), new Date(2018, 8, 2).getMonth(), new Date(2018, 8, 2).getDate() + 1)];
component.state.now = new Date(2018, 8, 2);
component.state.type = 'one';
component.state.show = true;
const displayDay = '2';
fixture.detectChanges();
calendarEle.nativeElement
.querySelectorAll('.date .row')[1]
.querySelector('.cell')
.click();
fixture.detectChanges();
expect(calendarEle.nativeElement.querySelectorAll('.row .cell .date.date-selected')[0].innerText).toContain(
displayDay,
'write ngModel one throw error 1 is right'
);
});

it('should write ngModel one throw error 2', () => {
component.state.date = [];
component.state.now = new Date(2018, 8, 2);
component.state.type = 'one';
component.state.show = true;
const displayDay = '2';
fixture.detectChanges();
calendarEle.nativeElement
.querySelectorAll('.date .row')[1]
.querySelector('.cell')
.click();
fixture.detectChanges();
expect(calendarEle.nativeElement.querySelectorAll('.row .cell .date.date-selected')[0].innerText).toContain(
displayDay,
'write ngModel one throw error 2 is right'
);
});

it('should ngModel range', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
Expand All @@ -117,6 +189,32 @@ describe('CalendarComponent', () => {
);
});

it('should show default value', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
component.state.type = 'range';
component.state.defaultValue = [new Date(+now), new Date(+now + 86400000)];
const displayDay = '2';
fixture.detectChanges();
expect(calendarEle.nativeElement.querySelectorAll('.row .cell .date.date-selected')[0].innerText).toContain(
displayDay,
'show default value is right'
);
});

it('should show default time value', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
component.state.type = 'range';
component.state.defaultValue = [new Date(+now), new Date(+now + 86400000)];
const displayDay = '2';
fixture.detectChanges();
expect(calendarEle.nativeElement.querySelectorAll('.row .cell .date.date-selected')[0].innerText).toContain(
displayDay,
'show default value is right'
);
});

it('should write ngModel range', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
Expand All @@ -139,6 +237,28 @@ describe('CalendarComponent', () => {
);
});

it('should select single month range', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 10);
component.state.type = 'range';
component.state.date = [new Date(2018, 8, 10), new Date(2018, 8, 2)];
const displayDay = '2';
fixture.detectChanges();
calendarEle.nativeElement
.querySelectorAll('.date .row')[3]
.querySelector('.cell')
.click();
calendarEle.nativeElement
.querySelectorAll('.date .row')[1]
.querySelector('.cell')
.click();
fixture.detectChanges();
expect(calendarEle.nativeElement.querySelectorAll('.row .cell .date.date-selected')[0].innerText).toContain(
displayDay,
'select single month range is right'
);
});

it('should min date', () => {
component.state.show = true;
component.state.now = new Date(2018, 8, 2);
Expand All @@ -165,10 +285,37 @@ describe('CalendarComponent', () => {
);
});

it('should show picker', () => {
it('should scroll date picker', () => {
component.state.show = true;
component.state.type = 'one';
component.state.pickTime = true;
component.state.minDate = new Date(2018, 6, 2);
component.state.maxDate = new Date(2018, 10, 2);
component.state.now = new Date(2018, 8, 2);
fixture.detectChanges();
let touchEl = calendarEle.nativeElement
.querySelector('.content .wrapper');

dispatchTouchEvent(touchEl, 'touchstart', 0, 0);
fixture.detectChanges();
dispatchTouchEvent(touchEl, 'touchmove', 0, 100);
fixture.detectChanges();
dispatchTouchEvent(touchEl, 'touchend', 0, 200);
fixture.detectChanges();

component.datepicker.datepicker.genMonthData();
component.datepicker.datepicker.createOnScroll()({ client: 750, top: 760, full: 750 });

expect(component.datepicker.datepicker.computeVisible(750, 760)).toBe(
false,
'scroll date picker is right');
});

it('should show time picker', () => {
component.state.show = true;
component.state.type = 'one';
component.state.pickTime = true;
component.state.defaultTimeValue = new Date(2000, 0, 1, 8);
component.state.now = new Date(2018, 8, 2);
component.state.mimDate = new Date(2018, 8, 2);
component.state.maxDate = new Date(2018, 8, 3);
Expand Down Expand Up @@ -306,11 +453,13 @@ for (const key in extra) {
[minDate]="this.state.minDate"
[maxDate]="this.state.maxDate"
[pickTime]="this.state.pickTime"
[prefixCls]="this.state.prefixCls"
[type]="this.state.type"
[rowSize]="this.state.rowSize"
[showShortcut]="this.state.showShortcut"
[infinite]="this.state.infinite"
[defaultValue]="this.state.defaultValue"
[defaultTimeValue]="this.state.defaultTimeValue"
[onSelect]="this.state.onSelect"
(onCancel)="onCancel()"
(onConfirm)="onConfirm($event)"
Expand All @@ -327,6 +476,7 @@ export class TestCalendarBasicComponent {
type: 'range',
_enterDirection: '',
rowSize: 'normal',
prefixCls: 'calendar-spec',
showShortcut: false,
infinite: true,
defaultValue: undefined,
Expand All @@ -338,6 +488,11 @@ export class TestCalendarBasicComponent {
}
};

@ViewChild(CalendarComponent)
datepicker: CalendarComponent;

constructor() {}

initPara() {
this.state = {
...this.state,
Expand Down
12 changes: 9 additions & 3 deletions components/calendar/calendar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
Input,
Output,
HostBinding,
EventEmitter
EventEmitter,
ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DateModels } from './date/DataTypes';
Expand All @@ -17,6 +18,7 @@ import { CalendarPropsType } from './calendar.props.component';
import { LocaleProviderService } from '../locale-provider/locale-provider.service';
import { mergeDateTime, isSameDate } from './util/index';
import { takeUntil } from 'rxjs/operators';
import { CalendarDatePickerComponent } from './datepicker/datepicker.component';
import { Subject } from 'rxjs';

export { CalendarPropsType };
Expand All @@ -41,6 +43,7 @@ export class CalendarComponent implements ControlValueAccessor, OnInit, OnDestro
contentAnimateClass: string;
maskAnimateClass: string;
showClear: boolean = false;
isSameDate: Function = isSameDate;

props = {
visible: false,
Expand Down Expand Up @@ -70,6 +73,9 @@ export class CalendarComponent implements ControlValueAccessor, OnInit, OnDestro
private onChangeFn: (date: Date|Array<Date>) => void = () => {};
private onTouchFn: (date: Date|Array<Date>) => void = () => {};

@ViewChild(CalendarDatePickerComponent)
datepicker: CalendarDatePickerComponent;

@Input()
set locale(value) {
if (value === 'enUS') {
Expand Down Expand Up @@ -278,10 +284,10 @@ export class CalendarComponent implements ControlValueAccessor, OnInit, OnDestro
} else {
newState = {
...newState,
timePickerTitle: +newDate >= +startDate || isSameDate(startDate, newDate) ? locale.selectEndTime : locale.selectStartTime,
timePickerTitle: +newDate >= +startDate || this.isSameDate(startDate, newDate) ? locale.selectEndTime : locale.selectStartTime,
disConfirmBtn: false,
endDate:
pickTime && !useDateTime && (+newDate >= +startDate || isSameDate(startDate, newDate))
pickTime && !useDateTime && (+newDate >= +startDate || this.isSameDate(startDate, newDate))
? new Date(+mergeDateTime(newDate, startDate) + 3600000)
: newDate
};
Expand Down
4 changes: 2 additions & 2 deletions components/calendar/datepicker/datepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export class CalendarDatePickerComponent extends CalendarDatePickerBaseComponent
};

onTouchStart(event) {
this._lastY = event.touches[0].screenY;
this._lastY = event.touches[0].screenY || event.touches[0].pageY;
this._delta = this._initDelta;
}

Expand All @@ -117,7 +117,7 @@ export class CalendarDatePickerComponent extends CalendarDatePickerBaseComponent
const isReachTop = ele.scrollTop === 0;

if (isReachTop) {
this._delta = event.touches[0].screenY - this._lastY;
this._delta = (event.touches[0].screenY || event.touches[0].pageY) - this._lastY;
if (this._delta > 0) {
event.preventDefault();
if (this._delta > 80) {
Expand Down

0 comments on commit 7dd77ba

Please sign in to comment.