@@ -552,6 +552,183 @@ describe('IgxMonthPicker', () => {
552552 currentValue : new Date ( 2019 , 1 , 1 )
553553 } ) ;
554554 } ) ;
555+
556+ it ( 'should return the correct next and previous years via getNextYear/getPreviousYear' , ( ) => {
557+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
558+ fixture . detectChanges ( ) ;
559+ const monthPicker = fixture . componentInstance . monthPicker ;
560+ // viewDate is 2019
561+ expect ( monthPicker . getNextYear ( ) ) . toBe ( 2020 ) ;
562+ expect ( monthPicker . getPreviousYear ( ) ) . toBe ( 2018 ) ;
563+ } ) ;
564+
565+ it ( 'should navigate forward one year via PageDown in default (year) view' , ( ) => {
566+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
567+ fixture . detectChanges ( ) ;
568+ const monthPicker = fixture . componentInstance . monthPicker ;
569+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
570+ wrapper . nativeElement . focus ( ) ;
571+ fixture . detectChanges ( ) ;
572+
573+ const initialYear = monthPicker . viewDate . getFullYear ( ) ;
574+ UIInteractions . triggerKeyDownEvtUponElem ( 'PageDown' , document . activeElement ) ;
575+ fixture . detectChanges ( ) ;
576+
577+ expect ( monthPicker . viewDate . getFullYear ( ) ) . toBe ( initialYear + 1 ) ;
578+ } ) ;
579+
580+ it ( 'should navigate backward one year via PageUp in default (year) view' , ( ) => {
581+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
582+ fixture . detectChanges ( ) ;
583+ const monthPicker = fixture . componentInstance . monthPicker ;
584+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
585+ wrapper . nativeElement . focus ( ) ;
586+ fixture . detectChanges ( ) ;
587+
588+ const initialYear = monthPicker . viewDate . getFullYear ( ) ;
589+ UIInteractions . triggerKeyDownEvtUponElem ( 'PageUp' , document . activeElement ) ;
590+ fixture . detectChanges ( ) ;
591+
592+ expect ( monthPicker . viewDate . getFullYear ( ) ) . toBe ( initialYear - 1 ) ;
593+ } ) ;
594+
595+ it ( 'should navigate forward one year via PageDown in default (year) view' , ( ) => {
596+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
597+ fixture . detectChanges ( ) ;
598+ const monthPicker = fixture . componentInstance . monthPicker ;
599+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
600+ wrapper . nativeElement . focus ( ) ;
601+ fixture . detectChanges ( ) ;
602+
603+ const initialYear = monthPicker . viewDate . getFullYear ( ) ;
604+ UIInteractions . triggerKeyDownEvtUponElem ( 'PageDown' , document . activeElement ) ;
605+ fixture . detectChanges ( ) ;
606+
607+ expect ( monthPicker . viewDate . getFullYear ( ) ) . toBe ( initialYear + 1 ) ;
608+ } ) ;
609+
610+ it ( 'should navigate backward one page via PageUp in decade (years) view' , ( ) => {
611+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
612+ fixture . detectChanges ( ) ;
613+ const monthPicker = fixture . componentInstance . monthPicker ;
614+ // Switch to decade view
615+ monthPicker . activeView = IgxCalendarView . Decade ;
616+ fixture . detectChanges ( ) ;
617+
618+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
619+ wrapper . nativeElement . focus ( ) ;
620+ fixture . detectChanges ( ) ;
621+
622+ const initialYear = monthPicker . viewDate . getFullYear ( ) ;
623+ UIInteractions . triggerKeyDownEvtUponElem ( 'PageUp' , document . activeElement ) ;
624+ fixture . detectChanges ( ) ;
625+
626+ // In decade view, PageUp calls previousPage which moves back 15 years
627+ expect ( monthPicker . viewDate . getFullYear ( ) ) . toBe ( initialYear - 15 ) ;
628+ } ) ;
629+
630+ it ( 'should navigate forward one page via PageDown in decade (years) view' , ( ) => {
631+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
632+ fixture . detectChanges ( ) ;
633+ const monthPicker = fixture . componentInstance . monthPicker ;
634+ monthPicker . activeView = IgxCalendarView . Decade ;
635+ fixture . detectChanges ( ) ;
636+
637+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
638+ wrapper . nativeElement . focus ( ) ;
639+ fixture . detectChanges ( ) ;
640+
641+ const initialYear = monthPicker . viewDate . getFullYear ( ) ;
642+ UIInteractions . triggerKeyDownEvtUponElem ( 'PageDown' , document . activeElement ) ;
643+ fixture . detectChanges ( ) ;
644+
645+ // In decade view, PageDown calls nextPage which moves forward 15 years
646+ expect ( monthPicker . viewDate . getFullYear ( ) ) . toBe ( initialYear + 15 ) ;
647+ } ) ;
648+
649+ it ( 'should navigate to January via Home key in default (year) view' , ( ) => {
650+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
651+ fixture . detectChanges ( ) ;
652+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
653+ wrapper . nativeElement . focus ( ) ;
654+ fixture . detectChanges ( ) ;
655+
656+ UIInteractions . triggerKeyDownEvtUponElem ( 'Home' , document . activeElement ) ;
657+ fixture . detectChanges ( ) ;
658+
659+ const dom = fixture . debugElement ;
660+ const selected = dom . query ( By . css ( '.igx-calendar-view__item--selected' ) ) ;
661+ expect ( selected . nativeElement . textContent . trim ( ) ) . toMatch ( 'Jan' ) ;
662+ } ) ;
663+
664+ it ( 'should navigate to December via End key in default (year) view' , ( ) => {
665+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
666+ fixture . detectChanges ( ) ;
667+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
668+ wrapper . nativeElement . focus ( ) ;
669+ fixture . detectChanges ( ) ;
670+
671+ UIInteractions . triggerKeyDownEvtUponElem ( 'End' , document . activeElement ) ;
672+ fixture . detectChanges ( ) ;
673+
674+ const dom = fixture . debugElement ;
675+ const selected = dom . query ( By . css ( '.igx-calendar-view__item--selected' ) ) ;
676+ expect ( selected . nativeElement . textContent . trim ( ) ) . toMatch ( 'Dec' ) ;
677+ } ) ;
678+
679+ it ( 'should navigate to first year in view via Home key in decade (years) view' , ( ) => {
680+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
681+ fixture . detectChanges ( ) ;
682+ const monthPicker = fixture . componentInstance . monthPicker ;
683+ monthPicker . activeView = IgxCalendarView . Decade ;
684+ fixture . detectChanges ( ) ;
685+
686+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
687+ wrapper . nativeElement . focus ( ) ;
688+ fixture . detectChanges ( ) ;
689+
690+ UIInteractions . triggerKeyDownEvtUponElem ( 'Home' , document . activeElement ) ;
691+ fixture . detectChanges ( ) ;
692+
693+ const dom = fixture . debugElement ;
694+ const years = dom . queryAll ( By . css ( '.igx-calendar-view__item' ) ) ;
695+ const selected = dom . query ( By . css ( '.igx-calendar-view__item--selected' ) ) ;
696+ expect ( selected . nativeElement ) . toBe ( years [ 0 ] . nativeElement ) ;
697+ } ) ;
698+
699+ it ( 'should navigate to last year in view via End key in decade (years) view' , ( ) => {
700+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
701+ fixture . detectChanges ( ) ;
702+ const monthPicker = fixture . componentInstance . monthPicker ;
703+ monthPicker . activeView = IgxCalendarView . Decade ;
704+ fixture . detectChanges ( ) ;
705+
706+ const wrapper = fixture . debugElement . query ( By . css ( '.igx-calendar__wrapper' ) ) ;
707+ wrapper . nativeElement . focus ( ) ;
708+ fixture . detectChanges ( ) ;
709+
710+ UIInteractions . triggerKeyDownEvtUponElem ( 'End' , document . activeElement ) ;
711+ fixture . detectChanges ( ) ;
712+
713+ const dom = fixture . debugElement ;
714+ const years = dom . queryAll ( By . css ( '.igx-calendar-view__item' ) ) ;
715+ const selected = dom . query ( By . css ( '.igx-calendar-view__item--selected' ) ) ;
716+ expect ( selected . nativeElement ) . toBe ( years [ years . length - 1 ] . nativeElement ) ;
717+ } ) ;
718+
719+ it ( 'should change the active view to decade via activeViewDecade and focus the years view' , ( ) => {
720+ const fixture = TestBed . createComponent ( IgxMonthPickerSampleComponent ) ;
721+ fixture . detectChanges ( ) ;
722+ const monthPicker = fixture . componentInstance . monthPicker ;
723+
724+ expect ( monthPicker . activeView ) . toBe ( IgxCalendarView . Year ) ;
725+
726+ const yearBtn = fixture . debugElement . query ( By . css ( '.igx-calendar-picker__date' ) ) ;
727+ UIInteractions . simulateMouseDownEvent ( yearBtn . nativeElement ) ;
728+ fixture . detectChanges ( ) ;
729+
730+ expect ( monthPicker . activeView ) . toBe ( IgxCalendarView . Decade ) ;
731+ } ) ;
555732} ) ;
556733
557734@Component ( {
0 commit comments