@@ -54,7 +54,6 @@ import {
54
54
describe ( 'MatAutocomplete' , ( ) => {
55
55
let overlayContainer : OverlayContainer ;
56
56
let overlayContainerElement : HTMLElement ;
57
- let scrolledSubject = new Subject ( ) ;
58
57
let zone : MockNgZone ;
59
58
60
59
// Creates a test component fixture.
@@ -70,13 +69,7 @@ describe('MatAutocomplete', () => {
70
69
] ,
71
70
declarations : [ component ] ,
72
71
providers : [
73
- { provide : ScrollDispatcher , useFactory : ( ) => ( {
74
- scrolled : ( ) => scrolledSubject . asObservable ( )
75
- } ) } ,
76
- { provide : NgZone , useFactory : ( ) => {
77
- zone = new MockNgZone ( ) ;
78
- return zone ;
79
- } } ,
72
+ { provide : NgZone , useFactory : ( ) => zone = new MockNgZone ( ) } ,
80
73
...providers
81
74
]
82
75
} ) ;
@@ -1289,19 +1282,11 @@ describe('MatAutocomplete', () => {
1289
1282
} ) ;
1290
1283
1291
1284
describe ( 'Fallback positions' , ( ) => {
1292
- let fixture : ComponentFixture < SimpleAutocomplete > ;
1293
- let input : HTMLInputElement ;
1294
- let inputReference : HTMLInputElement ;
1295
-
1296
- beforeEach ( ( ) => {
1297
- fixture = createComponent ( SimpleAutocomplete ) ;
1285
+ it ( 'should use below positioning by default' , fakeAsync ( ( ) => {
1286
+ let fixture = createComponent ( SimpleAutocomplete ) ;
1298
1287
fixture . detectChanges ( ) ;
1288
+ let inputReference = fixture . debugElement . query ( By . css ( '.mat-form-field-flex' ) ) . nativeElement ;
1299
1289
1300
- input = fixture . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
1301
- inputReference = fixture . debugElement . query ( By . css ( '.mat-form-field-flex' ) ) . nativeElement ;
1302
- } ) ;
1303
-
1304
- it ( 'should use below positioning by default' , fakeAsync ( ( ) => {
1305
1290
fixture . componentInstance . trigger . openPanel ( ) ;
1306
1291
fixture . detectChanges ( ) ;
1307
1292
zone . simulateZoneExit ( ) ;
@@ -1315,8 +1300,16 @@ describe('MatAutocomplete', () => {
1315
1300
} ) ) ;
1316
1301
1317
1302
it ( 'should reposition the panel on scroll' , ( ) => {
1318
- const spacer = document . createElement ( 'div' ) ;
1303
+ let scrolledSubject = new Subject ( ) ;
1304
+ let spacer = document . createElement ( 'div' ) ;
1305
+ let fixture = createComponent ( SimpleAutocomplete , [ {
1306
+ provide : ScrollDispatcher ,
1307
+ useValue : { scrolled : ( ) => scrolledSubject . asObservable ( ) }
1308
+ } ] ) ;
1319
1309
1310
+ fixture . detectChanges ( ) ;
1311
+
1312
+ let inputReference = fixture . debugElement . query ( By . css ( '.mat-form-field-flex' ) ) . nativeElement ;
1320
1313
spacer . style . height = '1000px' ;
1321
1314
document . body . appendChild ( spacer ) ;
1322
1315
@@ -1335,9 +1328,14 @@ describe('MatAutocomplete', () => {
1335
1328
'Expected panel top to match input bottom after scrolling.' ) ;
1336
1329
1337
1330
document . body . removeChild ( spacer ) ;
1331
+ window . scroll ( 0 , 0 ) ;
1338
1332
} ) ;
1339
1333
1340
1334
it ( 'should fall back to above position if panel cannot fit below' , fakeAsync ( ( ) => {
1335
+ let fixture = createComponent ( SimpleAutocomplete ) ;
1336
+ fixture . detectChanges ( ) ;
1337
+ let inputReference = fixture . debugElement . query ( By . css ( '.mat-form-field-flex' ) ) . nativeElement ;
1338
+
1341
1339
// Push the autocomplete trigger down so it won't have room to open "below"
1342
1340
inputReference . style . bottom = '0' ;
1343
1341
inputReference . style . position = 'fixed' ;
@@ -1355,6 +1353,12 @@ describe('MatAutocomplete', () => {
1355
1353
} ) ) ;
1356
1354
1357
1355
it ( 'should align panel properly when filtering in "above" position' , fakeAsync ( ( ) => {
1356
+ let fixture = createComponent ( SimpleAutocomplete ) ;
1357
+ fixture . detectChanges ( ) ;
1358
+
1359
+ let input = fixture . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
1360
+ let inputReference = fixture . debugElement . query ( By . css ( '.mat-form-field-flex' ) ) . nativeElement ;
1361
+
1358
1362
// Push the autocomplete trigger down so it won't have room to open "below"
1359
1363
inputReference . style . bottom = '0' ;
1360
1364
inputReference . style . position = 'fixed' ;
@@ -1707,12 +1711,19 @@ describe('MatAutocomplete', () => {
1707
1711
} ) ) ;
1708
1712
1709
1713
it ( 'should reset correctly when closed programmatically' , fakeAsync ( ( ) => {
1710
- TestBed . overrideProvider ( MAT_AUTOCOMPLETE_SCROLL_STRATEGY , {
1711
- useFactory : ( overlay : Overlay ) => ( ) => overlay . scrollStrategies . close ( ) ,
1712
- deps : [ Overlay ]
1713
- } ) ;
1714
+ const scrolledSubject = new Subject ( ) ;
1715
+ const fixture = createComponent ( SimpleAutocomplete , [
1716
+ {
1717
+ provide : ScrollDispatcher ,
1718
+ useValue : { scrolled : ( ) => scrolledSubject . asObservable ( ) }
1719
+ } ,
1720
+ {
1721
+ provide : MAT_AUTOCOMPLETE_SCROLL_STRATEGY ,
1722
+ useFactory : ( overlay : Overlay ) => ( ) => overlay . scrollStrategies . close ( ) ,
1723
+ deps : [ Overlay ]
1724
+ }
1725
+ ] ) ;
1714
1726
1715
- const fixture = createComponent ( SimpleAutocomplete ) ;
1716
1727
fixture . detectChanges ( ) ;
1717
1728
const trigger = fixture . componentInstance . trigger ;
1718
1729
@@ -1871,7 +1882,7 @@ describe('MatAutocomplete', () => {
1871
1882
<mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn"
1872
1883
[disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
1873
1884
<mat-option *ngFor="let state of filteredStates" [value]="state">
1874
- <span> {{ state.code }}: {{ state.name }} </span>
1885
+ <span>{{ state.code }}: {{ state.name }}</span>
1875
1886
</mat-option>
1876
1887
</mat-autocomplete>
1877
1888
`
0 commit comments