refactor: 💡 upgrade to angular 13

.github/workflows/ci.yml

@@ -12,7 +12,8 @@ jobs:
       fail-fast: true
       matrix:
         node_version:
-          - 12
+          - 14
+          - 16
         os:
           - ubuntu-latest
         architecture:

.github/workflows/integration.yml

@@ -16,20 +16,20 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile
       - name: build
-        run: yarn run build
+        run: yarn build
       - name: sauce connect proxy download
-        run: yarn run sauce:download
+        run: yarn sauce:download
       - name: sauce connect
-        run: nohup yarn run sauce:start -- --user=${{ secrets.SAUCE_USERNAME }} --api-key=${{ secrets.SAUCE_ACCESS_KEY }} --tunnel-identifier=${{ github.run_id }} --readyfile=/tmp/sc-started &
+        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 run sauce:started
+        run: yarn sauce:started
       - name: integration test
-        run: yarn run protractor-ci
+        run: yarn protractor-ci
         env:
           SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
           SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}

.github/workflows/qa.yml

@@ -16,7 +16,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile

.github/workflows/release.yml

@@ -10,14 +10,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile
       - name: build
-        run: yarn run build
+        run: yarn build
       - name: publish
         run: yarn semantic-release
         env:

angular.json

@@ -30,7 +30,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/theme.scss"
             ],
             "scripts": [],
             "vendorChunk": true,

jest.config.js

@@ -1,11 +1,22 @@
 module.exports = {
-  collectCoverage: true,
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  modulePathIgnorePatterns: ['<rootDir>/dist/'],
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.spec.json'
+    collectCoverage: true,
+    collectCoverageFrom: [
+        'src/**/*.component.ts',
+        'src/**/*.service.ts',
+        'src/**/*.pipe.ts'
+    ],
+    coveragePathIgnorePatterns: [
+        '.app.component.ts'
+    ],
+    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',
     }
-  }
 };

package.json

@@ -50,67 +50,65 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.1.3",
-    "@angular-eslint/builder": "12.3.1",
-    "@angular-eslint/eslint-plugin": "12.3.1",
-    "@angular-eslint/eslint-plugin-template": "12.3.1",
-    "@angular-eslint/schematics": "12.3.1",
-    "@angular-eslint/template-parser": "12.3.1",
-    "@angular/cli": "12.1.3",
-    "@angular/compiler-cli": "12.1.3",
-    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "13.1.0",
+    "@angular-devkit/build-angular": "13.0.1",
+    "@angular-eslint/builder": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.0",
+    "@angular-eslint/schematics": "13.0.0-alpha.0",
+    "@angular-eslint/template-parser": "13.0.0-alpha.0",
+    "@angular/cli": "13.0.1",
+    "@angular/compiler-cli": "13.0.0",
+    "@commitlint/cli": "14.1.0",
+    "@commitlint/config-conventional": "14.1.0",
     "@ng-apimock/base-client": "3.1.0",
-    "@ng-apimock/core": "3.0.3",
+    "@ng-apimock/core": "3.2.0",
     "@ng-apimock/protractor-plugin": "2.0.0",
-    "@semantic-release/changelog": "5.0.1",
-    "@semantic-release/commit-analyzer": "8.0.1",
-    "@semantic-release/git": "9.0.0",
-    "@semantic-release/github": "7.2.3",
-    "@semantic-release/npm": "7.1.3",
-    "@semantic-release/release-notes-generator": "9.0.3",
-    "@types/chai": "4.2.21",
+    "@semantic-release/changelog": "6.0.1",
+    "@semantic-release/commit-analyzer": "9.0.1",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/github": "8.0.2",
+    "@semantic-release/npm": "8.0.3",
+    "@semantic-release/release-notes-generator": "10.0.2",
+    "@types/chai": "4.2.22",
     "@types/cucumber": "6.0.1",
-    "@types/jest": "26.0.24",
-    "@types/node": "16.4.5",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
-    "@typescript-eslint/parser": "4.28.5",
+    "@types/jest": "27.0.2",
+    "@types/node": "16.11.6",
+    "@typescript-eslint/eslint-plugin": "5.3.1",
+    "@typescript-eslint/parser": "5.3.1",
     "angular2-prettyjson": "3.0.1",
     "body-parser": "1.19.0",
     "chai": "4.3.4",
     "commitizen": "4.2.4",
-    "connect": "3.7.0",
-    "connect-modrewrite": "0.10.2",
     "cucumber": "6.0.5",
-    "eslint": "7.31.0",
-    "husky": "7.0.1",
-    "jest": "27.0.6",
+    "eslint": "8.2.0",
+    "express": "4.17.1",
+    "husky": "7.0.4",
+    "jest": "27.3.1",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "9.0.5",
-    "lint-staged": "11.1.1",
+    "jest-preset-angular": "11.0.0-rc.2",
+    "lint-staged": "11.2.6",
     "p-iteration": "1.1.8",
     "protractor": "7.0.0",
-    "protractor-cucumber-framework": "8.2.2",
+    "protractor-cucumber-framework": "8.2.7",
     "rimraf": "3.0.2",
-    "semantic-release": "17.4.4",
-    "serve-static": "1.14.1",
-    "ts-node": "10.1.0",
-    "typescript": "4.3.5",
+    "semantic-release": "18.0.0",
+    "ts-node": "10.4.0",
+    "typescript": "4.4.4",
     "wait-on": "6.0.0"
   },
   "dependencies": {
-    "@angular/animations": "12.1.3",
-    "@angular/cdk": "12.1.3",
-    "@angular/common": "12.1.3",
-    "@angular/compiler": "12.1.3",
-    "@angular/core": "12.1.3",
-    "@angular/forms": "12.1.3",
-    "@angular/material": "12.1.3",
-    "@angular/platform-browser": "12.1.3",
-    "@angular/platform-browser-dynamic": "12.1.3",
-    "@angular/router": "12.1.3",
-    "rxjs": "7.2.0",
-    "tslib": "2.3.0",
+    "@angular/animations": "13.0.0",
+    "@angular/cdk": "13.0.0",
+    "@angular/common": "13.0.0",
+    "@angular/compiler": "13.0.0",
+    "@angular/core": "13.0.0",
+    "@angular/forms": "13.0.0",
+    "@angular/material": "13.0.0",
+    "@angular/platform-browser": "13.0.0",
+    "@angular/platform-browser-dynamic": "13.0.0",
+    "@angular/router": "13.0.0",
+    "rxjs": "7.4.0",
+    "tslib": "2.3.1",
     "zone.js": "~0.11.4"
   },
   "lint-staged": {

src/app/common/mat-table-filter/filter.component.scss

@@ -1,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
   span {
@@ -28,20 +27,20 @@
     .icon-filter {
       display: inherit;
       padding: .375rem .75rem;
-      background-color: mat.get-color-from-palette($ngApimock-demoApplication-secondary, 100);
-      border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+      background-color: mat-color($ngapimock-app-secondary, 100);
+      border: 1px solid mat-color($ngapimock-app-secondary, 300);
       border-radius: 0 .25rem .25rem 0;
     }
   }
 
   input {
-    border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette($ngApimock-demoApplication-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
   }
 }
 

src/app/header/header.component.scss

@@ -1,16 +1,12 @@
-@use '~@angular/material' as mat;
-@include mat.core();
-
-$grey-palette: mat.define-palette(mat.$grey-palette);
-$green-palette: mat.define-palette(mat.$green-palette);
+@import '../../theme';
 
 mat-toolbar-row {
   background: white;
   position: relative;
   padding: 0.5rem 3rem;
   font-weight: normal;
   display: block;
-  height: auto;
+  height: auto !important;
 
   @media (min-width: 992px) {
     display: flex;
@@ -25,15 +21,15 @@ mat-toolbar-row {
 
     line-height: inherit;
     white-space: nowrap;
-    color: mat.get-color-from-palette($green-palette);
+    color: mat-color($ngapimock-app-primary);
   }
 
   .toggler {
     float: right;
     margin-top: 0px;
     padding: 0.25rem 0.75rem;
     font-size: 1.25rem;
-    border: 1px solid mat.get-color-from-palette($grey-palette, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
     border-radius: 0.25rem;
     background-color: transparent;
     @media (min-width: 992px) {
@@ -75,19 +71,19 @@ mat-toolbar-row {
           display: block;
           padding: 0 1rem;
           text-decoration: none;
-          color: mat.get-color-from-palette($grey-palette, 500);
+          color: mat-color($ngapimock-app-secondary, 500);
 
           @media (min-width: 992px) {
             padding: 0 0.5rem;
           }
         }
         &.active a {
-          color: mat.get-color-from-palette($grey-palette, 900);
+          color: mat-color($ngapimock-app-secondary, 900);
         }
       }
 
       &.active a {
-        color: mat.get-color-from-palette($grey-palette, 900);
+        color: mat-color($ngapimock-app-secondary, 900);
       }
     }
 

src/app/mocks/overview/overview.component.scss

@@ -1,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
   /* badge */
@@ -25,13 +24,13 @@
 
     &-get {
       .mat-badge-content {
-        background: mat.get-color-from-palette($ngApimock-demoApplication-primary, 500);
+        background: mat-color($ngapimock-app-primary, 500);
       }
     }
 
     &-post, &-put, &-patch {
       .mat-badge-content {
-        background: mat.get-color-from-palette($ngApimock-demoApplication-primary, 800);
+        background: mat-color($ngapimock-app-primary, 800);
       }
     }
   }
@@ -43,7 +42,7 @@
     mat-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+      color: mat-color($ngapimock-app-primary);
     }
   }
 
@@ -66,13 +65,13 @@
   }
 
   input {
-    border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette($ngApimock-demoApplication-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
   }
 
 }

src/app/presets/create-preset/create-preset.component.scss

@@ -1,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
 	.container {
@@ -13,7 +12,7 @@
 	}
 
 	h2 {
-		color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+		color: mat-color($ngapimock-app-primary);
 		margin: 0;
 	}
 

src/app/presets/details/details.component.scss

@@ -1,15 +1,14 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
-  mat-header-row {
+  mat-color-header-row {
     min-height: 30px;
     padding-left: 0px;
 
-    mat-header-cell {
+    mat-color-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+      color: mat-color($ngapimock-app-primary);
     }
   }