feat: revive angular ct (#59)

* feat: revive angular ct

Author: sand4rt

.github/workflows/deploy.yml

@@ -11,15 +11,15 @@ jobs:
     steps:
       - uses: pnpm/action-setup@v2
         with:
-          version: '8.x'
+          version: "9.x"
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
-          registry-url: 'https://registry.npmjs.org'
-          scope: '@sand4rt'
+          node-version: "18.x"
+          registry-url: "https://registry.npmjs.org"
+          scope: "@sand4rt"
 
       - run: pnpm publish --filter @sand4rt/experimental-ct-angular --access public --no-git-checks
         env:

.github/workflows/test.yml

@@ -1,23 +1,23 @@
 name: Test
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: pnpm/action-setup@v2
         with:
-          version: '8.x'
+          version: "9.x"
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: "18.x"
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -26,12 +26,12 @@ jobs:
         run: pnpm build
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm dlx playwright install --with-deps
 
       - name: Run Playwright tests
         run: pnpm test
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

ct-angular/package.json

@@ -7,27 +7,28 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "npx playwright test"
+    "test": "npx playwright test",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@angular/animations": "^15.1.0",
-    "@angular/common": "^15.1.0",
-    "@angular/compiler": "^15.1.0",
-    "@angular/core": "^15.1.0",
-    "@angular/forms": "^15.1.0",
-    "@angular/platform-browser": "^15.1.0",
-    "@angular/platform-browser-dynamic": "^15.1.0",
-    "@angular/router": "^15.1.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "@analogjs/vite-plugin-angular": "1.17.0",
+    "@angular/animations": "17.3.8",
+    "@angular/common": "17.3.8",
+    "@angular/compiler": "17.3.8",
+    "@angular/core": "17.3.8",
+    "@angular/forms": "17.3.8",
+    "@angular/platform-browser": "17.3.8",
+    "@angular/platform-browser-dynamic": "17.3.8",
+    "@angular/router": "17.3.8",
+    "rxjs": "7.8.1",
+    "tslib": "2.6.2",
+    "zone.js": "0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.0",
-    "@angular/cli": "~15.1.0",
-    "@angular/compiler-cli": "^15.1.0",
-    "@playwright/test": "1.41.2",
     "@sand4rt/experimental-ct-angular": "workspace:*",
-    "typescript": "~4.9.4"
+    "@angular-devkit/build-angular": "17.3.7",
+    "@angular/cli": "17.3.7",
+    "@angular/compiler-cli": "17.3.8",
+    "typescript": "5.4.3"
   }
 }

ct-angular/playwright.config.mts

@@ -0,0 +1,53 @@
+/**
+ * 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 angular from '@analogjs/vite-plugin-angular';
+import { defineConfig, devices } from '@sand4rt/experimental-ct-angular';
+import { resolve } from 'path';
+
+export default defineConfig({
+  testDir: 'tests',
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  reporter: process.env['CI'] ? 'html' : 'line',
+  use: {
+    trace: 'on-first-retry',
+    ctViteConfig: {
+      plugins: [angular({
+        tsconfig: resolve('./tsconfig.spec.json'),
+      }) as any], // TODO: remove any and resolve various installed conflicting Vite versions
+      resolve: {
+        alias: {
+          '@': resolve('./src'),
+        }
+      }
+    }
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

ct-angular/playwright.config.ts

@@ -1,28 +1,37 @@
-import { beforeMount, afterMount } from '@sand4rt/experimental-ct-angular/hooks';
-import { provideRouter } from '@angular/router';
-import { ButtonComponent } from '@/components/button.component';
+import 'zone.js';
+import '@/assets/styles.css';
 import { TOKEN } from '@/components/inject.component';
 import { routes } from '@/router';
-import '@/assets/styles.css';
+import { APP_INITIALIZER, inject } from '@angular/core';
+import { Router, provideRouter } from '@angular/router';
+import { afterMount, beforeMount } from '@sand4rt/experimental-ct-angular/hooks';
+import { BrowserPlatformLocation, PlatformLocation } from '@angular/common';
 
 export type HooksConfig = {
   routing?: boolean;
   injectToken?: boolean;
 };
 
 beforeMount<HooksConfig>(async ({ hooksConfig, TestBed }) => {
-  TestBed.configureTestingModule({
-    imports: [ButtonComponent],
-  });
-
   if (hooksConfig?.routing)
     TestBed.configureTestingModule({
-      providers: [provideRouter(routes)],
+      providers: [
+        provideRouter(routes),
+        { provide: PlatformLocation, useExisting: BrowserPlatformLocation },
+        {
+          provide: APP_INITIALIZER,
+          multi: true,
+          useFactory() {
+            const router = inject(Router);
+            return () => router.initialNavigation();
+          }
+        }
+      ],
     });
 
   if (hooksConfig?.injectToken)
     TestBed.configureTestingModule({
-      providers: [{ provide: TOKEN, useValue: { text: 'has been overwritten' }}]
+      providers: [{ provide: TOKEN, useValue: { text: 'has been overwritten' } }]
     })
 });
 

ct-angular/playwright/index.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterLink, RouterOutlet],
   selector: 'app-root',
   template: `
     <header>

ct-angular/src/app.component.ts

@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-button-signals',
+  template: `
+  <button>{{title()}}</button>
+  `
+})
+export class ButtonSignalsComponent {
+  title = input.required<string>();
+}

ct-angular/src/components/button-signals.component.ts

@@ -2,10 +2,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   standalone: true,
-  selector: 'button-component',
+  selector: 'app-button',
   templateUrl: './button.component.html',
 })
 export class ButtonComponent {
-  @Input() title!: string;
+  @Input({required: true}) title!: string;
   @Output() submit = new EventEmitter();
 }

ct-angular/src/components/button.component.ts

@@ -0,0 +1 @@
+<h1>Not Inlined</h1>

ct-angular/src/components/not-inlined.component.html

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  templateUrl: './not-inlined.component.html',
+})
+export class NotInlinedComponent {}

ct-angular/src/components/not-inlined.component.ts

@@ -8,7 +8,7 @@ import { Subject, finalize } from "rxjs";
 })
 export class OutputComponent {
   @Output() answerChange = new Subject().pipe(
-    /* Detect when observable is unsubscribed from,
+    /* Detect when observable is unsubscribed from, 
      * and set a global variable `hasUnsubscribed` to true. */
     finalize(() => ((this._window as any).hasUnsubscribed = true))
   );

ct-angular/src/components/output.component.ts

@@ -7,7 +7,6 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
   await component.getByRole('link', { name: 'Dashboard' }).click();
   await expect(component.getByRole('main')).toHaveText('Dashboard');
   await expect(page).toHaveURL('/dashboard');

ct-angular/tests/angular-router.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from '@sand4rt/experimental-ct-angular';
 import { ButtonComponent } from '@/components/button.component';
+import { OutputComponent } from '@/components/output.component';
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
   const messages: string[] = [];
@@ -14,3 +15,47 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 });
+
+test('replace existing listener when new listener is set', async ({
+  mount,
+}) => {
+  let called = false;
+
+  const component = await mount(ButtonComponent, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit() { },
+    },
+  });
+
+  component.update({
+    on: {
+      submit() {
+        called = true;
+      },
+    },
+  });
+
+  await component.click();
+  expect(called).toBe(true);
+});
+
+test('unsubscribe from events when the component is unmounted', async ({
+  mount,
+  page,
+}) => {
+  const component = await mount(OutputComponent, {
+    on: {
+      answerChange() { },
+    },
+  });
+
+  await component.unmount();
+
+  /* Check that the output observable had been unsubscribed from
+   * as it sets a global variable `hasUnusbscribed` to true
+   * when it detects unsubscription. Cf. OutputComponent. */
+  expect(await page.evaluate(() => (window as any).hasUnsubscribed)).toBe(true);
+});

ct-angular/tests/events.spec.ts

@@ -1,8 +1,8 @@
-import { test, expect } from '@sand4rt/experimental-ct-angular';
+import { expect, test } from '@sand4rt/experimental-ct-angular';
 import type { HooksConfig } from 'playwright';
 import { InjectComponent } from '@/components/inject.component';
 
-test('inject a token', async ({ page, mount }) => {
+test('inject a token', async ({ mount }) => {
   const component = await mount<HooksConfig>(InjectComponent, {
     hooksConfig: { injectToken: true },
   });