test(cdk/overlay): change how renders are counted in test

Author: mmalerba

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts

@@ -1,10 +1,9 @@
+import {ApplicationRef, Component} from '@angular/core';
 import {TestBed, inject} from '@angular/core/testing';
-import {ApplicationRef, Component, afterRender} from '@angular/core';
+import {ComponentPortal} from '../../portal';
 import {dispatchFakeEvent, dispatchMouseEvent} from '../../testing/private';
-import {OverlayModule, Overlay} from '../index';
+import {Overlay, OverlayModule} from '../index';
 import {OverlayOutsideClickDispatcher} from './overlay-outside-click-dispatcher';
-import {ComponentPortal} from '../../portal';
-import {filter, take} from 'rxjs/operators';
 
 describe('OverlayOutsideClickDispatcher', () => {
   let appRef: ApplicationRef;
@@ -385,44 +384,6 @@ describe('OverlayOutsideClickDispatcher', () => {
 
       expect(appRef.tick).toHaveBeenCalledTimes(0);
     });
-
-    it('should run change detection if the click was made outside the overlay and there are `outsidePointerEvents` observers', async () => {
-      let renders = 0;
-      TestBed.runInInjectionContext(() => {
-        afterRender(() => {
-          renders++;
-        });
-      });
-      function stablePromise() {
-        return TestBed.inject(ApplicationRef)
-          .isStable.pipe(
-            filter(stable => stable),
-            take(1),
-          )
-          .toPromise();
-      }
-      await stablePromise();
-      expect(renders).toEqual(1);
-      const portal = new ComponentPortal(TestComponent);
-      const overlayRef = overlay.create();
-      overlayRef.attach(portal);
-      outsideClickDispatcher.add(overlayRef);
-
-      const context = document.createElement('div');
-      document.body.appendChild(context);
-
-      await stablePromise();
-      expect(renders).toEqual(2);
-      dispatchMouseEvent(context, 'click');
-      await stablePromise();
-      expect(renders).toEqual(2);
-
-      overlayRef.outsidePointerEvents().subscribe();
-
-      dispatchMouseEvent(context, 'click');
-      await stablePromise();
-      expect(renders).toEqual(2);
-    });
   });
 });
 

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.zone.spec.ts

@@ -0,0 +1,56 @@
+import {ComponentPortal} from '@angular/cdk/portal';
+import {dispatchMouseEvent} from '@angular/cdk/testing/private';
+import {ApplicationRef, Component, NgZone, provideZoneChangeDetection} from '@angular/core';
+import {inject, TestBed} from '@angular/core/testing';
+import {Overlay} from '../overlay';
+import {OverlayModule} from '../overlay-module';
+import {OverlayOutsideClickDispatcher} from './overlay-outside-click-dispatcher';
+
+describe('OverlayOutsideClickDispatcher', () => {
+  let appRef: ApplicationRef;
+  let outsideClickDispatcher: OverlayOutsideClickDispatcher;
+  let overlay: Overlay;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [OverlayModule, TestComponent],
+      providers: [provideZoneChangeDetection()],
+    });
+
+    inject(
+      [ApplicationRef, OverlayOutsideClickDispatcher, Overlay],
+      (ar: ApplicationRef, ocd: OverlayOutsideClickDispatcher, o: Overlay) => {
+        appRef = ar;
+        outsideClickDispatcher = ocd;
+        overlay = o;
+      },
+    )();
+  });
+
+  it('should emit `outsidePointerEvents` outside NgZone', async () => {
+    const calls: boolean[] = [];
+    const spy = () => {
+      calls.push(NgZone.isInAngularZone());
+    };
+
+    const portal = new ComponentPortal(TestComponent);
+    const overlayRef = overlay.create();
+    overlayRef.attach(portal);
+    outsideClickDispatcher.add(overlayRef);
+
+    const context = document.createElement('div');
+    document.body.appendChild(context);
+
+    overlayRef.outsidePointerEvents().subscribe(spy);
+
+    dispatchMouseEvent(context, 'click');
+    await TestBed.inject(ApplicationRef).whenStable();
+    expect(calls).toEqual([false]);
+  });
+});
+
+@Component({
+  template: 'Hello',
+  imports: [OverlayModule],
+})
+class TestComponent {}