1
- import { ComponentFixture , async , TestBed , fakeAsync , tick } from '@angular/core/testing' ;
1
+ import { ComponentFixture , TestBed , fakeAsync , tick , waitForAsync } from '@angular/core/testing' ;
2
2
import { Component , OnInit , ViewChild , DebugElement } from '@angular/core' ;
3
3
import { IgxInputGroupModule } from '../input-group/public_api' ;
4
4
import { InteractionMode } from '../core/enums' ;
@@ -206,7 +206,7 @@ describe('IgxDateRangePicker', () => {
206
206
describe ( 'Single Input' , ( ) => {
207
207
let singleInputElement : DebugElement ;
208
208
configureTestSuite ( ) ;
209
- beforeAll ( async ( ( ) => {
209
+ beforeAll ( waitForAsync ( ( ) => {
210
210
TestBed . configureTestingModule ( {
211
211
declarations : [
212
212
DateRangeTestComponent ,
@@ -599,14 +599,48 @@ describe('IgxDateRangePicker', () => {
599
599
expect ( dateRange . onClosing . emit ) . toHaveBeenCalledTimes ( 1 ) ;
600
600
expect ( dateRange . onClosed . emit ) . toHaveBeenCalledTimes ( 1 ) ;
601
601
} ) ) ;
602
+
603
+ it ( 'should not open calendar with ALT + DOWN ARROW key if disabled is set to true' , fakeAsync ( ( ) => {
604
+ fixture . componentInstance . mode = InteractionMode . DropDown ;
605
+ fixture . componentInstance . disabled = true ;
606
+ fixture . detectChanges ( ) ;
607
+
608
+ spyOn ( dateRange . onOpening , 'emit' ) . and . callThrough ( ) ;
609
+ spyOn ( dateRange . onOpened , 'emit' ) . and . callThrough ( ) ;
610
+
611
+ UIInteractions . triggerEventHandlerKeyDown ( 'ArrowDown' , calendar , true ) ;
612
+ tick ( DEBOUNCE_TIME * 2 ) ;
613
+ fixture . detectChanges ( ) ;
614
+ expect ( dateRange . collapsed ) . toBeTruthy ( ) ;
615
+ expect ( dateRange . onOpening . emit ) . toHaveBeenCalledTimes ( 0 ) ;
616
+ expect ( dateRange . onOpened . emit ) . toHaveBeenCalledTimes ( 0 ) ;
617
+ } ) ) ;
602
618
} ) ;
619
+
620
+ it ( 'should expand the calendar if the default icon is clicked' , fakeAsync ( ( ) => {
621
+ const input = fixture . debugElement . query ( By . css ( 'igx-input-group' ) ) ;
622
+ input . triggerEventHandler ( 'click' , UIInteractions . getMouseEvent ( 'click' ) ) ;
623
+ tick ( ) ;
624
+ fixture . detectChanges ( ) ;
625
+ expect ( fixture . componentInstance . dateRange . collapsed ) . toBeFalsy ( ) ;
626
+ } ) ) ;
627
+
628
+ it ( 'should not expand the calendar if the default icon is clicked when disabled is set to true' , fakeAsync ( ( ) => {
629
+ fixture . componentInstance . disabled = true ;
630
+ fixture . detectChanges ( ) ;
631
+ const input = fixture . debugElement . query ( By . css ( 'igx-input-group' ) ) ;
632
+ input . triggerEventHandler ( 'click' , UIInteractions . getMouseEvent ( 'click' ) ) ;
633
+ tick ( ) ;
634
+ fixture . detectChanges ( ) ;
635
+ expect ( fixture . componentInstance . dateRange . collapsed ) . toBeTruthy ( ) ;
636
+ } ) ) ;
603
637
} ) ;
604
638
605
639
describe ( 'Two Inputs' , ( ) => {
606
640
let startInput : DebugElement ;
607
641
let endInput : DebugElement ;
608
642
configureTestSuite ( ) ;
609
- beforeAll ( async ( ( ) => {
643
+ beforeAll ( waitForAsync ( ( ) => {
610
644
TestBed . configureTestingModule ( {
611
645
declarations : [
612
646
DateRangeTestComponent ,
@@ -876,6 +910,21 @@ describe('IgxDateRangePicker', () => {
876
910
expect ( dateRange . onClosing . emit ) . toHaveBeenCalledTimes ( 1 ) ;
877
911
expect ( dateRange . onClosed . emit ) . toHaveBeenCalledTimes ( 1 ) ;
878
912
} ) ) ;
913
+
914
+ it ( 'should not open calendar with ALT + DOWN ARROW key if disabled is set to true' , fakeAsync ( ( ) => {
915
+ fixture . componentInstance . disabled = true ;
916
+ fixture . detectChanges ( ) ;
917
+
918
+ spyOn ( dateRange . onOpening , 'emit' ) . and . callThrough ( ) ;
919
+ spyOn ( dateRange . onOpened , 'emit' ) . and . callThrough ( ) ;
920
+
921
+ UIInteractions . triggerEventHandlerKeyDown ( 'ArrowDown' , calendar , true ) ;
922
+ tick ( DEBOUNCE_TIME * 2 ) ;
923
+ fixture . detectChanges ( ) ;
924
+ expect ( dateRange . collapsed ) . toBeTruthy ( ) ;
925
+ expect ( dateRange . onOpening . emit ) . toHaveBeenCalledTimes ( 0 ) ;
926
+ expect ( dateRange . onOpened . emit ) . toHaveBeenCalledTimes ( 0 ) ;
927
+ } ) ) ;
879
928
} ) ;
880
929
881
930
it ( 'should focus the last focused input after the calendar closes - dropdown' , fakeAsync ( ( ) => {
@@ -915,6 +964,24 @@ describe('IgxDateRangePicker', () => {
915
964
. toBeTruthy ( ) ;
916
965
} ) ) ;
917
966
967
+ it ( 'should expand the calendar if the default icon is clicked' , fakeAsync ( ( ) => {
968
+ const icon = fixture . debugElement . query ( By . css ( 'igx-picker-toggle' ) ) ;
969
+ icon . triggerEventHandler ( 'click' , UIInteractions . getMouseEvent ( 'click' ) ) ;
970
+ tick ( ) ;
971
+ fixture . detectChanges ( ) ;
972
+ expect ( fixture . componentInstance . dateRange . collapsed ) . toBeFalsy ( ) ;
973
+ } ) ) ;
974
+
975
+ it ( 'should not expand the calendar if the default icon is clicked when disabled is set to true' , fakeAsync ( ( ) => {
976
+ fixture . componentInstance . disabled = true ;
977
+ fixture . detectChanges ( ) ;
978
+ const icon = fixture . debugElement . query ( By . css ( 'igx-picker-toggle' ) ) ;
979
+ icon . triggerEventHandler ( 'click' , UIInteractions . getMouseEvent ( 'click' ) ) ;
980
+ tick ( ) ;
981
+ fixture . detectChanges ( ) ;
982
+ expect ( fixture . componentInstance . dateRange . collapsed ) . toBeTruthy ( ) ;
983
+ } ) ) ;
984
+
918
985
describe ( 'Data binding' , ( ) => {
919
986
it ( 'should properly update component value with ngModel bound to projected inputs - #7353' , fakeAsync ( ( ) => {
920
987
fixture = TestBed . createComponent ( DateRangeTwoInputsNgModelTestComponent ) ;
@@ -931,7 +998,7 @@ describe('IgxDateRangePicker', () => {
931
998
932
999
describe ( 'Rendering' , ( ) => {
933
1000
configureTestSuite ( ) ;
934
- beforeAll ( async ( ( ) => {
1001
+ beforeAll ( waitForAsync ( ( ) => {
935
1002
TestBed . configureTestingModule ( {
936
1003
declarations : [
937
1004
DateRangeTestComponent ,
@@ -1065,6 +1132,7 @@ export class DateRangeTestComponent implements OnInit {
1065
1132
[ x : string ] : any ;
1066
1133
public doneButtonText : string ;
1067
1134
public mode : InteractionMode ;
1135
+ public disabled = false ;
1068
1136
public minValue : Date | String ;
1069
1137
public maxValue : Date | String ;
1070
1138
@@ -1078,16 +1146,18 @@ export class DateRangeTestComponent implements OnInit {
1078
1146
@Component ( {
1079
1147
selector : 'igx-date-range-single-input-test' ,
1080
1148
template : `
1081
- <igx-date-range-picker [mode]="mode" [minValue]="minValue" [maxValue]="maxValue">
1149
+ <igx-date-range-picker [mode]="mode" [disabled]="disabled" [ minValue]="minValue" [maxValue]="maxValue">
1082
1150
</igx-date-range-picker>
1083
1151
`
1084
1152
} )
1085
- export class DateRangeDefaultComponent extends DateRangeTestComponent { }
1153
+ export class DateRangeDefaultComponent extends DateRangeTestComponent {
1154
+ public disabled = false ;
1155
+ }
1086
1156
1087
1157
@Component ( {
1088
1158
selector : 'igx-date-range-two-inputs-test' ,
1089
1159
template : `
1090
- <igx-date-range-picker [mode]="mode" [(ngModel)]="range" [inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
1160
+ <igx-date-range-picker [mode]="mode" [disabled]="disabled" [ (ngModel)]="range" [inputFormat]="inputFormat" [displayFormat]="displayFormat" required>
1091
1161
<igx-date-range-start>
1092
1162
<igx-picker-toggle igxPrefix>
1093
1163
<igx-icon>calendar_view_day</igx-icon>
@@ -1101,9 +1171,10 @@ export class DateRangeDefaultComponent extends DateRangeTestComponent { }
1101
1171
`
1102
1172
} )
1103
1173
export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
1104
- range ;
1105
- inputFormat : string ;
1106
- displayFormat : string ;
1174
+ public range ;
1175
+ public inputFormat : string ;
1176
+ public displayFormat : string ;
1177
+ public disabled = false ;
1107
1178
}
1108
1179
@Component ( {
1109
1180
selector : 'igx-date-range-two-inputs-ng-model' ,
0 commit comments