@jscutlery/playwright-ct-angular 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "dependencies": {
     "@babel/core": "7.23.9",
     "@playwright/experimental-ct-core": "1.47.1",

package/register-source.mjs

@@ -1,7 +1,13 @@
 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 {
+  getTestBed,
+  TestBed,
+  TestComponentRenderer,
+} from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 
 /**
  * @typedef {{type: string} & import('./index').MountTemplateOptions} TemplateInfo
@@ -10,10 +16,20 @@ import { Subscription } from 'rxjs';
 
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
 );
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  TestBed.configureTestingModule({
+    providers: [
+      {
+        provide: TestComponentRenderer,
+        useValue: new PlaywrightTestComponentRenderer(rootElement),
+      },
+      ...(component.providers ?? []),
+    ],
+  });
+
   for (const hook of window.__pw_hooks_before_mount || [])
     await hook({ hooksConfig, TestBed });
 
@@ -27,11 +43,12 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
 
 window.playwrightUnmount = async (rootElement) => {
   const fixture = __pwFixtureRegistry.get(rootElement.id);
-  if (!fixture)
-    throw new Error('Component was not mounted');
+  if (!fixture) throw new Error('Component was not mounted');
 
   /* Unsubscribe from all outputs. */
-  for (const subscription of Object.values(__pwOutputSubscriptionRegistry.get(fixture) ?? {}))
+  for (const subscription of Object.values(
+    __pwOutputSubscriptionRegistry.get(fixture) ?? {},
+  ))
     subscription?.unsubscribe();
   __pwOutputSubscriptionRegistry.delete(fixture);
 
@@ -44,8 +61,7 @@ window.playwrightUnmount = async (rootElement) => {
  */
 window.playwrightUpdate = async (rootElement, component) => {
   const fixture = __pwFixtureRegistry.get(rootElement.id);
-  if (!fixture)
-    throw new Error('Component was not mounted');
+  if (!fixture) throw new Error('Component was not mounted');
 
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
@@ -68,37 +84,28 @@ async function __pwRenderComponent(component, rootElement) {
   let componentClass;
 
   if (__pwIsTemplate(component)) {
-    const templateInfo = /** @type {TemplateInfo} */(component);
+    const templateInfo = /** @type {TemplateInfo} */ (component);
     componentClass = Component({
       standalone: true,
       selector: 'pw-template-component',
       imports: templateInfo.imports,
-      template: templateInfo.type
-    })(class {
-    });
+      template: templateInfo.type,
+    })(class {});
   } else {
-    componentClass = /** @type {import('@angular/core').Type<unknown>} */(component.type);
+    componentClass = /** @type {import('@angular/core').Type<unknown>} */ (
+      component.type
+    );
   }
 
   const componentMetadata = reflectComponentType(componentClass);
   if (!componentMetadata?.isStandalone)
     throw new Error('Only standalone components are supported');
 
-  TestBed.configureTestingModule({
-    imports: [componentClass],
-    providers: [
-      { provide: ComponentFixtureAutoDetect, useValue: true },
-      {
-        provide: TestComponentRenderer,
-        useValue: new PlaywrightTestComponentRenderer(rootElement)
-      },
-      ...component.providers ?? []
-    ]
-  });
-
   const fixture = TestBed.createComponent(componentClass);
   __pwUpdateProps(fixture, component);
   __pwUpdateEvents(fixture, component.on);
+  /* TODO: switch back to ComponentFixtureAutoDetect once this is fixed https://github.com/angular/angular/issues/57856 */
+  fixture.autoDetectChanges();
 
   await fixture.whenStable();
 
@@ -110,8 +117,7 @@ async function __pwRenderComponent(component, rootElement) {
  * @param {ComponentInfo} componentInfo
  */
 function __pwUpdateProps(fixture, componentInfo) {
-  if (!componentInfo.props)
-    return;
+  if (!componentInfo.props) return;
 
   if (__pwIsTemplate(componentInfo)) {
     Object.assign(fixture.componentInstance, componentInfo.props);
@@ -133,9 +139,9 @@ function __pwUpdateEvents(fixture, events = {}) {
     outputSubscriptionRecord[name]?.unsubscribe();
 
     /* Store new subscription. */
-    outputSubscriptionRecord[name] = fixture.componentInstance[
-      name
-      ].subscribe((/** @type {unknown} */ event) => listener(event));
+    outputSubscriptionRecord[name] = fixture.componentInstance[name].subscribe(
+      (/** @type {unknown} */ event) => listener(event),
+    );
   }
 
   /* Update output subscription registry. */
@@ -150,7 +156,6 @@ function __pwIsTemplate(component) {
 }
 
 class PlaywrightTestComponentRenderer extends TestComponentRenderer {
-
   constructor(rootElement) {
     super();
     this._children = [];
@@ -164,8 +169,7 @@ class PlaywrightTestComponentRenderer extends TestComponentRenderer {
   }
 
   removeAllRootElements() {
-    for (const child of this._children)
-      this._rootElement.removeChild(child);
+    for (const child of this._children) this._rootElement.removeChild(child);
     this._children = [];
   }
 }