Merge pull request #4 from sand4rt/angular-docs

docs(ct): angular

docs/src/test-components-js.md

@@ -109,6 +109,7 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
     {label: 'Solid', value: 'solid'},
     {label: 'Svelte', value: 'svelte'},
     {label: 'Vue', value: 'vue'},
+    {label: 'Angular', value: 'angular'},
   ]
 }>
 <TabItem value="react">
@@ -181,6 +182,22 @@ test('should work', async ({ mount }) => {
 
 </TabItem>
 
+<TabItem value="angular">
+
+```js
+import { test, expect } from '@playwright/experimental-ct-angular';
+import { AppComponent } from './app.component';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should work', async ({ mount }) => {
+  const component = await mount(AppComponent);
+  await expect(component).toContainText('Learn Angular');
+});
+```
+
+</TabItem>
+
 </Tabs>
 
 ### Step 3. Run the tests
@@ -292,6 +309,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
     {label: 'Solid', value: 'solid'},
     {label: 'Vue3', value: 'vue3'},
     {label: 'Vue2', value: 'vue2'},
+    {label: 'Angular', value: 'angular'},
   ]
 }>
   <TabItem value="react">
@@ -421,6 +439,41 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
 
   </TabItem>
 
+  <TabItem value="angular">
+
+  ```js title="playwright/index.ts"
+  import { beforeMount, afterMount } from '@playwright/experimental-ct-angular/hooks';
+  import { provideRouter } from '@angular/router';
+  import { routes } from '../src/router';
+
+  export type HooksConfig = {
+    enableRouting?: boolean;
+  }
+
+  beforeMount<HooksConfig>(async ({ TestBed, hooksConfig }) => {
+    if (hooksConfig?.enableRouting) {
+      TestBed.configureTestingModule({
+        providers: [provideRouter(routes)],
+      });
+    }
+  });
+  ```
+
+  ```js title="src/pages/ProductsPage.spec.ts"
+  import { test, expect } from '@playwright/experimental-ct-angular';
+  import type { HooksConfig } from '@playwright/test';
+  import { ProductsComponent } from './pages/products.component';
+
+  test('configure routing through hooks config', async ({ page, mount }) => {
+    const component = await mount<HooksConfig>(ProductsComponent, {
+      hooksConfig: { enableRouting: true },
+    });
+    await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
+  });
+  ```
+
+  </TabItem>
+
 </Tabs>
 
 ## Under the hood
@@ -436,15 +489,15 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle
 
 ## Frequently asked questions
 
-### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid}`?
+### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid,angular}`?
 
 ```js
 test('…', async ({ mount, page, context }) => {
   // …
 });
 ```
 
-`@playwright/experimental-ct-{react,svelte,vue,solid}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`:
+`@playwright/experimental-ct-{react,svelte,vue,solid,angular}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`:
 
 <Tabs
   defaultValue="react"
@@ -453,19 +506,20 @@ test('…', async ({ mount, page, context }) => {
     {label: 'Solid', value: 'solid'},
     {label: 'Svelte', value: 'svelte'},
     {label: 'Vue', value: 'vue'},
+    {label: 'Angular', value: 'angular'},
   ]
 }>
 <TabItem value="react">
 
 ```js
 import { test, expect } from '@playwright/experimental-ct-react';
-import HelloWorld from './HelloWorld';
+import { Greetings } from './Greetings';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
 test('should work', async ({ mount }) => {
-  const component = await mount(<HelloWorld msg="greetings" />);
-  await expect(component).toContainText('Greetings');
+  const component = await mount(<Greetings message="Hello world" />);
+  await expect(component).toContainText('Hello world');
 });
 ```
 
@@ -475,17 +529,17 @@ test('should work', async ({ mount }) => {
 
 ```js
 import { test, expect } from '@playwright/experimental-ct-vue';
-import HelloWorld from './HelloWorld.vue';
+import Greetings from './Greetings.vue';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
 test('should work', async ({ mount }) => {
-  const component = await mount(HelloWorld, {
+  const component = await mount(Greetings, {
     props: {
-      msg: 'Greetings',
+      message: 'Hello world',
     },
   });
-  await expect(component).toContainText('Greetings');
+  await expect(component).toContainText('Hello world');
 });
 ```
 
@@ -495,17 +549,17 @@ test('should work', async ({ mount }) => {
 
 ```js
 import { test, expect } from '@playwright/experimental-ct-svelte';
-import HelloWorld from './HelloWorld.svelte';
+import Greetings from './Greetings.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
 test('should work', async ({ mount }) => {
-  const component = await mount(HelloWorld, {
+  const component = await mount(Greetings, {
     props: {
-      msg: 'Greetings',
+      message: 'Hello world',
     },
   });
-  await expect(component).toContainText('Greetings');
+  await expect(component).toContainText('Hello world');
 });
 ```
 
@@ -515,13 +569,33 @@ test('should work', async ({ mount }) => {
 
 ```js
 import { test, expect } from '@playwright/experimental-ct-solid';
-import HelloWorld from './HelloWorld';
+import { Greetings } from './Welcome';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<Greetings message="Hello world" />);
+  await expect(component).toContainText('Hello world');
+});
+```
+
+</TabItem>
+
+<TabItem value="angular">
+
+```js
+import { test, expect } from '@playwright/experimental-ct-angular';
+import { GreetingsComponent } from './greetings.component';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
 test('should work', async ({ mount }) => {
-  const component = await mount(<HelloWorld msg="greetings" />);
-  await expect(component).toContainText('Greetings');
+  const component = await mount(GreetingsComponent, {
+    props: {
+      message: 'Hello world',
+    },
+  });
+  await expect(component).toContainText('Hello world');
 });
 ```