@jscutlery/playwright-ct-angular 0.3.0 → 0.5.0

package/index.esm.js

@@ -1,84 +1,33 @@
-import { fixtures } from '@playwright/experimental-ct-core/lib/mount';
-import * as playwright from '@playwright/test';
-import { fn } from 'jest-mock';
-import { defineConfig as defineConfig$1 } from '@playwright/experimental-ct-core';
-import * as path from 'path';
+import * as path from 'node:path';
+import * as playwrightCtCore from '@playwright/experimental-ct-core';
+export { devices, expect } from '@playwright/test';
 
-const mountTest = playwright.test.extend(fixtures);
-const test = mountTest.extend({
-    /**
-     * Override mount to return output spies and enjoy type inference.
-     * This allows this:
-     *
-     * const { spies } = mount(..., {outputs: {citySelect: jest.fn()}})
-     *
-     * instead of this:
-     *
-     * const citySelectSpy: jest.MockedFunction<(city: string) => void> = jest.fn();
-     * mount(..., {outputs: {citySelect: citySelectSpy}});
-     *
-     * @hack we are willingly not using `async mount(...)` syntax here
-     * because it would be transpiled to `_async(function mount() { ... }`
-     * by Nx's default rollout config.
-     * Playwright dynamically parses the given function so converting
-     * async / await to a wrapped function would simply break the library causing
-     * a `TypeError: mount is not a function` error.
-     */
-    mount({ mount, page }, use) {
-        return use(async (component, options = {}) => {
-            /* 1. Create a spy for each output in `spyOutputs`... */
-            const spies = options.spyOutputs?.reduce((acc, key) => {
-                return {
-                    ...acc,
-                    [key]: fn(),
-                };
-            }, {}) ?? {};
-            /* 2. ...then use it as an output... */
-            await mount(component, {
-                ...options,
-                outputs: {
-                    ...options.outputs,
-                    ...spies,
-                },
-            });
-            /* Grab a locator to the TestBed's root element.
-             * We are loading a fresh new page for each test
-             * so the id should always be "root0".
-             * Otherwise, we'd have to hack our way and somehow grab all
-             * the `#root*`, sort them and grab the last one.
-             * As a matter of fact, we can't grab a reference to the fixture. */
-            const locator = page.locator('#root0');
-            /* Add spies to the returned locator. */
-            return Object.assign(locator, { spies });
-        });
-    },
-});
-const expect = playwright.expect;
-const devices = playwright.devices;
+/* @hack `test` is not exported in the type definition of `@playwright/experimental-ct-core`. */
+// @eslint-disable-next-line @typescript-eslint/no-explicit-any
+const test = playwrightCtCore.test;
+const defineConfig = (config, ...configs) => {
+    const original = playwrightCtCore.defineConfig({
+        ...config,
+        '@playwright/test': {
+            packageJSON: require.resolve('./package.json'),
+        },
+        '@playwright/experimental-ct-core': {
+            registerSourceFile: path.join(__dirname, 'register-source.mjs'),
+        },
+    }, ...configs);
+    /* @hack for some weird reason, if we do not require the babel plugin here,
+     * babel loads an empty object instead of the default exported function. */
+    require('@jscutlery/playwright-ct-angular/transform-angular');
+    return {
+        ...original,
+        '@playwright/test': {
+            ...original['@playwright/test'],
+            babelPlugins: [
+                ...original['@playwright/test'].babelPlugins,
+                [require.resolve('@jscutlery/playwright-ct-angular/transform-angular')],
+            ],
+        },
+    };
+};
 
-/**
- * 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.
- */
-function plugin() {
-    /* Only fetch upon request to avoid resolution in workers. */
-    const { createPlugin,
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-     } = require('@playwright/experimental-ct-core/lib/vitePlugin');
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return createPlugin(path.join(__dirname, 'register-source.mjs'), () => { });
-}
-const defineConfig = (config) => defineConfig$1({ ...config, _plugins: [plugin] });
-
-export { defineConfig, devices, expect, test };
+export { defineConfig, test };

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "dependencies": {
-    "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",
     ".": {
@@ -29,10 +29,10 @@
       "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",
+      "default": "./transform-angular.cjs.js"
     }
   },
   "module": "./index.esm.js",

package/register-source.mjs

@@ -1,68 +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 loader = _componentLoaderMap.get(component.type);
-  const cmpType = await loader();
+  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);
 
-  /* Set inputs. */
-  for (const [name, value] of Object.entries(component.options.inputs ?? {})) {
-    fixture.componentInstance[name] = value;
-  }
+  const fixture = TestBed.createComponent(componentClass);
+  fixture.nativeElement.id = 'root';
+
+  __pwUpdateProps(fixture, component);
+  __pwUpdateEvents(fixture, component.on);
+
+  return fixture;
+}
 
-  /* Subscribe to outputs. */
-  for (const [name, callback] of Object.entries(
-    component.options.outputs ?? {}
-  )) {
-    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();
-};
+/**
+ * @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,19 +1,39 @@
-/**
- * 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.
- */
-export { devices, expect, test } from './lib/playwright-ct-angular';
-export type { ComponentFixtures } from './lib/playwright-ct-angular';
-import { defineConfig as originalDefineConfig } from '@playwright/experimental-ct-core';
-export declare const defineConfig: typeof originalDefineConfig;
+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';
+export type { PlaywrightTestConfig };
+export { expect, devices } from '@playwright/test';
+export interface ComponentFixtures {
+    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, 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 interface MountResult<COMPONENT> extends playwright.Locator {
+    unmount(): Promise<void>;
+    update(options: {
+        props?: Inputs<COMPONENT>;
+        on?: OutputListeners<COMPONENT>;
+    }): Promise<void>;
+}
+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: typeof playwrightCtCore.defineConfig;

package/src/transform-angular.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * Original file: https://github.com/microsoft/playwright/blob/8173cdc4857f8e0a98047e02e692c5da6544a170/packages/playwright-ct-core/src/tsxTransform.ts
+ */
+import { NodePath, types as t } from '@babel/core';
+declare const _default: (api: object, options: Record<string, any>, dirname: string) => {
+    name: string;
+    visitor: {
+        Program: {
+            enter(this: import("@babel/core").PluginPass, path: NodePath<t.Program>): void;
+            exit(this: import("@babel/core").PluginPass, path: NodePath<t.Program>): void;
+        };
+        ImportDeclaration(this: import("@babel/core").PluginPass, p: NodePath<t.ImportDeclaration>): void;
+    };
+};
+export default _default;

package/transform-angular.cjs.d.ts

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

package/transform-angular.cjs.default.js

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