1
- import {
2
- Component ,
3
- DebugElement ,
4
- Directive ,
5
- ElementRef ,
6
- Inject ,
7
- InjectionToken ,
8
- Input ,
9
- OnInit ,
10
- Optional ,
11
- ViewChild ,
12
- } from '@angular/core' ;
1
+ import { Component , DebugElement , ElementRef , ViewChild } from '@angular/core' ;
13
2
import { ComponentFixture , TestBed , waitForAsync } from '@angular/core/testing' ;
14
3
import { By } from '@angular/platform-browser' ;
15
4
import { CdkComboboxModule } from './combobox-module' ;
16
5
import { CdkCombobox } from './combobox' ;
17
6
import { dispatchKeyboardEvent , dispatchMouseEvent } from '../../cdk/testing/private' ;
18
- import {
19
- AriaHasPopupValue ,
20
- CdkComboboxPanel ,
21
- } from '@angular/cdk-experimental/combobox/combobox-panel' ;
22
7
import { DOWN_ARROW , ESCAPE } from '@angular/cdk/keycodes' ;
8
+ import { CdkComboboxPopup } from '@angular/cdk-experimental/combobox/combobox-popup' ;
23
9
24
10
describe ( 'Combobox' , ( ) => {
25
11
describe ( 'with a basic toggle trigger' , ( ) => {
26
12
let fixture : ComponentFixture < ComboboxToggle > ;
27
13
let testComponent : ComboboxToggle ;
28
14
29
15
let combobox : DebugElement ;
30
- let comboboxInstance : CdkCombobox < unknown > ;
16
+ let comboboxInstance : CdkCombobox ;
31
17
let comboboxElement : HTMLElement ;
32
18
33
19
let dialog : DebugElement ;
34
- let dialogInstance : FakeDialogContent < unknown > ;
20
+ let dialogInstance : CdkComboboxPopup ;
35
21
let dialogElement : HTMLElement ;
36
22
37
23
let applyButton : DebugElement ;
@@ -41,7 +27,7 @@ describe('Combobox', () => {
41
27
waitForAsync ( ( ) => {
42
28
TestBed . configureTestingModule ( {
43
29
imports : [ CdkComboboxModule ] ,
44
- declarations : [ ComboboxToggle , FakeDialogContent ] ,
30
+ declarations : [ ComboboxToggle ] ,
45
31
} ) . compileComponents ( ) ;
46
32
} ) ,
47
33
) ;
@@ -53,7 +39,7 @@ describe('Combobox', () => {
53
39
testComponent = fixture . debugElement . componentInstance ;
54
40
55
41
combobox = fixture . debugElement . query ( By . directive ( CdkCombobox ) ) ;
56
- comboboxInstance = combobox . injector . get < CdkCombobox < unknown > > ( CdkCombobox ) ;
42
+ comboboxInstance = combobox . injector . get < CdkCombobox > ( CdkCombobox ) ;
57
43
comboboxElement = combobox . nativeElement ;
58
44
} ) ;
59
45
@@ -77,10 +63,10 @@ describe('Combobox', () => {
77
63
dispatchMouseEvent ( comboboxElement , 'click' ) ;
78
64
fixture . detectChanges ( ) ;
79
65
80
- dialog = fixture . debugElement . query ( By . directive ( FakeDialogContent ) ) ;
81
- dialogInstance = dialog . injector . get < FakeDialogContent < unknown > > ( FakeDialogContent ) ;
66
+ dialog = fixture . debugElement . query ( By . directive ( CdkComboboxPopup ) ) ;
67
+ dialogInstance = dialog . injector . get < CdkComboboxPopup > ( CdkComboboxPopup ) ;
82
68
83
- expect ( comboboxElement . getAttribute ( 'aria-owns' ) ) . toBe ( dialogInstance . dialogId ) ;
69
+ expect ( comboboxElement . getAttribute ( 'aria-owns' ) ) . toBe ( dialogInstance . id ) ;
84
70
expect ( comboboxElement . getAttribute ( 'aria-haspopup' ) ) . toBe ( 'dialog' ) ;
85
71
} ) ;
86
72
@@ -110,7 +96,7 @@ describe('Combobox', () => {
110
96
111
97
expect ( comboboxInstance . isOpen ( ) ) . toBeTrue ( ) ;
112
98
113
- dialog = fixture . debugElement . query ( By . directive ( FakeDialogContent ) ) ;
99
+ dialog = fixture . debugElement . query ( By . directive ( CdkComboboxPopup ) ) ;
114
100
dialogElement = dialog . nativeElement ;
115
101
116
102
expect ( document . activeElement ) . toBe ( dialogElement ) ;
@@ -201,13 +187,13 @@ describe('Combobox', () => {
201
187
let testComponent : ComboboxToggle ;
202
188
203
189
let combobox : DebugElement ;
204
- let comboboxInstance : CdkCombobox < unknown > ;
190
+ let comboboxInstance : CdkCombobox ;
205
191
206
192
beforeEach (
207
193
waitForAsync ( ( ) => {
208
194
TestBed . configureTestingModule ( {
209
195
imports : [ CdkComboboxModule ] ,
210
- declarations : [ ComboboxToggle , FakeDialogContent ] ,
196
+ declarations : [ ComboboxToggle ] ,
211
197
} ) . compileComponents ( ) ;
212
198
} ) ,
213
199
) ;
@@ -219,7 +205,7 @@ describe('Combobox', () => {
219
205
testComponent = fixture . debugElement . componentInstance ;
220
206
221
207
combobox = fixture . debugElement . query ( By . directive ( CdkCombobox ) ) ;
222
- comboboxInstance = combobox . injector . get < CdkCombobox < unknown > > ( CdkCombobox ) ;
208
+ comboboxInstance = combobox . injector . get < CdkCombobox > ( CdkCombobox ) ;
223
209
} ) ;
224
210
225
211
it ( 'should coerce single string into open action' , ( ) => {
@@ -273,14 +259,14 @@ describe('Combobox', () => {
273
259
let testComponent : ComboboxToggle ;
274
260
275
261
let combobox : DebugElement ;
276
- let comboboxInstance : CdkCombobox < unknown > ;
262
+ let comboboxInstance : CdkCombobox ;
277
263
let comboboxElement : HTMLElement ;
278
264
279
265
beforeEach (
280
266
waitForAsync ( ( ) => {
281
267
TestBed . configureTestingModule ( {
282
268
imports : [ CdkComboboxModule ] ,
283
- declarations : [ ComboboxToggle , FakeDialogContent ] ,
269
+ declarations : [ ComboboxToggle ] ,
284
270
} ) . compileComponents ( ) ;
285
271
} ) ,
286
272
) ;
@@ -292,7 +278,7 @@ describe('Combobox', () => {
292
278
testComponent = fixture . debugElement . componentInstance ;
293
279
294
280
combobox = fixture . debugElement . query ( By . directive ( CdkCombobox ) ) ;
295
- comboboxInstance = combobox . injector . get < CdkCombobox < unknown > > ( CdkCombobox ) ;
281
+ comboboxInstance = combobox . injector . get < CdkCombobox > ( CdkCombobox ) ;
296
282
comboboxElement = combobox . nativeElement ;
297
283
} ) ;
298
284
@@ -392,17 +378,17 @@ describe('Combobox', () => {
392
378
393
379
@Component ( {
394
380
template : `
395
- <button cdkCombobox #toggleCombobox class="example-combobox"
381
+ <button cdkCombobox #toggleCombobox="cdkCombobox" class="example-combobox"
396
382
[cdkComboboxTriggerFor]="panel"
397
383
[openActions]="actions">
398
384
No Value
399
385
</button>
400
386
<div id="other-content"></div>
401
387
402
- <ng-template cdkComboboxPanel #panel="cdkComboboxPanel" >
403
- <div dialogContent #dialog="dialogContent" [parentPanel]="panel" >
388
+ <ng-template #panel>
389
+ <div #dialog cdkComboboxPopup >
404
390
<input #input>
405
- <button id="applyButton" (click)="panel.closePanel (input.value)">Apply</button>
391
+ <button id="applyButton" (click)="toggleCombobox.updateAndClose (input.value)">Apply</button>
406
392
</div>
407
393
</ng-template>` ,
408
394
} )
@@ -411,37 +397,3 @@ class ComboboxToggle {
411
397
412
398
actions : string = 'click' ;
413
399
}
414
-
415
- export const PANEL = new InjectionToken < CdkComboboxPanel > ( 'CdkComboboxPanel' ) ;
416
-
417
- let id = 0 ;
418
-
419
- @Directive ( {
420
- selector : '[dialogContent]' ,
421
- exportAs : 'dialogContent' ,
422
- host : {
423
- '[attr.role]' : 'role' ,
424
- '[id]' : 'dialogId' ,
425
- 'tabIndex' : '-1' ,
426
- } ,
427
- } )
428
- export class FakeDialogContent < V > implements OnInit {
429
- dialogId = `dialog-${ id ++ } ` ;
430
- role = 'dialog' ;
431
-
432
- @Input ( 'parentPanel' ) private readonly _explicitPanel : CdkComboboxPanel ;
433
-
434
- constructor ( @Optional ( ) @Inject ( PANEL ) readonly _parentPanel ?: CdkComboboxPanel < V > ) { }
435
-
436
- ngOnInit ( ) {
437
- this . registerWithPanel ( ) ;
438
- }
439
-
440
- registerWithPanel ( ) : void {
441
- if ( this . _parentPanel === null || this . _parentPanel === undefined ) {
442
- this . _explicitPanel . _registerContent ( this . dialogId , this . role as AriaHasPopupValue ) ;
443
- } else {
444
- this . _parentPanel . _registerContent ( this . dialogId , this . role as AriaHasPopupValue ) ;
445
- }
446
- }
447
- }
0 commit comments