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-core/cli');

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

@@ -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.
+ */
+
+import type { TestBedStatic } from '@angular/core/testing';
+
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+type JsonArray = JsonValue[];
+type JsonObject = { [Key in string]?: JsonValue };
+
+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,73 @@
+/**
+ * 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 { 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 JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+type JsonArray = JsonValue[];
+type JsonObject = { [Key in string]?: JsonValue };
+
+type Slot = string | string[];
+
+export interface MountOptions<HooksConfig extends JsonObject, Component> {
+  props?: Partial<Component>, // TODO: filter props
+  slots?: Record<string, Slot> & { default?: Slot };
+  on?: Record<string, Function>;
+  hooksConfig?: HooksConfig;
+}
+
+interface MountResult<Component> extends Locator {
+  unmount(): Promise<void>;
+  update(options: Omit<MountOptions<never, Component>, 'hooksConfig'>): 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,33 @@
+/**
+ * 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: baseTest, expect, devices, defineConfig: originalDefineConfig } = require('@playwright/test');
+const { fixtures } = require('@playwright/test/lib/mount');
+const path = require('path');
+
+function plugin() {
+  // Only fetch upon request to avoid resolution in workers.
+  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  return createPlugin(
+    path.join(__dirname, 'registerSource.mjs'),
+    () => import('@analogjs/vite-plugin-angular').then(plugin => plugin.default.default())
+  )
+};
+
+const test = baseTest.extend(fixtures);
+const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+
+module.exports = { test, expect, devices, defineConfig };

packages/playwright-ct-angular/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@playwright/experimental-ct-angular",
+  "version": "1.32.0-next",
+  "description": "Playwright Component Testing for Angular",
+  "repository": "github:Microsoft/playwright",
+  "homepage": "https://playwright.dev",
+  "engines": {
+    "node": ">=14"
+  },
+  "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.0-alpha.28",
+    "@angular/common": "^15.2.0",
+    "@angular/compiler": "^15.2.0",
+    "@angular/router": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/platform-browser": "^15.2.0",
+    "@angular/platform-browser-dynamic": "^15.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.5.0",
+    "vite": "^4.1.1",
+    "zone.js": "~0.12.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.5"
+  },
+  "bin": {
+    "playwright": "./cli.js"
+  }
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 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 register(
+  components: { [key: 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 { register } from './registerSource.mjs';
+
+export default components => {
+  register(components);
+};