import { async , ComponentFixture , TestBed } from '@angular/core/testing' ; import { FormsModule } from '@angular/forms' ; import { By } from '@angular/platform-browser' ; import { Component , DebugElement , ViewChild } from '@angular/core' ; import { AngularMyDatePickerModule } from '../angular-mydatepicker.module' ; import { AngularMyDatePickerDirective } from '../angular-mydatepicker.input' ; import { IAngularMyDpOptions , IMyOptions } from '../interfaces/my-options.interface' ; import { IMyDateModel } from '../interfaces/my-date-model.interface' ; import { DefaultView } from '../enums/default-view.enum' ; import { HeaderAction } from '../enums/header-action.enum' ; import { CalAnimation } from '../enums/cal-animation.enum' ; let comp ; let fixture ; let de ; let el ; function getElement ( id ) { return document . body . querySelector ( id ) ; } function getElements ( id ) { return document . body . querySelectorAll ( id ) ; } function getTodayDate ( ) { let today = new Date ( ) ; return today . getDate ( ) + "." + ( today . getMonth ( ) + 1 ) + "." + today . getFullYear ( ) ; } @ Component ( { template : '<input style="width: 400px;" class="myDateInput" type="{{inputType}}" id="myDateInput" [options]="options" name="mydate" angular-mydatepicker #dp="angular-mydatepicker" />' } ) class AngularMyDatepickerTestComponent { @ ViewChild ( 'dp' ) vcDp : AngularMyDatePickerDirective ; inputType : string = 'text' ; options : IAngularMyDpOptions = { } ; openCalendar ( ) { this . vcDp . openCalendar ( ) ; } closeCalendar ( ) { this . vcDp . closeCalendar ( ) ; } toggleCalendar ( ) { this . vcDp . toggleCalendar ( ) ; } clearDate ( ) { this . vcDp . clearDate ( ) ; } headerAction ( headerAction ) { this . vcDp . headerAction ( headerAction ) ; } parseOptions ( opts ) { this . vcDp . parseOptions ( opts ) ; } setLocale ( locale ) { this . vcDp . locale = locale ; this . vcDp . setLocaleOptions ( ) ; } setDefaultMonth ( defMonth ) { this . vcDp . defaultMonth = { defMonth : defMonth , overrideSelection : false } ; } setInputType ( type ) { this . inputType = type ; } initDateModel ( model ) { this . vcDp . writeValue ( model ) ; } isDateValid ( ) { return this . vcDp . isDateValid ( ) ; } } describe ( 'AngularMyDatePickerComponent' , ( ) => { beforeEach ( async ( ( ) => { TestBed . configureTestingModule ( { declarations : [ AngularMyDatepickerTestComponent ] , imports : [ FormsModule , AngularMyDatePickerModule ] , providers : [ ] } ) ; fixture = TestBed . createComponent ( AngularMyDatepickerTestComponent ) ; comp = fixture . componentInstance ; de = fixture . debugElement . query ( By . css ( '.myDateInput' ) ) ; el = de . nativeElement ; } ) ) ; it ( 'should create' , ( ) => { expect ( comp ) . toBeTruthy ( ) ; } ) ; it ( 'init date model' , ( ) => { let opts = { dateRange : false , dateFormat : 'd.m.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : false , singleDate : { date : { year : 2019 , month : 5 , day : 21 } } } ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '21.5.2019' ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : false , singleDate : { jsDate : new Date ( 2019 , 5 , 22 ) } } ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '22.6.2019' ) ; fixture . detectChanges ( ) ; comp . initDateModel ( null ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '' ) ; opts . dateRange = true ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : true , dateRange : { beginDate : { year : 2019 , month : 5 , day : 24 } , endDate : { year : 2019 , month : 6 , day : 10 } } } ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '24.5.2019 - 10.6.2019' ) ; fixture . detectChanges ( ) ; let begin = new Date ( 2019 , 9 , 12 ) ; let end = new Date ( 2019 , 9 , 14 ) ; comp . initDateModel ( { isRange : true , dateRange : { beginJsDate : begin , endJsDate : end } } ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '12.10.2019 - 14.10.2019' ) ; fixture . detectChanges ( ) ; comp . initDateModel ( null ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '' ) ; opts . dateFormat = 'd## of mmm yyyy' ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : false , singleDate : { date : { year : 2021 , month : 8 , day : 3 } } } ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '3rd of Aug 2021' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'validate date selection on calendar' , ( ) => { let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' , showMonthNumber : false } ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : false , singleDate : { date : { year : 2020 , month : 8 , day : 24 } } } ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '24.08.2020' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Aug' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2020' ) ; fixture . detectChanges ( ) ; let selecteddate = getElement ( '.myDpSelectedDay' ) ; expect ( selecteddate ) . not . toBe ( null ) ; expect ( selecteddate . textContent ) . toBe ( '24' ) ; fixture . detectChanges ( ) ; monthlabel . click ( ) ; fixture . detectChanges ( ) ; let selectedmonth = getElement ( '.myDpSelectedMonth' ) ; expect ( selectedmonth ) . not . toBe ( null ) ; expect ( selectedmonth . textContent ) . toBe ( 'Aug' ) ; fixture . detectChanges ( ) ; yearlabel . click ( ) ; fixture . detectChanges ( ) ; let selectedyear = getElement ( '.myDpSelectedYear' ) ; expect ( selectedyear ) . not . toBe ( null ) ; expect ( selectedyear . textContent ) . toBe ( '2020' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'validate date range selection on calendar' , ( ) => { let opts = { dateRange : true , dateFormat : 'dd.mm.yyyy' , showMonthNumber : false } ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; comp . initDateModel ( { isRange : true , dateRange : { beginDate : { year : 2021 , month : 9 , day : 14 } , endDate : { year : 2021 , month : 9 , day : 19 } } } ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '14.09.2021 - 19.09.2021' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Sep' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2021' ) ; fixture . detectChanges ( ) ; let selecteddates = getElements ( '.myDpSelectedDay' ) ; expect ( selecteddates ) . not . toBe ( null ) ; expect ( selecteddates . length ) . toBe ( 2 ) ; expect ( selecteddates [ 0 ] . textContent ) . toBe ( '14' ) ; expect ( selecteddates [ 1 ] . textContent ) . toBe ( '19' ) ; fixture . detectChanges ( ) ; let selectedrange = getElements ( '.myDpRangeColor' ) ; expect ( selectedrange ) . not . toBe ( null ) ; expect ( selectedrange . length ) . toBe ( 6 ) ; fixture . detectChanges ( ) ; monthlabel . click ( ) ; fixture . detectChanges ( ) ; let selectedmonth = getElement ( '.myDpSelectedMonth' ) ; expect ( selectedmonth ) . not . toBe ( null ) ; expect ( selectedmonth . textContent ) . toBe ( 'Sep' ) ; fixture . detectChanges ( ) ; yearlabel . click ( ) ; fixture . detectChanges ( ) ; let selectedyear = getElement ( '.myDpSelectedYear' ) ; expect ( selectedyear ) . not . toBe ( null ) ; expect ( selectedyear . textContent ) . toBe ( '2021' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'test open/close/toggle calendar functions' , ( ) => { comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; comp . toggleCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . toggleCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; } ) ; it ( 'test clearDate function' , ( ) => { let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . setDefaultMonth ( '2020/06' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let dateCell = getElement ( '.d_0_0' ) ; expect ( dateCell ) . not . toBe ( null ) ; dateCell . click ( ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '01.06.2020' ) ; comp . clearDate ( ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'test headerAction function' , ( ) => { comp . setDefaultMonth ( '2020/06' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Jun' ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2020' ) ; fixture . detectChanges ( ) ; comp . headerAction ( HeaderAction . PrevBtnClick ) ; fixture . detectChanges ( ) ; monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'May' ) ; comp . closeCalendar ( ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; comp . headerAction ( HeaderAction . NextBtnClick ) ; fixture . detectChanges ( ) ; monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Jul' ) ; comp . closeCalendar ( ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let dateCell = getElement ( '.d_0_0' ) ; expect ( dateCell ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; comp . headerAction ( HeaderAction . MonthBtnClick ) ; fixture . detectChanges ( ) ; let monthCell = getElement ( '.m_0_0' ) ; expect ( monthCell ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; comp . headerAction ( HeaderAction . YearBtnClick ) ; fixture . detectChanges ( ) ; let yearCell = getElement ( '.y_0_0' ) ; expect ( yearCell ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'test document click' , ( ) => { comp . setDefaultMonth ( '2020/06' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; document . dispatchEvent ( new Event ( 'click' ) ) ; setTimeout ( ( ) => { fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; } , 1000 ) ; } ) ; it ( 'select and clear date' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '2019-04-29' ) ; comp . clearDate ( ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '' ) ; } ) ; it ( 'select previous month' , ( ) => { let opts = { monthLabels : { 1 : "1" , 2 : "2" , 3 : "3" , 4 : "4" , 5 : "5" , 6 : "6" , 7 : "7" , 8 : "8" , 9 : "9" , 10 : "10" , 11 : "11" , 12 : "12" } } ; comp . parseOptions ( opts ) ; comp . setDefaultMonth ( '2016/12' ) ; comp . openCalendar ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; for ( let i = 12 ; i > 0 ; i -- ) { fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( String ( i ) ) ; prevmonth . click ( ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'select next month' , ( ) => { let opts = { monthLabels : { 1 : "1" , 2 : "2" , 3 : "3" , 4 : "4" , 5 : "5" , 6 : "6" , 7 : "7" , 8 : "8" , 9 : "9" , 10 : "10" , 11 : "11" , 12 : "12" } } ; comp . parseOptions ( opts ) ; comp . setDefaultMonth ( '2016/01' ) ; comp . openCalendar ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; for ( let i = 1 ; i <= 12 ; i ++ ) { fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( String ( i ) ) ; nextmonth . click ( ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'select previous month year change' , ( ) => { comp . setDefaultMonth ( '2016/01' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Dec' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2015' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'select next month year change' , ( ) => { comp . setDefaultMonth ( '2016/12' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( 'Jan' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2017' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'edit date in input box' , ( ) => { let opts = { dateRange : false , dateFormat : 'dd mmm yyyy' } ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; selection . value = '12 Feb 2017' ; selection . dispatchEvent ( new Event ( 'blur' ) ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '12 Feb 2017' ) ; opts . dateRange = true ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; selection . value = '12 Feb 2017 - 13 Feb 2017' ; selection . dispatchEvent ( new Event ( 'blur' ) ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '12 Feb 2017 - 13 Feb 2017' ) ; } ) ; it ( 'isDateValid() call' , ( ) => { let opts = { dateRange : false , dateFormat : 'dd mmm yyyy' } ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; selection . value = '12 Feb 2017' ; selection . dispatchEvent ( new Event ( 'blur' ) ) ; let valid = comp . isDateValid ( ) ; expect ( valid ) . not . toBe ( null ) ; expect ( valid ) . toBe ( true ) ; selection . value = '' ; selection . dispatchEvent ( new Event ( 'blur' ) ) ; valid = comp . isDateValid ( ) ; expect ( valid ) . not . toBe ( null ) ; expect ( valid ) . toBe ( false ) ; } ) ; it ( 'test calendar year 2016 month one by one - next month button' , ( ) => { comp . setDefaultMonth ( '2016/01' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent . trim ( ) ) . toBe ( 'Jan' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent . trim ( ) ) . toBe ( '2016' ) ; let beginDate = [ '28' , '1' , '29' , '28' , '25' , '30' , '27' , '1' , '29' , '26' , '31' , '28' ] ; let endDate = [ '7' , '13' , '10' , '8' , '5' , '10' , '7' , '11' , '9' , '6' , '11' , '8' ] ; for ( let i = 0 ; i < 12 ; i ++ ) { fixture . detectChanges ( ) ; let currmonth = getElements ( '.myDpDaycell' ) ; expect ( currmonth ) . not . toBe ( null ) ; expect ( currmonth . length ) . toBe ( 42 ) ; expect ( currmonth [ 0 ] ) . not . toBe ( null ) ; expect ( currmonth [ 0 ] . textContent . trim ( ) ) . toBe ( beginDate [ i ] ) ; expect ( currmonth [ 41 ] ) . not . toBe ( null ) ; expect ( currmonth [ 41 ] . textContent . trim ( ) ) . toBe ( endDate [ i ] ) ; nextmonth . click ( ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'test calendar year 2016 month one by one - previous month button' , ( ) => { comp . setDefaultMonth ( '2016/12' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent . trim ( ) ) . toBe ( 'Dec' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent . trim ( ) ) . toBe ( '2016' ) ; let beginDate = [ '28' , '1' , '29' , '28' , '25' , '30' , '27' , '1' , '29' , '26' , '31' , '28' ] ; let endDate = [ '7' , '13' , '10' , '8' , '5' , '10' , '7' , '11' , '9' , '6' , '11' , '8' ] ; for ( let i = 11 ; i > 0 ; i -- ) { fixture . detectChanges ( ) ; let currmonth = getElements ( '.myDpDaycell' ) ; expect ( currmonth ) . not . toBe ( null ) ; expect ( currmonth . length ) . toBe ( 42 ) ; expect ( currmonth [ 0 ] ) . not . toBe ( null ) ; expect ( currmonth [ 0 ] . textContent . trim ( ) ) . toBe ( beginDate [ i ] ) ; expect ( currmonth [ 41 ] ) . not . toBe ( null ) ; expect ( currmonth [ 41 ] . textContent . trim ( ) ) . toBe ( endDate [ i ] ) ; prevmonth . click ( ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'day view move focus' , ( ) => { comp . setDefaultMonth ( '2019/07' ) ; let opts = { dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; const arrowEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'ArrowRight' } ) ; fixture . detectChanges ( ) ; let daycell = getElement ( '.d_0_0' ) ; expect ( daycell ) . not . toBe ( null ) ; daycell . dispatchEvent ( arrowEvent ) ; expect ( document . activeElement . id ) . toBe ( 'd_0_1' ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_1' ) ; expect ( daycell ) . not . toBe ( null ) ; const enterEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'Enter' } ) ; daycell . dispatchEvent ( enterEvent ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '02.07.2019' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'month view move focus' , ( ) => { comp . setDefaultMonth ( '2019/07' ) ; let opts = { dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let monthbtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthbtn ) . not . toBe ( null ) ; monthbtn . click ( ) ; const arrowEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'ArrowRight' } ) ; fixture . detectChanges ( ) ; let monthcell = getElement ( '.m_0_0' ) ; expect ( monthcell ) . not . toBe ( null ) ; monthcell . dispatchEvent ( arrowEvent ) ; expect ( document . activeElement . id ) . toBe ( 'm_0_1' ) ; const enterEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'Enter' } ) ; fixture . detectChanges ( ) ; monthcell = getElement ( '.m_0_1' ) ; expect ( monthcell ) . not . toBe ( null ) ; monthcell . dispatchEvent ( enterEvent ) ; fixture . detectChanges ( ) ; let daycell = getElement ( '.d_0_0' ) ; expect ( daycell ) . not . toBe ( null ) ; daycell . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input ) . not . toBe ( null ) ; expect ( input . value ) . toBe ( '28.01.2019' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'year view move focus' , ( ) => { comp . setDefaultMonth ( '2019/07' ) ; let opts = { dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let yearbtn = getElement ( '.myDpYearBtn' ) ; expect ( yearbtn ) . not . toBe ( null ) ; yearbtn . click ( ) ; const arrowEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'ArrowRight' } ) ; fixture . detectChanges ( ) ; let yearcell = getElement ( '.y_0_0' ) ; expect ( yearcell ) . not . toBe ( null ) ; yearcell . dispatchEvent ( arrowEvent ) ; expect ( document . activeElement . id ) . toBe ( 'y_0_1' ) ; const enterEvent = new KeyboardEvent ( 'keydown' , { 'key' : 'Enter' } ) ; fixture . detectChanges ( ) ; yearcell = getElement ( '.y_0_1' ) ; expect ( yearcell ) . not . toBe ( null ) ; yearcell . dispatchEvent ( enterEvent ) ; fixture . detectChanges ( ) ; let daycell = getElement ( '.d_0_0' ) ; expect ( daycell ) . not . toBe ( null ) ; daycell . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input ) . not . toBe ( null ) ; expect ( input . value ) . toBe ( '30.06.2008' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'input keyup event' , ( ) => { comp . setDefaultMonth ( '2019/07' ) ; let opts = { dateRange : false } ; comp . parseOptions ( opts ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input ) . not . toBe ( null ) ; input . click ( ) ; const keyupEvent1 = new KeyboardEvent ( 'keyup' , { 'key' : '1' } ) ; input . dispatchEvent ( keyupEvent1 ) ; opts . dateRange = true ; comp . parseOptions ( opts ) ; input . dispatchEvent ( keyupEvent1 ) ; const keyupEventEsc = new KeyboardEvent ( 'keyup' , { 'key' : 'Escape' } ) ; input . dispatchEvent ( keyupEventEsc ) ; const keyupEventIgnore = new KeyboardEvent ( 'keyup' , { 'key' : 'Tab' } ) ; input . dispatchEvent ( keyupEventIgnore ) ; } ) ; it ( 'day view cell mouse enter and leave' , ( ) => { comp . setDefaultMonth ( '2019/07' ) ; let opts = { dateRange : true , dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let daycell = getElement ( '.d_0_0' ) ; expect ( daycell ) . not . toBe ( null ) ; daycell . click ( ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_1' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( daycell ) . backgroundColor ) . toBe ( 'rgb(255, 255, 255)' ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_2' ) ; expect ( daycell ) . not . toBe ( null ) ; const mouseEnterEvent = new MouseEvent ( 'mouseenter' ) ; daycell . dispatchEvent ( mouseEnterEvent ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_1' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( daycell ) . backgroundColor ) . toBe ( 'rgb(219, 234, 255)' ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_2' ) ; expect ( daycell ) . not . toBe ( null ) ; const mouseLeaveEvent = new MouseEvent ( 'mouseleave' ) ; daycell . dispatchEvent ( mouseLeaveEvent ) ; fixture . detectChanges ( ) ; daycell = getElement ( '.d_0_1' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( daycell ) . backgroundColor ) . toBe ( 'rgb(255, 255, 255)' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - dateRange (true/false)' , ( ) => { let options = { dateRange : true , dateFormat : 'dd.mm.yyyy' } ; comp . setDefaultMonth ( '2019/05' ) ; comp . parseOptions ( options ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; date = getElement ( '.d_0_1' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '29.04.2019 - 30.04.2019' ) ; comp . clearDate ( ) ; options . dateRange = false ; comp . parseOptions ( options ) ; comp . closeCalendar ( ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '29.04.2019' ) ; } ) ; it ( 'options - inline' , ( ) => { let options = { inline : true , dateFormat : 'dd.mm.yyyy' } ; comp . setInputType ( 'hidden' ) ; comp . parseOptions ( options ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; let date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; comp . setInputType ( 'text' ) ; } ) ; it ( 'options - dayLabels' , ( ) => { let options = { dayLabels : { su : '1' , mo : '2' , tu : '3' , we : '4' , th : '5' , fr : '6' , sa : '7' } , firstDayOfWeek : 'su' } ; comp . setDefaultMonth ( '2019/05' ) ; comp . parseOptions ( options ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let ths = getElements ( '.myDpWeekDayTitle' ) ; expect ( ths . length ) . toBe ( 7 ) ; for ( let i = 0 ; i < ths . length ; i ++ ) { let el = ths [ i ] ; expect ( parseInt ( el . textContent . trim ( ) ) ) . toBe ( i + 1 ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'options - monthLabels' , ( ) => { let opts = { monthLabels : { 1 : "1" , 2 : "2" , 3 : "3" , 4 : "4" , 5 : "5" , 6 : "6" , 7 : "7" , 8 : "8" , 9 : "9" , 10 : "10" , 11 : "11" , 12 : "12" } } ; comp . parseOptions ( opts ) ; comp . setDefaultMonth ( '2019/01' ) ; comp . openCalendar ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; for ( let i = 1 ; i <= 12 ; i ++ ) { fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent ) . toBe ( String ( i ) ) ; nextmonth . click ( ) ; } comp . closeCalendar ( ) ; } ) ; it ( 'options - dateFormat' , ( ) => { comp . setDefaultMonth ( '2016/01' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let currmonth = getElements ( '.myDpDaycell' ) ; expect ( currmonth ) . not . toBe ( null ) ; expect ( currmonth . length ) . toBe ( 42 ) ; currmonth [ 5 ] . click ( ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '2016-01-02' ) ; comp . closeCalendar ( ) ; let opts = { dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; currmonth = getElements ( '.myDpDaycell' ) ; expect ( currmonth ) . not . toBe ( null ) ; expect ( currmonth . length ) . toBe ( 42 ) ; currmonth [ 4 ] . click ( ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '01.01.2016' ) ; comp . closeCalendar ( ) ; opts . dateFormat = 'dd mmm yyyy' ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; currmonth = getElements ( '.myDpDaycell' ) ; expect ( currmonth ) . not . toBe ( null ) ; expect ( currmonth . length ) . toBe ( 42 ) ; currmonth [ 4 ] . click ( ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '01 Jan 2016' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - defaultView' , ( ) => { comp . setDefaultMonth ( '2019/06' ) ; let opts = { defaultView : DefaultView . Month } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let date = getElements ( '.myDpDaycell' ) ; expect ( date ) . not . toBe ( null ) ; expect ( date . length ) . toBe ( 0 ) ; let month = getElements ( '.myDpMonthcell' ) ; expect ( month ) . not . toBe ( null ) ; expect ( month . length ) . toBe ( 12 ) ; let year = getElements ( '.myDpYearcell' ) ; expect ( year ) . not . toBe ( null ) ; expect ( year . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; opts . defaultView = DefaultView . Year ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; date = getElements ( '.myDpDaycell' ) ; expect ( date ) . not . toBe ( null ) ; expect ( date . length ) . toBe ( 0 ) ; month = getElements ( '.myDpMonthcell' ) ; expect ( month ) . not . toBe ( null ) ; expect ( month . length ) . toBe ( 0 ) ; year = getElements ( '.myDpYearcell' ) ; expect ( year ) . not . toBe ( null ) ; expect ( year . length ) . toBe ( 25 ) ; comp . closeCalendar ( ) ; opts . defaultView = DefaultView . Date ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; date = getElements ( '.myDpDaycell' ) ; expect ( date ) . not . toBe ( null ) ; expect ( date . length ) . toBe ( 42 ) ; month = getElements ( '.myDpMonthcell' ) ; expect ( month ) . not . toBe ( null ) ; expect ( month . length ) . toBe ( 0 ) ; year = getElements ( '.myDpYearcell' ) ; expect ( year ) . not . toBe ( null ) ; expect ( year . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - firstDayOfWeek' , ( ) => { comp . setDefaultMonth ( '2019/01' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let first = getElement ( '.myDpWeekDayTitle:first-child' ) ; expect ( first ) . not . toBe ( null ) ; expect ( first . textContent ) . toBe ( 'Mon' ) ; let last = getElement ( '.myDpWeekDayTitle:last-child' ) ; expect ( last ) . not . toBe ( null ) ; expect ( last . textContent ) . toBe ( 'Sun' ) ; comp . closeCalendar ( ) ; let opts = { firstDayOfWeek : 'su' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; first = getElement ( '.myDpWeekDayTitle:first-child' ) ; expect ( first ) . not . toBe ( null ) ; expect ( first . textContent ) . toBe ( 'Sun' ) ; last = getElement ( '.myDpWeekDayTitle:last-child' ) ; expect ( last ) . not . toBe ( null ) ; expect ( last . textContent ) . toBe ( 'Sat' ) ; comp . closeCalendar ( ) ; opts . firstDayOfWeek = 'we' ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; first = getElement ( '.myDpWeekDayTitle:first-child' ) ; expect ( first ) . not . toBe ( null ) ; expect ( first . textContent ) . toBe ( 'Wed' ) ; last = getElement ( '.myDpWeekDayTitle:last-child' ) ; expect ( last ) . not . toBe ( null ) ; expect ( last . textContent ) . toBe ( 'Tue' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - sunHighlight' , ( ) => { comp . setDefaultMonth ( '2019/01' ) ; let opts = { sunHighlight : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight ) . not . toBe ( null ) ; expect ( highlight . length ) . toBe ( 6 ) ; comp . closeCalendar ( ) ; opts . sunHighlight = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - satHighlight' , ( ) => { comp . setDefaultMonth ( '2019/01' ) ; let opts = { sunHighlight : false , satHighlight : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight ) . not . toBe ( null ) ; expect ( highlight . length ) . toBe ( 6 ) ; comp . closeCalendar ( ) ; opts . satHighlight = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - highlightDates' , ( ) => { comp . setDefaultMonth ( '2019/01' ) ; let opts = { sunHighlight : false , satHighlight : false , highlightDates : [ { year : 2019 , month : 1 , day : 10 } , { year : 2019 , month : 1 , day : 12 } , { year : 2019 , month : 1 , day : 13 } ] } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight ) . not . toBe ( null ) ; expect ( highlight . length ) . toBe ( 3 ) ; comp . closeCalendar ( ) ; opts . highlightDates = [ ] ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - markCurrentDay' , ( ) => { let opts = { markCurrentDay : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let markcurrday = getElement ( '.myDpMarkCurrDay' ) ; expect ( markcurrday ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; opts . markCurrentDay = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; markcurrday = getElement ( '.myDpMarkCurrDay' ) ; expect ( markcurrday ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - markCurrentMonth' , ( ) => { let opts = { markCurrentMonth : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; monthlabel . click ( ) ; fixture . detectChanges ( ) ; let markcurrmonth = getElement ( '.myDpMarkCurrMonth' ) ; expect ( markcurrmonth ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - markCurrentYear' , ( ) => { let opts = { markCurrentYear : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; yearlabel . click ( ) ; fixture . detectChanges ( ) ; let markcurryear = getElement ( '.myDpMarkCurrYear' ) ; expect ( markcurryear ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - monthSelector' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { monthSelector : true , showMonthNumber : false } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; montlabel . click ( ) ; fixture . detectChanges ( ) ; let monthtable = getElement ( '.myDpMonthTable' ) ; expect ( monthtable ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let monthcell = getElements ( '.myDpMonthcell' ) ; expect ( monthcell ) . not . toBe ( null ) ; expect ( monthcell . length ) . toBe ( 12 ) ; fixture . detectChanges ( ) ; expect ( monthcell [ 0 ] . textContent . trim ( ) ) . toBe ( 'Jan' ) ; fixture . detectChanges ( ) ; expect ( monthcell [ 11 ] . textContent . trim ( ) ) . toBe ( 'Dec' ) ; fixture . detectChanges ( ) ; let selectedmonth = getElement ( '.myDpSelectedMonth' ) ; expect ( selectedmonth ) . not . toBe ( null ) ; expect ( selectedmonth . textContent . trim ( ) ) . toBe ( 'May' ) ; selectedmonth . click ( ) ; fixture . detectChanges ( ) ; monthtable = getElement ( '.myDpMonthTable' ) ; expect ( monthtable ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - yearSelector' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { yearSelector : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; yearlabel . click ( ) ; fixture . detectChanges ( ) ; let yeartable = getElement ( '.myDpYearTable' ) ; expect ( yeartable ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let yearcell = getElements ( '.myDpYearcell' ) ; expect ( yearcell ) . not . toBe ( null ) ; expect ( yearcell . length ) . toBe ( 25 ) ; fixture . detectChanges ( ) ; expect ( yearcell [ 0 ] . textContent . trim ( ) ) . toBe ( '2007' ) ; fixture . detectChanges ( ) ; expect ( yearcell [ 24 ] . textContent . trim ( ) ) . toBe ( '2031' ) ; fixture . detectChanges ( ) ; let selectedyear = getElement ( '.myDpSelectedYear' ) ; expect ( selectedyear ) . not . toBe ( null ) ; expect ( selectedyear . textContent . trim ( ) ) . toBe ( '2019' ) ; selectedyear . click ( ) ; fixture . detectChanges ( ) ; yeartable = getElement ( '.myDpYearTable' ) ; expect ( yeartable ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableHeaderButtons' , ( ) => { comp . setDefaultMonth ( '2016/05' ) ; let opts = { disableHeaderButtons : true , disableUntil : { year : 2016 , month : 4 , day : 10 } } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'May' ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'Apr' ) ; fixture . detectChanges ( ) ; let headerbtndisabled = getElements ( '.myDpHeaderBtnDisabled' ) ; expect ( headerbtndisabled ) . not . toBe ( null ) ; expect ( headerbtndisabled . length ) . toBe ( 1 ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'Apr' ) ; comp . closeCalendar ( ) ; opts . disableSince = { year : 2016 , month : 6 , day : 10 } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'May' ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'Jun' ) ; fixture . detectChanges ( ) ; headerbtndisabled = getElements ( '.myDpHeaderBtnDisabled' ) ; expect ( headerbtndisabled ) . not . toBe ( null ) ; expect ( headerbtndisabled . length ) . toBe ( 1 ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; montlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( montlabel ) . not . toBe ( null ) ; expect ( montlabel . textContent ) . toBe ( 'Jun' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - showWeekNmbers' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { showWeekNumbers : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let weekdaytitleweeknbr = getElement ( '.myDpWeekDayTitleWeekNbr' ) ; expect ( weekdaytitleweeknbr ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let daycellweeknbr = getElements ( '.myDpDaycellWeekNbr' ) ; expect ( daycellweeknbr . length ) . toBe ( 6 ) ; expect ( daycellweeknbr [ 0 ] . textContent . trim ( ) ) . toBe ( '18' ) ; expect ( daycellweeknbr [ 1 ] . textContent . trim ( ) ) . toBe ( '19' ) ; expect ( daycellweeknbr [ 2 ] . textContent . trim ( ) ) . toBe ( '20' ) ; expect ( daycellweeknbr [ 3 ] . textContent . trim ( ) ) . toBe ( '21' ) ; expect ( daycellweeknbr [ 4 ] . textContent . trim ( ) ) . toBe ( '22' ) ; expect ( daycellweeknbr [ 5 ] . textContent . trim ( ) ) . toBe ( '23' ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; daycellweeknbr = getElements ( '.myDpDaycellWeekNbr' ) ; expect ( daycellweeknbr . length ) . toBe ( 6 ) ; expect ( daycellweeknbr [ 0 ] . textContent . trim ( ) ) . toBe ( '22' ) ; expect ( daycellweeknbr [ 1 ] . textContent . trim ( ) ) . toBe ( '23' ) ; expect ( daycellweeknbr [ 2 ] . textContent . trim ( ) ) . toBe ( '24' ) ; expect ( daycellweeknbr [ 3 ] . textContent . trim ( ) ) . toBe ( '25' ) ; expect ( daycellweeknbr [ 4 ] . textContent . trim ( ) ) . toBe ( '26' ) ; expect ( daycellweeknbr [ 5 ] . textContent . trim ( ) ) . toBe ( '27' ) ; comp . closeCalendar ( ) ; comp . setDefaultMonth ( '2017/01' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; daycellweeknbr = getElements ( '.myDpDaycellWeekNbr' ) ; expect ( daycellweeknbr . length ) . toBe ( 6 ) ; expect ( daycellweeknbr [ 0 ] . textContent . trim ( ) ) . toBe ( '52' ) ; expect ( daycellweeknbr [ 1 ] . textContent . trim ( ) ) . toBe ( '1' ) ; expect ( daycellweeknbr [ 2 ] . textContent . trim ( ) ) . toBe ( '2' ) ; expect ( daycellweeknbr [ 3 ] . textContent . trim ( ) ) . toBe ( '3' ) ; expect ( daycellweeknbr [ 4 ] . textContent . trim ( ) ) . toBe ( '4' ) ; expect ( daycellweeknbr [ 5 ] . textContent . trim ( ) ) . toBe ( '5' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - selectorHeight' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { selectorHeight : '333px' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; expect ( selector . style [ 'height' ] ) . toBe ( '333px' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - selectorWidth' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { selectorWidth : '333px' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; expect ( selector . style [ 'width' ] ) . toBe ( '333px' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableUntil' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { disableUntil : { year : 2017 , month : 1 , day : 26 } , disableHeaderButtons : false } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 32 ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 42 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableSince' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { disableSince : { year : 2017 , month : 1 , day : 12 } , disableHeaderButtons : false } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 25 ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 42 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableDates' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { disableDates : [ { year : 2017 , month : 1 , day : 12 } , { year : 2017 , month : 1 , day : 14 } ] } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 2 ) ; fixture . detectChanges ( ) ; let daycell = getElements ( '.myDpDaycell' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( daycell . length ) . toBe ( 42 ) ; daycell [ 17 ] . click ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '' ) ; daycell [ 18 ] . click ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; fixture . detectChanges ( ) ; selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '2017-01-13' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableDateRanges' , ( ) => { comp . setDefaultMonth ( '2019/10' ) ; let opts = { disableDateRanges : [ { begin : { year : 2019 , month : 10 , day : 5 } , end : { year : 2019 , month : 10 , day : 7 } } , { begin : { year : 2019 , month : 10 , day : 10 } , end : { year : 2019 , month : 10 , day : 12 } } ] } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 6 ) ; expect ( disabled [ 0 ] . textContent . trim ( ) ) . toBe ( '5' ) ; expect ( disabled [ 1 ] . textContent . trim ( ) ) . toBe ( '6' ) ; expect ( disabled [ 2 ] . textContent . trim ( ) ) . toBe ( '7' ) ; expect ( disabled [ 3 ] . textContent . trim ( ) ) . toBe ( '10' ) ; expect ( disabled [ 4 ] . textContent . trim ( ) ) . toBe ( '11' ) ; expect ( disabled [ 5 ] . textContent . trim ( ) ) . toBe ( '12' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableWeekends' , ( ) => { comp . setDefaultMonth ( '2019/10' ) ; let opts = { firstDayOfWeek : 'mo' , disableWeekends : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 12 ) ; let firstDisabled = disabled [ 0 ] ; expect ( firstDisabled . textContent . trim ( ) ) . toBe ( '5' ) ; let secondDisabled = disabled [ 1 ] ; expect ( secondDisabled . textContent . trim ( ) ) . toBe ( '6' ) ; let thirdDisabled = disabled [ 2 ] ; expect ( thirdDisabled . textContent . trim ( ) ) . toBe ( '12' ) ; let fourthDisabled = disabled [ 3 ] ; expect ( fourthDisabled . textContent . trim ( ) ) . toBe ( '13' ) ; let lastDisabled = disabled [ disabled . length - 1 ] ; expect ( lastDisabled . textContent . trim ( ) ) . toBe ( '10' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - disableWeekdays' , ( ) => { comp . setDefaultMonth ( '2018/3' ) ; let opts = { firstDayOfWeek : 'su' , disableWeekdays : [ 'mo' ] } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 6 ) ; let firstDisabled = disabled [ 0 ] ; expect ( firstDisabled . textContent . trim ( ) ) . toBe ( '26' ) ; let secondDisabled = disabled [ 1 ] ; expect ( secondDisabled . textContent . trim ( ) ) . toBe ( '5' ) ; let thirdDisabled = disabled [ 2 ] ; expect ( thirdDisabled . textContent . trim ( ) ) . toBe ( '12' ) ; let fourthDisabled = disabled [ 3 ] ; expect ( fourthDisabled . textContent . trim ( ) ) . toBe ( '19' ) ; let lastDisabled = disabled [ 4 ] ; expect ( lastDisabled . textContent . trim ( ) ) . toBe ( '26' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - enableDates' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { disableUntil : { year : 2017 , month : 1 , day : 31 } , enableDates : [ { year : 2017 , month : 1 , day : 14 } , { year : 2017 , month : 1 , day : 15 } ] , dateFormat : 'yyyy-mm-dd' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let disabled = getElements ( '.myDpDisabled' ) ; expect ( disabled ) . not . toBe ( null ) ; expect ( disabled . length ) . toBe ( 35 ) ; fixture . detectChanges ( ) ; let daycell = getElements ( '.myDpDaycell' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( daycell . length ) . toBe ( 42 ) ; daycell [ 19 ] . click ( ) ; fixture . detectChanges ( ) ; let selection = getElement ( '.myDateInput' ) ; expect ( selection . value ) . toBe ( '2017-01-14' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - markDates' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { markDates : [ { dates : [ { year : 2017 , month : 1 , day : 14 } , { year : 2017 , month : 1 , day : 15 } ] , color : 'red' } ] } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let markdate = getElements ( '.myDpMarkDate' ) ; expect ( markdate ) . not . toBe ( null ) ; expect ( markdate . length ) . toBe ( 2 ) ; expect ( markdate [ 0 ] . style [ 'border-top' ] ) . toBe ( '8px solid red' ) ; comp . closeCalendar ( ) ; opts . markDates = [ ] ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; markdate = getElements ( '.myDpMarkDate' ) ; expect ( markdate ) . not . toBe ( null ) ; expect ( markdate . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - markWeekends' , ( ) => { comp . setDefaultMonth ( '2017/01' ) ; let opts = { markWeekends : { marked : true , color : 'blue' } } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let markdate = getElements ( '.myDpMarkDate' ) ; expect ( markdate ) . not . toBe ( null ) ; expect ( markdate . length ) . toBe ( 12 ) ; expect ( markdate [ 0 ] . style [ 'border-top' ] ) . toBe ( '8px solid blue' ) ; comp . closeCalendar ( ) ; opts . markWeekends = { marked : false , color : '' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; markdate = getElements ( '.myDpMarkDate' ) ; expect ( markdate ) . not . toBe ( null ) ; expect ( markdate . length ) . toBe ( 0 ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - alignSelectorRight' , ( ) => { comp . setDefaultMonth ( '2020/02' ) ; let opts = { alignSelectorRight : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; let posSelector = selector . getBoundingClientRect ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input ) . not . toBe ( null ) ; let posInput = input . getBoundingClientRect ( ) ; expect ( posSelector . right ) . toBe ( posInput . width ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - openSelectorTopOfInput' , ( ) => { comp . setDefaultMonth ( '2020/02' ) ; let opts = { openSelectorTopOfInput : true , appendSelectorToBody : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; let posSelector = selector . getBoundingClientRect ( ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - closeSelectorOnDateSelect' , ( ) => { comp . setDefaultMonth ( '2020/05' ) ; let opts = { closeSelectorOnDateSelect : false } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let daycell = getElements ( '.myDpDaycell' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( daycell . length ) . toBe ( 42 ) ; daycell [ 0 ] . click ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; opts . closeSelectorOnDateSelect = true ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; daycell = getElements ( '.myDpDaycell' ) ; expect ( daycell ) . not . toBe ( null ) ; expect ( daycell . length ) . toBe ( 42 ) ; daycell [ 0 ] . click ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - minYear' , ( ) => { comp . setDefaultMonth ( '2018/01' ) ; let opts = { minYear : 2018 } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2018' ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2018' ) ; comp . closeCalendar ( ) ; opts . minYear = 2017 ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; prevmonth . click ( ) ; fixture . detectChanges ( ) ; yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2017' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - maxYear' , ( ) => { comp . setDefaultMonth ( '2019/12' ) ; let opts = { maxYear : 2019 } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2019' ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2019' ) ; comp . closeCalendar ( ) ; opts . maxYear = 2020 ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; nextmonth . click ( ) ; fixture . detectChanges ( ) ; yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent ) . toBe ( '2020' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - showSelectorArrow' , ( ) => { comp . setDefaultMonth ( '2019/12' ) ; let opts = { showSelectorArrow : false } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let selectorarrow = getElement ( '.myDpSelectorArrow' ) ; expect ( selectorarrow ) . toBe ( null ) ; comp . closeCalendar ( ) ; opts . showSelectorArrow = true ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; selectorarrow = getElement ( '.myDpSelectorArrow' ) ; expect ( selectorarrow ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - appendSelectorToBody' , ( ) => { comp . setDefaultMonth ( '2019/12' ) ; let opts = { appendSelectorToBody : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let rootElem = getElement ( 'lib-angular-mydatepicker-calendar' ) ; expect ( rootElem ) . not . toBe ( null ) ; let body = rootElem . parentElement . nodeName ; expect ( body . toLowerCase ) . not . toBe ( 'body' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - dateRangeDatesDelimiter' , ( ) => { comp . setDefaultMonth ( '2019/05' ) ; let opts = { dateRange : true , dateRangeDatesDelimiter : ' * ' , dateFormat : 'dd.mm.yyyy' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; date = getElement ( '.d_0_1' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '29.04.2019 * 30.04.2019' ) ; } ) ; it ( 'options - showMonthNumber' , ( ) => { comp . setDefaultMonth ( '2019/12' ) ; let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' , showMonthNumber : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let monthBtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthBtn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; monthBtn . click ( ) ; fixture . detectChanges ( ) ; let monthsNbrs = getElements ( '.myDpMonthNbr' ) ; expect ( monthsNbrs ) . not . toBe ( null ) ; expect ( monthsNbrs . length ) . toBe ( 12 ) ; expect ( monthsNbrs [ 0 ] . textContent . trim ( ) ) . toBe ( '1' ) ; expect ( monthsNbrs [ 3 ] . textContent . trim ( ) ) . toBe ( '4' ) ; expect ( monthsNbrs [ 6 ] . textContent . trim ( ) ) . toBe ( '7' ) ; expect ( monthsNbrs [ 9 ] . textContent . trim ( ) ) . toBe ( '10' ) ; expect ( monthsNbrs [ 11 ] . textContent . trim ( ) ) . toBe ( '12' ) ; fixture . detectChanges ( ) ; let prevMonth = getElement ( '.myDpIconLeftArrow' ) ; expect ( prevMonth ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; prevMonth . click ( ) ; fixture . detectChanges ( ) ; monthsNbrs = getElements ( '.myDpMonthNbr' ) ; expect ( monthsNbrs ) . not . toBe ( null ) ; expect ( monthsNbrs . length ) . toBe ( 12 ) ; expect ( monthsNbrs [ 0 ] . textContent . trim ( ) ) . toBe ( '1' ) ; expect ( monthsNbrs [ 3 ] . textContent . trim ( ) ) . toBe ( '4' ) ; expect ( monthsNbrs [ 6 ] . textContent . trim ( ) ) . toBe ( '7' ) ; expect ( monthsNbrs [ 9 ] . textContent . trim ( ) ) . toBe ( '10' ) ; expect ( monthsNbrs [ 11 ] . textContent . trim ( ) ) . toBe ( '12' ) ; comp . closeCalendar ( ) ; opts . showMonthNumber = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; monthBtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthBtn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; monthBtn . click ( ) ; fixture . detectChanges ( ) ; monthsNbrs = getElement ( '.myDpMonthNbr' ) ; expect ( monthsNbrs ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - showFooterToday and todayTxt' , ( ) => { comp . setDefaultMonth ( '2020/01' ) ; let opts = { dateRange : false , dateFormat : 'd.m.yyyy' , todayTxt : "Today 123" , showFooterToday : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; let today = getTodayDate ( ) ; fixture . detectChanges ( ) ; let footerBtn = getElement ( '.myDpFooterBtn' ) ; expect ( footerBtn ) . not . toBe ( null ) ; expect ( footerBtn . textContent ) . toBe ( "Today 123 " + today ) ; fixture . detectChanges ( ) ; footerBtn . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( today ) ; opts . showFooterToday = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; footerBtn = getElement ( '.myDpFooterBtn' ) ; expect ( footerBtn ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - calendarAnimation' , ( ) => { comp . setDefaultMonth ( '2019/11' ) ; let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' , calendarAnimation : { in : CalAnimation . ScaleTop , out : CalAnimation . Rotate } } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let animationElem = getElement ( '.myDpAnimationScaleTopIn' ) ; expect ( animationElem ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let date = getElement ( '.d_0_0' ) ; expect ( date ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; date . click ( ) ; fixture . detectChanges ( ) ; animationElem = getElement ( '.myDpAnimationRotateOut' ) ; expect ( animationElem ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '28.10.2019' ) ; } ) ; it ( 'options - viewChangeAnimation' , ( ) => { comp . setDefaultMonth ( '2019/11' ) ; let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' , viewChangeAnimation : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let btn = getElement ( '.myDpMonthBtn' ) ; expect ( btn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; btn . click ( ) ; fixture . detectChanges ( ) ; let animationElem = getElement ( '.myDpViewChangeAnimation' ) ; expect ( animationElem ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; btn = getElement ( '.myDpYearBtn' ) ; expect ( btn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; btn . click ( ) ; fixture . detectChanges ( ) ; animationElem = getElement ( '.myDpViewChangeAnimation' ) ; expect ( animationElem ) . not . toBe ( null ) ; comp . closeCalendar ( ) ; opts . viewChangeAnimation = false ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; animationElem = getElement ( '.myDpViewChangeAnimation' ) ; expect ( animationElem ) . toBe ( null ) ; fixture . detectChanges ( ) ; btn = getElement ( '.myDpMonthBtn' ) ; expect ( btn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; btn . click ( ) ; fixture . detectChanges ( ) ; animationElem = getElement ( '.myDpViewChangeAnimation' ) ; expect ( animationElem ) . toBe ( null ) ; fixture . detectChanges ( ) ; btn = getElement ( '.myDpYearBtn' ) ; expect ( btn ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; btn . click ( ) ; fixture . detectChanges ( ) ; animationElem = getElement ( '.myDpViewChangeAnimation' ) ; expect ( animationElem ) . toBe ( null ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - rtl' , ( ) => { comp . setDefaultMonth ( '2020/02' ) ; let opts = { dateRange : false , dateFormat : 'dd.mm.yyyy' , rtl : true } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let td = getElement ( '.d_0_0' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2' ) ; fixture . detectChanges ( ) ; td = getElement ( '.d_0_6' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '27' ) ; fixture . detectChanges ( ) ; td = getElement ( '.d_5_0' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '8' ) ; fixture . detectChanges ( ) ; td = getElement ( '.d_5_6' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2' ) ; fixture . detectChanges ( ) ; let prevBtn = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevBtn ) . not . toBe ( null ) ; prevBtn . click ( ) ; fixture . detectChanges ( ) ; let monthBtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthBtn ) . not . toBe ( null ) ; expect ( monthBtn . textContent . trim ( ) ) . toBe ( 'Mar' ) ; fixture . detectChanges ( ) ; let nextBtn = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextBtn ) . not . toBe ( null ) ; nextBtn . click ( ) ; fixture . detectChanges ( ) ; monthBtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthBtn ) . not . toBe ( null ) ; expect ( monthBtn . textContent . trim ( ) ) . toBe ( 'Feb' ) ; fixture . detectChanges ( ) ; monthBtn = getElement ( '.myDpMonthBtn' ) ; expect ( monthBtn ) . not . toBe ( null ) ; monthBtn . click ( ) ; fixture . detectChanges ( ) ; td = getElement ( '.m_0_0 .myDpMonthValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( 'Mar' ) ; fixture . detectChanges ( ) ; td = getElement ( '.m_0_2 .myDpMonthValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( 'Jan' ) ; fixture . detectChanges ( ) ; td = getElement ( '.m_3_0 .myDpMonthValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( 'Dec' ) ; fixture . detectChanges ( ) ; td = getElement ( '.m_3_2 .myDpMonthValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( 'Oct' ) ; fixture . detectChanges ( ) ; prevBtn = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevBtn ) . not . toBe ( null ) ; prevBtn . click ( ) ; fixture . detectChanges ( ) ; let yearBtn = getElement ( '.myDpYearBtn' ) ; expect ( yearBtn ) . not . toBe ( null ) ; expect ( yearBtn . textContent . trim ( ) ) . toBe ( '2021' ) ; fixture . detectChanges ( ) ; nextBtn = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextBtn ) . not . toBe ( null ) ; nextBtn . click ( ) ; fixture . detectChanges ( ) ; yearBtn = getElement ( '.myDpYearBtn' ) ; expect ( yearBtn ) . not . toBe ( null ) ; expect ( yearBtn . textContent . trim ( ) ) . toBe ( '2020' ) ; fixture . detectChanges ( ) ; yearBtn . click ( ) ; fixture . detectChanges ( ) ; td = getElement ( '.y_0_0 .myDpYearValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2012' ) ; fixture . detectChanges ( ) ; td = getElement ( '.y_0_4 .myDpYearValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2008' ) ; fixture . detectChanges ( ) ; td = getElement ( '.y_4_0 .myDpYearValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2032' ) ; fixture . detectChanges ( ) ; td = getElement ( '.y_4_4 .myDpYearValue' ) ; expect ( td ) . not . toBe ( null ) ; expect ( td . textContent . trim ( ) ) . toBe ( '2028' ) ; fixture . detectChanges ( ) ; prevBtn = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevBtn ) . not . toBe ( null ) ; prevBtn . click ( ) ; fixture . detectChanges ( ) ; yearBtn = getElement ( '.myDpYearBtn' ) ; expect ( yearBtn ) . not . toBe ( null ) ; expect ( yearBtn . textContent . trim ( ) ) . toBe ( '2057 - 2033' ) ; fixture . detectChanges ( ) ; nextBtn = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextBtn ) . not . toBe ( null ) ; nextBtn . click ( ) ; fixture . detectChanges ( ) ; yearBtn = getElement ( '.myDpYearBtn' ) ; expect ( yearBtn ) . not . toBe ( null ) ; expect ( yearBtn . textContent . trim ( ) ) . toBe ( '2032 - 2008' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - stylesData' , ( ) => { comp . setDefaultMonth ( '2019/10' ) ; let opts = { stylesData : { selector : '' , styles : '' } } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let leftarrow = getElement ( '.myDpIconLeftArrow' ) ; expect ( leftarrow ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( leftarrow ) . color ) . toBe ( 'rgb(34, 34, 34)' ) ; fixture . detectChanges ( ) ; let rightarrow = getElement ( '.myDpIconRightArrow' ) ; expect ( rightarrow ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( rightarrow ) . color ) . toBe ( 'rgb(34, 34, 34)' ) ; comp . closeCalendar ( ) ; opts . stylesData = { selector : 'dp1' , styles : `
        .dp1 .myDpIconLeftArrow {
          color: red;
        }
        .dp1 .myDpIconRightArrow {
          color: blue;
        }  
      ` } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; leftarrow = getElement ( '.myDpIconLeftArrow' ) ; expect ( leftarrow ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( leftarrow ) . color ) . toBe ( 'rgb(255, 0, 0)' ) ; fixture . detectChanges ( ) ; rightarrow = getElement ( '.myDpIconRightArrow' ) ; expect ( rightarrow ) . not . toBe ( null ) ; expect ( window . getComputedStyle ( rightarrow ) . color ) . toBe ( 'rgb(0, 0, 255)' ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - ariaLabelPrevMonth' , ( ) => { comp . setDefaultMonth ( '2019/10' ) ; let opts = { ariaLabelPrevMonth : 'aria-label prev month' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let prevmonth = getElement ( '.myDpPrevBtn .myDpHeaderBtn' ) ; expect ( prevmonth ) . not . toBe ( null ) ; expect ( prevmonth . attributes [ 'aria-label' ] . textContent ) . toBe ( opts . ariaLabelPrevMonth ) ; comp . closeCalendar ( ) ; } ) ; it ( 'options - ariaLabelNextMonth' , ( ) => { comp . setDefaultMonth ( '2019/10' ) ; let opts = { ariaLabelNextMonth : 'aria-label next month' } ; comp . parseOptions ( opts ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let nextmonth = getElement ( '.myDpNextBtn .myDpHeaderBtn' ) ; expect ( nextmonth ) . not . toBe ( null ) ; expect ( nextmonth . attributes [ 'aria-label' ] . textContent ) . toBe ( opts . ariaLabelNextMonth ) ; comp . closeCalendar ( ) ; } ) ; it ( 'locale attribute' , ( ) => { comp . setLocale ( 'ja' ) ; comp . setDefaultMonth ( '2019/05' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let selector = getElement ( '.myDpSelector' ) ; expect ( selector ) . not . toBe ( null ) ; fixture . detectChanges ( ) ; let titles = getElements ( '.myDpWeekDayTitle' ) ; expect ( titles ) . not . toBe ( null ) ; expect ( titles . length ) . toBe ( 7 ) ; expect ( titles [ 0 ] . textContent . trim ( ) ) . toBe ( '月' ) ; expect ( titles [ 6 ] . textContent . trim ( ) ) . toBe ( '日' ) ; fixture . detectChanges ( ) ; let highlight = getElements ( '.myDpHighlight' ) ; expect ( highlight ) . not . toBe ( null ) ; expect ( highlight . length ) . toBe ( 0 ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; monthlabel . click ( ) ; fixture . detectChanges ( ) ; let monthvalue = getElements ( '.myDpMonthValue' ) ; expect ( monthvalue ) . not . toBe ( null ) ; expect ( monthvalue . length ) . toBe ( 12 ) ; expect ( monthvalue [ 0 ] . textContent . trim ( ) ) . toBe ( '１月' ) ; expect ( monthvalue [ 11 ] . textContent . trim ( ) ) . toBe ( '１２月' ) ; fixture . detectChanges ( ) ; let firstcell = getElement ( '.m_0_0' ) ; expect ( firstcell ) . not . toBe ( null ) ; firstcell . click ( ) ; fixture . detectChanges ( ) ; firstcell = getElement ( '.d_0_0' ) ; expect ( firstcell ) . not . toBe ( null ) ; firstcell . click ( ) ; fixture . detectChanges ( ) ; let input = getElement ( '.myDateInput' ) ; expect ( input . value ) . toBe ( '2018.12.31' ) ; } ) ; it ( 'defaultMonth attribute' , ( ) => { comp . setDefaultMonth ( '2016/02' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; let monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent . trim ( ) ) . toBe ( 'Feb' ) ; fixture . detectChanges ( ) ; let yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent . trim ( ) ) . toBe ( '2016' ) ; comp . closeCalendar ( ) ; comp . setDefaultMonth ( '2019/08' ) ; comp . openCalendar ( ) ; fixture . detectChanges ( ) ; monthlabel = getElement ( '.myDpMonthYearText .myDpMonthBtn' ) ; expect ( monthlabel ) . not . toBe ( null ) ; expect ( monthlabel . textContent . trim ( ) ) . toBe ( 'Aug' ) ; fixture . detectChanges ( ) ; yearlabel = getElement ( '.myDpMonthYearText .myDpYearBtn' ) ; expect ( yearlabel ) . not . toBe ( null ) ; expect ( yearlabel . textContent . trim ( ) ) . toBe ( '2019' ) ; comp . closeCalendar ( ) ; } ) ; } ) ;