1
- import { ESCAPE } from '@angular/cdk/keycodes' ;
1
+ import { ENTER , ESCAPE , RIGHT_ARROW } from '@angular/cdk/keycodes' ;
2
2
import { OverlayContainer } from '@angular/cdk/overlay' ;
3
3
import {
4
4
createKeyboardEvent ,
5
5
dispatchEvent ,
6
6
dispatchFakeEvent ,
7
+ dispatchKeyboardEvent ,
7
8
dispatchMouseEvent ,
8
9
} from '@angular/cdk/testing' ;
9
10
import { Component , ViewChild } from '@angular/core' ;
@@ -203,7 +204,7 @@ describe('MatDatepicker', () => {
203
204
} ) ;
204
205
} ) ) ;
205
206
206
- it ( 'setting selected should update input and close calendar' , async ( ( ) => {
207
+ it ( 'setting selected via click should update input and close calendar' , async ( ( ) => {
207
208
testComponent . touch = true ;
208
209
fixture . detectChanges ( ) ;
209
210
@@ -223,8 +224,31 @@ describe('MatDatepicker', () => {
223
224
} ) ;
224
225
} ) ) ;
225
226
227
+ it ( 'setting selected via enter press should update input and close calendar' , ( ) => {
228
+ testComponent . touch = true ;
229
+ fixture . detectChanges ( ) ;
230
+
231
+ testComponent . datepicker . open ( ) ;
232
+ fixture . detectChanges ( ) ;
233
+
234
+ expect ( document . querySelector ( 'mat-dialog-container' ) ) . not . toBeNull ( ) ;
235
+ expect ( testComponent . datepickerInput . value ) . toEqual ( new Date ( 2020 , JAN , 1 ) ) ;
236
+
237
+ let calendarBodyEl = document . querySelector ( '.mat-calendar-content' ) as HTMLElement ;
238
+
239
+ dispatchKeyboardEvent ( calendarBodyEl , 'keydown' , RIGHT_ARROW ) ;
240
+ fixture . detectChanges ( ) ;
241
+ dispatchKeyboardEvent ( calendarBodyEl , 'keydown' , ENTER ) ;
242
+ fixture . detectChanges ( ) ;
243
+
244
+ fixture . whenStable ( ) . then ( ( ) => {
245
+ expect ( document . querySelector ( 'mat-dialog-container' ) ) . toBeNull ( ) ;
246
+ expect ( testComponent . datepickerInput . value ) . toEqual ( new Date ( 2020 , JAN , 2 ) ) ;
247
+ } ) ;
248
+ } ) ;
249
+
226
250
it ( 'clicking the currently selected date should close the calendar ' +
227
- 'without firing selectedChanged' , ( ) => {
251
+ 'without firing selectedChanged' , ( ) => {
228
252
const selectedChangedSpy =
229
253
spyOn ( testComponent . datepicker . selectedChanged , 'emit' ) . and . callThrough ( ) ;
230
254
@@ -246,6 +270,28 @@ describe('MatDatepicker', () => {
246
270
expect ( testComponent . datepickerInput . value ) . toEqual ( new Date ( 2020 , JAN , 2 ) ) ;
247
271
} ) ;
248
272
273
+ it ( 'pressing enter on the currently selected date should close the calendar without ' +
274
+ 'firing selectedChanged' , ( ) => {
275
+ const selectedChangedSpy =
276
+ spyOn ( testComponent . datepicker . selectedChanged , 'emit' ) . and . callThrough ( ) ;
277
+
278
+ testComponent . datepicker . open ( ) ;
279
+ fixture . detectChanges ( ) ;
280
+
281
+ let calendarBodyEl = document . querySelector ( '.mat-calendar-content' ) as HTMLElement ;
282
+ expect ( calendarBodyEl ) . not . toBeNull ( ) ;
283
+ expect ( testComponent . datepickerInput . value ) . toEqual ( new Date ( 2020 , JAN , 1 ) ) ;
284
+
285
+ dispatchKeyboardEvent ( calendarBodyEl , 'keydown' , ENTER ) ;
286
+ fixture . detectChanges ( ) ;
287
+
288
+ fixture . whenStable ( ) . then ( ( ) => {
289
+ expect ( selectedChangedSpy . calls . count ( ) ) . toEqual ( 0 ) ;
290
+ expect ( document . querySelector ( 'mat-dialog-container' ) ) . toBeNull ( ) ;
291
+ expect ( testComponent . datepickerInput . value ) . toEqual ( new Date ( 2020 , JAN , 1 ) ) ;
292
+ } ) ;
293
+ } ) ;
294
+
249
295
it ( 'startAt should fallback to input value' , ( ) => {
250
296
expect ( testComponent . datepicker . startAt ) . toEqual ( new Date ( 2020 , JAN , 1 ) ) ;
251
297
} ) ;
0 commit comments