Angular: zoneless tests and core components changes

packages/devextreme-angular/.gitignore

@@ -1 +1,2 @@
 metadata
+Chrome_Headless**

packages/devextreme-angular/eslint.config.mjs

@@ -60,7 +60,7 @@ export default [
     rules: {
       'import/no-cycle': 'warn',
       'no-param-reassign': 'warn',
-      'no-underscore-dangle': 'warn',
+      'no-underscore-dangle': 'off',
       'spellcheck/spell-checker': [1, {
         lang: 'en_US',
         comments: false,

packages/devextreme-angular/karma.common.test.shim.js

@@ -4,7 +4,4 @@ require('core-js/es6');
 require('core-js/client/shim.min');
 require('reflect-metadata');
 
-require('zone.js');
-require('zone.js/testing');
-
 __karma__.loaded = function () {};

packages/devextreme-angular/karma.hydration.test.shim.js

@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');

packages/devextreme-angular/karma.server.test.shim.js

@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');

packages/devextreme-angular/karma.test.shim.js

@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const browser = require('@angular/platform-browser-dynamic/testing');
@@ -9,6 +9,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!zone-modes\/)(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();

packages/devextreme-angular/karma.zone-polyfills.test.shim.js

@@ -0,0 +1,4 @@
+require('./karma.common.test.shim');
+
+require('zone.js');
+require('zone.js/testing');

packages/devextreme-angular/karma.zone.test.shim.js

@@ -0,0 +1,14 @@
+require('./karma.zone-polyfills.test.shim');
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZoneTestingModule } = require('./karma.zone-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZoneTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();

packages/devextreme-angular/karma.zoneless-testing.module.js

@@ -0,0 +1,7 @@
+const { NgModule, provideZonelessChangeDetection } = require('@angular/core');
+
+const ZonelessTestingModule = NgModule({
+  providers: [provideZonelessChangeDetection()],
+})(class ZonelessTestingModule {});
+
+module.exports = { ZonelessTestingModule };

packages/devextreme-angular/karma.zoneless.test.shim.js

@@ -0,0 +1,18 @@
+require('./karma.common.test.shim');
+
+if (typeof Zone !== 'undefined') {
+  throw new Error('zone.js is loaded in the zoneless test environment');
+}
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZonelessTestingModule } = require('./karma.zoneless-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZonelessTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();

packages/devextreme-angular/project.json

@@ -350,7 +350,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -428,6 +430,50 @@
         "{projectRoot}/tests/dist/**/*"
       ]
     },
+    "test:components-zone-modes": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone",
+          "zoneless"
+        ]
+      },
+      "dependsOn": [
+        "build:tests"
+      ],
+      "inputs": [
+        "default",
+        "test",
+        "{projectRoot}/tests/dist/**/*"
+      ]
+    },
+    "test:components-zone-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
+    "test:components-zoneless-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zoneless"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
     "watch:test": {
       "executor": "devextreme-nx-infra-plugin:karma-multi-env",
       "options": {
@@ -453,7 +499,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -498,7 +546,12 @@
       "{projectRoot}/karma.test.shim.js",
       "{projectRoot}/karma.server.test.shim.js",
       "{projectRoot}/karma.hydration.test.shim.js",
+      "{projectRoot}/karma.common.test.shim.js",
+      "{projectRoot}/karma.zone-polyfills.test.shim.js",
+      "{projectRoot}/karma.zone.test.shim.js",
+      "{projectRoot}/karma.zoneless.test.shim.js",
       "{projectRoot}/karma.zone-testing.module.js",
+      "{projectRoot}/karma.zoneless-testing.module.js",
       "{projectRoot}/webpack.test.js",
       "{projectRoot}/tsconfig.tests.json",
       "{projectRoot}/src/**/*.spec.ts",

packages/devextreme-angular/src/core/component.ts

@@ -1,6 +1,8 @@
+/* eslint-disable max-classes-per-file */
 import {
   TransferState,
   makeStateKey,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
@@ -39,7 +41,7 @@ import {
   CollectionNestedOptionContainerImpl,
 } from './nested-option';
 
-import { DxIntegrationModule } from './integration';
+import { DxIntegrationModule, canMarkForCheck, isInOutsideAngularHandler } from './integration';
 
 config({
   buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeAngular.aspx',
@@ -86,6 +88,8 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   templateUpdateRequired = false;
 
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
   private _updateTemplates() {
     if (this.templates.length && this.templateUpdateRequired) {
       const updatedTemplates = {};
@@ -105,6 +109,15 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
       const value = e.name === e.fullName ? e.value : e.component.option(e.name);
       this.eventHelper.fireNgEvent(`${e.name}Change`, [value]);
       this.optionChangedHandlers.emit(e);
+
+      if (
+        !this.widgetUpdateLocked
+        && !isInOutsideAngularHandler()
+        && this[`${e.name}Change`]
+        && canMarkForCheck(this.ngZone)
+      ) {
+        this.changeDetectorRef.markForCheck();
+      }
     });
   }
 
@@ -122,10 +135,11 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   protected _createEventEmitters(events) {
     const zone = this.ngZone;
+    const { changeDetectorRef } = this;
     this.eventHelper.createEmitters(events);
 
     this._initialOptions.eventsStrategy = (instance) => {
-      const strategy = new NgEventsStrategy(instance, zone);
+      const strategy = new NgEventsStrategy(instance, zone, changeDetectorRef);
 
       events.filter((event) => event.subscribe).forEach((event) => {
         strategy.addEmitter(event.subscribe, this[event.emit]);
@@ -166,6 +180,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     if (!this.widgetUpdateLocked && this.instance) {
       this.instance.beginUpdate();
       this.widgetUpdateLocked = true;
+      this.changeDetectorRef.markForCheck();
     }
   }
 
@@ -237,7 +252,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templates = [];
     templateHost.setHost(this);
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
-    this.eventHelper = new EmitterHelper(ngZone, this);
+    this.eventHelper = new EmitterHelper(ngZone, this, this.changeDetectorRef);
   }
 
   ngOnChanges(changes: SimpleChanges) {

packages/devextreme-angular/src/core/events-strategy.ts

@@ -1,5 +1,7 @@
-import { EventEmitter, NgZone } from '@angular/core';
+/* eslint-disable max-classes-per-file */
+import { ChangeDetectorRef, EventEmitter, NgZone } from '@angular/core';
 import { DxComponent } from './component';
+import { canMarkForCheck } from './integration';
 
 interface IEventSubscription {
   handler: any;
@@ -10,7 +12,11 @@ export class NgEventsStrategy {
 
   private events: { [key: string]: EventEmitter<any> } = {};
 
-  constructor(private readonly instance: any, private readonly zone: NgZone) { }
+  constructor(
+    private readonly instance: any,
+    private readonly zone: NgZone,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   hasEvent(name: string) {
     return this.getEmitter(name).observers.length !== 0;
@@ -22,8 +28,14 @@ export class NgEventsStrategy {
       const internalSubs = this.subscriptions[name] || [];
       if (internalSubs.length === emitter.observers.length) {
         emitter.next(args?.[0]);
+        if (name !== 'optionChanged' && canMarkForCheck(this.zone)) {
+          this.changeDetectorRef?.markForCheck();
+        }
       } else {
-        this.zone.run(() => emitter.next(args?.[0]));
+        this.zone.run(() => {
+          emitter.next(args?.[0]);
+          this.changeDetectorRef?.markForCheck();
+        });
       }
     }
   }
@@ -80,7 +92,11 @@ export class NgEventsStrategy {
 export class EmitterHelper {
   lockedValueChangeEvent = false;
 
-  constructor(private readonly zone: NgZone, private component: DxComponent) { }
+  constructor(
+    private readonly zone: NgZone,
+    private component: DxComponent,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   fireNgEvent(eventName: string, eventArgs: any) {
     if (this.lockedValueChangeEvent && eventName === 'valueChange') {
@@ -90,6 +106,7 @@ export class EmitterHelper {
     if (emitter?.observers.length) {
       this.zone.run(() => {
         emitter.next(eventArgs?.[0]);
+        this.changeDetectorRef?.markForCheck();
       });
     }
   }

packages/devextreme-angular/src/core/integration.ts

@@ -9,8 +9,15 @@ import domAdapter from 'devextreme/core/dom_adapter';
 import readyCallbacks from 'devextreme/core/utils/ready_callbacks';
 import eventsEngine from 'devextreme/common/core/events/core/events_engine';
 
-const outsideZoneEvents = ['mousemove', 'mouseover', 'mouseout'];
-const insideZoneEvents = ['mouseup', 'click', 'mousedown', 'transitionend', 'wheel'];
+const outsideAngularEvents = ['mousemove', 'mouseover', 'mouseout'];
+const insideAngularEvents = ['mouseup', 'click', 'mousedown', 'transitionend', 'wheel'];
+
+let inOutsideAngularHandler = false;
+
+export const isInOutsideAngularHandler = () => inOutsideAngularHandler;
+
+export const isZoneless = (ngZone: NgZone) => !(ngZone instanceof NgZone);
+export const canMarkForCheck = (ngZone: NgZone) => isZoneless(ngZone) || NgZone.isInAngularZone();
 
 type ReadyCallback = () => void;
 type ReadyCallbackAdd = (callback: ReadyCallback) => void;
@@ -42,29 +49,37 @@ let doInjections = (document: any, ngZone: NgZone, xhrFactory: XhrFactory) => {
   domAdapter.inject({
     _document: document,
 
-    listen(this: { callBase: (...args: any[]) => any }, ...args) {
-      const eventName = args[1];
-      if (outsideZoneEvents.includes(eventName)) {
-        return ngZone.runOutsideAngular(() => this.callBase.apply(this, args));
+    listen(this: { callBase: (...args: any[]) => any }, element, event: string, callback, options) {
+      if (outsideAngularEvents.includes(event)) {
+        const trackedCallback = function (this: unknown, e: Event) {
+          const prevInOutsideAngularHandler = inOutsideAngularHandler;
+          inOutsideAngularHandler = true;
+          try {
+            return callback.call(this, e);
+          } finally {
+            inOutsideAngularHandler = prevInOutsideAngularHandler;
+          }
+        };
+        return ngZone.runOutsideAngular(() => this.callBase(element, event, trackedCallback, options));
       }
 
-      if (ngZone.isStable && insideZoneEvents.includes(eventName)) {
-        return ngZone.run(() => this.callBase.apply(this, args));
+      if (ngZone.isStable && insideAngularEvents.includes(event)) {
+        return ngZone.run(() => this.callBase(element, event, callback, options));
       }
 
-      return this.callBase.apply(this, args);
+      return this.callBase(element, event, callback, options);
     },
 
     isElementNode(element) {
-      return element && element.nodeType === 1;
+      return element?.nodeType === 1;
     },
 
     isTextNode(element) {
-      return element && element.nodeType === 3;
+      return element?.nodeType === 3;
     },
 
     isDocument(element) {
-      return element && element.nodeType === 9;
+      return element?.nodeType === 9;
     },
   });
 

packages/devextreme-angular/src/core/nested-option.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import {
   Component, QueryList, ElementRef, Renderer2, EventEmitter,
 } from '@angular/core';