@jscutlery/playwright-ct-angular 0.4.0 → 0.5.0

package/README.md

@@ -3,31 +3,62 @@
 This library brings **Angular support** to [Playwright's **experimental
 ** Component Testing](https://playwright.dev/docs/test-components).
 
-This will allow us to test our Angular components with Playwright without building the whole app and with more control.
+This will allow you to test your Angular components with Playwright without building the whole app and with more
+control.
 
 `@jscutlery/playwright-ct-angular` currently supports:
 
-- ✅ **Testing [Versatile Angular Components](https://marmicode.io/blog/versatile-angular)**
-- 🎛 **Passing type-safe inputs to the tested components**
-- 🎭 **Spying on component outputs in a type-safe fashion**
+- ✅ **Testing Angular components/directives/pipes**
+- 🎛 **Controlling inputs/outputs in a type-safe fashion**
+- 🥸 **Overriding providers**
+- 🍳 **Testing with templates**
 
 https://user-images.githubusercontent.com/2674658/206226065-ba856329-dda7-43b1-9c28-4416b190f4d4.mp4
 
-# 🚀 Writing our first
-
-First, we will have to set up Playwright Component Testing as [mentioned below](#setup).
+# Table of Contents
+
+<!-- TOC -->
+
+* [Playwright Component Testing for Angular _(experimental)_](#playwright-component-testing-for-angular-_experimental_)
+* [Table of Contents](#table-of-contents)
+* [🚀 Writing your first test](#-writing-your-first-test)
+    * [✅ Basic Test](#-basic-test)
+    * [🎛 Testing Inputs](#-testing-inputs)
+        * [Passing output callbacks](#passing-output-callbacks)
+    * [🥸 Providing Test Doubles & Importing Additional Modules](#-providing-test-doubles--importing-additional-modules)
+    * [🎨 Using Styles](#-using-styles)
+        * [Shared Styles](#shared-styles)
+        * [Specific Styles](#specific-styles)
+        * [Angular Material & Angular Libraries with styles](#angular-material--angular-libraries-with-styles)
+    * [More examples](#more-examples)
+* [⚠️ Known Limitations](#-known-limitations)
+    * [🪄 The Magic Behind the Scenes](#-the-magic-behind-the-scenes)
+    * [It is currently impossible to...](#it-is-currently-impossible-to)
+        * [...hold the component type in a variable](#hold-the-component-type-in-a-variable)
+        * [...use the component type elsewhere in the file.](#use-the-component-type-elsewhere-in-the-file)
+        * [...declare components in the same file.](#declare-components-in-the-same-file)
+* [📦 Setup](#-setup)
+    * [1. Install](#1-install)
+    * [2. Configure](#2-configure)
+    * [3. Change tests extension](#3-change-tests-extension)
+
+<!-- TOC -->
+
+# 🚀 Writing your first test
+
+First, you will have to set up Playwright Component Testing as [mentioned below](#setup).
 
 ⚠️ Make sure to check the [known limitations](#-known-limitations) before writing more tests.
 
 ## ✅ Basic Test
 
-Then, we can write our first test in `.../src/greetings.component.pw.ts`:
+Then, you can write your first test in `.../src/greetings.component.pw.ts`:
 
 ```ts
 import { expect, test } from '@jscutlery/playwright-ct-angular';
 import { GreetingsComponent } from './greetings.component';
 
-test('<jc-greetings> should be polite', async ({ mount }) => {
+test(`GreetingsComponent should be polite`, async ({ mount }) => {
   const locator = await mount(GreetingsComponent);
   expect(locator).toHaveText('👋 Hello!');
 });
@@ -39,7 +70,7 @@ test('<jc-greetings> should be polite', async ({ mount }) => {
 import { expect, test } from '@jscutlery/playwright-ct-angular';
 import { GreetingsComponent } from './greetings.component';
 
-test('<jc-greetings> should be polite', async ({ mount }) => {
+test(`GreetingsComponent should be polite`, async ({ mount }) => {
   const locator = await mount(GreetingsComponent, { props: { name: 'Edouard' } });
   expect(locator).toHaveText('👋 Hello Edouard!');
 });
@@ -47,7 +78,7 @@ test('<jc-greetings> should be polite', async ({ mount }) => {
 
 ### Passing output callbacks
 
-We can also pass custom output callback functions for some extreme cases or if we want to use a custom spy
+You can also pass custom output callback functions for some extreme cases or if you want to use a custom spy
 implementation for example or just debug.
 
 ```ts
@@ -95,20 +126,24 @@ test('...', async ({ mount }) => {
   ],
 })
 export class RecipeSearchTestContainer {
-  private _repo = inject(RecipeRepositoryFake);
-
-  @Input() set recipes(recipes: Recipe[]) {
-    this._repo.recipes = recipes;
-  }
+  recipes = input<Recipe[]>([]);
+  #repo = inject(RecipeRepositoryFake);
+  #syncRecipesWithRepo = effect(() => {
+    this.#repo.setRecipes(this.recipes());
+  });
 }
 
 /* Cf. https://github.com/jscutlery/devkit/tree/main/tests/playwright-ct-angular-wide/src/testing/recipe-repository.fake.ts
  * for a better example. */
 class RecipeRepositoryFake implements RecipeRepositoryDef {
-  recipes: Recipe[] = [];
+  #recipes: Recipe[] = [];
 
   searchRecipes() {
-    return defer(() => of(this.recipes));
+    return defer(() => of(this.#recipes));
+  }
+
+  setRecipes(recipes: Recipe[]) {
+    this.#recipes = recipes;
   }
 }
 ```
@@ -117,12 +152,12 @@ class RecipeRepositoryFake implements RecipeRepositoryDef {
 
 ### Shared Styles
 
-In order to import styles that are shared between our tests, we can do so by importing them in `playwright/index.ts`.
-We can also customize the shared `playwright/index.html` nearby.
+In order to import styles that are shared between your tests, you can do so by importing them in `playwright/index.ts`.
+You can also customize the shared `playwright/index.html` nearby.
 
 ### Specific Styles
 
-If we want to load some specific styles for a single test, we might prefer using a test container component:
+If you want to load some specific styles for a single test, you might prefer using a test container component:
 
 ```ts
 import styles from './some-styles.css';
@@ -164,31 +199,33 @@ const config: PlaywrightTestConfig = {
 
 ## More examples
 
-Cf. [/tests/playwright-ct-angular-wide/src](https://github.com/jscutlery/devkit/tree/main/tests/playwright-ct-angular-wide/src)
+Cf. [/tests/playwright-ct-angular-demo/src](https://github.com/jscutlery/devkit/tree/main/tests/playwright-ct-angular-demo/src)
 
 # ⚠️ Known Limitations
 
 The way Playwright Component Testing works is different from the way things work with Karma, Jest, Vitest, Cypress
 etc...
-Playwright Component Testing tests run in a Node.js environment while the component is rendered in a browser.
+Playwright Component Testing tests run in a Node.js environment and control the browser through Chrome DevTools
+Protocol, while the component is rendered in a browser.
 
-This causes a couple of limitations as we can't directly access the `TestBed's` or the component's internals,
-and we can only exchange serializable data with the component.
+This causes a couple of limitations as we can't directly access the `TestBed`'s or the component's internals,
+and **we can only exchange serializable data with the component**.
 
 ## 🪄 The Magic Behind the Scenes
 
 The magical workaround behind the scenes is that at build time:
 
 1. Playwright analyses all the calls to `mount()`,
-2. it grabs the first parameter (the component class),
+2. it grabs the arguments (e.g. the component class),
 3. replaces the component class with a unique string (constructed from the component class name and es-module),
-4. adds the component's es-module to Vite entrypoints,
-5. and finally creates a map matching each unique string to the right es-module.
+4. adds the component's ES module to Vite entrypoints,
+5. and finally creates a map matching each unique string to the right ES module.
 
-This way, when calling `mount()`, Playwright with communicate the unique string to the browser who will know which
-es-module to load.
+This way, when calling `mount()`, Playwright will communicate the unique string to the browser who will know which
+ES module to load.
 
 Cf. https://youtu.be/y3YxX4sFJbM
+
 Cf. https://github.com/microsoft/playwright/blob/cac67fb94f2c8a0ee82878054c39790e660f17ca/packages/playwright-test/src/tsxTransform.ts#L153
 
 ## It is currently impossible to...
@@ -217,39 +254,18 @@ test(MyComponent.name, async ({ mount }) => {
 class GreetingsComponent {
 }
 
-test('<jc-greetings>', async ({ mount }) => {
+test('should work', async ({ mount }) => {
   await mount(GreetingsComponent);
 });
 ```
 
-### ...pass any symbol other than a component class
-
-This makes the following impossible:
-
-- passing providers to the `mount()` function
-- passing modules to the `mount()` function (this is what currently makes the usage of mounting templates impossible)
-- use non-standalone components
-
-### ...use non-[Versatile Angular Style](https://marmicode.io/blog/versatile-angular)
-
-We'll need a vite plugin to support traditional DI, external templates and stylesheets etc...
-
-## 🔮 Future workarounds
-
-If you really can't make it to [Versatile Angular Style](https://marmicode.io/blog/versatile-angular),
-we can think of a couple of workarounds like using a vite plugin like **Brandon
-Roberts' [vite-plugin-angular](https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular)**
-
-We could also implement some custom transform that registers the providers and import modules, like Playwright does for
-the component class.
+# 📦 Setup
 
-# Setup
-
-## 📦 Install
+### 1. Install
 
 ```sh
 # You can run this command in an existing workspace.
-yarn create playwright --ct # or npm init playwright@latest -- --ct
+npm create playwright -- --ct
 
 # Choose React
 
@@ -259,29 +275,46 @@ yarn create playwright --ct # or npm init playwright@latest -- --ct
 #  svelte
 #  solid
 
-yarn add -D @jscutlery/playwright-ct-angular @playwright/test # or npm install -D @jscutlery/playwright-ct-angular @playwright/test
+npm add -D @jscutlery/playwright-ct-angular @jscutlery/swc-angular unplugin-swc
+npm uninstall -D @playwright/experimental-ct-react
 ```
 
-## 🛠 Configure
+### 2. Configure
 
-Update `playwright-ct-config.ts` and replace:
+- Update `playwright-ct.config.ts` and replace:
 
 ```ts
-import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
-import { devices } from '@playwright/experimental-ct-react';
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
 ```
 
 with
 
 ```ts
-import type { PlaywrightTestConfig } from '@jscutlery/playwright-ct-angular';
-import { devices } from '@jscutlery/playwright-ct-angular';
+import { defineConfig, devices } from '@jscutlery/playwright-ct-angular';
+import { swcAngularUnpluginOptions } from '@jscutlery/swc-angular'
+import swc from 'unplugin-swc';
+```
+
+- Configure vite plugin:
+
+```ts
+export default defineConfig({
+  use: {
+    // ...
+    ctViteConfig: {
+      // ...
+      plugins: [
+        swc.vite(swcAngularUnpluginOptions())
+      ]
+    }
+  }
+});
 ```
 
-### Change tests extension
+### 3. Change tests extension
 
 In order to avoid collisions with other tests (e.g. Jest / Vitest),
-We can replace the default matching extension `.spec.ts` with `.pw.ts`:
+You can replace the default matching extension `.spec.ts` with `.pw.ts`:
 
 ```ts
 const config: PlaywrightTestConfig = {

package/{src/register.d.ts → cli.js}

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -5,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
@@ -13,5 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-declare const _default: (components: any) => void;
-export default _default;
+
+const { program } = require('@playwright/experimental-ct-core/lib/program');
+
+program.parse(process.argv);

package/hooks.cjs.js

@@ -2,31 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 const __pw_hooks_before_mount = [];
 const __pw_hooks_after_mount = [];
 window['__pw_hooks_before_mount'] = __pw_hooks_before_mount;
 window['__pw_hooks_after_mount'] = __pw_hooks_after_mount;
-const beforeMount = (callback) => {
+function beforeMount(callback) {
     __pw_hooks_before_mount.push(callback);
-};
-const afterMount = (callback) => {
+}
+function afterMount(callback) {
     __pw_hooks_after_mount.push(callback);
-};
+}
 
 exports.afterMount = afterMount;
 exports.beforeMount = beforeMount;

package/hooks.esm.js

@@ -1,27 +1,12 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 const __pw_hooks_before_mount = [];
 const __pw_hooks_after_mount = [];
 window['__pw_hooks_before_mount'] = __pw_hooks_before_mount;
 window['__pw_hooks_after_mount'] = __pw_hooks_after_mount;
-const beforeMount = (callback) => {
+function beforeMount(callback) {
     __pw_hooks_before_mount.push(callback);
-};
-const afterMount = (callback) => {
+}
+function afterMount(callback) {
     __pw_hooks_after_mount.push(callback);
-};
+}
 
 export { afterMount, beforeMount };

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "dependencies": {
-    "@babel/core": "~7.23.0",
-    "jest-mock": "^28.1.3",
-    "rxjs": "^7.5.7",
-    "vite": "^3.2.1"
+    "@babel/core": "7.23.9",
+    "@playwright/experimental-ct-core": "1.43.1",
+    "@playwright/test": "1.43.1"
   },
   "peerDependencies": {
     "@angular/compiler": "^16.0.0 || ^17.0.0",
     "@angular/core": "^16.0.0 || ^17.0.0",
     "@angular/platform-browser": "^16.0.0 || ^17.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0 || ^17.0.0",
-    "@playwright/experimental-ct-core": "^1.39.0",
-    "@playwright/test": "^1.39.0",
     "rxjs": "^7.0.0",
-    "tslib": "*",
     "zone.js": "*"
   },
+  "bin": {
+    "playwright": "cli.js"
+  },
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -30,11 +29,6 @@
       "import": "./hooks.cjs.mjs",
       "default": "./hooks.cjs.js"
     },
-    "./register": {
-      "module": "./register.esm.js",
-      "import": "./register.cjs.mjs",
-      "default": "./register.cjs.js"
-    },
     "./transform-angular": {
       "module": "./transform-angular.esm.js",
       "import": "./transform-angular.cjs.mjs",

package/register-source.mjs

@@ -1,69 +1,148 @@
 import '@angular/compiler';
 import 'zone.js';
+
 import { getTestBed, TestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { Subscription } from 'rxjs';
+import { Component, reflectComponentType } from '@angular/core';
 
-const _componentLoaderMap = new Map();
+/**
+ * @typedef {{type: string} & import('./index').MountTemplateOptions} TemplateInfo
+ * @typedef {{type: import('@angular/core').Type<unknown>} & import('./index').MountOptions | TemplateInfo} ComponentInfo
+ */
 
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
 
+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();
+
+  for (const hook of window.__pw_hooks_after_mount || [])
+    await hook({ hooksConfig });
+
+  __pwFixtureRegistry.set(rootElement.id, fixture);
+};
+
+window.playwrightUnmount = async (rootElement) => {
+  const fixture = __pwFixtureRegistry.get(rootElement.id);
+  if (!fixture)
+    throw new Error('Component was not mounted');
+
+  /* Unsubscribe from all outputs. */
+  for (const subscription of Object.values(__pwOutputSubscriptionRegistry.get(fixture) ?? {}))
+    subscription?.unsubscribe();
+  __pwOutputSubscriptionRegistry.delete(fixture);
+
+  fixture.destroy();
+  fixture.nativeElement.replaceChildren();
+};
+
 /**
- * This is the function used by Playwright CT to map each component to its symbol.
- * The key here is a slug generated by Playwright CT based on the component's module path + component's name.
+ * @param {{type: import('@angular/core').Type<unknown>} & import('./index').MountOptions | {type: string} & import('./index').MountTemplateOptions} component
  */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components)) {
-    _componentLoaderMap.set(name, value);
-  }
-}
+window.playwrightUpdate = async (rootElement, component) => {
+  const fixture = __pwFixtureRegistry.get(rootElement.id);
+  if (!fixture)
+    throw new Error('Component was not mounted');
+
+  __pwUpdateProps(fixture, component);
+  __pwUpdateEvents(fixture, component.on);
+
+  fixture.autoDetectChanges();
+  await fixture.whenStable();
+};
+
+/** @type {WeakMap<import('@angular/core/testing').ComponentFixture, Record<string, import('rxjs').Subscription>>} */
+const __pwOutputSubscriptionRegistry = new WeakMap();
+
+/** @type {Map<string, import('@angular/core/testing').ComponentFixture>} */
+const __pwFixtureRegistry = new Map();
 
 /**
- * Container subscription holding all outputs subscription
- * in order to unsubscribe when component is unmounted.
+ * @param {ComponentInfo} component
  */
-let subscription;
+async function __pwRenderComponent(component) {
+  /** @type {import('@angular/core').Type<unknown>} */
+  let componentClass;
 
-globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const cmpType = component.type;
+  if (__pwIsTemplate(component)) {
+    const templateInfo = /** @type {TemplateInfo} */(component);
+    componentClass = Component({
+      standalone: true,
+      selector: 'pw-template-component',
+      imports: templateInfo.imports,
+      template: templateInfo.type
+    })(class {
+    });
+  } else {
+    componentClass = /** @type {import('@angular/core').Type<unknown>} */(component.type);
+  }
 
-  subscription = new Subscription();
+  const componentMetadata = reflectComponentType(componentClass);
+  if (!componentMetadata?.isStandalone)
+    throw new Error('Only standalone components are supported');
 
   TestBed.configureTestingModule({
-    imports: [BrowserAnimationsModule]
+    imports: [componentClass],
+    providers: component.providers
   });
-  const fixture = TestBed.createComponent(cmpType);
+
+  const fixture = TestBed.createComponent(componentClass);
   fixture.nativeElement.id = 'root';
 
-  /* Set inputs. */
-  for (const [name, value] of Object.entries(component.props ?? {})) {
-    fixture.componentInstance[name] = value;
-  }
+  __pwUpdateProps(fixture, component);
+  __pwUpdateEvents(fixture, component.on);
+
+  return fixture;
+}
 
-  /* Subscribe to outputs. */
-  for (const [name, callback] of Object.entries(
-    component.on ?? {}
-  )) {
-    subscription.add(fixture.componentInstance[name].subscribe(callback));
+/**
+ * @param {import('@angular/core/testing').ComponentFixture} fixture
+ * @param {ComponentInfo} componentInfo
+ */
+function __pwUpdateProps(fixture, componentInfo) {
+  if (!componentInfo.props)
+    return;
+
+  if (__pwIsTemplate(componentInfo)) {
+    Object.assign(fixture.componentInstance, componentInfo.props);
+  } else {
+    for (const [name, value] of Object.entries(componentInfo.props))
+      fixture.componentRef.setInput(name, value);
   }
+}
 
-  fixture.autoDetectChanges();
-  await fixture.whenStable();
-};
+/**
+ * @param {import('@angular/core/testing').ComponentFixture} fixture
+ */
+function __pwUpdateEvents(fixture, events = {}) {
+  const outputSubscriptionRecord =
+    __pwOutputSubscriptionRegistry.get(fixture) ?? {};
+  for (const [name, listener] of Object.entries(events)) {
+    /* Unsubscribe previous listener. */
+    outputSubscriptionRecord[name]?.unsubscribe();
 
-globalThis.playwrightUnmount = async (rootElement) => {
-  subscription.unsubscribe();
-  subscription = null;
-  getTestBed().resetTestingModule();
-};
+    /* Store new subscription. */
+    outputSubscriptionRecord[name] = fixture.componentInstance[
+      name
+      ].subscribe((/** @type {unknown} */ event) => listener(event));
+  }
 
-globalThis.playwrightUpdate = async (rootElement, component) => {
-  rootElement.innerHTML = component;
-};
+  /* Update output subscription registry. */
+  __pwOutputSubscriptionRegistry.set(fixture, outputSubscriptionRecord);
+}
+
+/**
+ * @param {ComponentInfo} component
+ */
+function __pwIsTemplate(component) {
+  return typeof component.type === 'string';
+}

package/src/hooks.d.ts

@@ -13,5 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const beforeMount: (callback: any) => void;
-export declare const afterMount: (callback: any) => void;
+import { TestBedStatic } from '@angular/core/testing';
+import { JsonObject } from '@playwright/experimental-ct-core/types/component';
+export declare function beforeMount<HOOKS extends JsonObject>(callback: (params: {
+    hooksConfig?: HOOKS;
+    TestBed: TestBedStatic;
+}) => Promise<void>): void;
+export declare function afterMount<HOOKS extends JsonObject>(callback: (params: {
+    hooksConfig?: HOOKS;
+}) => Promise<void>): void;

package/src/index.d.ts

@@ -1,26 +1,39 @@
-import { Type } from '@angular/core';
+import { EnvironmentProviders, InputSignal, Provider, Type } from '@angular/core';
 import type { PlaywrightTestConfig, TestType } from '@playwright/experimental-ct-core';
+import * as playwrightCtCore from '@playwright/experimental-ct-core';
+import { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import * as playwright from '@playwright/test';
-import type { Observable } from 'rxjs';
 export type { PlaywrightTestConfig };
 export { expect, devices } from '@playwright/test';
 export interface ComponentFixtures {
-    mount<COMPONENT>(component: Type<COMPONENT>, options?: MountOptions<COMPONENT>): Promise<MountResult<COMPONENT>>;
+    mount<COMPONENT, HOOKS extends JsonObject>(template: string, options?: MountTemplateOptions<COMPONENT, HOOKS>): Promise<MountResult<COMPONENT>>;
+    mount<COMPONENT, HOOKS extends JsonObject>(component: Type<COMPONENT>, options?: MountOptions<COMPONENT, HOOKS>): Promise<MountResult<COMPONENT>>;
 }
-export interface MountOptions<COMPONENT> {
-    props?: Partial<COMPONENT>;
-    on?: Outputs<COMPONENT>;
+export interface MountOptions<COMPONENT, HOOKS> {
+    hooksConfig?: HOOKS;
+    providers?: Array<Provider | EnvironmentProviders>;
+    props?: Inputs<COMPONENT>;
+    on?: OutputListeners<COMPONENT>;
+}
+export interface MountTemplateOptions<COMPONENT, HOOKS extends JsonObject> extends MountOptions<COMPONENT, HOOKS> {
+    imports?: Type<unknown>[];
 }
-export type Outputs<COMPONENT> = Partial<{
-    [K in keyof COMPONENT]: COMPONENT[K] extends Observable<unknown> ? (value: Emitted<COMPONENT[K]>) => void : COMPONENT[K];
-}>;
 export interface MountResult<COMPONENT> extends playwright.Locator {
     unmount(): Promise<void>;
     update(options: {
-        props?: Partial<COMPONENT>;
-        on?: Outputs<COMPONENT>;
+        props?: Inputs<COMPONENT>;
+        on?: OutputListeners<COMPONENT>;
     }): Promise<void>;
 }
-type Emitted<OBSERVABLE> = OBSERVABLE extends Observable<infer EMITTED> ? EMITTED : OBSERVABLE;
+export type Inputs<COMPONENT> = Partial<{
+    [PROPERTY in keyof COMPONENT]: COMPONENT[PROPERTY] extends InputSignal<infer VALUE> ? VALUE : COMPONENT[PROPERTY];
+}>;
+export type OutputListeners<COMPONENT> = {
+    [PROPERTY in keyof COMPONENT as COMPONENT[PROPERTY] extends Subscribable<any> ? PROPERTY : never]: (value: Emitted<COMPONENT[PROPERTY]>) => void;
+};
+interface Subscribable<T> {
+    subscribe(subscriber: (value: T) => void): void;
+}
+type Emitted<SUBSCRIBABLE> = SUBSCRIBABLE extends Subscribable<infer EMITTED> ? EMITTED : SUBSCRIBABLE;
 export declare const test: TestType<ComponentFixtures>;
-export declare const defineConfig: (config: any, ...configs: any[]) => PlaywrightTestConfig;
+export declare const defineConfig: typeof playwrightCtCore.defineConfig;

package/register.cjs.d.ts

@@ -1,2 +0,0 @@
-export * from "./src/register";
-export { default } from "./src/register";

package/register.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./register.cjs.js').default;

package/register.cjs.js

@@ -1,89 +0,0 @@
-'use strict';
-
-require('@angular/compiler');
-require('zone.js');
-var testing = require('@angular/core/testing');
-var testing$1 = require('@angular/platform-browser-dynamic/testing');
-var animations = require('@angular/platform-browser/animations');
-var rxjs = require('rxjs');
-
-const _componentLoaderMap = new Map();
-
-testing.getTestBed().initTestEnvironment(
-  testing$1.BrowserDynamicTestingModule,
-  testing$1.platformBrowserDynamicTesting()
-);
-
-/**
- * This is the function used by Playwright CT to map each component to its symbol.
- * The key here is a slug generated by Playwright CT based on the component's module path + component's name.
- */
-function pwRegister(components) {
-  for (const [name, value] of Object.entries(components)) {
-    _componentLoaderMap.set(name, value);
-  }
-}
-
-/**
- * Container subscription holding all outputs subscription
- * in order to unsubscribe when component is unmounted.
- */
-let subscription;
-
-globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const cmpType = component.type;
-
-  subscription = new rxjs.Subscription();
-
-  testing.TestBed.configureTestingModule({
-    imports: [animations.BrowserAnimationsModule]
-  });
-  const fixture = testing.TestBed.createComponent(cmpType);
-  fixture.nativeElement.id = 'root';
-
-  /* Set inputs. */
-  for (const [name, value] of Object.entries(component.props ?? {})) {
-    fixture.componentInstance[name] = value;
-  }
-
-  /* Subscribe to outputs. */
-  for (const [name, callback] of Object.entries(
-    component.on ?? {}
-  )) {
-    subscription.add(fixture.componentInstance[name].subscribe(callback));
-  }
-
-  fixture.autoDetectChanges();
-  await fixture.whenStable();
-};
-
-globalThis.playwrightUnmount = async (rootElement) => {
-  subscription.unsubscribe();
-  subscription = null;
-  testing.getTestBed().resetTestingModule();
-};
-
-globalThis.playwrightUpdate = async (rootElement, component) => {
-  rootElement.innerHTML = component;
-};
-
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var register = (components) => {
-    pwRegister(components);
-};
-
-module.exports = register;

package/register.cjs.mjs

@@ -1,2 +0,0 @@
-export * from './register.cjs.js';
-export { _default as default } from './register.cjs.default.js';

package/register.esm.d.ts

@@ -1,2 +0,0 @@
-export * from "./src/register";
-export { default } from "./src/register";

package/register.esm.js

@@ -1,87 +0,0 @@
-import '@angular/compiler';
-import 'zone.js';
-import { getTestBed, TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Subscription } from 'rxjs';
-
-const _componentLoaderMap = new Map();
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-
-/**
- * This is the function used by Playwright CT to map each component to its symbol.
- * The key here is a slug generated by Playwright CT based on the component's module path + component's name.
- */
-function pwRegister(components) {
-  for (const [name, value] of Object.entries(components)) {
-    _componentLoaderMap.set(name, value);
-  }
-}
-
-/**
- * Container subscription holding all outputs subscription
- * in order to unsubscribe when component is unmounted.
- */
-let subscription;
-
-globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const cmpType = component.type;
-
-  subscription = new Subscription();
-
-  TestBed.configureTestingModule({
-    imports: [BrowserAnimationsModule]
-  });
-  const fixture = TestBed.createComponent(cmpType);
-  fixture.nativeElement.id = 'root';
-
-  /* Set inputs. */
-  for (const [name, value] of Object.entries(component.props ?? {})) {
-    fixture.componentInstance[name] = value;
-  }
-
-  /* Subscribe to outputs. */
-  for (const [name, callback] of Object.entries(
-    component.on ?? {}
-  )) {
-    subscription.add(fixture.componentInstance[name].subscribe(callback));
-  }
-
-  fixture.autoDetectChanges();
-  await fixture.whenStable();
-};
-
-globalThis.playwrightUnmount = async (rootElement) => {
-  subscription.unsubscribe();
-  subscription = null;
-  getTestBed().resetTestingModule();
-};
-
-globalThis.playwrightUpdate = async (rootElement, component) => {
-  rootElement.innerHTML = component;
-};
-
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var register = (components) => {
-    pwRegister(components);
-};
-
-export { register as default };