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>