(Unit Testing) Run unit testcases using PhantomJS in Continuous Integration environments (TrilonIO#403)

* Modified .csproject to emit the wwwroot/dist folder, if the folder is not created yet

* Remove Jest and added Karma test runner for executing unit test cases

* Added PhantomJS for running test in CI environments. Removed deprecated tslint rules and amended existing rules.

Author: davidsekar

ClientApp/test/boot-tests.js

@@ -1,6 +1,6 @@
 Error.stackTraceLimit = Infinity;
 // Load required polyfills and testing libraries
-require('reflect-metadata');
+require('core-js'); // Added for Phantomjs
 require('zone.js');
 require('zone.js/dist/long-stack-trace-zone');
 require('zone.js/dist/proxy.js');

ClientApp/test/karma.conf.js

@@ -7,6 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine'],
     exclude: [],
     files: [
+      '../../wwwroot/dist/vendor.js',
       './boot-tests.js'
     ],
     preprocessors: {
@@ -41,6 +42,24 @@ module.exports = function (config) {
       stats: {
         chunks: false
       }
+    },
+    // you can define custom flags
+    customLaunchers: {
+      'PhantomJS_custom': {
+        base: 'PhantomJS',
+        options: {
+          windowName: 'test-window',
+          settings: {
+            webSecurityEnabled: false
+          }
+        },
+        flags: ['--load-images=true'],
+        // debug: true
+      }
+    },
+    phantomjsLauncher: {
+      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
+      exitOnResourceError: true
     }
   });
 };

ClientApp/test/webpack.config.test.js

@@ -1,6 +1,7 @@
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 
+const webpack = require('webpack');
 var path = require('path');
 var rootPath = path.join.bind(path, path.resolve(__dirname, '../../'));
 
@@ -67,6 +68,10 @@ module.exports = function (options) {
       ]
     },
     plugins: [
+      new webpack.DllReferencePlugin({
+        context: __dirname,
+        manifest: require(rootPath('wwwroot', 'dist', 'vendor-manifest.json'))
+      }),
       new ContextReplacementPlugin(
         /**
          * The (\\|\/) piece accounts for path separators in *nix and Windows

package.json

@@ -2,9 +2,11 @@
   "name": "angular4-aspnetcore-universal",
   "version": "1.0.0-rc3",
   "scripts": {
-    "test": "karma start ClientApp/test/karma.conf.js",
+    "lint": "tslint -p tsconfig.json",
+    "test": "npm run build:vendor && karma start ClientApp/test/karma.conf.js",
     "test:watch": "npm run test -- --auto-watch --no-single-run",
-    "test:ci": "npm run test -- --runInBand",
+    "test:ci": "npm run test -- --browsers PhantomJS_custom",
+    "test:ci:watch": "npm run test:ci -- --auto-watch --no-single-run",
     "test:coverage": "npm run test -- --coverage",
     "build:dev": "npm run build:vendor && npm run build:webpack",
     "build:webpack": "webpack --progress --color",
@@ -78,6 +80,7 @@
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.1.0",
     "karma-mocha-reporter": "^2.2.4",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-remap-coverage": "^0.1.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",

tsconfig.json

@@ -3,12 +3,14 @@
     "moduleResolution": "node",
     "module": "es2015",
     "target": "es5",
+    "alwaysStrict": true,
     "noImplicitAny": false,
     "sourceMap": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
+    "allowUnreachableCode": false,
     "lib": [
       "es2016",
       "dom"

tslint.json

@@ -8,32 +8,20 @@
       "check-space"
     ],
     "component-class-suffix": true,
-    "component-selector-name": [
+    "component-selector": [
       true,
+      "element",
+      "app",
       "kebab-case"
     ],
-    "component-selector-prefix": [
-      true,
-      "app"
-    ],
-    "component-selector-type": [
-      true,
-      "element"
-    ],
     "curly": false,
     "directive-class-suffix": true,
-    "directive-selector-name": [
+    "directive-selector": [
       true,
+      "attribute",
+      "app",
       "camelCase"
     ],
-    "directive-selector-prefix": [
-      true,
-      "app"
-    ],
-    "directive-selector-type": [
-      true,
-      "attribute"
-    ],
     "eofline": true,
     "forin": true,
     "import-destructuring-spacing": true,
@@ -44,7 +32,6 @@
     "interface-name": false,
     "jsdoc-format": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
       200
@@ -73,7 +60,6 @@
     "no-construct": true,
     "no-constructor-vars": false,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
     "no-empty": false,
     "no-eval": true,
@@ -88,7 +74,6 @@
     "no-string-literal": false,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": false,
-    "no-unreachable": true,
     "no-unused-expression": true,
     "no-unused-variable": false,
     "no-use-before-declare": true,
@@ -153,10 +138,6 @@
     "use-life-cycle-interface": true,
     "use-output-property-decorator": true,
     "use-pipe-transform-interface": true,
-    "use-strict": [
-      true,
-      "check-module"
-    ],
     "variable-name": [
       true,
       "check-format",
@@ -175,4 +156,4 @@
   "rulesDirectory": [
     "node_modules/codelyzer"
   ]
-}
+}