feat: add config for testing with zoneless Angular (#532)

Author: timdeschryver

projects/testing-library/src/lib/config.ts

@@ -3,16 +3,14 @@ import { Config } from './models';
 let config: Config = {
   dom: {},
   defaultImports: [],
+  zoneless: false,
 };
 
 export function configure(newConfig: Partial<Config> | ((config: Partial<Config>) => Partial<Config>)) {
   if (typeof newConfig === 'function') {
-    // Pass the existing config out to the provided function
-    // and accept a delta in return
     newConfig = newConfig(config);
   }
 
-  // Merge the incoming config delta
   config = {
     ...config,
     ...newConfig,

projects/testing-library/src/lib/models.ts

@@ -497,4 +497,11 @@ export interface Config extends Pick<RenderComponentOptions<any>, 'excludeCompon
    * Imports that are added to the imports
    */
   defaultImports: any[];
+  /**
+   * Set to `true` to use zoneless change detection.
+   * This automatically adds `provideZonelessChangeDetection` to the default imports.
+   *
+   * @default false
+   */
+  zoneless?: boolean;
 }

projects/testing-library/src/lib/testing-library.ts

@@ -10,6 +10,7 @@ import {
   SimpleChanges,
   Type,
   isStandalone,
+  provideZonelessChangeDetection,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
 import { NavigationExtras, Router } from '@angular/router';
@@ -78,6 +79,7 @@ export async function render<SutType, WrapperType = SutType>(
     initialRoute = '',
     deferBlockStates = undefined,
     deferBlockBehavior = undefined,
+    zoneless = false,
     configureTestBed = () => {
       /* noop*/
     },
@@ -105,6 +107,7 @@ export async function render<SutType, WrapperType = SutType>(
     imports: addAutoImports(sut, {
       imports: imports.concat(defaultImports),
       routes,
+      zoneless,
     }),
     providers: [...providers],
     schemas: [...schemas],
@@ -510,11 +513,16 @@ function addAutoDeclarations<SutType>(
 
 function addAutoImports<SutType>(
   sut: Type<SutType> | string,
-  { imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>,
+  {
+    imports = [],
+    routes,
+    zoneless,
+  }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'> & Pick<Config, 'zoneless'>,
 ) {
   const routing = () => (routes ? [RouterTestingModule.withRoutes(routes)] : []);
   const components = () => (typeof sut !== 'string' && isStandalone(sut) ? [sut] : []);
-  return [...imports, ...components(), ...routing()];
+  const provideZoneless = () => (zoneless ? [provideZonelessChangeDetection()] : []);
+  return [...imports, ...components(), ...routing(), ...provideZoneless()];
 }
 
 async function renderDeferBlock<SutType>(