@jscutlery/playwright-ct-angular 0.1.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@jscutlery/playwright-ct-angular",
+  "version": "0.1.0",
+  "dependencies": {
+    "jest-mock": "^28.1.3",
+    "rxjs": "^7.5.7",
+    "vite": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@angular/core": "*",
+    "@angular/platform-browser": "*",
+    "@angular/platform-browser-dynamic": "*",
+    "@playwright/test": "^1.28.0",
+    "tslib": "*"
+  },
+  "module": "./index.js",
+  "main": "./index.cjs",
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  }
+}

package/register-source.mjs

@@ -0,0 +1,62 @@
+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 _componentRegistryMap = 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 register(components) {
+  for (const [name, value] of Object.entries(components)) {
+    _componentRegistryMap.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 = _componentRegistryMap.get(component.type);
+
+  subscription = new Subscription();
+
+  TestBed.configureTestingModule({
+    imports: [BrowserAnimationsModule]
+  });
+  const fixture = TestBed.createComponent(cmpType);
+
+  /* Set inputs. */
+  for (const [name, value] of Object.entries(component.options.inputs ?? {})) {
+    fixture.componentInstance[name] = value;
+  }
+
+  /* Subscribe to outputs. */
+  for (const [name, callback] of Object.entries(component.options.outputs ?? {})) {
+    subscription.add(fixture.componentInstance[name].subscribe(callback));
+  }
+
+  fixture.autoDetectChanges();
+};
+
+globalThis.playwrightUnmount = async (rootElement) => {
+  subscription.unsubscribe();
+  subscription = null;
+  getTestBed().resetTestingModule();
+};
+
+globalThis.playwrightUpdate = async (rootElement, component) => {
+  rootElement.innerHTML = component;
+};