feat: add angular 13 support (#80)

* fix!: update Schema ID keyword to support Angular 13 BREAKING CHANGE: Angular 12 and earlier versions are not supported * chore: update demo app to Angular 11 * chore: update demo-app to Angular 12 * chore: update demo-app to Angular 13 * chore: bump version to 3.0.0 * fix: remove explicit any type and fix build pipeline * ci: install demo-app dependencies before linting the project It's necessary to have the demo-app's eslint plugins installed before lint can be run. * chore: update @angular-eslint alpha version dependency to latest version
DevExpress · Dec 13, 2021 · 701fa18 · 701fa18
1 parent 1af22dd
commit 701fa18
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 65 deletions.
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
@@ -17,6 +17,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
       - run: npm i --force
+      - run: cd demo-app && npm i --force && cd ..
       - run: npm run build --if-present
       - run: npm test
         env:

diff --git a/demo-app/.eslintrc.json b/demo-app/.eslintrc.json
@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/demo-app/.gitignore b/demo-app/.gitignore
@@ -32,6 +32,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

diff --git a/demo-app/angular.json b/demo-app/angular.json
@@ -25,7 +25,14 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "aot": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -38,7 +45,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -52,14 +58,14 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "demo-app:build",
             "host": "localhost",
-            "baseHref": "localhost",
             "port": 4200
           },
           "configurations": {
@@ -68,8 +74,7 @@
             },
             "stubbed": {
               "browserTarget": "demo-app:build",
-              "publicHost": "localhost:4200",
-              "progress": false
+              "publicHost": "localhost:4200"
             }
           }
         },
@@ -96,19 +101,6 @@
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "angular-testcafe:testcafe",
           "options": {
@@ -154,12 +146,22 @@
               ]
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "defaultProject": "demo-app",
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "defaultCollection": "@angular-eslint/schematics"
   }
 }
diff --git a/demo-app/package.json b/demo-app/package.json
@@ -5,35 +5,42 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e -c passing"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "10.0.11",
-    "@angular/common": "10.0.11",
-    "@angular/compiler": "10.0.11",
-    "@angular/core": "10.0.11",
-    "@angular/forms": "10.0.11",
-    "@angular/platform-browser": "10.0.11",
-    "@angular/platform-browser-dynamic": "10.0.11",
-    "@angular/router": "10.0.11",
+    "@angular/animations": "13.0.1",
+    "@angular/common": "13.0.1",
+    "@angular/compiler": "13.0.1",
+    "@angular/core": "13.0.1",
+    "@angular/forms": "13.0.1",
+    "@angular/platform-browser": "13.0.1",
+    "@angular/platform-browser-dynamic": "13.0.1",
+    "@angular/router": "13.0.1",
     "rxjs": "6.6.2",
-    "tslib": "^2.0.1",
-    "zone.js": "~0.11.1"
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1000.6",
-    "@angular/cli": "10.0.6",
-    "@angular/compiler-cli": "10.0.11",
-    "@angular/language-service": "10.0.11",
-    "angular-testcafe": "file:..",
+    "@angular-devkit/build-angular": "13.0.2",
+    "@angular-eslint/builder": "13.0.1",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/schematics": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
+    "@angular/cli": "13.0.2",
+    "@angular/compiler-cli": "13.0.1",
+    "@angular/language-service": "13.0.1",
     "@types/node": "~12.12.54",
     "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
+    "angular-testcafe": "file:..",
     "codelyzer": "^6.0.0",
+    "eslint": "^8.1.0",
     "ts-node": "~8.10.2",
     "tslint": "~6.1.3",
-    "typescript": "~3.9.7"
+    "typescript": "~4.4.4"
   }
 }
diff --git a/demo-app/src/app/app.component.spec.ts b/demo-app/src/app/app.component.spec.ts
@@ -1,8 +1,8 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 AppComponent

diff --git a/demo-app/src/app/app.component.ts b/demo-app/src/app/app.component.ts
@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
 
-const opts = {
-    selector:    'app-root',
+@Component({
+    selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls:   ['./app.component.css']
-};
-
-@Component(opts)
+    styleUrls: ['./app.component.css']
+})
 
 export class AppComponent {
   title = 'demo-app';

diff --git a/demo-app/src/environments/environment.ts b/demo-app/src/environments/environment.ts
@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/demo-app/src/polyfills.ts b/demo-app/src/polyfills.ts
@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 
 /***************************************************************************************************

diff --git a/demo-app/src/test.ts b/demo-app/src/test.ts
@@ -1,7 +1,7 @@
 // NOTE: This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'webpack-env';
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 
 import {
@@ -12,7 +12,9 @@ import {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+        teardown: { destroyAfterEach: false }
+    }
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "angular-testcafe",
-  "version": "2.0.8",
+  "version": "3.0.0",
   "description": "Angular builder for Testcafe",
   "main": "src/testcafe/testcafe.builder.js",
   "scripts": {
     "build": "tsc",
     "lint": "eslint demo-app src",
-    "e2e": "cd demo-app && npm i --force && npm run e2e",
+    "e2e": "cd demo-app && npm run e2e",
     "prepare": "npm run build",
     "test": "npm run lint && npm run e2e"
   },
@@ -70,7 +70,7 @@
   },
   "peerDependencies": {
     "testcafe": ">=1.9.0",
-    "@angular/core": ">=10.0.0"
+    "@angular/core": ">=13.0.0"
   },
   "dependencies": {
     "lodash": "4.17.21"

diff --git a/src/testcafe/schema.json b/src/testcafe/schema.json
@@ -1,5 +1,5 @@
 {
-  "id": "TestcafeBuilderOptions",
+  "id$": "TestcafeBuilderOptions",
   "title": "TestCafe builder",
   "description": "TestCafe builder options",
   "type": "object",

diff --git a/src/testcafe/testcafe.builder.ts b/src/testcafe/testcafe.builder.ts
@@ -103,8 +103,10 @@ async function execute (
 
     }
     catch (e) {
-        console.error('Testcafe run failed!!! error:', e);
-        return { success: false, error: e.message };
+        const message = e instanceof Error ? e.message : 'Testcafe run failed!';
+
+        console.error('Testcafe run failed!!! error:', message);
+        return { success: false, error: message };
     }
     finally {
         if (server)