feat(playwright-ct-angular): ✨ allow zoneless testing (#427)

- remove zone.js from register-source
- make demo zoneless
- update docs

Author: yjaaidi

packages/playwright-ct-angular/README.md

@@ -281,7 +281,7 @@ Cf. https://youtu.be/y3YxX4sFJbM
 
 Cf. https://github.com/microsoft/playwright/blob/cac67fb94f2c8a0ee82878054c39790e660f17ca/packages/playwright-test/src/tsxTransform.ts#L153
 
-###       
+###                  
 
 # 📦 Setup
 
@@ -347,3 +347,34 @@ const config: PlaywrightTestConfig = {
   ...
 }
 ```
+
+### 4. Choose between zoneful or zoneless testing
+
+#### Zoneful Testing
+
+If you want to use zoneful testing, you have to import `zone.js` in your `playwright/index.ts`:
+
+```ts
+// playwright/index.ts
+import 'zone.js';
+```
+
+#### Zoneless Testing
+
+For zoneless testing, you have to provide `provideExperimentalZonelessChangeDetection()` in your `playwright/index.ts`:
+
+```ts
+// playwright/index.ts
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { beforeMount } from '@jscutlery/playwright-ct-angular/hooks';
+
+beforeMount(async ({ TestBed }) => {
+  TestBed.configureTestingModule({
+    providers: [
+      provideExperimentalZonelessChangeDetection(),
+    ],
+  });
+});
+```
+
+Cf. [Zoneless Example's `playwright/index.ts`](../../tests/playwright-ct-angular-demo/playwright/index.ts)

packages/playwright-ct-angular/src/register-source.mjs

@@ -1,5 +1,3 @@
-import '@angular/compiler';
-import 'zone.js';
 import { Component, reflectComponentType } from '@angular/core';
 import { ComponentFixtureAutoDetect, getTestBed, TestBed, TestComponentRenderer } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

tests/playwright-ct-angular-demo/playwright/index.ts

@@ -1 +1,14 @@
+import '@angular/compiler';
 import '@angular/material/prebuilt-themes/indigo-pink.css';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { beforeMount } from '@jscutlery/playwright-ct-angular/hooks';
+
+beforeMount(async ({ TestBed }) => {
+  TestBed.configureTestingModule({
+    providers: [
+      provideAnimations(),
+      provideExperimentalZonelessChangeDetection(),
+    ],
+  });
+});

tests/playwright-ct-angular-demo/src/recipe-filter.component.pw.ts

@@ -5,7 +5,6 @@ import {
 } from '@jscutlery/playwright-ct-angular';
 import { RecipeFilter } from './recipe-filter';
 import { RecipeFilterComponent } from './recipe-filter.component';
-import { TESTING_PROVIDERS } from './testing/providers';
 
 test.describe('<wm-recipe-filter>', () => {
   test('should search recipes without keyword on load', async ({ mount }) => {
@@ -24,7 +23,6 @@ test.describe('<wm-recipe-filter>', () => {
   async function renderRecipeFilter({ mount }: ComponentFixtures) {
     const filterChangeCalls: RecipeFilter[] = [];
     const locator = await mount(RecipeFilterComponent, {
-      providers: [TESTING_PROVIDERS],
       on: {
         filterChange(filter: RecipeFilter) {
           filterChangeCalls.push(filter);

tests/playwright-ct-angular-demo/src/recipe-search.component.pw.ts

@@ -4,7 +4,6 @@ import {
   test,
 } from '@jscutlery/playwright-ct-angular';
 import { RecipeSearchTestContainer } from './recipe-search.test-container';
-import { TESTING_PROVIDERS } from './testing/providers';
 
 test.describe('<wm-recipe-search>', () => {
   test('should search recipes without keyword on load', async ({ mount }) => {
@@ -29,14 +28,12 @@ test.describe('<wm-recipe-search>', () => {
   });
 
   async function renderSearchComponent({ mount }: ComponentFixtures) {
-    const locator = await mount(RecipeSearchTestContainer, {
-      providers: [TESTING_PROVIDERS],
-    });
+    const locator = await mount(RecipeSearchTestContainer);
 
     return {
       recipeTitleLocator: locator.getByTestId('recipe-name'),
       async updateFilter({ keywords }: { keywords: string }) {
-        await locator.getByLabel('Keywords').type(keywords);
+        await locator.getByLabel('Keywords').fill(keywords);
       },
       async verifyScreenshot(name: string) {
         /* Wait for images to load. */

tests/playwright-ct-angular-demo/src/testing/providers.ts

@@ -1,3 +1,4 @@
+import 'zone.js';
 import { beforeMount } from '@jscutlery/playwright-ct-angular/hooks';
 import { TOKEN } from '../src/inject.component';