@jscutlery/playwright-ct-angular 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "dependencies": {
     "jest-mock": "^28.1.3",
     "rxjs": "^7.5.7",
@@ -10,7 +10,7 @@
     "@angular/core": "*",
     "@angular/platform-browser": "*",
     "@angular/platform-browser-dynamic": "*",
-    "@playwright/test": "^1.28.0",
+    "@playwright/test": ">=1.39.0",
     "tslib": "*"
   },
   "exports": {
@@ -19,6 +19,16 @@
       "module": "./index.esm.js",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
+    },
+    "./hooks": {
+      "module": "./hooks.esm.js",
+      "import": "./hooks.cjs.mjs",
+      "default": "./hooks.cjs.js"
+    },
+    "./register": {
+      "module": "./register.esm.js",
+      "import": "./register.cjs.mjs",
+      "default": "./register.cjs.js"
     }
   },
   "module": "./index.esm.js",

package/register-source.mjs

@@ -1,11 +1,14 @@
 import '@angular/compiler';
 import 'zone.js';
 import { getTestBed, TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Subscription } from 'rxjs';
 
-const _componentRegistryMap = new Map();
+const _componentLoaderMap = new Map();
 
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -16,9 +19,9 @@ getTestBed().initTestEnvironment(
  * 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 register(components) {
+export function pwRegister(components) {
   for (const [name, value] of Object.entries(components)) {
-    _componentRegistryMap.set(name, value);
+    _componentLoaderMap.set(name, value);
   }
 }
 
@@ -29,12 +32,13 @@ function register(components) {
 let subscription;
 
 globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const cmpType = _componentRegistryMap.get(component.type);
+  const loader = _componentLoaderMap.get(component.type);
+  const cmpType = await loader();
 
   subscription = new Subscription();
 
   TestBed.configureTestingModule({
-    imports: [BrowserAnimationsModule]
+    imports: [BrowserAnimationsModule],
   });
   const fixture = TestBed.createComponent(cmpType);
 
@@ -44,7 +48,9 @@ globalThis.playwrightMount = async (component, rootElement, hooksConfig) => {
   }
 
   /* Subscribe to outputs. */
-  for (const [name, callback] of Object.entries(component.options.outputs ?? {})) {
+  for (const [name, callback] of Object.entries(
+    component.options.outputs ?? {}
+  )) {
     subscription.add(fixture.componentInstance[name].subscribe(callback));
   }
 

package/register.cjs.d.ts

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

package/register.cjs.default.js

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