Angular: zoneless tests and core components changes

packages/devextreme-angular/.gitignore

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

packages/devextreme-angular/eslint.config.mjs

@@ -59,7 +59,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,
@@ -41,6 +43,8 @@ import {
 
 import { DxIntegrationModule } from './integration';
 
+import { createZoneMode, type ZoneMode } from './zone-mode';
+
 config({
   buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeAngular.aspx',
   licensingDocLink: 'https://www.devexpress.com/go/Licensing_Documentation_DevExpress_Angular.aspx',
@@ -66,6 +70,8 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   private readonly _collectionContainerImpl: ICollectionNestedOptionContainer;
 
+  private readonly zoneMode: ZoneMode;
+
   eventHelper: EmitterHelper;
 
   optionChangedHandlers: EventEmitter<any> = new EventEmitter();
@@ -86,6 +92,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 +113,13 @@ 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
+        && this[`${e.name}Change`]
+      ) {
+        this.zoneMode.markForOptionChange();
+      }
     });
   }
 
@@ -121,11 +136,12 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
   }
 
   protected _createEventEmitters(events) {
-    const zone = this.ngZone;
+    const { zoneMode } = this;
+    const nestedZoneMode = createZoneMode(this.ngZone);
     this.eventHelper.createEmitters(events);
 
     this._initialOptions.eventsStrategy = (instance) => {
-      const strategy = new NgEventsStrategy(instance, zone);
+      const strategy = new NgEventsStrategy(instance, zoneMode);
 
       events.filter((event) => event.subscribe).forEach((event) => {
         strategy.addEmitter(event.subscribe, this[event.emit]);
@@ -136,12 +152,16 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
     this._initialOptions.nestedComponentOptions = function (component) {
       return {
-        eventsStrategy: (instance) => new NgEventsStrategy(instance, zone),
+        eventsStrategy: (instance) => new NgEventsStrategy(instance, nestedZoneMode),
         nestedComponentOptions: component.option('nestedComponentOptions'),
       };
     };
   }
 
+  protected _markForCheck() {
+    this.zoneMode.markForCheck();
+  }
+
   _shouldOptionChange(name: string, value: any) {
     if (this.changedOptions.hasOwnProperty(name)) {
       const prevValue = this.changedOptions[name];
@@ -166,6 +186,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     if (!this.widgetUpdateLocked && this.instance) {
       this.instance.beginUpdate();
       this.widgetUpdateLocked = true;
+      this.zoneMode.markForCheck();
     }
   }
 
@@ -235,9 +256,10 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
 
     this.templates = [];
+    this.zoneMode = createZoneMode(this.ngZone, this.changeDetectorRef);
     templateHost.setHost(this);
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
-    this.eventHelper = new EmitterHelper(ngZone, this);
+    this.eventHelper = new EmitterHelper(this.zoneMode, this);
   }
 
   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 { EventEmitter } from '@angular/core';
 import { DxComponent } from './component';
+import type { ZoneMode } from './zone-mode';
 
 interface IEventSubscription {
   handler: any;
@@ -10,21 +12,27 @@ 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 zoneMode: ZoneMode,
+  ) { }
 
   hasEvent(name: string) {
     return this.getEmitter(name).observers.length !== 0;
   }
 
   fireEvent(name, args) {
     const emitter = this.getEmitter(name);
-    if (emitter.observers.length) {
-      const internalSubs = this.subscriptions[name] || [];
-      if (internalSubs.length === emitter.observers.length) {
-        emitter.next(args?.[0]);
-      } else {
-        this.zone.run(() => emitter.next(args?.[0]));
-      }
+    if (!emitter.observers.length) {
+      return;
+    }
+    const internalSubs = this.subscriptions[name] || [];
+    const hasAngularSubscribers = emitter.observers.length > internalSubs.length;
+
+    if (hasAngularSubscribers) {
+      this.zoneMode.emit(emitter, args?.[0]);
+    } else {
+      this.zoneMode.emitInternal(emitter, args?.[0], name !== 'optionChanged');
     }
   }
 
@@ -80,17 +88,18 @@ export class NgEventsStrategy {
 export class EmitterHelper {
   lockedValueChangeEvent = false;
 
-  constructor(private readonly zone: NgZone, private component: DxComponent) { }
+  constructor(
+    private readonly zoneMode: ZoneMode,
+    private component: DxComponent,
+  ) { }
 
   fireNgEvent(eventName: string, eventArgs: any) {
     if (this.lockedValueChangeEvent && eventName === 'valueChange') {
       return;
     }
     const emitter = this.component[eventName];
     if (emitter?.observers.length) {
-      this.zone.run(() => {
-        emitter.next(eventArgs?.[0]);
-      });
+      this.zoneMode.emit(emitter, eventArgs?.[0]);
     }
   }