@jscutlery/playwright-ct-angular 0.6.4 → 0.7.0

package/README.md

@@ -281,7 +281,7 @@ Cf. https://youtu.be/y3YxX4sFJbM
 
 Cf. https://github.com/microsoft/playwright/blob/cac67fb94f2c8a0ee82878054c39790e660f17ca/packages/playwright-test/src/tsxTransform.ts#L153
 
-###       
+###                  
 
 # 📦 Setup
 
@@ -347,3 +347,34 @@ const config: PlaywrightTestConfig = {
   ...
 }
 ```
+
+### 4. Choose between zoneful or zoneless testing
+
+#### Zoneful Testing
+
+If you want to use zoneful testing, you have to import `zone.js` in your `playwright/index.ts`:
+
+```ts
+// playwright/index.ts
+import 'zone.js';
+```
+
+#### Zoneless Testing
+
+For zoneless testing, you have to provide `provideExperimentalZonelessChangeDetection()` in your `playwright/index.ts`:
+
+```ts
+// playwright/index.ts
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { beforeMount } from '@jscutlery/playwright-ct-angular/hooks';
+
+beforeMount(async ({ TestBed }) => {
+  TestBed.configureTestingModule({
+    providers: [
+      provideExperimentalZonelessChangeDetection(),
+    ],
+  });
+});
+```
+
+Cf. [Zoneless Example's `playwright/index.ts`](../../tests/playwright-ct-angular-demo/playwright/index.ts)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "dependencies": {
     "@babel/core": "7.23.9",
     "@playwright/experimental-ct-core": "1.43.1",
@@ -37,4 +37,4 @@
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"
-}
+}

package/register-source.mjs

@@ -1,10 +1,7 @@
-import '@angular/compiler';
-import 'zone.js';
-
-import { getTestBed, TestBed, TestComponentRenderer } from '@angular/core/testing';
+import { Component, reflectComponentType } from '@angular/core';
+import { ComponentFixtureAutoDetect, getTestBed, TestBed, TestComponentRenderer } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { Subscription } from 'rxjs';
-import { Component, reflectComponentType } from '@angular/core';
 
 /**
  * @typedef {{type: string} & import('./index').MountTemplateOptions} TemplateInfo
@@ -22,9 +19,6 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
 
   const fixture = await __pwRenderComponent(component, rootElement);
 
-  fixture.autoDetectChanges();
-  await fixture.whenStable();
-
   for (const hook of window.__pw_hooks_after_mount || [])
     await hook({ hooksConfig });
 
@@ -56,7 +50,6 @@ window.playwrightUpdate = async (rootElement, component) => {
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
 
-  fixture.autoDetectChanges();
   await fixture.whenStable();
 };
 
@@ -94,6 +87,7 @@ async function __pwRenderComponent(component, rootElement) {
   TestBed.configureTestingModule({
     imports: [componentClass],
     providers: [
+      { provide: ComponentFixtureAutoDetect, useValue: true },
       {
         provide: TestComponentRenderer,
         useValue: new PlaywrightTestComponentRenderer(rootElement)
@@ -106,6 +100,8 @@ async function __pwRenderComponent(component, rootElement) {
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
 
+  await fixture.whenStable();
+
   return fixture;
 }
 
@@ -119,6 +115,7 @@ function __pwUpdateProps(fixture, componentInfo) {
 
   if (__pwIsTemplate(componentInfo)) {
     Object.assign(fixture.componentInstance, componentInfo.props);
+    fixture.detectChanges();
   } else {
     for (const [name, value] of Object.entries(componentInfo.props))
       fixture.componentRef.setInput(name, value);