Skip to content

Commit c28549d

Browse files
crisbetommalerba
authored andcommitted
build: fix autocomplete test failures on ios (#10442)
Fixes a couple of positioning unit test failures on iOS Safari after the switch to the flexible connected position. The issue appears to be a combination of us stubbing out the `ScrollDispatcher` for all tests which means that if one test scrolls the window down, any subsequent tests won't pick up the scroll position correctly, as well as having a test that scrolls the page down, but doesn't reset it. These changes: * Reset the position back to the top after the scrolling test is done. * Rework the tests to only stub out the `ScrollDispatcher` in the two tests where it's relevant.
1 parent 5e5066a commit c28549d

File tree

1 file changed

+37
-26
lines changed

1 file changed

+37
-26
lines changed

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ import {
5454
describe('MatAutocomplete', () => {
5555
let overlayContainer: OverlayContainer;
5656
let overlayContainerElement: HTMLElement;
57-
let scrolledSubject = new Subject();
5857
let zone: MockNgZone;
5958

6059
// Creates a test component fixture.
@@ -70,13 +69,7 @@ describe('MatAutocomplete', () => {
7069
],
7170
declarations: [component],
7271
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()},
8073
...providers
8174
]
8275
});
@@ -1289,19 +1282,11 @@ describe('MatAutocomplete', () => {
12891282
});
12901283

12911284
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);
12981287
fixture.detectChanges();
1288+
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
12991289

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(() => {
13051290
fixture.componentInstance.trigger.openPanel();
13061291
fixture.detectChanges();
13071292
zone.simulateZoneExit();
@@ -1315,8 +1300,16 @@ describe('MatAutocomplete', () => {
13151300
}));
13161301

13171302
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+
}]);
13191309

1310+
fixture.detectChanges();
1311+
1312+
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
13201313
spacer.style.height = '1000px';
13211314
document.body.appendChild(spacer);
13221315

@@ -1335,9 +1328,14 @@ describe('MatAutocomplete', () => {
13351328
'Expected panel top to match input bottom after scrolling.');
13361329

13371330
document.body.removeChild(spacer);
1331+
window.scroll(0, 0);
13381332
});
13391333

13401334
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+
13411339
// Push the autocomplete trigger down so it won't have room to open "below"
13421340
inputReference.style.bottom = '0';
13431341
inputReference.style.position = 'fixed';
@@ -1355,6 +1353,12 @@ describe('MatAutocomplete', () => {
13551353
}));
13561354

13571355
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+
13581362
// Push the autocomplete trigger down so it won't have room to open "below"
13591363
inputReference.style.bottom = '0';
13601364
inputReference.style.position = 'fixed';
@@ -1707,12 +1711,19 @@ describe('MatAutocomplete', () => {
17071711
}));
17081712

17091713
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+
]);
17141726

1715-
const fixture = createComponent(SimpleAutocomplete);
17161727
fixture.detectChanges();
17171728
const trigger = fixture.componentInstance.trigger;
17181729

@@ -1871,7 +1882,7 @@ describe('MatAutocomplete', () => {
18711882
<mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn"
18721883
[disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
18731884
<mat-option *ngFor="let state of filteredStates" [value]="state">
1874-
<span> {{ state.code }}: {{ state.name }} </span>
1885+
<span>{{ state.code }}: {{ state.name }}</span>
18751886
</mat-option>
18761887
</mat-autocomplete>
18771888
`

0 commit comments

Comments
 (0)