build: fix safari test failures (#7785)

Fixes a few obscure test failures on iOS Safari.

Author: crisbeto

src/cdk/overlay/overlay-directives.spec.ts

@@ -1,6 +1,6 @@
 import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
 import {Directionality} from '@angular/cdk/bidi';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ESCAPE} from '@angular/cdk/keycodes';
@@ -11,6 +11,7 @@ import {ConnectedOverlayPositionChange} from './position/connected-position';
 
 
 describe('Overlay directives', () => {
+  let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
   let fixture: ComponentFixture<ConnectedOverlayDirectiveTest>;
   let dir: {value: string};
@@ -20,12 +21,8 @@ describe('Overlay directives', () => {
       imports: [OverlayModule],
       declarations: [ConnectedOverlayDirectiveTest, ConnectedOverlayPropertyInitOrder],
       providers: [
-        {provide: OverlayContainer, useFactory: () => {
-          overlayContainerElement = document.createElement('div');
-          return {getContainerElement: () => overlayContainerElement};
-        }},
         {provide: Directionality, useFactory: () => {
-          return dir = { value: 'ltr' };
+          return dir = {value: 'ltr'};
         }}
       ],
     });
@@ -36,6 +33,15 @@ describe('Overlay directives', () => {
     fixture.detectChanges();
   });
 
+  beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+    overlayContainer = oc;
+    overlayContainerElement = oc.getContainerElement();
+  }));
+
+  afterEach(() => {
+    overlayContainer.ngOnDestroy();
+  });
+
   /** Returns the current open overlay pane element. */
   function getPaneElement() {
     return overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -1,4 +1,3 @@
-import {fakeAsync, flushMicrotasks, inject} from '@angular/core/testing';
 import {GlobalPositionStrategy} from './global-position-strategy';
 import {OverlayRef} from '../overlay-ref';
 
@@ -19,11 +18,9 @@ describe('GlobalPositonStrategy', () => {
     strategy.dispose();
   });
 
-  it('should position the element to the (top, left) with an offset', fakeAsyncTest(() => {
+  it('should position the element to the (top, left) with an offset', () => {
     strategy.top('10px').left('40px').apply();
 
-    flushMicrotasks();
-
     let elementStyle = element.style;
     let parentStyle = (element.parentNode as HTMLElement).style;
 
@@ -34,13 +31,11 @@ describe('GlobalPositonStrategy', () => {
 
     expect(parentStyle.justifyContent).toBe('flex-start');
     expect(parentStyle.alignItems).toBe('flex-start');
-  }));
+  });
 
-  it('should position the element to the (bottom, right) with an offset', fakeAsyncTest(() => {
+  it('should position the element to the (bottom, right) with an offset', () => {
     strategy.bottom('70px').right('15em').apply();
 
-    flushMicrotasks();
-
     let elementStyle = element.style;
     let parentStyle = (element.parentNode as HTMLElement).style;
 
@@ -51,14 +46,11 @@ describe('GlobalPositonStrategy', () => {
 
     expect(parentStyle.justifyContent).toBe('flex-end');
     expect(parentStyle.alignItems).toBe('flex-end');
-  }));
+  });
 
-  it('should overwrite previously applied positioning', fakeAsyncTest(() => {
+  it('should overwrite previously applied positioning', () => {
     strategy.centerHorizontally().centerVertically().apply();
-    flushMicrotasks();
-
     strategy.top('10px').left('40%').apply();
-    flushMicrotasks();
 
     let elementStyle = element.style;
     let parentStyle = (element.parentNode as HTMLElement).style;
@@ -73,33 +65,27 @@ describe('GlobalPositonStrategy', () => {
 
     strategy.bottom('70px').right('15em').apply();
 
-    flushMicrotasks();
-
     expect(element.style.marginTop).toBe('');
     expect(element.style.marginLeft).toBe('');
     expect(element.style.marginBottom).toBe('70px');
     expect(element.style.marginRight).toBe('15em');
 
     expect(parentStyle.justifyContent).toBe('flex-end');
     expect(parentStyle.alignItems).toBe('flex-end');
-  }));
+  });
 
-  it('should center the element', fakeAsyncTest(() => {
+  it('should center the element', () => {
     strategy.centerHorizontally().centerVertically().apply();
 
-    flushMicrotasks();
-
     let parentStyle = (element.parentNode as HTMLElement).style;
 
     expect(parentStyle.justifyContent).toBe('center');
     expect(parentStyle.alignItems).toBe('center');
-  }));
+  });
 
-  it('should center the element with an offset', fakeAsyncTest(() => {
+  it('should center the element with an offset', () => {
     strategy.centerHorizontally('10px').centerVertically('15px').apply();
 
-    flushMicrotasks();
-
     let elementStyle = element.style;
     let parentStyle = (element.parentNode as HTMLElement).style;
 
@@ -108,74 +94,56 @@ describe('GlobalPositonStrategy', () => {
 
     expect(parentStyle.justifyContent).toBe('center');
     expect(parentStyle.alignItems).toBe('center');
-  }));
+  });
 
-  it('should make the element position: static', fakeAsyncTest(() => {
+  it('should make the element position: static', () => {
     strategy.apply();
 
-    flushMicrotasks();
-
     expect(element.style.position).toBe('static');
-  }));
+  });
 
-  it('should wrap the element in a `cdk-global-overlay-wrapper`', fakeAsyncTest(() => {
+  it('should wrap the element in a `cdk-global-overlay-wrapper`', () => {
     strategy.apply();
 
-    flushMicrotasks();
-
     let parent = element.parentNode as HTMLElement;
 
     expect(parent.classList.contains('cdk-global-overlay-wrapper')).toBe(true);
-  }));
+  });
 
 
-  it('should remove the parent wrapper from the DOM', fakeAsync(() => {
+  it('should remove the parent wrapper from the DOM', () => {
     strategy.apply();
 
-    flushMicrotasks();
-
     expect(document.body.contains(element.parentNode!)).toBe(true);
 
     strategy.dispose();
 
     expect(document.body.contains(element.parentNode!)).toBe(false);
-  }));
+  });
 
-  it('should set the element width', fakeAsync(() => {
+  it('should set the element width', () => {
     strategy.width('100px').apply();
 
-    flushMicrotasks();
-
     expect(element.style.width).toBe('100px');
-  }));
+  });
 
-  it('should set the element height', fakeAsync(() => {
+  it('should set the element height', () => {
     strategy.height('100px').apply();
 
-    flushMicrotasks();
-
     expect(element.style.height).toBe('100px');
-  }));
+  });
 
-  it('should reset the horizontal position and offset when the width is 100%', fakeAsync(() => {
+  it('should reset the horizontal position and offset when the width is 100%', () => {
     strategy.centerHorizontally().width('100%').apply();
 
-    flushMicrotasks();
-
     expect(element.style.marginLeft).toBe('0px');
     expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start');
-  }));
+  });
 
-  it('should reset the vertical position and offset when the height is 100%', fakeAsync(() => {
+  it('should reset the vertical position and offset when the height is 100%', () => {
     strategy.centerVertically().height('100%').apply();
 
-    flushMicrotasks();
-
     expect(element.style.marginTop).toBe('0px');
     expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start');
-  }));
+  });
 });
-
-function fakeAsyncTest(fn: () => void) {
-  return inject([], fakeAsync(fn));
-}