chore(angular): use Ionic lint and Prettier configs and add Playwright e2e tests

angular-standalone/base/.gitignore

@@ -68,3 +68,9 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

angular-standalone/base/.prettierignore

@@ -0,0 +1,5 @@
+# Prettier only reads the root .gitignore, not the ones inside the native
+# projects, so ignore them here to skip Capacitor's copied web build and
+# Gradle's build output.
+android/
+ios/

angular-standalone/base/.vscode/extensions.json

@@ -1,5 +1,8 @@
 {
-    "recommendations": [
-       "Webnative.webnative"
-    ]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Angular.ng-template",
+    "Webnative.webnative"
+  ]
 }

angular-standalone/base/angular.json

@@ -95,20 +95,21 @@
         "test": {
           "builder": "@angular/build:unit-test",
           "options": {
-            "tsConfig": "tsconfig.spec.json",
             "buildTarget": "::development",
-            "setupFiles": ["src/test-setup.ts"]
-          },
-          "configurations": {
-            "ci": {
-              "watch": false
-            }
+            "runnerConfig": "vitest.config.mts",
+            "setupFiles": ["src/test-setup.ts"],
+            "tsConfig": "tsconfig.spec.json"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html",
+              "e2e/**/*.ts",
+              "playwright.config.ts"
+            ]
           }
         }
       }

angular-standalone/base/eslint.config.js

@@ -1,31 +1,45 @@
 // @ts-check
-const tseslint = require("typescript-eslint");
-const angular = require("angular-eslint");
+const ionic = require('@ionic/eslint-config/recommended');
+const angular = require('angular-eslint');
+const { defineConfig } = require('eslint/config');
 
-module.exports = tseslint.config(
+module.exports = defineConfig([
   {
-    files: ["**/*.ts"],
-    ignores: ["projects/**/*"],
-    extends: [...angular.configs.tsRecommended],
+    ignores: ['www/**', 'dist/**', 'coverage/**', '.angular/**', 'android/**', 'ios/**'],
+  },
+  ionic,
+  {
+    files: ['**/*.ts'],
+    extends: [angular.configs.tsRecommended],
     processor: angular.processInlineTemplates,
     rules: {
-      "@angular-eslint/component-class-suffix": [
-        "error",
-        { suffixes: ["Page", "Component"] },
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
       ],
-      "@angular-eslint/component-selector": [
-        "error",
-        { type: "element", prefix: "app", style: "kebab-case" },
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
       ],
-      "@angular-eslint/directive-selector": [
-        "error",
-        { type: "attribute", prefix: "app", style: "camelCase" },
+      '@angular-eslint/component-class-suffix': [
+        'error',
+        {
+          suffixes: ['Page', 'Component'],
+        },
       ],
     },
   },
   {
-    files: ["**/*.html"],
-    extends: [...angular.configs.templateRecommended],
+    files: ['**/*.html'],
+    extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
     rules: {},
-  }
-);
+  },
+]);

angular-standalone/base/package.json

@@ -8,8 +8,15 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
-    "lint": "ng lint"
+    "lint": "npm run eslint && npm run typecheck:e2e && npm run prettier -- --check",
+    "lint:fix": "npm run eslint -- --fix && npm run prettier -- --write",
+    "eslint": "ng lint --max-warnings 0",
+    "prettier": "prettier \"**/*.{ts,html}\"",
+    "typecheck:e2e": "tsc -p tsconfig.e2e.json",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "ng test --no-watch",
+    "test:unit:watch": "ng test --watch",
+    "test:e2e": "playwright test"
   },
   "private": true,
   "dependencies": {
@@ -30,11 +37,17 @@
     "@angular/compiler-cli": "22.2.3",
     "@angular/language-service": "22.2.3",
     "@ionic/angular-toolkit": "^13.0.0",
+    "@ionic/eslint-config": "^0.5.0",
+    "@ionic/prettier-config": "^4.0.0",
+    "@playwright/test": "^1.64.1",
+    "@types/node": "^24.0.0",
     "angular-eslint": "22.6.0",
     "eslint": "^10.10.0",
     "jsdom": "^30.1.1",
+    "prettier": "^3.9.10",
     "typescript": "~6.0.0",
     "typescript-eslint": "^8.61.0",
     "vitest": "~5.0.5"
-  }
+  },
+  "prettier": "@ionic/prettier-config"
 }

angular-standalone/base/playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = 'http://localhost:4200';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
+  webServer: {
+    command: 'npm start -- --port 4200',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

angular-standalone/base/src/app/app.component.spec.ts

@@ -1,14 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
+
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   it('should create the app', async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
-      providers: [provideRouter([])]
+      providers: [provideRouter([])],
     }).compileComponents();
-    
+
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();

angular-standalone/base/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

angular-standalone/base/src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*

angular-standalone/base/src/index.html

@@ -1,26 +1,27 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
 
-<head>
-  <meta charset="utf-8" />
-  <title>Ionic App</title>
+    <base href="/" />
 
-  <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
 
-  <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
-
-  <!-- add to homescreen for ios -->
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-</head>
-
-<body>
-  <app-root></app-root>
-</body>
+    <!-- add to homescreen for ios -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
 
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

angular-standalone/base/src/main.ts

@@ -1,9 +1,15 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouteReuseStrategy, provideRouter, withComponentInputBinding, withPreloading, PreloadAllModules } from '@angular/router';
+import {
+  RouteReuseStrategy,
+  provideRouter,
+  withComponentInputBinding,
+  withPreloading,
+  PreloadAllModules,
+} from '@angular/router';
 import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
 
-import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
   providers: [

angular-standalone/base/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["e2e/**/*.ts", "playwright.config.ts"]
+}

angular-standalone/base/vitest.config.mts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    // Angular's unit-test builder bundles each spec with the code it imports, and
+    // Vitest's file-system module cache can then serve a stale bundle after a
+    // non-spec file changes. Turn the cache off so reruns always test current code.
+    fsModuleCache: false,
+  },
+});

angular-standalone/official/blank/e2e/app.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#container')).toContainText('Ready to create an app?');
+});

angular-standalone/official/blank/ionic.starter.json

@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run lint && npm run build && npm run test -- --configuration=ci"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }

angular-standalone/official/blank/src/app/app.routes.ts

@@ -1,4 +1,4 @@
-import { Routes } from '@angular/router';
+import type { Routes } from '@angular/router';
 
 export const routes: Routes = [
   {

angular-standalone/official/blank/src/app/home/home.page.html

@@ -1,8 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Blank
-    </ion-title>
+    <ion-title> Blank </ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -15,6 +13,9 @@
 
   <div id="container">
     <strong>Ready to create an app?</strong>
-    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    <p>
+      Start with Ionic
+      <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a>
+    </p>
   </div>
 </ion-content>

angular-standalone/official/blank/src/app/home/home.page.spec.ts

@@ -1,4 +1,5 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import type { ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
 import { HomePage } from './home.page';
 

angular-standalone/official/list/e2e/app.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('ion-header').first()).toContainText('Inbox');
+});

angular-standalone/official/list/ionic.starter.json

@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run lint && npm run build && npm run test -- --configuration=ci"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }

angular-standalone/official/list/src/app/app.component.spec.ts

@@ -4,11 +4,10 @@ import { provideRouter } from '@angular/router';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
-      providers: [provideRouter([])]
+      providers: [provideRouter([])],
     }).compileComponents();
   });
 
@@ -17,5 +16,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });