feature: migrate angular 17 (#517)

* fix: incompatible jest versions * chore: Migrate to ng v17 * chore: Migrate to angular material/cdk v16 * chore: Migrate to angular material/cdk v17 * chore: Update .gitignore * feat: Make required changes to work with ng 17 * feat: Migrate to standalone components * feat: Tiny rebranding * chore: fix tests and build * chore: switch to cypress for testing * chore: switch to cypress for testing * chore: fix image build path --------- Co-authored-by: mdasberg <mischa@dasberg.nl>
ng-apimock · Nov 30, 2023 · 2288d2f · 2288d2f
1 parent 47b0154
commit 2288d2f
Show file tree

Hide file tree

Showing 91 changed files with 7,979 additions and 8,087 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -36,7 +36,10 @@
             "type": "attribute"
           }
         ],
-        "object-curly-spacing": [2, "always"]
+        "object-curly-spacing": [
+          2,
+          "always"
+        ]
       }
     },
     {

diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -22,15 +22,12 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: build
         run: yarn build
-      - name: sauce connect proxy download
-        run: yarn sauce:download
-      - name: sauce connect
-        run: nohup yarn sauce:start -- --user=${{ secrets.SAUCE_USERNAME }} --api-key=${{ secrets.SAUCE_ACCESS_KEY }} --tunnel-identifier=${{ github.run_id }} --readyfile=/tmp/sc-started &
-      - name: sauce connected check
-        run: yarn sauce:started
       - name: integration test
-        run: yarn protractor-ci
+        uses: cypress-io/github-action@v5
+        with:
+          start: yarn start
+          wait-on: 'http://localhost:9999'
+          browser: chrome
         env:
-          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
-          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           FORCE_EXIT: true
diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml
@@ -27,3 +27,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          FORCE_EXIT: true
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,5 @@ typings/
 
 # next.js build output
 .next
+
+.angular
diff --git a/angular.json b/angular.json
@@ -18,25 +18,20 @@
       "prefix": "apimock",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "@angular/material/prebuilt-themes/purple-green.css",
               "src/style.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true
@@ -55,8 +50,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -70,37 +63,29 @@
                 }
               ]
             }
-          },
-          "defaultConfiguration": ""
+          }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngApimock/dev-interface:build"
+            "buildTarget": "ngApimock/dev-interface:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngApimock/dev-interface:build:production"
+              "buildTarget": "ngApimock/dev-interface:build:production"
             }
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
-  "defaultProject": "ngApimock/dev-interface",
   "cli": {
-    "warnings": {
-      "typescriptMismatch": false
-    },
-    "defaultCollection": "@angular-eslint/schematics"
+    "analytics": false
   }
 }
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,35 @@
+import {defineConfig} from "cypress";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
+import {addCucumberPreprocessorPlugin} from "@badeball/cypress-cucumber-preprocessor";
+// @ts-ignore
+import {createEsbuildPlugin} from "@badeball/cypress-cucumber-preprocessor/esbuild";
+
+async function setupNodeEvents(
+    on: Cypress.PluginEvents,
+    config: Cypress.PluginConfigOptions
+): Promise<Cypress.PluginConfigOptions> {
+    // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
+    await addCucumberPreprocessorPlugin(on, config);
+
+    on("file:preprocessor", createBundler({
+            plugins: [createEsbuildPlugin(config)],
+        })
+    );
+
+    // Make sure to return the config object as it might have been modified by the plugin.
+    return config;
+}
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:9999',
+    env: {
+      NG_API_MOCK_BASE_URL: 'http://localhost:9999',
+      NG_API_MOCK_ENABLE_LOGS: 'false'
+    },
+    specPattern: "test/features/**/*.feature",
+    supportFile: 'test/support.ts',
+    setupNodeEvents,
+    video: false
+  },
+});
diff --git a/jest.config.js b/jest.config.js
@@ -10,13 +10,7 @@ module.exports = {
     ],
     preset: 'jest-preset-angular',
     setupFilesAfterEnv: ['<rootDir>/test/setup-jest.ts'],
-    globals: {
-        'ts-jest': {tsconfig: 'tsconfig.spec.json'}
-    },
     modulePathIgnorePatterns: ['<rootDir>/dist/'],
     resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
     transformIgnorePatterns: ['node_modules/(?!@angular)'],
-    transform: {
-        '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
-    }
 };
diff --git a/package.json b/package.json
@@ -13,16 +13,13 @@
     "ngapimock": "node test/serve.js",
     "prebuild": "rimraf dist",
     "build": "ng build --configuration=production",
+    "postbuild": "mv dist/browser/* dist && rimraf dist/browser",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
     "test": "jest --config=jest.config.js -w 1",
-    "protractor-local": "protractor test/protractor.local.conf.js",
-    "protractor-ci": "protractor test/protractor.ci.conf.js",
     "start": "ng serve --proxy-config proxy.config.json --host=0.0.0.0",
-    "sauce:download": "curl https://saucelabs.com/downloads/sc-4.6.2-linux.tar.gz --output sc-4.6.2-linux.tar.gz",
-    "postsauce:download": "tar -xvf sc-4.6.2-linux.tar.gz",
-    "sauce:start": "cd sc-4.6.2-linux && ./bin/sc",
-    "sauce:started": "wait-on /tmp/sc-started -v"
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "repository": {
     "type": "git",
@@ -51,64 +48,65 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular/animations": "15.1.0",
-    "@angular/cdk": "15.1.0",
-    "@angular/common": "15.1.0",
-    "@angular/compiler": "15.1.0",
-    "@angular/core": "15.1.0",
-    "@angular/forms": "15.1.0",
-    "@angular/material": "15.1.0",
-    "@angular/platform-browser": "15.1.0",
-    "@angular/platform-browser-dynamic": "15.1.0",
-    "@angular/router": "15.1.0",
-    "@angular-devkit/build-angular": "15.1.1",
-    "@angular-eslint/builder": "15.2.0",
-    "@angular-eslint/eslint-plugin": "15.2.0",
-    "@angular-eslint/eslint-plugin-template": "15.2.0",
-    "@angular-eslint/schematics": "15.2.0",
-    "@angular-eslint/template-parser": "15.2.0",
-    "@angular/cli": "15.1.1",
-    "@angular/compiler-cli": "15.1.0",
-    "@commitlint/cli": "17.4.2",
-    "@commitlint/config-conventional": "17.4.2",
+    "@angular-devkit/build-angular": "17.0.4",
+    "@angular-eslint/builder": "17.1.0",
+    "@angular-eslint/eslint-plugin": "17.1.0",
+    "@angular-eslint/eslint-plugin-template": "17.1.0",
+    "@angular-eslint/schematics": "17.1.0",
+    "@angular-eslint/template-parser": "17.1.0",
+    "@angular/animations": "17.0.5",
+    "@angular/cdk": "17.0.1",
+    "@angular/cli": "17.0.4",
+    "@angular/common": "17.0.5",
+    "@angular/compiler": "17.0.5",
+    "@angular/compiler-cli": "17.0.5",
+    "@angular/core": "17.0.5",
+    "@angular/forms": "17.0.5",
+    "@angular/material": "17.0.1",
+    "@angular/platform-browser": "17.0.5",
+    "@angular/platform-browser-dynamic": "17.0.5",
+    "@angular/router": "17.0.5",
+    "@badeball/cypress-cucumber-preprocessor": "^19.2.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-conventional": "17.8.1",
     "@ng-apimock/base-client": "3.3.1",
-    "@ng-apimock/core": "3.6.1",
+    "@ng-apimock/core": "3.11.2",
+    "@ng-apimock/cypress-plugin": "^3.0.0",
     "@ng-apimock/protractor-plugin": "2.1.1",
-    "@semantic-release/changelog": "6.0.2",
+    "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.7",
+    "@semantic-release/github": "8.1.0",
     "@semantic-release/npm": "9.0.2",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@types/chai": "4.3.4",
+    "@types/chai": "4.3.11",
     "@types/cucumber": "6.0.1",
-    "@types/jest": "29.2.5",
-    "@types/node": "18.11.18",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
-    "angular2-prettyjson": "3.0.1",
-    "body-parser": "1.20.1",
-    "chai": "4.3.7",
-    "commitizen": "4.2.6",
+    "@types/jest": "29.5.10",
+    "@types/node": "18.18.14",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "body-parser": "1.20.2",
+    "chai": "4.3.10",
+    "commitizen": "4.3.0",
     "cucumber": "6.0.5",
-    "eslint": "8.32.0",
+    "cypress": "13.6.0",
+    "eslint": "^8.54.0",
     "express": "4.18.2",
     "husky": "8.0.3",
-    "jest": "29.3.1",
+    "jest": "29.7.0",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "12.2.3",
-    "lint-staged": "13.1.0",
+    "jest-preset-angular": "13.1.4",
+    "lint-staged": "13.3.0",
     "p-iteration": "1.1.8",
-    "protractor": "7.0.0",
-    "protractor-cucumber-framework": "9.0.0",
-    "rimraf": "4.0.6",
-    "rxjs": "7.8.0",
-    "semantic-release": "20.0.2",
-    "tslib": "2.4.1",
+    "rimraf": "4.4.1",
+    "rxjs": "7.8.1",
+    "semantic-release": "20.1.3",
     "ts-node": "10.9.1",
-    "typescript": "4.9.4",
-    "wait-on": "7.0.1",
-    "zone.js": "~0.12.0"
+    "tslib": "2.6.2",
+    "typescript": "5.3.2",
+    "wait-on": "7.2.0",
+    "zone.js": "~0.14.2"
   },
   "lint-staged": {
     "**/**.{ts}": [
@@ -119,5 +117,10 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "cypress-cucumber-preprocessor": {
+    "stepDefinitions": [
+      "test/step_definitions/*.{js,ts}"
+    ]
   }
 }
diff --git a/proxy.config.json b/proxy.config.json
@@ -1,6 +1,6 @@
 {
   "/ngapimock/*": {
-      "target": "http://localhost:9999",
+    "target": "http://localhost:9999",
     "secure": false,
     "logLevel": "debug"
   }

diff --git a/src/app/alert/alert.component.ts b/src/app/alert/alert.component.ts
@@ -1,10 +1,13 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Observable, timer } from 'rxjs';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'apimock-alert',
     templateUrl: './alert.component.html',
-    styleUrls: ['./alert.component.scss']
+    styleUrls: ['./alert.component.scss'],
+    standalone: true,
+    imports: [NgIf]
 })
 export class AlertComponent implements OnInit {
     @Input() change: Observable<any>;

diff --git a/src/app/alert/alert.module.ts b/src/app/alert/alert.module.ts
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './header/header.component';
+
 
 @Component({
     selector: 'apimock-root',
-    templateUrl: './app.component.html'
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [RouterOutlet, HeaderComponent]
 })
 export class AppComponent {
 }