@@ -15,11 +15,13 @@ import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle
15
15
import { IBaseCancelableBrowserEventArgs , IBaseEventArgs , KEYS } from '../core/utils' ;
16
16
import { DatePart , IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api' ;
17
17
import { IgxItemListDirective } from './time-picker.directives' ;
18
+ import { DateTimeUtil } from '../date-common/util/date-time.util' ;
19
+ import { time } from 'console' ;
18
20
19
21
const CSS_CLASS_TIMEPICKER = 'igx-time-picker' ;
20
22
const CSS_CLASS_INPUTGROUP = 'igx-input-group' ;
21
23
const CSS_CLASS_INPUTGROUP_DISABLED = 'igx-input-group--disabled' ;
22
- const CSS_CLASS_INPUT = 'igx-input-group__input' ;
24
+ const CSS_CLASS_INPUT = '. igx-input-group__input' ;
23
25
const CSS_CLASS_DROPDOWN = '.igx-time-picker--dropdown' ;
24
26
const CSS_CLASS_HOURLIST = '.igx-time-picker__hourList' ;
25
27
const CSS_CLASS_MINUTELIST = '.igx-time-picker__minuteList' ;
@@ -41,7 +43,7 @@ describe('IgxTimePicker', () => {
41
43
'registerOnTouchedCb' ,
42
44
'registerOnValidatorChangeCb' ] ) ;
43
45
const mockInjector = jasmine . createSpyObj ( 'Injector' , { get : mockNgControl } ) ;
44
- const mockDateTimeEditorDirective = jasmine . createSpyObj ( 'IgxDateTimeEditorDirective' , { value : null } ) ;
46
+ const mockDateTimeEditorDirective = jasmine . createSpyObj ( 'IgxDateTimeEditorDirective' , [ 'increment' , 'decrement' ] , { value : null } ) ;
45
47
46
48
it ( 'should open/close the dropdown with open()/close() method' , ( ) => {
47
49
timePicker = new IgxTimePickerComponent ( elementRef , null , null , null , mockInjector ) ;
@@ -136,7 +138,6 @@ describe('IgxTimePicker', () => {
136
138
const selectedDate = new Date ( 2020 , 12 , 12 , 6 , 45 , 0 ) ;
137
139
spyOn ( timePicker . valueChange , 'emit' ) . and . callThrough ( ) ;
138
140
139
-
140
141
timePicker . select ( selectedDate ) ;
141
142
expect ( timePicker . value ) . toEqual ( selectedDate ) ;
142
143
expect ( timePicker . valueChange . emit ) . toHaveBeenCalled ( ) ;
@@ -163,6 +164,24 @@ describe('IgxTimePicker', () => {
163
164
expect ( timePicker . validationFailed . emit ) . toHaveBeenCalled ( ) ;
164
165
expect ( timePicker . validationFailed . emit ) . toHaveBeenCalledWith ( args ) ;
165
166
} ) ;
167
+
168
+ xit ( 'should change date parts correctly with increment() and decrement() methods' , ( ) => {
169
+ timePicker = new IgxTimePickerComponent ( elementRef , null , null , null , null ) ;
170
+ ( timePicker as any ) . dateTimeEditor = mockDateTimeEditorDirective ;
171
+
172
+ const date = new Date ( 2020 , 12 , 12 , 10 , 30 , 30 ) ;
173
+ timePicker . value = new Date ( date ) ;
174
+ timePicker . minValue = new Date ( 2020 , 12 , 12 , 6 , 0 , 0 ) ;
175
+ timePicker . maxValue = new Date ( 2020 , 12 , 12 , 16 , 0 , 0 ) ;
176
+ timePicker . itemsDelta = { hour : 2 , minute : 20 , second : 1 } ;
177
+ spyOn ( timePicker . valueChange , 'emit' ) . and . callThrough ( ) ;
178
+
179
+ timePicker . increment ( DatePart . Hours ) ;
180
+ date . setHours ( date . getHours ( ) + timePicker . itemsDelta . hour ) ;
181
+ expect ( timePicker . value ) . toEqual ( date ) ;
182
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalled ( ) ;
183
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledWith ( date ) ;
184
+ } ) ;
166
185
} ) ;
167
186
168
187
describe ( 'Interaction tests' , ( ) => {
@@ -171,6 +190,8 @@ describe('IgxTimePicker', () => {
171
190
let inputGroup : DebugElement ;
172
191
let input : DebugElement ;
173
192
let hourColumn : DebugElement ;
193
+ let minutesColumn : DebugElement ;
194
+ let ampmColumn : DebugElement ;
174
195
let toggleDirectiveElement : DebugElement ;
175
196
let toggleDirective : IgxToggleDirective ;
176
197
@@ -294,7 +315,7 @@ describe('IgxTimePicker', () => {
294
315
hourColumn . triggerEventHandler ( 'wheel' , event ) ;
295
316
fixture . detectChanges ( ) ;
296
317
hourColumn . triggerEventHandler ( 'wheel' , event ) ;
297
- fixture . detectChanges ( ) ; hourColumn . triggerEventHandler ( 'wheel' , event ) ;
318
+ fixture . detectChanges ( ) ; hourColumn . triggerEventHandler ( 'wheel' , event ) ;
298
319
fixture . detectChanges ( ) ;
299
320
const selectedHour = fixture . componentInstance . date . getHours ( ) - 3 ;
300
321
expect ( ( timePicker . value as Date ) . getHours ( ) ) . toEqual ( selectedHour ) ;
@@ -397,6 +418,34 @@ describe('IgxTimePicker', () => {
397
418
398
419
closingSub . unsubscribe ( ) ;
399
420
} ) ) ;
421
+
422
+ it ( 'should change date parts correctly with increment() and decrement() methods' , ( ) => {
423
+ const date = new Date ( 2020 , 12 , 12 , 10 , 30 , 30 ) ;
424
+ timePicker . value = new Date ( date ) ;
425
+ timePicker . minValue = new Date ( 2020 , 12 , 12 , 6 , 0 , 0 ) ;
426
+ timePicker . maxValue = new Date ( 2020 , 12 , 12 , 16 , 0 , 0 ) ;
427
+ timePicker . itemsDelta = { hour : 2 , minute : 20 , second : 15 } ;
428
+ fixture . detectChanges ( ) ;
429
+ spyOn ( timePicker . valueChange , 'emit' ) . and . callThrough ( ) ;
430
+
431
+ timePicker . increment ( DatePart . Hours ) ;
432
+ date . setHours ( date . getHours ( ) + timePicker . itemsDelta . hour ) ;
433
+ expect ( timePicker . value ) . toEqual ( date ) ;
434
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledTimes ( 1 ) ;
435
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledWith ( date ) ;
436
+
437
+ timePicker . increment ( DatePart . Minutes ) ;
438
+ date . setMinutes ( date . getMinutes ( ) + timePicker . itemsDelta . minute ) ;
439
+ expect ( timePicker . value ) . toEqual ( date ) ;
440
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledTimes ( 2 ) ;
441
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledWith ( date ) ;
442
+
443
+ timePicker . decrement ( DatePart . Seconds ) ;
444
+ date . setSeconds ( date . getSeconds ( ) - timePicker . itemsDelta . second ) ;
445
+ expect ( timePicker . value ) . toEqual ( date ) ;
446
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledTimes ( 3 ) ;
447
+ expect ( timePicker . valueChange . emit ) . toHaveBeenCalledWith ( date ) ;
448
+ } ) ;
400
449
} ) ;
401
450
402
451
describe ( 'Renedering tests' , ( ) => {
@@ -419,10 +468,21 @@ describe('IgxTimePicker', () => {
419
468
timePickerElement = fixture . debugElement . query ( By . css ( CSS_CLASS_TIMEPICKER ) ) . nativeElement ;
420
469
inputGroup = fixture . debugElement . query ( By . css ( `.${ CSS_CLASS_INPUTGROUP } ` ) ) ;
421
470
hourColumn = fixture . debugElement . query ( By . css ( CSS_CLASS_HOURLIST ) ) ;
471
+ minutesColumn = fixture . debugElement . query ( By . css ( CSS_CLASS_MINUTELIST ) ) ;
472
+ ampmColumn = fixture . debugElement . query ( By . css ( CSS_CLASS_AMPMLIST ) ) ;
422
473
toggleDirectiveElement = fixture . debugElement . query ( By . directive ( IgxToggleDirective ) ) ;
423
474
toggleDirective = toggleDirectiveElement . injector . get ( IgxToggleDirective ) as IgxToggleDirective ;
424
475
} ) ) ;
425
476
477
+ it ( 'should initialize all input properties with their default values' , ( ) => {
478
+ expect ( timePicker . mode ) . toEqual ( PickerInteractionMode . DropDown ) ;
479
+ expect ( timePicker . inputFormat ) . toEqual ( DateTimeUtil . DEFAULT_TIME_INPUT_FORMAT ) ;
480
+ expect ( timePicker . itemsDelta . hour ) . toEqual ( 1 ) ;
481
+ expect ( timePicker . itemsDelta . minute ) . toEqual ( 1 ) ;
482
+ expect ( timePicker . itemsDelta . second ) . toEqual ( 1 ) ;
483
+ expect ( timePicker . disabled ) . toEqual ( false ) ;
484
+ } ) ;
485
+
426
486
it ( 'should be able to change the mode at runtime' , fakeAsync ( ( ) => {
427
487
fixture . componentInstance . timePicker . mode = PickerInteractionMode . DropDown ;
428
488
fixture . detectChanges ( ) ;
@@ -500,13 +560,52 @@ describe('IgxTimePicker', () => {
500
560
501
561
expect ( selectedTime ) . toEqual ( `${ hours } :${ minutes } ${ ampm } ` ) ;
502
562
} ) ) ;
563
+
564
+ it ( 'should apply all aria attributes correctly' , fakeAsync ( ( ) => {
565
+ const input = fixture . nativeElement . querySelector ( CSS_CLASS_INPUT ) ;
566
+ expect ( input . getAttribute ( 'role' ) ) . toEqual ( 'combobox' ) ;
567
+ expect ( input . getAttribute ( 'aria-haspopup' ) ) . toEqual ( 'dialog' ) ;
568
+ expect ( input . getAttribute ( 'aria-labelledby' ) ) . toEqual ( timePicker . label . id ) ;
569
+ expect ( input . getAttribute ( 'aria-expanded' ) ) . toEqual ( 'false' ) ;
570
+ timePicker . open ( ) ;
571
+ tick ( ) ;
572
+ fixture . detectChanges ( ) ;
573
+ expect ( input . getAttribute ( 'aria-expanded' ) ) . toEqual ( 'true' ) ;
574
+ let hour = 8 ;
575
+ let minutes = 42 ;
576
+ let ampm = 0 ;
577
+ hourColumn . children . forEach ( el => function ( ) {
578
+ expect ( el . attributes . role ) . toEqual ( 'spinbutton' ) ;
579
+ const hours = hour < 10 ? `0${ hour } ` : `${ hour } ` ;
580
+ expect ( el . attributes [ "ariaLabel" ] ) . toEqual ( hours ) ;
581
+ hour ++ ;
582
+ } ) ;
583
+ minutesColumn . children . forEach ( el => function ( ) {
584
+ expect ( el . attributes . role ) . toEqual ( 'spinbutton' ) ;
585
+ expect ( el . attributes [ "ariaLabel" ] ) . toEqual ( `${ minutes } ` ) ;
586
+ minutes ++ ;
587
+ } ) ;
588
+ ampmColumn . children . forEach ( el => function ( ) {
589
+ expect ( el . attributes . role ) . toEqual ( 'spinbutton' ) ;
590
+ const ampmLabel = ampm === 3 ? 'AM' : ampm === 4 ? 'PM' : null ;
591
+ expect ( el . attributes [ "ariaLabel" ] ) . toEqual ( ampmLabel ) ;
592
+ ampm ++ ;
593
+ } ) ;
594
+ timePicker . close ( ) ;
595
+ tick ( ) ; [ [ ] ]
596
+ fixture . detectChanges ( ) ;
597
+ expect ( input . getAttribute ( 'aria-expanded' ) ) . toEqual ( 'false' ) ;
598
+ } ) ) ;
599
+
503
600
} ) ;
504
601
} ) ;
505
602
} ) ;
506
603
507
604
@Component ( {
508
605
template : `
509
- <igx-time-picker #picker [value]="date" [mode]="mode" [minValue]="minValue" [maxValue]="maxValue"></igx-time-picker>
606
+ <igx-time-picker #picker [value]="date" [mode]="mode" [minValue]="minValue" [maxValue]="maxValue">
607
+ <label igxLabel>Select time</label>
608
+ </igx-time-picker>
510
609
`
511
610
} )
512
611
export class IgxTimePickerTestComponent {
0 commit comments