Improve IE11 test stability

Author: devversion

src/cdk/a11y/focus-monitor.spec.ts

@@ -1,5 +1,10 @@
 import {TAB} from '@angular/cdk/keycodes';
-import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
+import {
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  patchElementFocus
+} from '@angular/cdk/testing';
 import {Component} from '@angular/core';
 import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -399,14 +404,3 @@ class ComplexComponentWithMonitorElementFocus {}
   template: `<div tabindex="0" cdkMonitorSubtreeFocus><button></button></div>`
 })
 class ComplexComponentWithMonitorSubtreeFocus {}
-
-
-/**
- * Patches an elements focus and blur methods to emit events consistently and predictably.
- * This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously,
- * while others won't fire them at all if the browser window is not focused.
- */
-function patchElementFocus(element: HTMLElement) {
-  element.focus = () => dispatchFakeEvent(element, 'focus');
-  element.blur = () => dispatchFakeEvent(element, 'blur');
-}

src/cdk/testing/element-focus.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {dispatchFakeEvent} from './dispatch-events';
+
+/**
+ * Patches an elements focus and blur methods to emit events consistently and predictably.
+ * This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously,
+ * while others won't fire them at all if the browser window is not focused.
+ */
+export function patchElementFocus(element: HTMLElement) {
+  element.focus = () => dispatchFakeEvent(element, 'focus');
+  element.blur = () => dispatchFakeEvent(element, 'blur');
+}

src/cdk/testing/index.ts

@@ -6,6 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
-
 export * from './public-api';

src/cdk/testing/public-api.ts

@@ -12,3 +12,4 @@ export * from './type-in-element';
 export * from './wrapped-error-message';
 export * from './fake-viewport-ruler';
 export * from './mock-ng-zone';
+export * from './element-focus';

src/lib/dialog/dialog.spec.ts

@@ -27,7 +27,7 @@ import {MatDialogContainer} from './dialog-container';
 import {OverlayContainer, ScrollStrategy} from '@angular/cdk/overlay';
 import {FocusOrigin, FocusMonitor} from '@angular/cdk/a11y';
 import {A, ESCAPE} from '@angular/cdk/keycodes';
-import {dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {dispatchKeyboardEvent, patchElementFocus} from '@angular/cdk/testing';
 import {
   MAT_DIALOG_DATA,
   MatDialog,
@@ -907,15 +907,20 @@ describe('MatDialog', () => {
       const button = document.createElement('button');
       let lastFocusOrigin: FocusOrigin = null;
 
-      focusMonitor.monitor(button, false).subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+      focusMonitor.monitor(button, false)
+        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
       document.body.appendChild(button);
       button.focus();
 
+      // Patch the element focus after the initial and real focus, because otherwise the
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
+      patchElementFocus(button);
+
       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
-      flushMicrotasks();
+      tick(500);
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
 
       expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
@@ -936,17 +941,20 @@ describe('MatDialog', () => {
       const button = document.createElement('button');
       let lastFocusOrigin: FocusOrigin = null;
 
-      focusMonitor.monitor(button, false).subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+      focusMonitor.monitor(button, false)
+        .subscribe(focusOrigin => lastFocusOrigin = focusOrigin);
+
       document.body.appendChild(button);
       button.focus();
 
+      // Patch the element focus after the initial and real focus, because otherwise the
+      // `activeElement` won't be set, and the dialog won't be able to restore focus to an element.
+      patchElementFocus(button);
+
       dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
 
-      flushMicrotasks();
+      tick(500);
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
-
-      expect(lastFocusOrigin!).toBeNull('Expected the trigger button to be blurred');
 
       const backdrop = overlayContainerElement
           .querySelector('.cdk-overlay-backdrop') as HTMLElement;