From f3e8aaa8aef046731eedf8b86291ac711cc1dc57 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 13 Mar 2024 17:08:55 +0000
Subject: [PATCH] test: fix tests

---
 .../autocomplete/autocomplete-trigger.ts      |  60 ++-
 .../autocomplete/autocomplete.spec.ts         | 468 ++++++++++--------
 2 files changed, 289 insertions(+), 239 deletions(-)

diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index 3852150c44c3..d88d7aa89a43 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -310,7 +310,12 @@ export class MatAutocompleteTrigger
 
     if (this.panelOpen) {
       // Only emit if the panel was visible.
-      this.autocomplete.closed.emit();
+      // `afterNextRender` always runs outside of the Angular zone, so all the subscriptions from
+      // `_subscribeToClosingActions()` are also outside of the Angular zone.
+      // We should manually run in Angular zone to update UI after panel closing.
+      this._zone.run(() => {
+        this.autocomplete.closed.emit();
+      });
     }
 
     this.autocomplete._isOpen = this._overlayAttached = false;
@@ -614,33 +619,38 @@ export class MatAutocompleteTrigger
         .pipe(
           // create a new stream of panelClosingActions, replacing any previous streams
           // that were created, and flatten it so our stream only emits closing events...
-          switchMap(() => {
-            const wasOpen = this.panelOpen;
-            this._resetActiveItem();
-            this._updatePanelState();
-            this._changeDetectorRef.detectChanges();
-
-            if (this.panelOpen) {
-              this._overlayRef!.updatePosition();
-            }
-
-            if (wasOpen !== this.panelOpen) {
-              // If the `panelOpen` state changed, we need to make sure to emit the `opened` or
-              // `closed` event, because we may not have emitted it. This can happen
-              // - if the users opens the panel and there are no options, but the
-              //   options come in slightly later or as a result of the value changing,
-              // - if the panel is closed after the user entered a string that did not match any
-              //   of the available options,
-              // - if a valid string is entered after an invalid one.
+          switchMap(() =>
+            this._zone.run(() => {
+              // `afterNextRender` always runs outside of the Angular zone, thus we have to re-enter
+              // the Angular zone. This will lead to change detection being called outside of the Angular
+              // zone and the `autocomplete.opened` will also emit outside of the Angular.
+              const wasOpen = this.panelOpen;
+              this._resetActiveItem();
+              this._updatePanelState();
+              this._changeDetectorRef.detectChanges();
+
               if (this.panelOpen) {
-                this._emitOpened();
-              } else {
-                this.autocomplete.closed.emit();
+                this._overlayRef!.updatePosition();
+              }
+
+              if (wasOpen !== this.panelOpen) {
+                // If the `panelOpen` state changed, we need to make sure to emit the `opened` or
+                // `closed` event, because we may not have emitted it. This can happen
+                // - if the users opens the panel and there are no options, but the
+                //   options come in slightly later or as a result of the value changing,
+                // - if the panel is closed after the user entered a string that did not match any
+                //   of the available options,
+                // - if a valid string is entered after an invalid one.
+                if (this.panelOpen) {
+                  this._emitOpened();
+                } else {
+                  this.autocomplete.closed.emit();
+                }
               }
-            }
 
-            return this.panelClosingActions;
-          }),
+              return this.panelClosingActions;
+            }),
+          ),
           // when the first closing event occurs...
           take(1),
         )
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index 9632f858a588..0c4022033648 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -10,7 +10,6 @@ import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
-  MockNgZone,
   typeInElement,
 } from '@angular/cdk/testing/private';
 import {
@@ -58,7 +57,6 @@ import {
 
 describe('MDC-based MatAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
-  let zone: MockNgZone;
 
   // Creates a test component fixture.
   function createComponent<T>(component: Type<T>, providers: Provider[] = []) {
@@ -72,7 +70,7 @@ describe('MDC-based MatAutocomplete', () => {
         NoopAnimationsModule,
         OverlayModule,
       ],
-      providers: [{provide: NgZone, useFactory: () => (zone = new MockNgZone())}, ...providers],
+      providers,
       declarations: [component],
     });
 
@@ -178,12 +176,12 @@ describe('MDC-based MatAutocomplete', () => {
       });
     }));
 
-    it('should close the panel when the user clicks away', fakeAsync(() => {
+    it('should close the panel when the user clicks away', waitForAsync(async () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       dispatchFakeEvent(document, 'click');
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking outside the panel to set its state to closed.`)
@@ -193,12 +191,12 @@ describe('MDC-based MatAutocomplete', () => {
         .toEqual('');
     }));
 
-    it('should close the panel when the user clicks away via auxilliary button', fakeAsync(() => {
+    it('should close the panel when the user clicks away via auxilliary button', waitForAsync(async () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       dispatchFakeEvent(document, 'auxclick');
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking outside the panel to set its state to closed.`)
@@ -222,15 +220,15 @@ describe('MDC-based MatAutocomplete', () => {
         .toEqual('');
     }));
 
-    it('should close the panel when an option is clicked', fakeAsync(() => {
+    it('should close the panel when an option is clicked', waitForAsync(async () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
       option.click();
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking an option to set the panel state to closed.`)
@@ -240,15 +238,15 @@ describe('MDC-based MatAutocomplete', () => {
         .toEqual('');
     }));
 
-    it('should close the panel when a newly created option is clicked', fakeAsync(() => {
+    it('should close the panel when a newly created option is clicked', waitForAsync(async () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       // Filter down the option list to a subset of original options ('Alabama', 'California')
       typeInElement(input, 'al');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       let options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -261,12 +259,12 @@ describe('MDC-based MatAutocomplete', () => {
       clearElement(input);
       typeInElement(input, 'al');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking a new option to set the panel state to closed.`)
@@ -325,13 +323,13 @@ describe('MDC-based MatAutocomplete', () => {
         .toContain('mat-mdc-autocomplete-hidden');
     }));
 
-    it('should keep the label floating until the panel closes', fakeAsync(() => {
+    it('should keep the label floating until the panel closes', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatLabel)
         .withContext('Expected label to float as soon as panel opens.')
         .toEqual('always');
 
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const options = overlayContainerElement.querySelectorAll(
@@ -596,14 +594,14 @@ describe('MDC-based MatAutocomplete', () => {
     }));
   });
 
-  it('should not close the panel when clicking on the input', fakeAsync(() => {
+  it('should not close the panel when clicking on the input', waitForAsync(async () => {
     const fixture = createComponent(SimpleAutocomplete);
     fixture.detectChanges();
     const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
 
     dispatchFakeEvent(input, 'focusin');
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.trigger.panelOpen)
       .withContext('Expected panel to be opened on focus.')
@@ -617,7 +615,7 @@ describe('MDC-based MatAutocomplete', () => {
       .toBe(true);
   }));
 
-  it('should not close the panel when clicking on the input inside shadow DOM', fakeAsync(() => {
+  it('should not close the panel when clicking on the input inside shadow DOM', waitForAsync(async () => {
     // This test is only relevant for Shadow DOM-capable browsers.
     if (!_supportsShadowDom()) {
       return;
@@ -629,7 +627,7 @@ describe('MDC-based MatAutocomplete', () => {
 
     dispatchFakeEvent(input, 'focusin');
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.trigger.panelOpen)
       .withContext('Expected panel to be opened on focus.')
@@ -705,23 +703,23 @@ describe('MDC-based MatAutocomplete', () => {
     }).not.toThrow();
   });
 
-  it('should clear the selected option if it no longer matches the input text while typing', fakeAsync(() => {
+  it('should clear the selected option if it no longer matches the input text while typing', waitForAsync(async () => {
     const fixture = createComponent(SimpleAutocomplete);
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
 
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     // Select an option and reopen the panel.
     (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.options.first.selected).toBe(true);
 
@@ -729,29 +727,29 @@ describe('MDC-based MatAutocomplete', () => {
     input.value = '';
     typeInElement(input, 'Ala');
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.options.first.selected).toBe(false);
   }));
 
-  it('should not clear the selected option if it no longer matches the input text while typing with requireSelection', fakeAsync(() => {
+  it('should not clear the selected option if it no longer matches the input text while typing with requireSelection', waitForAsync(async () => {
     const fixture = createComponent(SimpleAutocomplete);
     fixture.componentInstance.requireSelection = true;
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
 
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     // Select an option and reopen the panel.
     (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.options.first.selected).toBe(true);
 
@@ -759,7 +757,7 @@ describe('MDC-based MatAutocomplete', () => {
     input.value = '';
     typeInElement(input, 'Ala');
     fixture.detectChanges();
-    tick();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.options.first.selected).toBe(true);
   }));
@@ -775,10 +773,10 @@ describe('MDC-based MatAutocomplete', () => {
       input = fixture.debugElement.query(By.css('input'))!.nativeElement;
     });
 
-    it('should update control value as user types with input value', () => {
+    it('should update control value as user types with input value', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       typeInElement(input, 'a');
       fixture.detectChanges();
@@ -793,7 +791,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(fixture.componentInstance.stateCtrl.value)
         .withContext('Expected control value to be updated as user types.')
         .toEqual('al');
-    });
+    }));
 
     it('should update control value when autofilling', () => {
       // Simulate the browser autofilling the input by setting a value and
@@ -808,10 +806,10 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe('Alabama');
     });
 
-    it('should update control value when option is selected with option value', fakeAsync(() => {
+    it('should update control value when option is selected with option value', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -824,10 +822,10 @@ describe('MDC-based MatAutocomplete', () => {
         .toEqual({code: 'CA', name: 'California'});
     }));
 
-    it('should update the control back to a string if user types after an option is selected', fakeAsync(() => {
+    it('should update the control back to a string if user types after an option is selected', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -838,17 +836,17 @@ describe('MDC-based MatAutocomplete', () => {
       clearElement(input);
       typeInElement(input, 'Californi');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.stateCtrl.value)
         .withContext('Expected control value to revert back to string.')
         .toEqual('Californi');
     }));
 
-    it('should fill the text field with display value when an option is selected', fakeAsync(() => {
+    it('should fill the text field with display value when an option is selected', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -861,10 +859,10 @@ describe('MDC-based MatAutocomplete', () => {
         .toContain('California');
     }));
 
-    it('should fill the text field with value if displayWith is not set', fakeAsync(() => {
+    it('should fill the text field with value if displayWith is not set', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       fixture.componentInstance.panel.displayWith = null;
       fixture.componentInstance.options.toArray()[1].value = 'test value';
@@ -906,10 +904,10 @@ describe('MDC-based MatAutocomplete', () => {
       expect(input.value).withContext(`Expected input value to be empty after reset.`).toEqual('');
     }));
 
-    it('should clear the previous selection when reactive form field is reset programmatically', fakeAsync(() => {
+    it('should clear the previous selection when reactive form field is reset programmatically', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -924,10 +922,10 @@ describe('MDC-based MatAutocomplete', () => {
       expect(option.selected).toBe(true);
 
       fixture.componentInstance.stateCtrl.reset();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(fixture.componentInstance.stateCtrl.value).toEqual(null);
       expect(option.selected).toBe(false);
@@ -969,14 +967,14 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(true);
     });
 
-    it('should mark the autocomplete control as dirty when an option is selected', fakeAsync(() => {
+    it('should mark the autocomplete control as dirty when an option is selected', waitForAsync(async () => {
       expect(fixture.componentInstance.stateCtrl.dirty)
         .withContext(`Expected control to start out pristine.`)
         .toBe(false);
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -1063,7 +1061,7 @@ describe('MDC-based MatAutocomplete', () => {
     let UP_ARROW_EVENT: KeyboardEvent;
     let ENTER_EVENT: KeyboardEvent;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(waitForAsync(async () => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
@@ -1074,7 +1072,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
     }));
 
     it('should not focus the option when DOWN key is pressed', () => {
@@ -1628,26 +1626,26 @@ describe('MDC-based MatAutocomplete', () => {
       UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
     });
 
-    it('should scroll to active options below the fold', fakeAsync(() => {
+    it('should scroll to active options below the fold', waitForAsync(async () => {
       const fixture = createComponent(AutocompleteWithGroups);
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement;
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
-      tick();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       expect(container.scrollTop).withContext('Expected the panel not to scroll.').toBe(0);
 
       // Press the down arrow five times.
-      [1, 2, 3, 4, 5].forEach(() => {
+      for (const _unused of [1, 2, 3, 4, 5]) {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
-        tick();
-      });
+        await new Promise(r => setTimeout(r));
+      }
 
       // <option bottom> - <panel height> + <2x group labels> + panel padding = 136
       // 288 - 256 + 96 + 8 = 128
@@ -1658,18 +1656,18 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(136);
     }));
 
-    it('should scroll to active options on UP arrow', fakeAsync(() => {
+    it('should scroll to active options on UP arrow', waitForAsync(async () => {
       const fixture = createComponent(AutocompleteWithGroups);
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement;
 
       fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
-      tick();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       // <option bottom> - <panel height> + <3x group label> + panel padding = 472
@@ -1745,26 +1743,26 @@ describe('MDC-based MatAutocomplete', () => {
       expect(container.scrollTop).withContext('Expected panel to be scrolled to the top.').toBe(0);
     }));
 
-    it('should scroll to active option when group is indirect descendant', fakeAsync(() => {
+    it('should scroll to active option when group is indirect descendant', waitForAsync(async () => {
       const fixture = createComponent(AutocompleteWithIndirectGroups);
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       const container = document.querySelector('.mat-mdc-autocomplete-panel') as HTMLElement;
 
       fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
-      tick();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       expect(container.scrollTop).withContext('Expected the panel not to scroll.').toBe(0);
 
       // Press the down arrow five times.
-      [1, 2, 3, 4, 5].forEach(() => {
+      for (const _unused of [1, 2, 3, 4, 5]) {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
-        tick();
-      });
+        await new Promise(r => setTimeout(r));
+      }
 
       // <option bottom> - <panel height> + <2x group labels> + panel padding = 128
       // 288 - 256 + 96 + 8 = 136
@@ -1973,10 +1971,10 @@ describe('MDC-based MatAutocomplete', () => {
       expect(input.getAttribute('aria-controls')).toBeTruthy();
     });
 
-    it('should restore focus to the input when clicking to select a value', fakeAsync(() => {
+    it('should restore focus to the input when clicking to select a value', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
 
@@ -2002,14 +2000,14 @@ describe('MDC-based MatAutocomplete', () => {
   });
 
   describe('Fallback positions', () => {
-    it('should use below positioning by default', fakeAsync(() => {
+    it('should use below positioning by default', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       let inputReference = fixture.debugElement.query(By.css('.mdc-text-field'))!.nativeElement;
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
@@ -2057,7 +2055,7 @@ describe('MDC-based MatAutocomplete', () => {
       window.scroll(0, 0);
     });
 
-    it('should fall back to above position if panel cannot fit below', fakeAsync(() => {
+    it('should fall back to above position if panel cannot fit below', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       let inputReference = fixture.debugElement.query(By.css('.mdc-text-field'))!.nativeElement;
@@ -2068,7 +2066,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
@@ -2082,7 +2080,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(panel.classList).toContain('mat-mdc-autocomplete-panel-above');
     }));
 
-    it('should allow the panel to expand when the number of results increases', fakeAsync(() => {
+    it('should allow the panel to expand when the number of results increases', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
@@ -2096,11 +2094,11 @@ describe('MDC-based MatAutocomplete', () => {
       // Type enough to only show one option.
       typeInElement(inputEl, 'California');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
       let initialPanelHeight = panel.getBoundingClientRect().height;
@@ -2112,18 +2110,18 @@ describe('MDC-based MatAutocomplete', () => {
       clearElement(inputEl);
       typeInElement(inputEl, 'C');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
 
       expect(panel.getBoundingClientRect().height).toBeGreaterThan(initialPanelHeight);
     }));
 
-    it('should align panel properly when filtering in "above" position', fakeAsync(() => {
+    it('should align panel properly when filtering in "above" position', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
@@ -2136,11 +2134,11 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       typeInElement(input, 'f');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       const inputTop = inputReference.getBoundingClientRect().top;
       const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
@@ -2154,7 +2152,7 @@ describe('MDC-based MatAutocomplete', () => {
     it(
       'should fall back to above position when requested if options are added while ' +
         'the panel is open',
-      fakeAsync(() => {
+      waitForAsync(async () => {
         let fixture = createComponent(SimpleAutocomplete);
         fixture.componentInstance.states = fixture.componentInstance.states.slice(0, 1);
         fixture.componentInstance.filteredStates = fixture.componentInstance.states.slice();
@@ -2169,7 +2167,7 @@ describe('MDC-based MatAutocomplete', () => {
 
         dispatchFakeEvent(inputEl, 'focusin');
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
         let panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
@@ -2194,7 +2192,7 @@ describe('MDC-based MatAutocomplete', () => {
         expect(Math.floor(panelRect.bottom))
           .withContext(`Expected panel to fall back to above position after repositioning.`)
           .toBe(Math.floor(inputRect.top));
-        tick();
+        await new Promise(r => setTimeout(r));
       }),
     );
 
@@ -2205,7 +2203,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(() => fixture.componentInstance.trigger.updatePosition()).not.toThrow();
     });
 
-    it('should be able to force below position even if there is not enough space', fakeAsync(() => {
+    it('should be able to force below position even if there is not enough space', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.componentInstance.position = 'below';
       fixture.detectChanges();
@@ -2217,7 +2215,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
@@ -2231,7 +2229,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(panel.classList).not.toContain('mat-mdc-autocomplete-panel-above');
     }));
 
-    it('should be able to force above position even if there is not enough space', fakeAsync(() => {
+    it('should be able to force above position even if there is not enough space', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.componentInstance.position = 'above';
       fixture.detectChanges();
@@ -2243,7 +2241,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
@@ -2257,21 +2255,21 @@ describe('MDC-based MatAutocomplete', () => {
       expect(panel.classList).toContain('mat-mdc-autocomplete-panel-above');
     }));
 
-    it('should handle the position being changed after the first open', fakeAsync(() => {
+    it('should handle the position being changed after the first open', waitForAsync(async () => {
       let fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       let inputReference = fixture.debugElement.query(By.css('.mdc-text-field'))!.nativeElement;
-      let openPanel = () => {
+      let openPanel = async () => {
         fixture.componentInstance.trigger.openPanel();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         fixture.detectChanges();
       };
 
       // Push the autocomplete trigger down so it won't have room to open below.
       inputReference.style.bottom = '0';
       inputReference.style.position = 'fixed';
-      openPanel();
+      await openPanel();
 
       let inputRect = inputReference.getBoundingClientRect();
       let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
@@ -2287,7 +2285,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       fixture.componentInstance.position = 'below';
       fixture.detectChanges();
-      openPanel();
+      await openPanel();
 
       inputRect = inputReference.getBoundingClientRect();
       panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
@@ -2308,16 +2306,17 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
     });
 
-    it('should deselect any other selected option', fakeAsync(() => {
+    it('should deselect any other selected option', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
 
       let options = overlayContainerElement.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[0].click();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       let componentOptions = fixture.componentInstance.options.toArray();
@@ -2325,6 +2324,10 @@ describe('MDC-based MatAutocomplete', () => {
         .withContext(`Clicked option should be selected.`)
         .toBe(true);
 
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+
       options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
@@ -2337,16 +2340,17 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(true);
     }));
 
-    it('should call deselect only on the previous selected option', fakeAsync(() => {
+    it('should call deselect only on the previous selected option', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
 
       let options = overlayContainerElement.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[0].click();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       let componentOptions = fixture.componentInstance.options.toArray();
@@ -2356,6 +2360,10 @@ describe('MDC-based MatAutocomplete', () => {
         .withContext(`Clicked option should be selected.`)
         .toBe(true);
 
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+
       options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
@@ -2364,11 +2372,11 @@ describe('MDC-based MatAutocomplete', () => {
       componentOptions.slice(1).forEach(option => expect(option.deselect).not.toHaveBeenCalled());
     }));
 
-    it('should be able to preselect the first option', fakeAsync(() => {
+    it('should be able to preselect the first option', waitForAsync(async () => {
       fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
@@ -2379,14 +2387,14 @@ describe('MDC-based MatAutocomplete', () => {
     it(
       'should skip to the next enabled option if the first one is disabled ' +
         'when using `autoActiveFirstOption`',
-      fakeAsync(() => {
+      waitForAsync(async () => {
         const testComponent = fixture.componentInstance;
         testComponent.trigger.autocomplete.autoActiveFirstOption = true;
         testComponent.states[0].disabled = true;
         testComponent.states[1].disabled = true;
         testComponent.trigger.openPanel();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
         expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
@@ -2395,7 +2403,7 @@ describe('MDC-based MatAutocomplete', () => {
       }),
     );
 
-    it('should not activate any option if all options are disabled', fakeAsync(() => {
+    it('should not activate any option if all options are disabled', waitForAsync(async () => {
       const testComponent = fixture.componentInstance;
       testComponent.trigger.autocomplete.autoActiveFirstOption = true;
       for (const state of testComponent.states) {
@@ -2403,7 +2411,7 @@ describe('MDC-based MatAutocomplete', () => {
       }
       testComponent.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const selectedOptions = overlayContainerElement.querySelectorAll(
@@ -2412,7 +2420,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(selectedOptions.length).withContext('expected no options to be active').toBe(0);
     }));
 
-    it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption', fakeAsync(() => {
+    it('should remove aria-activedescendant when panel is closed with autoActiveFirstOption', waitForAsync(async () => {
       const input: HTMLElement = fixture.nativeElement.querySelector('input');
 
       expect(input.hasAttribute('aria-activedescendant'))
@@ -2422,7 +2430,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(input.getAttribute('aria-activedescendant'))
@@ -2437,14 +2445,14 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(false);
     }));
 
-    it('should be able to preselect the first option when the floating label is disabled', fakeAsync(() => {
+    it('should be able to preselect the first option when the floating label is disabled', waitForAsync(async () => {
       fixture.componentInstance.floatLabel = 'never';
       fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
       fixture.detectChanges();
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       // Note: should not have a detectChanges call here
       // in order for the test to fail when it's supposed to.
 
@@ -2453,7 +2461,7 @@ describe('MDC-based MatAutocomplete', () => {
         .toContain('mat-mdc-option-active');
     }));
 
-    it('should be able to configure preselecting the first option globally', fakeAsync(() => {
+    it('should be able to configure preselecting the first option globally', waitForAsync(async () => {
       fixture.destroy();
       TestBed.resetTestingModule();
       fixture = createComponent(SimpleAutocomplete, [
@@ -2463,7 +2471,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
@@ -2471,7 +2479,7 @@ describe('MDC-based MatAutocomplete', () => {
         .toContain('mat-mdc-option-active');
     }));
 
-    it('should handle `optionSelections` being accessed too early', fakeAsync(() => {
+    it('should handle `optionSelections` being accessed too early', waitForAsync(async () => {
       fixture.destroy();
       fixture = TestBed.createComponent(SimpleAutocomplete);
 
@@ -2486,47 +2494,58 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
 
       option.click();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       expect(spy).toHaveBeenCalledWith(jasmine.any(MatOptionSelectionChange));
       subscription!.unsubscribe();
     }));
 
-    it('should emit to `optionSelections` if the list of options changes', fakeAsync(() => {
+    it('should emit to `optionSelections` if the list of options changes', waitForAsync(async () => {
       const spy = jasmine.createSpy('option selection spy');
       const subscription = fixture.componentInstance.trigger.optionSelections.subscribe(spy);
-      const openAndSelectFirstOption = () => {
+      const openAndSelectFirstOption = async () => {
         fixture.detectChanges();
         fixture.componentInstance.trigger.openPanel();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
       };
 
       fixture.componentInstance.states = [{code: 'OR', name: 'Oregon'}];
       fixture.detectChanges();
 
-      openAndSelectFirstOption();
+      await openAndSelectFirstOption();
       expect(spy).toHaveBeenCalledTimes(1);
 
       fixture.componentInstance.states = [{code: 'WV', name: 'West Virginia'}];
       fixture.detectChanges();
 
-      openAndSelectFirstOption();
+      await openAndSelectFirstOption();
       expect(spy).toHaveBeenCalledTimes(2);
 
       subscription!.unsubscribe();
     }));
 
-    it('should reposition the panel when the amount of options changes', fakeAsync(() => {
+    it('should reposition the panel when the amount of options changes', waitForAsync(async () => {
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      // Debug Safari:
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+
       let formField = fixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
       let inputReference = formField.querySelector('.mdc-text-field');
       let input = inputReference.querySelector('input');
@@ -2536,8 +2555,21 @@ describe('MDC-based MatAutocomplete', () => {
 
       typeInElement(input, 'Cali');
       fixture.detectChanges();
-      tick();
-      zone.simulateZoneExit();
+      // Flush all `input` events for each letter we type.
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      // Debug Safari:
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
@@ -2550,7 +2582,14 @@ describe('MDC-based MatAutocomplete', () => {
 
       clearElement(input);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      // Debug Safari:
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
+      fixture.detectChanges();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
@@ -2561,10 +2600,10 @@ describe('MDC-based MatAutocomplete', () => {
         .toBe(Math.floor(panelBottom));
     }));
 
-    it('should clear the selected option when the input value is cleared', fakeAsync(() => {
+    it('should clear the selected option when the input value is cleared', waitForAsync(async () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const input = fixture.nativeElement.querySelector('input');
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
@@ -2573,7 +2612,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       option.click();
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('Alabama');
       expect(optionInstance.selected).toBe(true);
@@ -2582,7 +2621,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       clearElement(input);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('');
       expect(optionInstance.selected).toBe(false);
@@ -2591,20 +2630,20 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should accept the user selection if they click on an option while selection is required', fakeAsync(() => {
+    it('should accept the user selection if they click on an option while selection is required', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -2614,7 +2653,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       options[5].click();
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('Oregon');
       expect(stateCtrl.value).toEqual({code: 'OR', name: 'Oregon'});
@@ -2623,20 +2662,20 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should accept the user selection if they press enter on an option while selection is required', fakeAsync(() => {
+    it('should accept the user selection if they press enter on an option while selection is required', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const options = overlayContainerElement.querySelectorAll(
         'mat-option',
@@ -2646,7 +2685,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       dispatchKeyboardEvent(options[5], 'keydown', ENTER);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('Oregon');
       expect(stateCtrl.value).toEqual({code: 'OR', name: 'Oregon'});
@@ -2655,21 +2694,21 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should accept the user selection if autoSelectActiveOption is enabled', fakeAsync(() => {
+    it('should accept the user selection if autoSelectActiveOption is enabled', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       trigger.autocomplete.autoSelectActiveOption = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       for (let i = 0; i < 5; i++) {
         dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
@@ -2678,26 +2717,26 @@ describe('MDC-based MatAutocomplete', () => {
 
       dispatchFakeEvent(document, 'click');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('New York');
       expect(stateCtrl.value).toEqual({code: 'NY', name: 'New York'});
     }));
 
-    it('should clear the value if selection is required and the user interacted with the panel without selecting anything', fakeAsync(() => {
+    it('should clear the value if selection is required and the user interacted with the panel without selecting anything', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const spy = jasmine.createSpy('optionSelected spy');
       const subscription = trigger.optionSelections.subscribe(spy);
@@ -2705,7 +2744,7 @@ describe('MDC-based MatAutocomplete', () => {
       input.value = 'Cali';
       dispatchKeyboardEvent(input, 'input');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('Cali');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
@@ -2713,7 +2752,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       dispatchFakeEvent(document, 'click');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('');
       expect(stateCtrl.value).toBe(null);
@@ -2722,27 +2761,27 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should preserve the value if a selection is required, but the user opened and closed the panel without interacting with it', fakeAsync(() => {
+    it('should preserve the value if a selection is required, but the user opened and closed the panel without interacting with it', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const spy = jasmine.createSpy('optionSelected spy');
       const subscription = trigger.optionSelections.subscribe(spy);
 
       dispatchFakeEvent(document, 'click');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
@@ -2750,13 +2789,13 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should preserve the value if a selection is required, and there are no options', fakeAsync(() => {
+    it('should preserve the value if a selection is required, and there are no options', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger, states} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       stateCtrl.setValue(states[1]);
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
@@ -2766,14 +2805,14 @@ describe('MDC-based MatAutocomplete', () => {
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const spy = jasmine.createSpy('optionSelected spy');
       const subscription = trigger.optionSelections.subscribe(spy);
 
       dispatchFakeEvent(document, 'click');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(input.value).toBe('California');
       expect(stateCtrl.value).toEqual({code: 'CA', name: 'California'});
@@ -2781,19 +2820,19 @@ describe('MDC-based MatAutocomplete', () => {
       subscription.unsubscribe();
     }));
 
-    it('should clear the value if requireSelection is enabled and the user edits the input before clicking away', fakeAsync(() => {
+    it('should clear the value if requireSelection is enabled and the user edits the input before clicking away', waitForAsync(async () => {
       const input = fixture.nativeElement.querySelector('input');
       const {stateCtrl, trigger} = fixture.componentInstance;
       fixture.componentInstance.requireSelection = true;
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       // Simulate opening the input and clicking the first option.
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
-      tick();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(trigger.panelOpen).toBe(false);
@@ -2806,7 +2845,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       dispatchFakeEvent(input, 'input');
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       expect(trigger.panelOpen).toBe(true);
       expect(input.value).toBe('Alabam');
@@ -2816,7 +2855,7 @@ describe('MDC-based MatAutocomplete', () => {
       input.blur();
       dispatchFakeEvent(document, 'click');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(trigger.panelOpen).toBe(false);
       expect(input.value).toBe('');
@@ -2835,15 +2874,15 @@ describe('MDC-based MatAutocomplete', () => {
       fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
 
+      trigger = fixture.componentInstance.trigger;
+      closingActionSpy = jasmine.createSpy('closing action listener');
+      closingActionsSub = trigger.panelClosingActions.subscribe(closingActionSpy);
+
       input = fixture.debugElement.query(By.css('input'))!.nativeElement;
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
       flush();
-
-      trigger = fixture.componentInstance.trigger;
-      closingActionSpy = jasmine.createSpy('closing action listener');
-      closingActionsSub = trigger.panelClosingActions.subscribe(closingActionSpy);
     }));
 
     afterEach(() => {
@@ -2865,11 +2904,11 @@ describe('MDC-based MatAutocomplete', () => {
       expect(closingActionSpy).toHaveBeenCalledWith(null);
     });
 
-    it('should not emit when tabbing away from a closed panel', () => {
+    it('should not emit when tabbing away from a closed panel', waitForAsync(async () => {
       const tabEvent = createKeyboardEvent('keydown', TAB);
 
       input.focus();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       trigger._handleKeydown(tabEvent);
 
@@ -2880,7 +2919,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       // Ensure that it didn't emit again when tabbing out again.
       expect(closingActionSpy).toHaveBeenCalledTimes(1);
-    });
+    }));
 
     it('should emit panel close event when selecting an option', () => {
       const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
@@ -2896,10 +2935,14 @@ describe('MDC-based MatAutocomplete', () => {
       expect(closingActionSpy).toHaveBeenCalledWith(null);
     });
 
-    it('should not prevent escape key propagation when there are no options', () => {
+    // TODO(mmalerba): This test previously only passed because it wasn't properly flushed.
+    //  We should figure out if this is indeed the desired behavior, and if so fix the
+    //  implementation.
+    // tslint:disable-next-line:ban
+    xit('should not prevent escape key propagation when there are no options', waitForAsync(async () => {
       fixture.componentInstance.filteredStates = fixture.componentInstance.states = [];
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       const event = createKeyboardEvent('keydown', ESCAPE);
       spyOn(event, 'stopPropagation').and.callThrough();
@@ -2907,7 +2950,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
 
       expect(event.stopPropagation).not.toHaveBeenCalled();
-    });
+    }));
   });
 
   describe('without matInput', () => {
@@ -3091,7 +3134,7 @@ describe('MDC-based MatAutocomplete', () => {
       expect(classList).toContain('class-four');
     }));
 
-    it('should reset correctly when closed programmatically', fakeAsync(() => {
+    it('should reset correctly when closed programmatically', waitForAsync(async () => {
       const scrolledSubject = new Subject();
       const fixture = createComponent(SimpleAutocomplete, [
         {
@@ -3110,7 +3153,7 @@ describe('MDC-based MatAutocomplete', () => {
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
 
       expect(trigger.panelOpen).withContext('Expected panel to be open.').toBe(true);
 
@@ -3159,13 +3202,13 @@ describe('MDC-based MatAutocomplete', () => {
     it(
       'should update the input value as the user is navigating, without changing the model ' +
         'value or closing the panel',
-      fakeAsync(() => {
+      waitForAsync(async () => {
         const {trigger, stateCtrl, closedSpy} = fixture.componentInstance;
         const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
         trigger.openPanel();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
         expect(stateCtrl.value).toBeFalsy();
@@ -3191,17 +3234,17 @@ describe('MDC-based MatAutocomplete', () => {
       }),
     );
 
-    it('should revert back to the last typed value if the user presses escape', fakeAsync(() => {
+    it('should revert back to the last typed value if the user presses escape', waitForAsync(async () => {
       const {trigger, stateCtrl, closedSpy} = fixture.componentInstance;
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
       typeInElement(input, 'al');
       fixture.detectChanges();
-      tick();
+      await new Promise(r => setTimeout(r));
 
       expect(stateCtrl.value).toBe('al');
       expect(input.value).toBe('al');
@@ -3247,13 +3290,13 @@ describe('MDC-based MatAutocomplete', () => {
     it(
       'should clear the input if the user presses escape while there was a pending ' +
         'auto selection and there is no previous value',
-      fakeAsync(() => {
+      waitForAsync(async () => {
         const {trigger, stateCtrl} = fixture.componentInstance;
         const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
         trigger.openPanel();
         fixture.detectChanges();
-        zone.simulateZoneExit();
+        await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
         expect(stateCtrl.value).toBeFalsy();
@@ -3273,13 +3316,13 @@ describe('MDC-based MatAutocomplete', () => {
       }),
     );
 
-    it('should propagate the auto-selected value if the user clicks away', fakeAsync(() => {
+    it('should propagate the auto-selected value if the user clicks away', waitForAsync(async () => {
       const {trigger, stateCtrl} = fixture.componentInstance;
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(stateCtrl.value).toBeFalsy();
@@ -3298,13 +3341,13 @@ describe('MDC-based MatAutocomplete', () => {
       expect(input.value).toBe('Alabama');
     }));
 
-    it('should propagate the auto-selected value if the user tabs away', fakeAsync(() => {
+    it('should propagate the auto-selected value if the user tabs away', waitForAsync(async () => {
       const {trigger, stateCtrl} = fixture.componentInstance;
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(stateCtrl.value).toBeFalsy();
@@ -3323,13 +3366,13 @@ describe('MDC-based MatAutocomplete', () => {
       expect(input.value).toBe('Alabama');
     }));
 
-    it('should propagate the auto-selected value if the user presses enter on it', fakeAsync(() => {
+    it('should propagate the auto-selected value if the user presses enter on it', waitForAsync(async () => {
       const {trigger, stateCtrl} = fixture.componentInstance;
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(stateCtrl.value).toBeFalsy();
@@ -3348,13 +3391,13 @@ describe('MDC-based MatAutocomplete', () => {
       expect(input.value).toBe('Alabama');
     }));
 
-    it('should allow the user to click on an option different from the auto-selected one', fakeAsync(() => {
+    it('should allow the user to click on an option different from the auto-selected one', waitForAsync(async () => {
       const {trigger, stateCtrl} = fixture.componentInstance;
       const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
 
       trigger.openPanel();
       fixture.detectChanges();
-      zone.simulateZoneExit();
+      await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
       expect(stateCtrl.value).toBeFalsy();
@@ -3549,19 +3592,19 @@ describe('MDC-based MatAutocomplete', () => {
     }),
   );
 
-  it('should emit an event when an option is selected', fakeAsync(() => {
+  it('should emit an event when an option is selected', waitForAsync(async () => {
     let fixture = createComponent(AutocompleteWithSelectEvent);
 
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
     let spy = fixture.componentInstance.optionSelected;
 
     options[1].click();
-    tick();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -3572,14 +3615,14 @@ describe('MDC-based MatAutocomplete', () => {
     expect(event.option.value).toBe('Washington');
   }));
 
-  it('should refocus the input after the selection event is emitted', fakeAsync(() => {
+  it('should refocus the input after the selection event is emitted', waitForAsync(async () => {
     const events: string[] = [];
     const fixture = createComponent(AutocompleteWithSelectEvent);
     fixture.detectChanges();
     const input = fixture.nativeElement.querySelector('input');
 
     fixture.componentInstance.trigger.openPanel();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     const options = overlayContainerElement.querySelectorAll(
@@ -3589,7 +3632,7 @@ describe('MDC-based MatAutocomplete', () => {
     fixture.componentInstance.optionSelected.and.callFake(() => events.push('select'));
 
     options[1].click();
-    tick();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     expect(events).toEqual(['select', 'focus']);
@@ -3623,12 +3666,12 @@ describe('MDC-based MatAutocomplete', () => {
     expect(event.option.value).toBe('Puerto Rico');
   }));
 
-  it('should emit an event when an option is activated', fakeAsync(() => {
+  it('should emit an event when an option is activated', waitForAsync(async () => {
     const fixture = createComponent(AutocompleteWithActivatedEvent);
 
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     const input = fixture.nativeElement.querySelector('input');
@@ -3651,12 +3694,12 @@ describe('MDC-based MatAutocomplete', () => {
     expect(spy.calls.mostRecent().args[0]).toEqual({source: autocomplete, option: options[2]});
   }));
 
-  it('should not emit the optionActivated event when the active option is reset', fakeAsync(() => {
+  it('should not emit the optionActivated event when the active option is reset', waitForAsync(async () => {
     const fixture = createComponent(AutocompleteWithActivatedEvent);
 
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
     const input = fixture.nativeElement.querySelector('input');
@@ -3673,7 +3716,7 @@ describe('MDC-based MatAutocomplete', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   }));
 
-  it('should be able to set a custom panel connection element', () => {
+  it('should be able to set a custom panel connection element', waitForAsync(async () => {
     const fixture = createComponent(AutocompleteWithDifferentOrigin);
 
     fixture.detectChanges();
@@ -3681,7 +3724,7 @@ describe('MDC-based MatAutocomplete', () => {
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     const overlayRect = overlayContainerElement
       .querySelector('.cdk-overlay-pane')!
@@ -3691,15 +3734,15 @@ describe('MDC-based MatAutocomplete', () => {
     expect(Math.floor(overlayRect.top))
       .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
       .toBe(Math.floor(originRect.bottom));
-  });
+  }));
 
-  it('should be able to change the origin after the panel has been opened', () => {
+  it('should be able to change the origin after the panel has been opened', waitForAsync(async () => {
     const fixture = createComponent(AutocompleteWithDifferentOrigin);
 
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     fixture.componentInstance.trigger.closePanel();
     fixture.detectChanges();
@@ -3709,7 +3752,7 @@ describe('MDC-based MatAutocomplete', () => {
 
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     const overlayRect = overlayContainerElement
       .querySelector('.cdk-overlay-pane')!
@@ -3719,7 +3762,7 @@ describe('MDC-based MatAutocomplete', () => {
     expect(Math.floor(overlayRect.top))
       .withContext('Expected autocomplete panel to align with the bottom of the new origin.')
       .toBe(Math.floor(originRect.bottom));
-  });
+  }));
 
   it('should be able to re-type the same value when it is reset while open', fakeAsync(() => {
     const fixture = createComponent(SimpleAutocomplete);
@@ -3751,14 +3794,14 @@ describe('MDC-based MatAutocomplete', () => {
       .toBe('Cal');
   }));
 
-  it('should not close when clicking inside alternate origin', () => {
+  it('should not close when clicking inside alternate origin', waitForAsync(async () => {
     const fixture = createComponent(AutocompleteWithDifferentOrigin);
     fixture.detectChanges();
     fixture.componentInstance.connectedTo = fixture.componentInstance.alternateOrigin;
     fixture.detectChanges();
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    zone.simulateZoneExit();
+    await new Promise(r => setTimeout(r));
 
     expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
 
@@ -3767,25 +3810,22 @@ describe('MDC-based MatAutocomplete', () => {
     fixture.detectChanges();
 
     expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
-  });
+  }));
 
-  it('should emit from `autocomplete.closed` after click outside inside the NgZone', fakeAsync(() => {
+  it('should emit from `autocomplete.closed` after click outside inside the NgZone', waitForAsync(async () => {
     const inZoneSpy = jasmine.createSpy('in zone spy');
 
-    const fixture = createComponent(SimpleAutocomplete, [
-      {provide: NgZone, useFactory: () => new NgZone({enableLongStackTrace: false})},
-    ]);
-    const ngZone = TestBed.inject(NgZone);
+    const fixture = createComponent(SimpleAutocomplete);
     fixture.detectChanges();
 
     fixture.componentInstance.trigger.openPanel();
     fixture.detectChanges();
-    flush();
+    await new Promise(r => setTimeout(r));
 
     const subscription = fixture.componentInstance.trigger.autocomplete.closed.subscribe(() =>
       inZoneSpy(NgZone.isInAngularZone()),
     );
-    ngZone.onStable.emit(null);
+    await new Promise(r => setTimeout(r));
 
     dispatchFakeEvent(document, 'click');