@jscutlery/playwright-ct-angular 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "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,9 @@
 import '@angular/compiler';
 import 'zone.js';
-
-import { getTestBed, TestBed } 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
@@ -20,10 +19,7 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
   for (const hook of window.__pw_hooks_before_mount || [])
     await hook({ hooksConfig, TestBed });
 
-  const fixture = await __pwRenderComponent(component);
-
-  fixture.autoDetectChanges();
-  await fixture.whenStable();
+  const fixture = await __pwRenderComponent(component, rootElement);
 
   for (const hook of window.__pw_hooks_after_mount || [])
     await hook({ hooksConfig });
@@ -56,7 +52,6 @@ window.playwrightUpdate = async (rootElement, component) => {
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
 
-  fixture.autoDetectChanges();
   await fixture.whenStable();
 };
 
@@ -68,8 +63,9 @@ const __pwFixtureRegistry = new Map();
 
 /**
  * @param {ComponentInfo} component
+ * @param {Element} rootElement
  */
-async function __pwRenderComponent(component) {
+async function __pwRenderComponent(component, rootElement) {
   /** @type {import('@angular/core').Type<unknown>} */
   let componentClass;
 
@@ -92,15 +88,22 @@ async function __pwRenderComponent(component) {
 
   TestBed.configureTestingModule({
     imports: [componentClass],
-    providers: component.providers
+    providers: [
+      { provide: ComponentFixtureAutoDetect, useValue: true },
+      {
+        provide: TestComponentRenderer,
+        useValue: new PlaywrightTestComponentRenderer(rootElement)
+      },
+      ...component.providers ?? []
+    ]
   });
 
   const fixture = TestBed.createComponent(componentClass);
-  fixture.nativeElement.id = 'root';
-
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
 
+  await fixture.whenStable();
+
   return fixture;
 }
 
@@ -114,6 +117,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);
@@ -146,3 +150,24 @@ function __pwUpdateEvents(fixture, events = {}) {
 function __pwIsTemplate(component) {
   return typeof component.type === 'string';
 }
+
+class PlaywrightTestComponentRenderer extends TestComponentRenderer {
+
+  constructor(rootElement) {
+    super();
+    this._children = [];
+    this._rootElement = rootElement;
+  }
+
+  insertRootElement(testRootElementId) {
+    const testRootElement = document.createElement('div');
+    testRootElement.id = testRootElementId;
+    this._rootElement.appendChild(testRootElement);
+  }
+
+  removeAllRootElements() {
+    for (const child of this._children)
+      this._rootElement.removeChild(child);
+    this._children = [];
+  }
+}