Skip to content

Commit 646ede1

Browse files
mmalerbammalerba
committed
add calendar tests for multi-year
1 parent d2a5103 commit 646ede1

File tree

1 file changed

+167
-1
lines changed

1 file changed

+167
-1
lines changed

‎src/lib/datepicker/calendar.spec.ts

Lines changed: 167 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import {MatCalendar} from './calendar';
3232
import {MatCalendarBody} from './calendar-body';
3333
import {MatDatepickerIntl} from './datepicker-intl';
3434
import {MatMonthView} from './month-view';
35-
import {MatMultiYearView} from './multi-year-view';
35+
import {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view';
3636
import {MatYearView} from './year-view';
3737

3838

@@ -142,6 +142,24 @@ describe('MatCalendar', () => {
142142
expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
143143
});
144144

145+
it('should go to previous and next multi-year range', () => {
146+
periodButton.click();
147+
fixture.detectChanges();
148+
149+
expect(calendarInstance._currentView).toBe('multi-year');
150+
expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
151+
152+
nextButton.click();
153+
fixture.detectChanges();
154+
155+
expect(calendarInstance._activeDate).toEqual(new Date(2017 + yearsPerPage, JAN, 31));
156+
157+
prevButton.click();
158+
fixture.detectChanges();
159+
160+
expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
161+
});
162+
145163
it('should go back to month view after selecting year and month', () => {
146164
periodButton.click();
147165
fixture.detectChanges();
@@ -472,6 +490,125 @@ describe('MatCalendar', () => {
472490
expect(testComponent.selected).toBeUndefined();
473491
});
474492
});
493+
494+
describe('multi-year view', () => {
495+
beforeEach(() => {
496+
dispatchMouseEvent(periodButton, 'click');
497+
fixture.detectChanges();
498+
499+
expect(calendarInstance._currentView).toBe('multi-year');
500+
});
501+
502+
it('should decrement year on left arrow press', () => {
503+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
504+
fixture.detectChanges();
505+
506+
expect(calendarInstance._activeDate).toEqual(new Date(2016, JAN, 31));
507+
508+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
509+
fixture.detectChanges();
510+
511+
expect(calendarInstance._activeDate).toEqual(new Date(2015, JAN, 31));
512+
});
513+
514+
it('should increment year on right arrow press', () => {
515+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
516+
fixture.detectChanges();
517+
518+
expect(calendarInstance._activeDate).toEqual(new Date(2018, JAN, 31));
519+
520+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
521+
fixture.detectChanges();
522+
523+
expect(calendarInstance._activeDate).toEqual(new Date(2019, JAN, 31));
524+
});
525+
526+
it('should go up a row on up arrow press', () => {
527+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
528+
fixture.detectChanges();
529+
530+
expect(calendarInstance._activeDate).toEqual(new Date(2017 - yearsPerRow, JAN, 31));
531+
532+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
533+
fixture.detectChanges();
534+
535+
expect(calendarInstance._activeDate).toEqual(new Date(2017 - yearsPerRow * 2, JAN, 31));
536+
});
537+
538+
it('should go down a row on down arrow press', () => {
539+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
540+
fixture.detectChanges();
541+
542+
expect(calendarInstance._activeDate).toEqual(new Date(2017 + yearsPerRow, JAN, 31));
543+
544+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
545+
fixture.detectChanges();
546+
547+
expect(calendarInstance._activeDate).toEqual(new Date(2017 + yearsPerRow * 2, JAN, 31));
548+
});
549+
550+
it('should go to first year in current range on home press', () => {
551+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
552+
fixture.detectChanges();
553+
554+
expect(calendarInstance._activeDate).toEqual(new Date(2016, JAN, 31));
555+
556+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
557+
fixture.detectChanges();
558+
559+
expect(calendarInstance._activeDate).toEqual(new Date(2016, JAN, 31));
560+
});
561+
562+
it('should go to last year in current range on end press', () => {
563+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
564+
fixture.detectChanges();
565+
566+
expect(calendarInstance._activeDate).toEqual(new Date(2039, JAN, 31));
567+
568+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
569+
fixture.detectChanges();
570+
571+
expect(calendarInstance._activeDate).toEqual(new Date(2039, JAN, 31));
572+
});
573+
574+
it('should go to same index in previous year range page up press', () => {
575+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
576+
fixture.detectChanges();
577+
578+
expect(calendarInstance._activeDate).toEqual(new Date(2017 - yearsPerPage, JAN, 31));
579+
580+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
581+
fixture.detectChanges();
582+
583+
expect(calendarInstance._activeDate)
584+
.toEqual(new Date(2017 - yearsPerPage * 2, JAN, 31));
585+
});
586+
587+
it('should go to same index in next year range on page down press', () => {
588+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
589+
fixture.detectChanges();
590+
591+
expect(calendarInstance._activeDate).toEqual(new Date(2017 + yearsPerPage, JAN, 31));
592+
593+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
594+
fixture.detectChanges();
595+
596+
expect(calendarInstance._activeDate)
597+
.toEqual(new Date(2017 + yearsPerPage * 2, JAN, 31));
598+
});
599+
600+
it('should go to year view on enter', () => {
601+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
602+
fixture.detectChanges();
603+
604+
dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
605+
fixture.detectChanges();
606+
607+
expect(calendarInstance._currentView).toBe('year');
608+
expect(calendarInstance._activeDate).toEqual(new Date(2018, JAN, 31));
609+
expect(testComponent.selected).toBeUndefined();
610+
});
611+
});
475612
});
476613
});
477614
});
@@ -605,6 +742,35 @@ describe('MatCalendar', () => {
605742
expect(calendarInstance.yearView._init).toHaveBeenCalled();
606743
});
607744

745+
it('should re-render the multi-year view when the minDate changes', () => {
746+
fixture.detectChanges();
747+
const periodButton =
748+
calendarElement.querySelector('.mat-calendar-period-button') as HTMLElement;
749+
periodButton.click();
750+
fixture.detectChanges();
751+
752+
spyOn(calendarInstance.multiYearView, '_init').and.callThrough();
753+
754+
testComponent.minDate = new Date(2017, NOV, 1);
755+
fixture.detectChanges();
756+
757+
expect(calendarInstance.multiYearView._init).toHaveBeenCalled();
758+
});
759+
760+
it('should re-render the multi-year view when the maxDate changes', () => {
761+
fixture.detectChanges();
762+
const periodButton =
763+
calendarElement.querySelector('.mat-calendar-period-button') as HTMLElement;
764+
periodButton.click();
765+
fixture.detectChanges();
766+
767+
spyOn(calendarInstance.multiYearView, '_init').and.callThrough();
768+
769+
testComponent.maxDate = new Date(2017, DEC, 1);
770+
fixture.detectChanges();
771+
772+
expect(calendarInstance.multiYearView._init).toHaveBeenCalled();
773+
});
608774
});
609775

610776
describe('calendar with date filter', () => {

0 commit comments

Comments
 (0)