feat: ✨ add support for playwright 1.43 (#358)

- Replaces `inputs/outputs` with `props/on` to align with Playwright CT for other frameworks.
- Drops spying system (which is not possible anymore as we can't change `mount` returned value with the new version of playwright)

Author: yjaaidi

nx.json

@@ -28,28 +28,16 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "inputs": [
-        "production",
-        "^production"
-      ],
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"],
       "cache": true
     },
     "e2e": {
-      "inputs": [
-        "default",
-        "^production"
-      ],
+      "inputs": ["default", "^production"],
       "cache": true
     },
     "@nx/jest:jest": {
-      "inputs": [
-        "default",
-        "^production",
-        "{workspaceRoot}/jest.preset.js"
-      ],
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
       "cache": true,
       "options": {
         "passWithNoTests": true
@@ -62,43 +50,27 @@
       }
     },
     "@nx/eslint:lint": {
-      "inputs": [
-        "default",
-        "{workspaceRoot}/.eslintrc.json"
-      ],
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
       "cache": true
     },
     "@nx/rollup:rollup": {
       "cache": true,
-      "dependsOn": [
-        "^build"
-      ],
-      "inputs": [
-        "production",
-        "^production"
-      ]
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
     },
     "@nx/vite:test": {
       "cache": true,
-      "inputs": [
-        "default",
-        "^production"
-      ]
+      "inputs": ["default", "^production"]
     },
     "@nx/js:release-publish": {
-      "dependsOn": [
-        "build"
-      ],
+      "dependsOn": ["build"],
       "options": {
         "packageRoot": "dist/{projectRoot}"
       }
     }
   },
   "namedInputs": {
-    "default": [
-      "{projectRoot}/**/*",
-      "sharedGlobals"
-    ],
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
     "sharedGlobals": [
       "{workspaceRoot}/workspace.json",
       "{workspaceRoot}/tsconfig.base.json",
@@ -135,10 +107,7 @@
         "releaseTagPattern": "{projectName}-{version}"
       },
       "swc-angular": {
-        "projects": [
-          "swc-angular",
-          "swc-angular-plugin"
-        ],
+        "projects": ["swc-angular", "swc-angular-plugin"],
         "projectsRelationship": "fixed",
         "releaseTagPattern": "swc-angular-{version}"
       }
@@ -163,9 +132,7 @@
   "plugins": [
     {
       "plugin": "@nx/vite/plugin",
-      "exclude": [
-        "tests/swc-angular-wide/**/*"
-      ]
+      "exclude": ["tests/swc-angular-wide/**/*"]
     }
   ]
 }

package.json

@@ -44,6 +44,9 @@
     "@angular/platform-browser": "17.3.2",
     "@angular/platform-browser-dynamic": "17.3.2",
     "@angular/router": "17.3.2",
+    "@babel/core": "7.23.9",
+    "@babel/helper-plugin-utils": "^7.24.5",
+    "@types/babel__helper-plugin-utils": "^7.10.3",
     "rxjs": "7.8.1",
     "tslib": "2.4.0",
     "zone.js": "0.14.4"
@@ -61,6 +64,7 @@
     "@angular/language-service": "17.3.2",
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-angular": "^19.0.0",
+    "@jscutlery/playwright-ct-angular": "link:dist/packages/playwright-ct-angular",
     "@monodon/rust": "1.4.0",
     "@nx/angular": "18.3.2",
     "@nx/cypress": "18.3.2",
@@ -76,13 +80,14 @@
     "@nx/vite": "18.3.2",
     "@nx/web": "18.3.2",
     "@nx/workspace": "18.3.2",
-    "@playwright/experimental-ct-core": "^1.39.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/experimental-ct-core": "1.43.1",
+    "@playwright/test": "1.43.1",
     "@schematics/angular": "17.3.6",
     "@swc-node/register": "1.9.0",
     "@swc/core": "1.4.17",
     "@swc/helpers": "0.5.11",
     "@swc/jest": "0.2.36",
+    "@types/babel__core": "^7.20.5",
     "@types/jest": "29.5.12",
     "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "7.8.0",

packages/playwright-ct-angular/README.md

@@ -1,13 +1,14 @@
 # Playwright Component Testing for Angular _(experimental)_
 
-This library brings **Angular support** to [Playwright's **experimental** Component Testing](https://playwright.dev/docs/test-components).
+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.
 
 `@jscutlery/playwright-ct-angular` currently supports:
 
 - ✅ **Testing [Versatile Angular Components](https://marmicode.io/blog/versatile-angular)**
-- 🎛 **Passing type-safe inputs to the tested components** 
+- 🎛 **Passing type-safe inputs to the tested components**
 - 🎭 **Spying on component outputs in a type-safe fashion**
 
 https://user-images.githubusercontent.com/2674658/206226065-ba856329-dda7-43b1-9c28-4416b190f4d4.mp4
@@ -39,37 +40,19 @@ import { expect, test } from '@jscutlery/playwright-ct-angular';
 import { GreetingsComponent } from './greetings.component';
 
 test('<jc-greetings> should be polite', async ({ mount }) => {
-  const locator = await mount(GreetingsComponent, {inputs: {name: 'Edouard'}});
+  const locator = await mount(GreetingsComponent, { props: { name: 'Edouard' } });
   expect(locator).toHaveText('👋 Hello Edouard!');
 });
 ```
 
-## 🎭 Spying on outputs
-
-`mount()` will automatically create a `jest-mock`'s spy, subscribe to the outputs given through the `spyOutputs`
-option and return them in the `spies` property, in a type-safe way showing only the outputs that are spied on.
-
-Note that the `spyOutputs` is type-safe and will only allow properties that exist on the component.
-
-```ts
-import { expect, test } from '@jscutlery/playwright-ct-angular';
-import { NameEditorComponent } from './name-editor.component';
-
-test('<jc-name-editor> should be polite', async ({ mount }) => {
-  const locator = await mount(NameEditorComponent, {spyOutputs: ['nameChange']});
-
-  await locator.getByLabel('Name').type('Edouard');
-
-  expect(locator.spies.nameChange).lastCalledWith('Edouard');
-});
-```
-
 ### Passing output callbacks
 
-We can also pass custom output callback functions for some extreme cases or if we want to use a custom spy implementation for example or just debug.
+We can also pass custom output callback functions for some extreme cases or if we want to use a custom spy
+implementation for example or just debug.
+
 ```ts
 await mount(NameEditorComponent, {
-  outputs: {
+  on: {
     nameChange(name) {
       console.log(name);
     }
@@ -89,7 +72,7 @@ import { RecipeSearchTestContainer } from './recipe-search.test-container';
 
 test('...', async ({ mount }) => {
   await mount(RecipeSearchTestContainer, {
-    inputs: {
+    props: {
       recipes: [
         beer,
         burger
@@ -140,24 +123,30 @@ We 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:
+
 ```ts
 import styles from './some-styles.css';
+
 @Component({
   template: '<jc-greetings></jc-greetings>',
   encapsulation: ViewEncapsulation.None,
   styles: [styles]
 })
-class GreetingsTestContainer {}
+class GreetingsTestContainer {
+}
 ```
 
 ### Angular Material & Angular Libraries with styles
 
 As mentioned in [Versatile Angular Style Blog Post](https://marmicode.io/blog/versatile-angular),
-Angular Material and other Angular libraries might use a [Conditional "style" Export](https://nodejs.org/api/packages.html#conditional-exports)
+Angular Material and other Angular libraries might use
+a [Conditional "style" Export](https://nodejs.org/api/packages.html#conditional-exports)
 that allows us to import prebuilt styles
-_(Cf. [Angular Package Format](https://angular.io/guide/angular-package-format) [managing assets in a library](https://angular.io/guide/creating-libraries#managing-assets-in-a-library))_.
+_(
+Cf. [Angular Package Format](https://angular.io/guide/angular-package-format) [managing assets in a library](https://angular.io/guide/creating-libraries#managing-assets-in-a-library))_.
 
 In that case, we can add the following configuration to our `playwright-ct.config.ts`:
+
 ```ts
 const config: PlaywrightTestConfig = {
   // ...
@@ -174,11 +163,13 @@ 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)
 
 # ⚠️ Known Limitations
 
-The way Playwright Component Testing works is different from the way things work with Karma, Jest, Vitest, Cypress etc...
+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.
 
 This causes a couple of limitations as we can't directly access the `TestBed's` or the component's internals,
@@ -187,13 +178,15 @@ 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),
 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 with communicate the unique string to the browser who will know which es-module to load.
+This way, when calling `mount()`, Playwright with 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
@@ -212,36 +205,43 @@ await mount(cmp);
 
 ```ts
 // 🛑 this won't work
-test(MyComponent.name, async ({ mount }) => {});
+test(MyComponent.name, async ({ mount }) => {
+});
 ```
 
 ### ...declare components in the same file.
 
 ```ts
 // 🛑 this won't work
-@Component({...})
-class GreetingsComponent {}
+@Component({ ... })
+class GreetingsComponent {
+}
 
 test('<jc-greetings>', 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 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.
+We could also implement some custom transform that registers the providers and import modules, like Playwright does for
+the component class.
 
 # Setup
 
@@ -265,6 +265,7 @@ yarn add -D @jscutlery/playwright-ct-angular @playwright/test # or npm install -
 ## 🛠 Configure
 
 Update `playwright-ct-config.ts` and replace:
+
 ```ts
 import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
 import { devices } from '@playwright/experimental-ct-react';

packages/playwright-ct-angular/package.json

@@ -2,6 +2,7 @@
   "name": "@jscutlery/playwright-ct-angular",
   "version": "0.3.0",
   "dependencies": {
+    "@babel/core": "~7.23.0",
     "jest-mock": "^28.1.3",
     "rxjs": "^7.5.7",
     "vite": "^3.2.1"