();
12 | }
13 |
--------------------------------------------------------------------------------
/ct-angular/src/components/button.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ct-angular/src/components/button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | selector: 'app-button',
6 | templateUrl: './button.component.html',
7 | })
8 | export class ButtonComponent {
9 | @Input({required: true}) title!: string;
10 | @Output() submit = new EventEmitter();
11 | }
12 |
--------------------------------------------------------------------------------
/ct-angular/src/components/component.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | template: `test
`,
6 | })
7 | export class ComponentComponent {}
8 |
--------------------------------------------------------------------------------
/ct-angular/src/components/counter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | template: `
6 |
7 |
{{ count }}
8 |
{{ this.remountCount }}
9 |
10 |
11 |
7 |
Welcome!
8 |
9 |
10 |
11 |
14 |
15 | `,
16 | })
17 | export class DefaultSlotComponent {}
18 |
--------------------------------------------------------------------------------
/ct-angular/src/components/empty.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | template: ``,
6 | })
7 | export class EmptyComponent {}
8 |
--------------------------------------------------------------------------------
/ct-angular/src/components/inject.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, inject, InjectionToken } from '@angular/core';
2 |
3 | export const TOKEN = new InjectionToken<{ text: string }>('gets overwritten');
4 |
5 | @Component({
6 | standalone: true,
7 | template: `{{ data.text }}
`,
8 | })
9 | export class InjectComponent {
10 | public data = inject(TOKEN);
11 | }
12 |
--------------------------------------------------------------------------------
/ct-angular/src/components/multi-root.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | template: `root 1
root 2
`,
6 | })
7 | export class MultiRootComponent {}
8 |
--------------------------------------------------------------------------------
/ct-angular/src/components/named-slots.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | template: `
6 |
7 |
10 |
11 |
12 |
13 |
16 |
17 | `,
18 | })
19 | export class NamedSlotsComponent {}
20 |
--------------------------------------------------------------------------------
/ct-angular/src/components/not-inlined.component.html:
--------------------------------------------------------------------------------
1 | Not Inlined
--------------------------------------------------------------------------------
/ct-angular/src/components/not-inlined.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | changeDetection: ChangeDetectionStrategy.OnPush,
5 | standalone: true,
6 | templateUrl: './not-inlined.component.html',
7 | })
8 | export class NotInlinedComponent {}
--------------------------------------------------------------------------------
/ct-angular/src/components/output.component.ts:
--------------------------------------------------------------------------------
1 | import { DOCUMENT } from "@angular/common";
2 | import { Component, Output, inject } from "@angular/core";
3 | import { Subject, finalize } from "rxjs";
4 |
5 | @Component({
6 | standalone: true,
7 | template: `OutputComponent`,
8 | })
9 | export class OutputComponent {
10 | @Output() answerChange = new Subject().pipe(
11 | /* Detect when observable is unsubscribed from,
12 | * and set a global variable `hasUnsubscribed` to true. */
13 | finalize(() => ((this._window as any).hasUnsubscribed = true))
14 | );
15 |
16 | private _window = inject(DOCUMENT).defaultView;
17 | }
18 |
--------------------------------------------------------------------------------
/ct-angular/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/ct-angular/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { provideRouter } from '@angular/router';
3 | import { AppComponent } from '@/app.component';
4 | import { routes } from '@/router';
5 |
6 | bootstrapApplication(AppComponent, {
7 | providers: [
8 | provideRouter(routes)
9 | ]
10 | }).catch(err => console.error(err));
11 |
--------------------------------------------------------------------------------
/ct-angular/src/pages/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | selector: 'app-dashboard',
6 | template: `Dashboard`
7 | })
8 | export class DashboardComponent {}
9 |
--------------------------------------------------------------------------------
/ct-angular/src/pages/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | selector: 'app-login',
6 | template: `Login`
7 | })
8 | export class LoginComponent {}
9 |
--------------------------------------------------------------------------------
/ct-angular/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 | import { DashboardComponent } from '@/pages/dashboard.component';
3 | import { LoginComponent } from '@/pages/login.component';
4 |
5 | export const routes: Routes = [
6 | { path: '', component: LoginComponent },
7 | { path: 'dashboard', component: DashboardComponent },
8 | ];
9 |
--------------------------------------------------------------------------------
/ct-angular/tests/angular-router.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@sand4rt/experimental-ct-angular';
2 | import type { HooksConfig } from 'playwright';
3 | import { AppComponent } from '@/app.component';
4 |
5 | test('navigate to a page by clicking a link', async ({ page, mount }) => {
6 | const component = await mount(AppComponent, {
7 | hooksConfig: { routing: true },
8 | });
9 | await expect(component.getByRole('main')).toHaveText('Login');
10 | await component.getByRole('link', { name: 'Dashboard' }).click();
11 | await expect(component.getByRole('main')).toHaveText('Dashboard');
12 | await expect(page).toHaveURL('/dashboard');
13 | });
14 |
--------------------------------------------------------------------------------
/ct-angular/tests/events.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@sand4rt/experimental-ct-angular';
2 | import { ButtonComponent } from '@/components/button.component';
3 | import { OutputComponent } from '@/components/output.component';
4 |
5 | test('emit an submit event when the button is clicked', async ({ mount }) => {
6 | const messages: string[] = [];
7 | const component = await mount(ButtonComponent, {
8 | props: {
9 | title: 'Submit',
10 | },
11 | on: {
12 | submit: (data: string) => messages.push(data),
13 | },
14 | });
15 | await component.click();
16 | expect(messages).toEqual(['hello']);
17 | });
18 |
19 | test('replace existing listener when new listener is set', async ({
20 | mount,
21 | }) => {
22 | let called = false;
23 |
24 | const component = await mount(ButtonComponent, {
25 | props: {
26 | title: 'Submit',
27 | },
28 | on: {
29 | submit() { },
30 | },
31 | });
32 |
33 | component.update({
34 | on: {
35 | submit() {
36 | called = true;
37 | },
38 | },
39 | });
40 |
41 | await component.click();
42 | expect(called).toBe(true);
43 | });
44 |
45 | test('unsubscribe from events when the component is unmounted', async ({
46 | mount,
47 | page,
48 | }) => {
49 | const component = await mount(OutputComponent, {
50 | on: {
51 | answerChange() { },
52 | },
53 | });
54 |
55 | await component.unmount();
56 |
57 | /* Check that the output observable had been unsubscribed from
58 | * as it sets a global variable `hasUnusbscribed` to true
59 | * when it detects unsubscription. Cf. OutputComponent. */
60 | expect(await page.evaluate(() => (window as any).hasUnsubscribed)).toBe(true);
61 | });
62 |
--------------------------------------------------------------------------------
/ct-angular/tests/hooks.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@sand4rt/experimental-ct-angular';
2 | import type { HooksConfig } from 'playwright';
3 | import { InjectComponent } from '@/components/inject.component';
4 |
5 | test('inject a token', async ({ mount }) => {
6 | const component = await mount(InjectComponent, {
7 | hooksConfig: { injectToken: true },
8 | });
9 | await expect(component).toHaveText('has been overwritten');
10 | await expect(component).not.toHaveText('gets overwritten');
11 | });
12 |
--------------------------------------------------------------------------------
/ct-angular/tests/render.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@sand4rt/experimental-ct-angular';
2 | import { ButtonComponent } from '@/components/button.component';
3 | import { EmptyComponent } from '@/components/empty.component';
4 | import { ComponentComponent } from '@/components/component.component';
5 | import { NotInlinedComponent } from '@/components/not-inlined.component';
6 | import { ButtonSignalsComponent } from '@/components/button-signals.component';
7 |
8 | test('render inputs', async ({ mount }) => {
9 | const component = await mount(ButtonComponent, {
10 | props: {
11 | title: 'Submit',
12 | },
13 | });
14 | await expect(component).toContainText('Submit');
15 | });
16 |
17 | test('render signal-based inputs', async ({ mount }) => {
18 | const component = await mount(ButtonSignalsComponent, {
19 | props: {
20 | title: 'Submit',
21 | },
22 | });
23 | await expect(component).toContainText('Submit');
24 | });
25 |
26 | test('get textContent of the empty component', async ({ mount }) => {
27 | const component = await mount(EmptyComponent);
28 | expect(await component.allTextContents()).toEqual(['']);
29 | expect(await component.textContent()).toBe('');
30 | await expect(component).toHaveText('');
31 | });
32 |
33 | test('render a component without options', async ({ mount }) => {
34 | const component = await mount(ComponentComponent);
35 | await expect(component).toContainText('test');
36 | });
37 |
38 | test('render component with not inlined template', async ({ mount }) => {
39 | const component = await mount(NotInlinedComponent);
40 | await expect(component).toContainText('Not Inlined');
41 | });
42 |
--------------------------------------------------------------------------------
/ct-angular/tests/unmount.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@sand4rt/experimental-ct-angular';
2 | import { ButtonComponent } from '@/components/button.component';
3 | import { MultiRootComponent } from '@/components/multi-root.component';
4 |
5 | test('unmount', async ({ page, mount }) => {
6 | const component = await mount(ButtonComponent, {
7 | props: {
8 | title: 'Submit',
9 | },
10 | });
11 | await expect(page.locator('#root')).toContainText('Submit');
12 | await component.unmount();
13 | await expect(page.locator('#root')).not.toContainText('Submit');
14 | });
15 |
16 | test('unmount a multi root component', async ({ mount, page }) => {
17 | const component = await mount(MultiRootComponent);
18 | await expect(page.locator('#root')).toContainText('root 1');
19 | await expect(page.locator('#root')).toContainText('root 2');
20 | await component.unmount();
21 | await expect(page.locator('#root')).not.toContainText('root 1');
22 | await expect(page.locator('#root')).not.toContainText('root 2');
23 | });
24 |
--------------------------------------------------------------------------------
/ct-angular/tests/unsupported.spec.tsx:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@sand4rt/experimental-ct-angular';
2 |
3 | test('should throw an error when mounting JSX', async ({ mount }) => {
4 | // @ts-ignore
5 | await expect(mount( as any)).rejects.toThrow('JSX mount notation is not supported');
6 | });
7 |
--------------------------------------------------------------------------------
/ct-angular/tests/update.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@sand4rt/experimental-ct-angular';
2 | import { CounterComponent } from '@/components/counter.component';
3 |
4 | test('update props without remounting', async ({ mount }) => {
5 | const component = await mount(CounterComponent, {
6 | props: { count: 9001 },
7 | });
8 | await expect(component.getByTestId('props')).toContainText('9001');
9 |
10 | await component.update({
11 | props: { count: 1337 },
12 | });
13 | await expect(component).not.toContainText('9001');
14 | await expect(component.getByTestId('props')).toContainText('1337');
15 |
16 | await expect(component.getByTestId('remount-count')).toContainText('1');
17 | });
18 |
19 | test('update event listeners without remounting', async ({ mount }) => {
20 | const component = await mount(CounterComponent);
21 |
22 | const messages: string[] = [];
23 | await component.update({
24 | on: {
25 | submit: (data: string) => messages.push(data),
26 | },
27 | });
28 | await component.click();
29 | expect(messages).toEqual(['hello']);
30 |
31 | await expect(component.getByTestId('remount-count')).toContainText('1');
32 | });
33 |
--------------------------------------------------------------------------------
/ct-angular/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/ct-angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "skipLibCheck": true,
15 | "declaration": false,
16 | "downlevelIteration": true,
17 | "experimentalDecorators": true,
18 | "moduleResolution": "node",
19 | "importHelpers": true,
20 | "target": "ES2022",
21 | "module": "ES2022",
22 | "useDefineForClassFields": false,
23 | "lib": [
24 | "ES2022",
25 | "dom"
26 | ],
27 | "paths": {
28 | "@/*": ["./src/*"]
29 | }
30 | },
31 | "angularCompilerOptions": {
32 | "enableI18nLegacyMessageIdFormat": false,
33 | "strictInjectionParameters": true,
34 | "strictInputAccessModifiers": true,
35 | "strictTemplates": true,
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/ct-angular/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["node"]
7 | },
8 | "include": ["tests/**/*.spec.ts", "tests/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sand4rt",
3 | "version": "1.0.0",
4 | "repository": {
5 | "type": "git",
6 | "url": "git+https://github.com/sand4rt/playwright-ct-angular.git"
7 | },
8 | "bugs": {
9 | "url": "https://github.com/sand4rt/playwright-ct-angular/issues"
10 | },
11 | "homepage": "https://github.com/sand4rt/playwright-ct-angular#readme",
12 | "engines": {
13 | "node": ">=18",
14 | "pnpm": ">=7"
15 | },
16 | "scripts": {
17 | "test": "pnpm --stream -r test",
18 | "build": "pnpm --stream -r build"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/playwright-ct-angular/.npmignore:
--------------------------------------------------------------------------------
1 | **/*
2 |
3 | !README.md
4 | !LICENSE
5 | !register.d.ts
6 | !register.mjs
7 | !registerSource.mjs
8 | !index.d.ts
9 | !index.js
10 | !hooks.d.ts
11 | !hooks.mjs
12 |
--------------------------------------------------------------------------------
/playwright-ct-angular/README.md:
--------------------------------------------------------------------------------
1 | # 🎭 Playwright Angular component testing
2 |
3 | > **Note**
4 | > The API has been designed to closely resemble Playwright's API wherever applicable. This library is _(without guarantee)_ aimed at facilitating a smooth transition to Playwright once it offers official support for Angular components. It is important to take into account that this library will reach end of life when Playwright has official support for Angular component testing.
5 | >
6 | > To push for official support, feedback in the form of GitHub issues and or stars is appreciated!
7 |
8 | ## Capabilities
9 |
10 | - Run tests fast, in parallel and optionally over multiple machines with [sharding](https://playwright.dev/docs/test-sharding) or [Azure's Testing Service](https://www.youtube.com/watch?v=FvyYC2pxL_8).
11 | - Run the test headless or headed accross multiple _real_ desktop and/or mobile browser engines.
12 | - Full support for shadow DOM, multiple origins, (i)frames, browser tabs and contexts.
13 | - Minimizes flakyness, due to auto waiting, web first assertions and ensures that every test runs in [full isolation](https://playwright.dev/docs/browser-contexts).
14 | - Advanced [emulation capabilities](https://playwright.dev/docs/emulation) such as modifying screen size, geolocation, color scheme and [the network](https://playwright.dev/docs/mock-browser-apis).
15 | - Interactions with the components are indistinguishable from real user behavior.
16 | - [Visual regression / screenshot testing](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1).
17 | - Zero-configuration TypeScript support.
18 |
19 | Along with all these ✨ awesome capabilities ✨ that come with Playwright, you will also get:
20 |
21 | - [Watch mode _(BETA)_](https://github.com/microsoft/playwright/issues/21960#issuecomment-1483604692).
22 | - [Visual Studio Code intergration](https://playwright.dev/docs/getting-started-vscode).
23 | - [UI mode](https://playwright.dev/docs/test-ui-mode) for debuging tests with a time travel experience complete with watch mode.
24 | - [Playwright Tracing](https://playwright.dev/docs/trace-viewer-intro) for post-mortem debugging in CI.
25 | - [Playwright Test Code generation](https://playwright.dev/docs/codegen-intro) to record and generate tests suites.
26 |
27 | ## Usage
28 |
29 | Initialize Playwright Angular component testing with PNPM, NPM or Yarn and follow the installation steps:
30 |
31 | ```sh
32 | pnpm create playwright-sand4rt --ct
33 | ```
34 | ```sh
35 | npm init playwright-sand4rt@latest -- --ct
36 | ```
37 | ```sh
38 | yarn create playwright-sand4rt --ct
39 | ```
40 |
41 | Now you can start creating your tests:
42 |
43 | ```ts
44 | // button.component.ts
45 | import { Component, Input } from '@angular/core';
46 |
47 | @Component({
48 | standalone: true,
49 | selector: 'button-component',
50 | template: ``,
51 | })
52 | export class ButtonComponent {
53 | @Input() title!: string;
54 | }
55 | ```
56 |
57 | ```ts
58 | // button.component.test.ts
59 | import { test, expect } from '@sand4rt/experimental-ct-angular';
60 | import { ButtonComponent } from './components/button.component';
61 |
62 | test('render props', async ({ mount }) => {
63 | const component = await mount(ButtonComponent, {
64 | props: {
65 | title: 'Submit',
66 | },
67 | });
68 | await expect(component).toContainText('Submit');
69 | });
70 | ```
71 |
72 | See the official [playwright component testing documentation](https://playwright.dev/docs/test-components) and the [tests](https://github.com/sand4rt/playwright-ct-angular/tree/main/ct-angular/tests) for more information on how to use it.
73 |
--------------------------------------------------------------------------------
/playwright-ct-angular/cli.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /**
3 | * Copyright (c) Microsoft Corporation.
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | */
17 |
18 | const { program } = require('@playwright/experimental-ct-core/lib/program');
19 |
20 | program.parse(process.argv);
21 |
--------------------------------------------------------------------------------
/playwright-ct-angular/hooks.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import type { TestBedStatic } from '@angular/core/testing';
18 | import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
19 |
20 | export declare function beforeMount(
21 | callback: (params: { hooksConfig?: HooksConfig, TestBed: TestBedStatic }) => Promise
22 | ): void;
23 | export declare function afterMount(
24 | callback: (params: { hooksConfig?: HooksConfig }) => Promise
25 | ): void;
26 |
--------------------------------------------------------------------------------
/playwright-ct-angular/hooks.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | const __pw_hooks_before_mount = [];
18 | const __pw_hooks_after_mount = [];
19 |
20 | window.__pw_hooks_before_mount = __pw_hooks_before_mount;
21 | window.__pw_hooks_after_mount = __pw_hooks_after_mount;
22 |
23 | export const beforeMount = callback => {
24 | __pw_hooks_before_mount.push(callback);
25 | };
26 |
27 | export const afterMount = callback => {
28 | __pw_hooks_after_mount.push(callback);
29 | };
30 |
--------------------------------------------------------------------------------
/playwright-ct-angular/index.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
18 | import type { TestType, Locator } from '@playwright/experimental-ct-core';
19 | import type { Type } from '@angular/core';
20 |
21 | export type ComponentEvents = Record;
22 |
23 | export interface MountOptions {
24 | props?: Partial | Record, // TODO: filter props and handle signals
25 | on?: ComponentEvents;
26 | hooksConfig?: HooksConfig;
27 | }
28 |
29 | export interface MountResult extends Locator {
30 | unmount(): Promise;
31 | update(options: {
32 | props?: Partial,
33 | on?: Partial,
34 | }): Promise;
35 | }
36 |
37 | export const test: TestType<{
38 | mount(
39 | component: Type,
40 | options?: MountOptions
41 | ): Promise>;
42 | }>;
43 |
44 | export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core';
45 | export { expect, devices } from 'playwright/test';
46 |
--------------------------------------------------------------------------------
/playwright-ct-angular/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | const { defineConfig: originalDefineConfig, devices, expect, test } = require('@playwright/experimental-ct-core');
18 | const path = require('path');
19 |
20 | const defineConfig = (config, ...configs) => {
21 | const originalConfig = originalDefineConfig({
22 | ...config,
23 | '@playwright/test': {
24 | packageJSON: require.resolve('./package.json'),
25 | },
26 | '@playwright/experimental-ct-core': {
27 | registerSourceFile: path.join(__dirname, 'registerSource.mjs')
28 | },
29 | }, ...configs);
30 | originalConfig['@playwright/test'].babelPlugins = [[require.resolve('./transform')]];
31 | return originalConfig;
32 | };
33 |
34 | module.exports = { defineConfig, devices, expect, test };
35 |
--------------------------------------------------------------------------------
/playwright-ct-angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@sand4rt/experimental-ct-angular",
3 | "version": "1.52.0",
4 | "description": "Playwright Component Testing for Angular",
5 | "homepage": "https://playwright.dev",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/sand4rt/playwright-ct-angular.git"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/sand4rt/playwright-ct-angular/issues"
12 | },
13 | "engines": {
14 | "node": ">=18"
15 | },
16 | "license": "MIT",
17 | "keywords": [
18 | "testing",
19 | "angular components",
20 | "real browser",
21 | "playwright",
22 | "unit",
23 | "integration",
24 | "functional",
25 | "end to end",
26 | "e2e"
27 | ],
28 | "exports": {
29 | ".": {
30 | "types": "./index.d.ts",
31 | "default": "./index.js"
32 | },
33 | "./register": {
34 | "types": "./register.d.ts",
35 | "default": "./register.mjs"
36 | },
37 | "./hooks": {
38 | "types": "./hooks.d.ts",
39 | "default": "./hooks.mjs"
40 | }
41 | },
42 | "dependencies": {
43 | "@playwright/experimental-ct-core": "1.52.0"
44 | },
45 | "devDependencies": {
46 | "@angular/compiler": "^17.0.0",
47 | "@angular/core": "^17.0.0",
48 | "@angular/platform-browser-dynamic": "^17.0.0",
49 | "rxjs": "~7.8.1",
50 | "typescript": "~5.2.0"
51 | },
52 | "peerDependencies": {
53 | "@angular/compiler": "^17.0.0",
54 | "@angular/core": "^17.0.0",
55 | "@angular/platform-browser-dynamic": "^17.0.0",
56 | "typescript": ">=5.2.0"
57 | },
58 | "bin": {
59 | "playwright": "cli.js"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/playwright-ct-angular/register.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | export default function pwRegister(components: Record): void;
18 |
--------------------------------------------------------------------------------
/playwright-ct-angular/register.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { pwRegister } from './registerSource.mjs';
18 |
19 | export default components => {
20 | pwRegister(components);
21 | };
22 |
--------------------------------------------------------------------------------
/playwright-ct-angular/registerSource.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Microsoft Corporation.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | // @ts-check
18 | // This file is injected into the registry as text, no dependencies are allowed.
19 |
20 | /** @typedef {import('@playwright/experimental-ct-core/types/component').ObjectComponent} ObjectComponent */
21 |
22 | import { reflectComponentType } from '@angular/core';
23 | import { getTestBed, TestBed } from '@angular/core/testing';
24 | import {
25 | BrowserDynamicTestingModule,
26 | platformBrowserDynamicTesting,
27 | } from '@angular/platform-browser-dynamic/testing';
28 |
29 | /** @type {WeakMap>} */
30 | const __pwOutputSubscriptionRegistry = new WeakMap();
31 |
32 | /** @type {Map} */
33 | const __pwFixtureRegistry = new Map();
34 |
35 | getTestBed().initTestEnvironment(
36 | BrowserDynamicTestingModule,
37 | platformBrowserDynamicTesting(),
38 | );
39 |
40 | /**
41 | * @param {ObjectComponent} component
42 | */
43 | async function __pwRenderComponent(component) {
44 | const componentMetadata = reflectComponentType(component.type);
45 | if (!componentMetadata?.isStandalone)
46 | throw new Error('Only standalone components are supported');
47 |
48 | TestBed.configureTestingModule({
49 | imports: [component.type],
50 | });
51 |
52 | await TestBed.compileComponents();
53 |
54 | const fixture = TestBed.createComponent(component.type);
55 | fixture.nativeElement.id = 'root';
56 |
57 | __pwUpdateProps(fixture, component.props);
58 | __pwUpdateEvents(fixture, component.on);
59 |
60 | fixture.autoDetectChanges();
61 |
62 | return fixture;
63 | }
64 |
65 | /**
66 | * @param {import('@angular/core/testing').ComponentFixture} fixture
67 | */
68 | function __pwUpdateProps(fixture, props = {}) {
69 | for (const [name, value] of Object.entries(props))
70 | fixture.componentRef.setInput(name, value);
71 | }
72 |
73 | /**
74 | * @param {import('@angular/core/testing').ComponentFixture} fixture
75 | */
76 | function __pwUpdateEvents(fixture, events = {}) {
77 | const outputSubscriptionRecord =
78 | __pwOutputSubscriptionRegistry.get(fixture) ?? {};
79 | for (const [name, listener] of Object.entries(events)) {
80 | /* Unsubscribe previous listener. */
81 | outputSubscriptionRecord[name]?.unsubscribe();
82 |
83 | const subscription = fixture.componentInstance[
84 | name
85 | ].subscribe((/** @type {unknown} */ event) => listener(event));
86 |
87 | /* Store new subscription. */
88 | outputSubscriptionRecord[name] = subscription;
89 | }
90 |
91 | /* Update output subscription registry. */
92 | __pwOutputSubscriptionRegistry.set(fixture, outputSubscriptionRecord);
93 | }
94 |
95 | window.playwrightMount = async (component, rootElement, hooksConfig) => {
96 | if (component.__pw_type === 'jsx')
97 | throw new Error('JSX mount notation is not supported');
98 |
99 | for (const hook of window.__pw_hooks_before_mount || [])
100 | await hook({ hooksConfig, TestBed });
101 |
102 | const fixture = await __pwRenderComponent(component);
103 |
104 | for (const hook of window.__pw_hooks_after_mount || [])
105 | await hook({ hooksConfig });
106 |
107 | __pwFixtureRegistry.set(rootElement.id, fixture);
108 | };
109 |
110 | window.playwrightUnmount = async rootElement => {
111 | const fixture = __pwFixtureRegistry.get(rootElement.id);
112 | if (!fixture)
113 | throw new Error('Component was not mounted');
114 |
115 | /* Unsubscribe from all outputs. */
116 | for (const subscription of Object.values(__pwOutputSubscriptionRegistry.get(fixture) ?? {}))
117 | subscription?.unsubscribe();
118 | __pwOutputSubscriptionRegistry.delete(fixture);
119 |
120 | fixture.destroy();
121 | fixture.nativeElement.replaceChildren();
122 | };
123 |
124 | window.playwrightUpdate = async (rootElement, component) => {
125 | if (component.__pw_type === 'jsx')
126 | throw new Error('JSX mount notation is not supported');
127 |
128 | const fixture = __pwFixtureRegistry.get(rootElement.id);
129 | if (!fixture)
130 | throw new Error('Component was not mounted');
131 |
132 | __pwUpdateProps(fixture, component.props);
133 | __pwUpdateEvents(fixture, component.on);
134 |
135 | fixture.detectChanges();
136 | };
137 |
--------------------------------------------------------------------------------
/playwright-ct-angular/transform.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.default = void 0;
7 | exports.importInfo = importInfo;
8 | var _path = _interopRequireDefault(require("path"));
9 | var _babelBundle = require("playwright/lib/transform/babelBundle");
10 | var _transform = require("playwright/lib/transform/transform");
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 | /**
13 | * Copyright (c) Microsoft Corporation.
14 | *
15 | * Licensed under the Apache License, Version 2.0 (the 'License');
16 | * you may not use this file except in compliance with the License.
17 | * You may obtain a copy of the License at
18 | *
19 | * http://www.apache.org/licenses/LICENSE-2.0
20 | *
21 | * Unless required by applicable law or agreed to in writing, software
22 | * distributed under the License is distributed on an 'AS IS' BASIS,
23 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
24 | * See the License for the specific language governing permissions and
25 | * limitations under the License.
26 | */
27 |
28 | const t = _babelBundle.types;
29 | let jsxComponentNames;
30 | let classComponentNames;
31 | let importInfos;
32 | var _default = exports.default = (0, _babelBundle.declare)(api => {
33 | api.assertVersion(7);
34 | const result = {
35 | name: 'playwright-debug-transform',
36 | visitor: {
37 | Program: {
38 | enter(path) {
39 | jsxComponentNames = collectJsxComponentUsages(path.node);
40 | classComponentNames = collectClassMountUsages(path.node);
41 | importInfos = new Map();
42 | },
43 | exit(path) {
44 | let firstDeclaration;
45 | let lastImportDeclaration;
46 | path.get('body').forEach(p => {
47 | if (p.isImportDeclaration()) lastImportDeclaration = p; else if (!firstDeclaration) firstDeclaration = p;
48 | });
49 | const insertionPath = lastImportDeclaration || firstDeclaration;
50 | if (!insertionPath) return;
51 | for (const [localName, componentImport] of [...importInfos.entries()].reverse()) {
52 | insertionPath.insertAfter(t.variableDeclaration('const', [t.variableDeclarator(t.identifier(localName), t.objectExpression([t.objectProperty(t.identifier('__pw_type'), t.stringLiteral('importRef')), t.objectProperty(t.identifier('id'), t.stringLiteral(componentImport.id))]))]));
53 | }
54 | (0, _transform.setTransformData)('playwright-ct-core', [...importInfos.values()]);
55 | }
56 | },
57 | ImportDeclaration(p) {
58 | const importNode = p.node;
59 | if (!t.isStringLiteral(importNode.source)) return;
60 | const ext = _path.default.extname(importNode.source.value);
61 |
62 | // Convert all non-JS imports into refs.
63 | if (artifactExtensions.has(ext)) {
64 | for (const specifier of importNode.specifiers) {
65 | if (t.isImportNamespaceSpecifier(specifier)) continue;
66 | const {
67 | localName,
68 | info
69 | } = importInfo(importNode, specifier, this.filename);
70 | importInfos.set(localName, info);
71 | }
72 | p.skip();
73 | p.remove();
74 | return;
75 | }
76 |
77 | // Convert JS imports that are used as components in JSX expressions into refs.
78 | let importCount = 0;
79 | for (const specifier of importNode.specifiers) {
80 | if (t.isImportNamespaceSpecifier(specifier)) continue;
81 | const {
82 | localName,
83 | info
84 | } = importInfo(importNode, specifier, this.filename);
85 | if (jsxComponentNames.has(localName) || classComponentNames.has(localName)) {
86 | importInfos.set(localName, info);
87 | ++importCount;
88 | }
89 | }
90 |
91 | // All the imports were from JSX => delete.
92 | if (importCount && importCount === importNode.specifiers.length) {
93 | p.skip();
94 | p.remove();
95 | }
96 | },
97 | MemberExpression(path) {
98 | if (!t.isIdentifier(path.node.object)) return;
99 | if (!importInfos.has(path.node.object.name)) return;
100 | if (!t.isIdentifier(path.node.property)) return;
101 | path.replaceWith(t.objectExpression([t.spreadElement(t.identifier(path.node.object.name)), t.objectProperty(t.identifier('property'), t.stringLiteral(path.node.property.name))]));
102 | }
103 | }
104 | };
105 | return result;
106 | });
107 | function collectJsxComponentUsages(node) {
108 | const names = new Set();
109 | (0, _babelBundle.traverse)(node, {
110 | enter: p => {
111 | // Treat JSX-everything as component usages.
112 | if (t.isJSXElement(p.node)) {
113 | if (t.isJSXIdentifier(p.node.openingElement.name)) names.add(p.node.openingElement.name.name);
114 | if (t.isJSXMemberExpression(p.node.openingElement.name) && t.isJSXIdentifier(p.node.openingElement.name.object) && t.isJSXIdentifier(p.node.openingElement.name.property)) names.add(p.node.openingElement.name.object.name);
115 | }
116 | }
117 | });
118 | return names;
119 | }
120 | function collectClassMountUsages(node) {
121 | const names = new Set();
122 | (0, _babelBundle.traverse)(node, {
123 | enter: p => {
124 | // Treat calls to mount and all identifiers in arguments as component usages e.g. mount(Component)
125 | if (t.isCallExpression(p.node) && t.isIdentifier(p.node.callee) && p.node.callee.name === 'mount') {
126 | p.traverse({
127 | Identifier: p => {
128 | names.add(p.node.name);
129 | }
130 | });
131 | }
132 | }
133 | });
134 | return names;
135 | }
136 | function importInfo(importNode, specifier, filename) {
137 | const importSource = importNode.source.value;
138 | const idPrefix = _path.default.join(filename, '..', importSource).replace(/[^\w_\d]/g, '_');
139 | const result = {
140 | id: idPrefix,
141 | filename,
142 | importSource,
143 | remoteName: undefined
144 | };
145 | if (t.isImportDefaultSpecifier(specifier)) { } else if (t.isIdentifier(specifier.imported)) {
146 | result.remoteName = specifier.imported.name;
147 | } else {
148 | result.remoteName = specifier.imported.value;
149 | }
150 | if (result.remoteName) result.id += '_' + result.remoteName;
151 | return {
152 | localName: specifier.local.name,
153 | info: result
154 | };
155 | }
156 | const artifactExtensions = new Set([
157 | // Frameworks
158 | '.vue', '.svelte',
159 | // Images
160 | '.jpg', '.jpeg', '.png', '.gif', '.svg', '.bmp', '.webp', '.ico',
161 | // CSS
162 | '.css',
163 | // Fonts
164 | '.woff', '.woff2', '.ttf', '.otf', '.eot']);
165 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'ct-angular/**'
3 | - 'playwright-ct-angular/**'
4 |
--------------------------------------------------------------------------------
11 | Login
12 | Dashboard
13 |