chore: fix unit broken unit tests and CI not running them

src/lib/core/overlay/overlay-ref.ts

@@ -1,3 +1,4 @@
+import {NgZone} from '@angular/core';
 import {PortalHost, Portal} from '../portal/portal';
 import {OverlayState} from './overlay-state';
 import {Observable} from 'rxjs/Observable';
@@ -15,7 +16,8 @@ export class OverlayRef implements PortalHost {
   constructor(
       private _portalHost: PortalHost,
       private _pane: HTMLElement,
-      private _state: OverlayState) { }
+      private _state: OverlayState,
+      private _ngZone: NgZone) { }
 
   attach(portal: Portal<any>): any {
     if (this._state.hasBackdrop) {
@@ -124,7 +126,13 @@ export class OverlayRef implements PortalHost {
       // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
       // In this case we make it unclickable and we try to remove it after a delay.
       backdropToDetach.style.pointerEvents = 'none';
-      setTimeout(finishDetach, 500);
+
+      // Run this outside the Angular zone because there's nothing that Angular cares about.
+      // If it were to run inside the Angular zone, every test that used Overlay would have to be
+      // either async or fakeAsync.
+      this._ngZone.runOutsideAngular(() => {
+        setTimeout(finishDetach, 500);
+      });
     }
   }
 }

src/lib/core/overlay/overlay.ts

@@ -1,4 +1,4 @@
-import {ComponentFactoryResolver, Injectable, ApplicationRef, Injector} from '@angular/core';
+import {ComponentFactoryResolver, Injectable, ApplicationRef, Injector, NgZone} from '@angular/core';
 import {OverlayState} from './overlay-state';
 import {DomPortalHost} from '../portal/dom-portal-host';
 import {OverlayRef} from './overlay-ref';
@@ -28,7 +28,8 @@ export class Overlay {
               private _componentFactoryResolver: ComponentFactoryResolver,
               private _positionBuilder: OverlayPositionBuilder,
               private _appRef: ApplicationRef,
-              private _injector: Injector) {}
+              private _injector: Injector,
+              private _ngZone: NgZone) {}
 
   /**
    * Creates an overlay.
@@ -77,7 +78,7 @@ export class Overlay {
    * @returns {OverlayRef}
    */
   private _createOverlayRef(pane: HTMLElement, state: OverlayState): OverlayRef {
-    return new OverlayRef(this._createPortalHost(pane), pane, state);
+    return new OverlayRef(this._createPortalHost(pane), pane, state, this._ngZone);
   }
 }
 

test/karma.config.ts

@@ -59,7 +59,6 @@ export function config(config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    autoWatchBatchDelay: 500,
 
     sauceLabs: {
       testName: 'material2',

tools/gulp/tasks/unit-test.ts

@@ -2,7 +2,7 @@ import gulp = require('gulp');
 import path = require('path');
 import gulpMerge = require('merge2');
 
-import {PROJECT_ROOT} from '../constants';
+import {PROJECT_ROOT, DIST_COMPONENTS_ROOT} from '../constants';
 import {sequenceTask} from '../task_helpers';
 
 const karma = require('karma');
@@ -48,20 +48,20 @@ gulp.task(':test:deps:inline', sequenceTask(':test:deps', ':inline-resources'));
  *
  * This task should be used when running unit tests locally.
  */
-gulp.task('test', [':test:watch'], () => {
+gulp.task('test', [':test:watch'], (done: () => void) => {
   new karma.Server({
     configFile: path.join(PROJECT_ROOT, 'test/karma.conf.js')
-  }).start();
+  }, done).start();
 });
 
 /**
  * Runs the unit tests once with inlined resources (html, css). Does not watch for changes.
  *
  * This task should be used when running tests on the CI server.
  */
-gulp.task('test:single-run', [':test:deps:inline'], () => {
+gulp.task('test:single-run', [':test:deps:inline'], (done: () => void) => {
   new karma.Server({
     configFile: path.join(PROJECT_ROOT, 'test/karma.conf.js'),
     singleRun: true
-  }).start();
+  }, done).start();
 });