Skip to content

Commit be3b4dc

Browse files
zdrawkuzdrawku
authored
Merge pull request #8089 from IgniteUI/ddincheva/monthPickerAnimation
Month picker should not thrown an error when navigating with PgUp and PgDown
2 parents 37f7c06 + 18db2ea commit be3b4dc

File tree

5 files changed

+49
-28
lines changed

5 files changed

+49
-28
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
33
import { FormsModule } from '@angular/forms';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { configureTestSuite } from '../test-utils/configure-suite';
6-
import { UIInteractions } from '../test-utils/ui-interactions.spec';
6+
import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
77
import { IgxCalendarComponent, IgxCalendarModule } from './public_api';
88
import { IgxDatePickerComponent, IgxDatePickerModule } from '../date-picker/date-picker.component';
99
import { DateRangeType } from '../core/dates';
@@ -752,9 +752,9 @@ describe('Multi-View Calendar - ', () => {
752752
expect(document.activeElement).toEqual(monthDates[10]);
753753
}));
754754

755-
it('Verify that months increment/decrement continuously on enter keydown', (fakeAsync(() => {
755+
it('Verify that months increment/decrement continuously on enter keydown', (async() => {
756756
calendar.monthsViewNumber = 2;
757-
tick(100);
757+
await wait(100);
758758
fixture.detectChanges();
759759
const dates = [new Date('2019-10-15'), new Date('2019-11-15'), new Date('2019-12-15'),
760760
new Date('2020-1-15'), new Date('2020-2-15'), new Date('2020-3-15'), new Date('2020-4-15')];
@@ -764,20 +764,21 @@ describe('Multi-View Calendar - ', () => {
764764
for (let i = 1; i < dates.length - 1; i++) {
765765
const arrowRight = HelperTestFunctions.getNexArrowElement(fixture);
766766
UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowRight);
767-
tick(100);
767+
fixture.detectChanges();
768+
await wait(100);
768769
fixture.detectChanges();
769770

770771
HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[i], dates[i + 1]]);
771772
}
772-
for (let index = dates.length - 2; index > 0; index--) {
773+
for (let index = dates.length - 2; index > 0; index--) {
773774
const arrowLeft = HelperTestFunctions.getPreviousArrowElement(fixture);
774775
UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowLeft);
775-
tick(100);
776776
fixture.detectChanges();
777-
777+
await wait(200);
778+
fixture.detectChanges();
778779
HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[index - 1], dates[index]]);
779780
}
780-
})));
781+
}));
781782

782783
it('Verify that months increment/decrement continuously on mouse down', (fakeAsync(() => {
783784
calendar.monthsViewNumber = 2;

‎projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -746,21 +746,24 @@ describe('IgxCalendar - ', () => {
746746
});
747747
});
748748

749-
it('Calendar keyboard navigation - PageUp/PageDown', () => {
749+
it('Calendar keyboard navigation - PageUp/PageDown', fakeAsync(() => {
750750
const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));
751751

752752
UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement);
753753
fixture.detectChanges();
754+
tick(100);
754755
expect(calendar.viewDate.getMonth()).toEqual(4);
755756

756757
calendar.viewDate = new Date(2017, 5, 13);
757758
fixture.detectChanges();
758759
UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement);
759760
fixture.detectChanges();
761+
tick(100);
760762

761763
expect(calendar.viewDate.getMonth()).toEqual(6);
762764
UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement, true, false, true);
763765
fixture.detectChanges();
766+
tick(100);
764767

765768
expect(calendar.viewDate.getFullYear()).toEqual(2016);
766769

@@ -769,9 +772,10 @@ describe('IgxCalendar - ', () => {
769772

770773
UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement, true, false, true);
771774
fixture.detectChanges();
775+
tick(100);
772776

773777
expect(calendar.viewDate.getFullYear()).toEqual(2018);
774-
});
778+
}));
775779

776780
it('Calendar keyboard navigation - Home/End/Enter', () => {
777781
const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));

‎projects/igniteui-angular/src/lib/calendar/calendar.component.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
477477
* @internal
478478
*/
479479
public previousMonth(isKeydownTrigger = false) {
480+
if (isKeydownTrigger && this.animationAction === ScrollMonth.NEXT) { return; }
480481
this.previousViewDate = this.viewDate;
481482
this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
482483
this.animationAction = ScrollMonth.PREV;
@@ -490,6 +491,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
490491
* @internal
491492
*/
492493
public nextMonth(isKeydownTrigger = false) {
494+
if (isKeydownTrigger && this.animationAction === 'prev') { return; }
493495
this.previousViewDate = this.viewDate;
494496
this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
495497
this.animationAction = ScrollMonth.NEXT;
@@ -504,7 +506,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
504506
public startPrevMonthScroll = (isKeydownTrigger = false) => {
505507
this.startMonthScroll$.next();
506508
this.monthScrollDirection = ScrollMonth.PREV;
507-
509+
this.animationAction = ScrollMonth.PREV;
508510
this.previousMonth(isKeydownTrigger);
509511
}
510512

@@ -516,7 +518,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
516518
public startNextMonthScroll = (isKeydownTrigger = false) => {
517519
this.startMonthScroll$.next();
518520
this.monthScrollDirection = ScrollMonth.NEXT;
519-
521+
this.animationAction = ScrollMonth.NEXT;
520522
this.nextMonth(isKeydownTrigger);
521523
}
522524

@@ -775,11 +777,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
775777
@HostListener('keydown.pageup', ['$event'])
776778
public onKeydownPageDown(event: KeyboardEvent) {
777779
event.preventDefault();
778-
779780
if (this.activeView !== CalendarView.DEFAULT) {
780781
return;
781782
}
782783

784+
783785
const isPageDown = event.key === 'PageDown';
784786
const step = isPageDown ? 1 : -1;
785787
let monthView = this.daysView as IgxDaysViewComponent;
@@ -822,8 +824,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
822824
};
823825
}
824826

825-
if (isPageDown) { this.nextMonth(true); } else {
826-
this.previousMonth(true);
827+
if (isPageDown) {
828+
event.repeat ? requestAnimationFrame(() => this.nextMonth(true)) : this.nextMonth(true);
829+
} else {
830+
event.repeat ? requestAnimationFrame(() => this.previousMonth(true)) : this.previousMonth(true);
827831
}
828832
}
829833

‎projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild } from '@angular/core';
2-
import { TestBed } from '@angular/core/testing';
2+
import { TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
33
import { FormsModule } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -259,21 +259,35 @@ describe('IgxMonthPicker', () => {
259259

260260
expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
261261
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
262+
});
262263

264+
it('should navigate to the previous/next year via arrowLeft and arrowRight', fakeAsync(() => {
265+
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
266+
fixture.detectChanges();
267+
tick();
268+
flush();
269+
270+
const monthPicker = fixture.componentInstance.monthPicker;
271+
const yearBtn = fixture.debugElement.query(By.css('.igx-calendar-picker__date'));
272+
273+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
263274
yearBtn.nativeElement.focus();
264275

265-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', yearBtn.nativeElement);
276+
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', yearBtn.nativeElement);
266277
fixture.detectChanges();
278+
tick(50);
279+
flush();
267280

268-
expect(monthPicker.viewDate.getFullYear()).toEqual(2022);
269-
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2022');
281+
expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
282+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2018');
270283

271-
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', yearBtn.nativeElement);
284+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', yearBtn.nativeElement);
272285
fixture.detectChanges();
286+
flush();
273287

274-
expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
275-
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
276-
});
288+
expect(monthPicker.viewDate.getFullYear()).toEqual(2019);
289+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
290+
}));
277291

278292
it('should not emit onSelection when navigating to the next year', () => {
279293
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);

‎projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
153153
public changeYearKB(event, next = true) {
154154
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
155155
event.stopPropagation();
156-
next ? this.nextYear(event) : this.previousYear(event);
156+
next ? this.nextYear() : this.previousYear();
157157
}
158158
}
159159

@@ -188,8 +188,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
188188
if (!value) {
189189
return new Date();
190190
}
191-
192-
// TO DO: to be refactored after discussion on the desired behavior
193191
super.selectDate(value);
194192
this.viewDate = value;
195193
}
@@ -198,8 +196,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
198196
* @hidden
199197
*/
200198
public writeValue(value: Date) {
201-
202-
// TO DO: to be refactored after discussion on the desired behavior
203199
if (value) {
204200
this.viewDate = this.selectedDates = value;
205201
}
@@ -211,6 +207,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
211207
@HostListener('keydown.pageup', ['$event'])
212208
public previousYear(event?: KeyboardEvent) {
213209
event?.preventDefault();
210+
if (event && this.yearAction === 'next') { return; }
214211
this.yearAction = 'prev';
215212
this.previousViewDate = this.viewDate;
216213
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
@@ -222,6 +219,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
222219
@HostListener('keydown.pagedown', ['$event'])
223220
public nextYear(event?: KeyboardEvent) {
224221
event?.preventDefault();
222+
if (event && this.yearAction === 'prev') { return; }
225223
this.yearAction = 'next';
226224
this.previousViewDate = this.viewDate;
227225
this.viewDate = this.calendarModel.getNextYear(this.viewDate);

0 commit comments

Comments
 (0)