From 4bb1eb62f91aad6d0f80102dd3dccb1f1583b5f3 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 15 Mar 2018 22:39:58 -0400
Subject: [PATCH] build: fix autocomplete test failures on ios

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.
---
 src/lib/autocomplete/autocomplete.spec.ts | 63 +++++++++++++----------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 9734e1fdca2c..f64614a62695 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -54,7 +54,6 @@ import {
 describe('MatAutocomplete', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let scrolledSubject = new Subject();
   let zone: MockNgZone;
 
   // Creates a test component fixture.
@@ -70,13 +69,7 @@ describe('MatAutocomplete', () => {
       ],
       declarations: [component],
       providers: [
-        {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject.asObservable()
-        })},
-        {provide: NgZone, useFactory: () => {
-          zone = new MockNgZone();
-          return zone;
-        }},
+        {provide: NgZone, useFactory: () => zone = new MockNgZone()},
         ...providers
       ]
     });
@@ -1289,19 +1282,11 @@ describe('MatAutocomplete', () => {
   });
 
   describe('Fallback positions', () => {
-    let fixture: ComponentFixture<SimpleAutocomplete>;
-    let input: HTMLInputElement;
-    let inputReference: HTMLInputElement;
-
-    beforeEach(() => {
-      fixture = createComponent(SimpleAutocomplete);
+    it('should use below positioning by default', fakeAsync(() => {
+      let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
+      let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
 
-      input = fixture.debugElement.query(By.css('input')).nativeElement;
-      inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
-    });
-
-    it('should use below positioning by default', fakeAsync(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       zone.simulateZoneExit();
@@ -1315,8 +1300,16 @@ describe('MatAutocomplete', () => {
     }));
 
     it('should reposition the panel on scroll', () => {
-      const spacer = document.createElement('div');
+      let scrolledSubject = new Subject();
+      let spacer = document.createElement('div');
+      let fixture = createComponent(SimpleAutocomplete, [{
+        provide: ScrollDispatcher,
+        useValue: {scrolled: () => scrolledSubject.asObservable()}
+      }]);
 
+      fixture.detectChanges();
+
+      let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
       spacer.style.height = '1000px';
       document.body.appendChild(spacer);
 
@@ -1335,9 +1328,14 @@ describe('MatAutocomplete', () => {
           'Expected panel top to match input bottom after scrolling.');
 
       document.body.removeChild(spacer);
+      window.scroll(0, 0);
     });
 
     it('should fall back to above position if panel cannot fit below', fakeAsync(() => {
+      let fixture = createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+      let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
+
       // Push the autocomplete trigger down so it won't have room to open "below"
       inputReference.style.bottom = '0';
       inputReference.style.position = 'fixed';
@@ -1355,6 +1353,12 @@ describe('MatAutocomplete', () => {
     }));
 
     it('should align panel properly when filtering in "above" position', fakeAsync(() => {
+      let fixture = createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      let input = fixture.debugElement.query(By.css('input')).nativeElement;
+      let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
+
       // Push the autocomplete trigger down so it won't have room to open "below"
       inputReference.style.bottom = '0';
       inputReference.style.position = 'fixed';
@@ -1707,12 +1711,19 @@ describe('MatAutocomplete', () => {
     }));
 
     it('should reset correctly when closed programmatically', fakeAsync(() => {
-      TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, {
-        useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
-        deps: [Overlay]
-      });
+      const scrolledSubject = new Subject();
+      const fixture = createComponent(SimpleAutocomplete, [
+        {
+          provide: ScrollDispatcher,
+          useValue: {scrolled: () => scrolledSubject.asObservable()}
+        },
+        {
+          provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+          useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
+          deps: [Overlay]
+        }
+      ]);
 
-      const fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       const trigger = fixture.componentInstance.trigger;
 
@@ -1871,7 +1882,7 @@ describe('MatAutocomplete', () => {
     <mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn"
       [disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
       <mat-option *ngFor="let state of filteredStates" [value]="state">
-        <span> {{ state.code }}: {{ state.name }}  </span>
+        <span>{{ state.code }}: {{ state.name }}</span>
       </mat-option>
     </mat-autocomplete>
   `