@jscutlery/playwright-ct-angular 0.6.0 → 0.6.1

package/README.md

@@ -211,26 +211,7 @@ 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**.
 
-## 🪄 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 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.
-
-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...
-
-### ...hold the component type in a variable
+## It is not possible to hold the component type in a variable
 
 ```ts
 // 🛑 this won't work
@@ -238,7 +219,7 @@ const cmp = MyComponent;
 await mount(cmp);
 ```
 
-### ...use the component type elsewhere in the file.
+### It is not possible to use the component type elsewhere in the file.
 
 ```ts
 // 🛑 this won't work
@@ -246,7 +227,7 @@ test(MyComponent.name, async ({ mount }) => {
 });
 ```
 
-### ...declare components in the same file.
+### It is not possible to declare components in the same file.
 
 ```ts
 // 🛑 this won't work
@@ -259,6 +240,49 @@ test('should work', async ({ mount }) => {
 });
 ```
 
+### It is not possible to use anything in providers which is not serializable or "importable".
+
+```ts
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MY_PROVIDERS } from './my-providers';
+import { MyFake } from './my-fake';
+
+@Injectable()
+class MyLocalFake {
+  // ...
+}
+
+// 🛑 this won't work because the result of `provideAnimations()` is not serializable
+mount(GreetingsComponent, { providers: [provideAnimations()] })
+// 🛑 this won't work because `MyLocalFake` is not "importable"
+mount(GreetingsComponent, { providers: [{ provide: MyService, useClass: MyLocalFake }] })
+// ✅ this works
+mount(GreetingsComponent, { providers: MY_PROVIDERS });
+// ✅ this works
+mount(GreetingsComponent, { providers: [{ provide: MY_VALUE, useValue: 'my-value' }] });
+// ✅ this works
+mount(GreetingsComponent, { providers: [{ provide: MyService, useClass: MyFake }] });
+```
+
+## 🪄 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 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.
+
+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
+
+###       
+
 # 📦 Setup
 
 ### 1. Install

package/hooks.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const __pw_hooks_before_mount = [];
 const __pw_hooks_after_mount = [];
 window['__pw_hooks_before_mount'] = __pw_hooks_before_mount;

package/index.cjs.js

@@ -1,13 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var path = require('node:path');
 var playwrightCtCore = require('@playwright/experimental-ct-core');
 var test$1 = require('@playwright/test');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -20,12 +17,12 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var path__namespace = /*#__PURE__*/_interopNamespace(path);
-var playwrightCtCore__namespace = /*#__PURE__*/_interopNamespace(playwrightCtCore);
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+var playwrightCtCore__namespace = /*#__PURE__*/_interopNamespaceDefault(playwrightCtCore);
 
 /* @hack `test` is not exported in the type definition of `@playwright/experimental-ct-core`. */
 // @eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -55,11 +52,11 @@ const defineConfig = (config, ...configs) => {
     };
 };
 
-Object.defineProperty(exports, 'devices', {
+Object.defineProperty(exports, "devices", {
   enumerable: true,
   get: function () { return test$1.devices; }
 });
-Object.defineProperty(exports, 'expect', {
+Object.defineProperty(exports, "expect", {
   enumerable: true,
   get: function () { return test$1.expect; }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "dependencies": {
     "@babel/core": "7.23.9",
     "@playwright/experimental-ct-core": "1.43.1",

package/transform-angular.cjs.js

@@ -4,10 +4,6 @@ var path = require('node:path');
 var core = require('@babel/core');
 var transform = require('playwright/lib/transform/transform');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
-
 var lib = {};
 
 Object.defineProperty(lib, "__esModule", {
@@ -197,7 +193,7 @@ function collectClassMountUsages(path) {
 }
 function importInfo(importNode, specifier, filename) {
     const importSource = importNode.source.value;
-    const idPrefix = path__default["default"]
+    const idPrefix = path
         .join(filename, '..', importSource)
         .replace(/[^\w_\d]/g, '_');
     const result = {