🎉 Major Angular Upgrade: v11.2.14 → v20.2.3 (Latest Stable) with Modern E2E Testing

.github/workflows/e2e.yml

@@ -11,15 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     env:
       CI: true
-      NODE_OPTIONS: --openssl-legacy-provider
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
 
       - name: Show Node/npm versions
         run: |
@@ -29,6 +28,12 @@ jobs:
       - name: Setup Chrome
         uses: browser-actions/setup-chrome@v1
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Set Playwright Chrome executable for CI
+        run: echo "PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/google-chrome" >> $GITHUB_ENV
+
       - name: Cache npm
         uses: actions/cache@v4
         with:
@@ -72,5 +77,5 @@ jobs:
       - name: Run unit tests (headless)
         run: npm run test-ci -- --browsers=ChromeHeadless
 
-      - name: Run E2E tests (Protractor, headless)
-        run: npm run e2e -- --configuration=e2e --webdriver-update=false
+      - name: Run E2E tests (Playwright)
+        run: npm run e2e

.gitignore

@@ -31,6 +31,7 @@ src/**/*.js
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -44,6 +45,10 @@ testem.log
 !/e2e/protractor.conf.js
 /e2e/*.map
 
+# Playwright
+/test-results
+/playwright-report
+
 # System Files
 .DS_Store
 Thumbs.db

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '10'
+  - '20'
 dist: xenial
 sudo: required
 services:

angular.json

@@ -22,7 +22,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -33,9 +32,15 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/marked/lib/marked.js",
+              "node_modules/marked/lib/marked.umd.js",
               "node_modules/prismjs/prism.js"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -74,26 +79,27 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "git-catalogue:build"
+            "buildTarget": "git-catalogue:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "git-catalogue:build:production"
+              "buildTarget": "git-catalogue:build:production"
             },
             "e2e": {
-              "browserTarget": "git-catalogue:build:e2e"
+              "buildTarget": "git-catalogue:build:e2e"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "git-catalogue:build"
+            "buildTarget": "git-catalogue:build"
           }
         },
         "test": {
@@ -113,44 +119,41 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/marked/lib/marked.js",
+              "node_modules/marked/lib/marked.umd.js",
               "node_modules/prismjs/prism.js"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "git-catalogue:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "git-catalogue:serve:production"
-            },
-            "e2e": {
-              "devServerTarget": "git-catalogue:serve:e2e"
-            }
-          }
         }
       }
     }
   },
-  "defaultProject": "git-catalogue",
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

e2e/app.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Git Catalogue App', () => {
+
+  test('should load the application', async ({ page }) => {
+    // Navigate to the application
+    await page.goto('/');
+
+    // Wait for the page to load
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page loaded successfully by looking for Angular content
+    // The app should have loaded without critical errors
+    await expect(page).toHaveTitle('GitCatalogue');
+
+    // Check that the main app component is present
+    await expect(page.locator('app-root')).toBeVisible();
+  });
+
+  test('should not have console errors', async ({ page }) => {
+    const errors: string[] = [];
+
+    // Listen for console errors
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        const text = msg.text();
+        // Filter out network-related errors that are expected in CI environments
+        const isNetworkError = text.includes('net::ERR_NAME_NOT_RESOLVED') ||
+                              text.includes('Failed to load resource') ||
+                              text.includes('fonts.googleapis.com') ||
+                              text.includes('fonts.gstatic.com') ||
+                              text.includes('HttpErrorResponse');
+
+        if (!isNetworkError) {
+          errors.push(text);
+        }
+      }
+    });
+
+    // Navigate to the application
+    await page.goto('/');
+
+    // Wait for the page to fully load
+    await page.waitForLoadState('networkidle');
+
+    // Assert that there are no critical console errors
+    expect(errors).toEqual([]);
+  });
+});

karma.conf.js

@@ -9,23 +9,26 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    coverageReporter: {
       dir: require('path').join(__dirname, './coverage/git-catalogue'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml', 'coverage'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false,
     restartOnFileChange: true
   });