WIP: play around with zoneless change detection

Author: AtofStryker

angular-zoneless/cypress/support/angular-mount-playground.ts

@@ -1,15 +1,7 @@
-import 'zone.js'
-
-/**
- * @hack fixes "Mocha has already been patched with Zone" error.
- */
-// @ts-ignore
-window.Mocha['__zone_patch__'] = false
-import 'zone.js/testing'
-
 import { CommonModule } from '@angular/common'
 import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type, OnChanges, Injector, InputSignal, WritableSignal } from '@angular/core'
 import { toObservable } from '@angular/core/rxjs-interop'
+import { provideZonelessChangeDetection } from '@angular/core'
 import {
   ComponentFixture,
   getTestBed,
@@ -18,9 +10,9 @@ import {
   TestComponentRenderer,
 } from '@angular/core/testing'
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing'
 import {
   setupHooks,
   getContainerEl,
@@ -162,6 +154,10 @@ function bootstrapModule<T> (
     useClass: CypressAngularErrorHandler,
   })
 
+  // allow for zoneless change detection inside the testing module.
+  // @see https://angular.dev/guide/zoneless#using-zoneless-in-testbed
+  testModuleMetaData.providers.push(provideZonelessChangeDetection())
+
   // check if the component is a standalone component
   if ((component as any).ɵcmp?.standalone) {
     testModuleMetaData.imports.push(component)
@@ -244,24 +240,17 @@ function createComponentFixture<T> (
  * @param {Type<T>} component Angular component being mounted
  * @param {MountConfig<T>} config MountConfig
 
- * @returns {ComponentFixture<T>} ComponentFixture
+ * @returns {Promise<ComponentFixture<T>>} ComponentFixture
  */
-function setupFixture<T> (
+async function setupFixture<T> (
   component: Type<T>,
   config: MountConfig<T>,
-): ComponentFixture<T> {
+): Promise<ComponentFixture<T>> {
   const fixture = getTestBed().createComponent(component)
 
   setupComponent(config, fixture)
 
-  fixture.whenStable().then(() => {
-    fixture.autoDetectChanges(config.autoDetectChanges ?? true)
-  }).catch((e) => {
-    // If this promise does not settle in Angular 19 it is rejected
-    // https://github.com/angular/angular/blob/main/CHANGELOG.md#1900-2024-11-19
-    // eslint-disable-next-line no-console
-    console.error(e)
-  })
+  await fixture.whenStable()
 
   return fixture
 }
@@ -529,22 +518,34 @@ export function mount<T> (
 
   const componentFixture = initTestBed(component, config)
 
-  activeFixture = setupFixture(componentFixture, config)
-
-  const mountResponse: MountResponse<T> = {
-    fixture: activeFixture,
-    component: activeFixture.componentInstance,
-  }
+  let mountResponsePromiseResolver: any
+  let mountResponsePromiseRejector: any
+  let mountResponsePromise: Promise<MountResponse<T>> = new Promise((resolve, reject) => {
+    mountResponsePromiseResolver = resolve
+    mountResponsePromiseRejector = reject
+  })
 
-  const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name
+  setupFixture(componentFixture, config).then((fixture) => {
+    activeFixture = fixture
+    const mountResponse: MountResponse<T> = {
+      fixture: activeFixture,
+      component: activeFixture.componentInstance,
+    }
+  
+    const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name
+  
+    Cypress.log({
+      name: 'mount',
+      message: logMessage,
+      consoleProps: () => ({ result: mountResponse }),
+    })
 
-  Cypress.log({
-    name: 'mount',
-    message: logMessage,
-    consoleProps: () => ({ result: mountResponse }),
+    mountResponsePromiseResolver(mountResponse)
+  }).catch((error) => {
+    mountResponsePromiseRejector(error)
   })
 
-  return cy.wrap(mountResponse, { log: false })
+  return cy.wrap(mountResponsePromise, { log: false })
 }
 
 /**
@@ -579,10 +580,9 @@ export const createOutputSpy = <T>(alias: string) => {
   return emitter as any
 }
 
-// Only needs to run once, we reset before each test
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  BrowserTestingModule,
+  platformBrowserTesting(),
   {
     teardown: { destroyAfterEach: false },
   },

angular-zoneless/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { LoginFormComponent } from './login-form/login-form.component';
 import { LoginService } from './login.service';
@@ -17,7 +17,7 @@ export class AppComponent {
   errorMessage = '';
   username = ''
 
-  constructor(private readonly loginService: LoginService) {}
+  constructor(private readonly loginService: LoginService, private ref: ChangeDetectorRef) {}
 
   handleLogin(username: string, password: string): void {
     this.errorMessage = '';
@@ -31,6 +31,8 @@ export class AppComponent {
       } else {
         this.errorMessage = response.message
       }
+      // force change detection to update the UI until we convert the values to signals
+      this.ref.markForCheck();
     })
   }
 

angular-zoneless/src/app/test-component-signals-example/test-component.component.cy.ts

@@ -1,6 +1,6 @@
 import { signal } from '@angular/core';
 import { TestComponent } from './test-component.component';
-import { createOutputSpy } from 'cypress/angular';
+import { createOutputSpy } from '../../../cypress/support/angular-mount-playground';
 
 describe('TestComponent', () => {
   it('works with inferred generic type input<required>', () => {

angular-zoneless/tsconfig.app.json

@@ -11,6 +11,6 @@
   ],
   "exclude": [
     "src/**/*.spec.ts",
-    "src/**/*.cy.ts"
+    // "src/**/*.cy.ts"
   ]
 }