feat(ct): angular component testing

packages/playwright-ct-angular/.npmignore

@@ -0,0 +1,11 @@
+**/*
+
+!README.md
+!LICENSE
+!register.d.ts
+!register.mjs
+!registerSource.mjs
+!index.d.ts
+!index.js
+!hooks.d.ts
+!hooks.mjs

packages/playwright-ct-angular/README.md

@@ -0,0 +1,3 @@
+> **BEWARE** This package is EXPERIMENTAL and does not respect semver.
+
+Read more at https://playwright.dev/docs/test-components

packages/playwright-ct-angular/cli.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+/**
+ * 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.
+ */
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-angular/hooks.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+
+import type { TestBedStatic } from '@angular/core/testing';
+import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig?: HooksConfig, TestBed: TestBedStatic }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
+): void;

packages/playwright-ct-angular/hooks.mjs

@@ -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.
+ */
+
+const __pw_hooks_before_mount = [];
+const __pw_hooks_after_mount = [];
+
+window.__pw_hooks_before_mount = __pw_hooks_before_mount;
+window.__pw_hooks_after_mount = __pw_hooks_after_mount;
+
+export const beforeMount = callback => {
+  __pw_hooks_before_mount.push(callback);
+};
+
+export const afterMount = callback => {
+  __pw_hooks_after_mount.push(callback);
+};

packages/playwright-ct-angular/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+import type {
+  TestType,
+  PlaywrightTestArgs,
+  PlaywrightTestConfig as BasePlaywrightTestConfig,
+  PlaywrightTestOptions,
+  PlaywrightWorkerArgs,
+  PlaywrightWorkerOptions,
+  Locator,
+} from '@playwright/test';
+import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { InlineConfig } from 'vite';
+import type { Type } from '@angular/core';
+
+export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
+  use?: BasePlaywrightTestConfig<T, W>['use'] & {
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig | (() => Promise<InlineConfig>);
+  };
+};
+
+type ComponentSlot = string | string[];
+type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
+
+type ComponentEvents = Record<string, Function>;
+
+export interface MountOptions<HooksConfig extends JsonObject, Component> {
+  props?: Partial<Component>, // TODO: filter props
+  slots?: ComponentSlots;
+  on?: ComponentEvents;
+  hooksConfig?: HooksConfig;
+}
+
+interface MountResult<Component> extends Locator {
+  unmount(): Promise<void>;
+  update(options: {
+    props?: Partial<Component>,
+    on?: Partial<ComponentEvents>,
+  }): Promise<void>;
+}
+
+export interface ComponentFixtures {
+  mount<HooksConfig extends JsonObject, Component = unknown>(
+    component: Type<Component>,
+    options?: MountOptions<HooksConfig, Component>
+  ): Promise<MountResult<Component>>;
+}
+
+export const test: TestType<
+  PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
+
+export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+
+export { expect, devices } from '@playwright/test';

packages/playwright-ct-angular/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+const { test, expect, devices, defineConfig: originalDefineConfig } = require('@playwright/experimental-ct-core');
+const path = require('path');
+
+process.env['NODE_ENV'] = 'test';
+
+function plugin() {
+  // Only fetch upon request to avoid resolution in workers.
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
+  return createPlugin(
+      path.join(__dirname, 'registerSource.mjs'),
+      () => import('@analogjs/vite-plugin-angular').then(plugin => {
+        // TODO: remove the typeof plugin.default check
+        if (typeof plugin.default === 'function')
+          return plugin.default({ jit: false });
+        return plugin.default.default({ jit: false });
+      })
+  );
+}
+
+const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+
+module.exports = { test, expect, devices, defineConfig };

packages/playwright-ct-angular/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@playwright/experimental-ct-angular",
+  "version": "1.40.0-next",
+  "description": "Playwright Component Testing for Angular",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sand4rt/playwright-ct-angular.git"
+  },
+  "homepage": "https://playwright.dev",
+  "engines": {
+    "node": ">=16"
+  },
+  "author": {
+    "name": "Microsoft Corporation"
+  },
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./register": {
+      "types": "./register.d.ts",
+      "default": "./register.mjs"
+    },
+    "./hooks": {
+      "types": "./hooks.d.ts",
+      "default": "./hooks.mjs"
+    }
+  },
+  "dependencies": {
+    "@analogjs/vite-plugin-angular": "0.2.10",
+    "@angular-devkit/build-angular": "^16.1.0",
+    "@playwright/experimental-ct-core": "1.40.0-next",
+    "vite": "^4.4.9"
+  },
+  "devDependencies": {
+    "@angular/animations": "^16.1.7",
+    "@angular/common": "^16.1.7",
+    "@angular/compiler": "^16.1.7",
+    "@angular/compiler-cli": "^16.1.7",
+    "@angular/core": "^16.1.7",
+    "@angular/platform-browser": "^16.1.7",
+    "@angular/platform-browser-dynamic": "^16.1.7",
+    "@angular/router": "^16.1.7",
+    "@playwright/test": "1.38.1",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.4",
+    "zone.js": "~0.13.1"
+  },
+  "peerDependencies": {
+    "@playwright/test": ">=1.38.1",
+    "typescript": ">=4.9.3",
+    "@angular/common": ">=15.1.0 || >=16.0.0",
+    "@angular/platform-browser": ">=15.1.0 || >=16.0.0",
+    "@angular/router": ">=15.1.0 || >=16.0.0",
+    "@angular/core": ">=15.1.0 || >=16.0.0"
+  },
+  "bin": {
+    "playwright": "./cli.js"
+  }
+}

packages/playwright-ct-angular/register.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 default function pwRegister(components: Record<string, any>): void

packages/playwright-ct-angular/register.mjs

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+import { pwRegister } from './registerSource.mjs';
+
+export default components => {
+  pwRegister(components);
+};