INT-3396: adjust event blacklisting test

Author: michalnieruchalski-tiugo

tinymce-angular-component/src/test/ts/browser/EventBlacklistingTest.ts

@@ -1,43 +1,62 @@
 import '../alien/InitTestEnvironment';
 
-import { describe, it } from '@ephox/bedrock-client';
+import { context, describe, it } from '@ephox/bedrock-client';
 
 import { EditorComponent } from '../../../main/ts/public_api';
-import { eachVersionContext, editorHook } from '../alien/TestHooks';
-import { map, merge, timer, first, buffer, Observable, tap, firstValueFrom } from 'rxjs';
-import { NgZone } from '@angular/core';
+import { eachVersionContext, EditorFixture, editorHook } from '../alien/TestHooks';
+import { map, merge, timer, first, buffer, Observable, tap, firstValueFrom, identity } from 'rxjs';
+import { NgZone, provideZoneChangeDetection } from '@angular/core';
 import { Assertions } from '@ephox/agar';
 import { Fun } from '@ephox/katamari';
 import { throwTimeout } from '../alien/TestHelpers';
 
-describe.skip('EventBlacklistingTest', () => {
+describe('EventBlacklistingTest', () => {
   const shouldRunInAngularZone = <T>(source: Observable<T>) =>
     source.pipe(
       tap(() => Assertions.assertEq('Subscribers to events should run within NgZone', true, NgZone.isInAngularZone()))
     );
 
+  const testEventsShouldBeBoundWhenAllowed = async (fixture: EditorFixture<EditorComponent>, isZoneless: boolean) => {
+    const pEventsCompleted = firstValueFrom(
+      merge(
+        fixture.editorComponent.onKeyUp.pipe(map(Fun.constant('onKeyUp')), isZoneless ? identity : shouldRunInAngularZone),
+        fixture.editorComponent.onKeyDown.pipe(map(Fun.constant('onKeyDown')), isZoneless ? identity : shouldRunInAngularZone),
+        fixture.editorComponent.onClick.pipe(map(Fun.constant('onClick')), isZoneless ? identity : shouldRunInAngularZone)
+      ).pipe(throwTimeout(10000, 'Timed out waiting for some event to fire'), buffer(timer(100)), first())
+    );
+    fixture.editor.fire('keydown');
+    fixture.editor.fire('keyclick');
+    fixture.editor.fire('keyup');
+    const eventsCompleted = await pEventsCompleted;
+    Assertions.assertEq('Only one event should have fired', 1, eventsCompleted.length);
+    Assertions.assertEq('Only keyup should fire', 'onKeyUp', eventsCompleted[0]);
+  };
+
   eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
-    const createFixture = editorHook(EditorComponent);
+    context('zoneless', () => {
+      const createFixture = editorHook(EditorComponent);
+      const isZoneless = true;
 
-    it('Events should be bound when allowed', async () => {
-      const fixture = await createFixture({
-        allowedEvents: 'onKeyUp,onClick,onInit',
-        ignoreEvents: 'onClick',
+      it('Events should be bound when allowed', async () => {
+        const fixture = await createFixture({
+          allowedEvents: 'onKeyUp,onClick,onInit',
+          ignoreEvents: 'onClick',
+        });
+        await testEventsShouldBeBoundWhenAllowed(fixture, isZoneless);
       });
+    });
 
-      const pEventsCompleted = firstValueFrom(
-        merge(
-          fixture.editorComponent.onKeyUp.pipe(map(Fun.constant('onKeyUp')), shouldRunInAngularZone),
-          fixture.editorComponent.onKeyDown.pipe(map(Fun.constant('onKeyDown')), shouldRunInAngularZone),
-          fixture.editorComponent.onClick.pipe(map(Fun.constant('onClick')), shouldRunInAngularZone)
-        ).pipe(throwTimeout(10000, 'Timed out waiting for some event to fire'), buffer(timer(100)), first())
-      );
-      fixture.editor.fire('keydown');
-      fixture.editor.fire('keyclick');
-      fixture.editor.fire('keyup');
-      const eventsCompleted = await pEventsCompleted;
-      Assertions.assertEq('Only one event should have fired', 1, eventsCompleted.length);
-      Assertions.assertEq('Only keyup should fire', 'onKeyUp', eventsCompleted[0]);
+    context('with zone.js', () => {
+      const createFixture = editorHook(EditorComponent, { providers: [ provideZoneChangeDetection() ] });
+      const isZoneless = false;
+
+      it('Events should be bound when allowed', async () => {
+        const fixture = await createFixture({
+          allowedEvents: 'onKeyUp,onClick,onInit',
+          ignoreEvents: 'onClick',
+        });
+        await testEventsShouldBeBoundWhenAllowed(fixture, isZoneless);
+      });
     });
   });
 });

tinymce-angular-component/src/test/ts/browser/NgZoneTest.ts

@@ -22,7 +22,7 @@ describe('NgZoneTest', () => {
     it('Subscribers to events should run within NgZone', async () => {
       const fixture = TestBed.createComponent(EditorComponent);
       const editor = fixture.componentInstance;
-      fixture.detectChanges();
+      fixture.detectChanges(); // TODO: consider using fixture.whenStable()
 
       await new Promise<void>((resolve) => {
         editor.onInit.pipe(first(), throwTimeout(10000, 'Timed out waiting for init event')).subscribe(() => {
@@ -36,7 +36,7 @@ describe('NgZoneTest', () => {
     it('Subscribers to onKeyUp should run within NgZone', async () => {
       const fixture = TestBed.createComponent(EditorComponent);
       const editor = fixture.componentInstance;
-      fixture.detectChanges();
+      fixture.detectChanges(); // TODO: consider using fixture.whenStable()
 
       await new Promise<void>((resolve) => {
         editor.onKeyUp.pipe(first(), throwTimeout(10000, 'Timed out waiting for key up event')).subscribe(() => {