Add karma / protractor / codelyzer

Closes TrilonIO#6
Closes TrilonIO#7

More detailed unit tests to come.

Author: MarkPieszak

Client/app/app.component.ts

@@ -21,4 +21,4 @@ export class AppComponent {
 
     }
 
-}
+}

Client/app/app.e2e.ts

@@ -0,0 +1,13 @@
+describe('App', () => {
+
+    beforeEach(() => {
+        //browser.get('/');
+    });
+    
+    it('e2e test should run', () => {
+        let subject = true;
+        let result = true;
+        expect(subject).toEqual(result);
+    });
+
+});

README.md

@@ -1,20 +1,24 @@
 # ASP.NET Core & Angular2 Universal starter
 
-## - Fully functioning (some additional features coming soon!)
-
-### What does this starter include?
+### What does this repo include?
 
 - Angular2
   - Featuring Server-side rendering (Angular Universal)
 	- Faster paints, better SEO, deep-linking, etc
   - Baked in best-practices (follows Angular style guide)
-  - Bootstrap (with ng2-bootstrap)
+  - Bootstrap4 (with ng2-bootstrap) - can be rendered on the server
 
 - Webpack build system
   - HMR : Hot Module Reloading/Replacement 
   - Production builds
 
-- asp.NET Core
+- Testing frameworks
+  - Unit testing with Karma/Jasmine
+  - Codelyzer (for real-time static code analysis) `npm run lint`
+	- *Note, only VSCode & Atom can provide real-time code analysis at this moment*
+
+- asp.NET Core 1.0.1
+  - RestAPI integration
   - Integration with NodeJS to provide pre-rendering, as well as any other Node module asset you want to use.
 
 ### Getting Started?
@@ -31,8 +35,8 @@ Make sure to be aware of [Universal's (isomorphic javascripts) **"Gotchas"**](ht
 
 ### UPCOMING Features:
 
-  - NgRx (reactive Redux application state management) TODO
-  - Unit testing with Karma/Jasmine TODO
-  - HMR State management
-  - Angular 2.1.1+ fixes (for Universal)
-  - Websockets example
+  - [ ] NgRx (reactive Redux application state management) TODO
+  - [ ] Unit testing with Karma/Jasmine TODO
+  - [ ] HMR State management
+  - [ ] Angular 2.1.1+ fixes (for Universal)
+  - [ ] Websockets example

helpers.js

@@ -0,0 +1,24 @@
+/**
+ * @author: @AngularClass
+ */
+
+var path = require('path');
+
+// Helper functions
+// var ROOT = path.resolve(__dirname, '..');
+var ROOT = path.resolve(__dirname);
+
+console.log('root directory:', root() + '\n');
+
+function hasProcessFlag(flag) {
+    return process.argv.join('').indexOf(flag) > -1;
+}
+
+function root(args) {
+    args = Array.prototype.slice.call(arguments, 0);
+    return path.join.apply(path, [ROOT].concat(args));
+}
+
+
+exports.hasProcessFlag = hasProcessFlag;
+exports.root = root;

karma.config.js

@@ -0,0 +1,107 @@
+/**
+ * @author: @AngularClass
+ */
+
+module.exports = function (config) {
+    var testWebpackConfig = require('./webpack.test.js')({ env: 'test' });
+
+    var configuration = {
+
+        // base path that will be used to resolve all patterns (e.g. files, exclude)
+        basePath: '',
+
+        /*
+         * Frameworks to use
+         *
+         * available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+         */
+        frameworks: ['jasmine'],
+
+        // list of files to exclude
+        exclude: [],
+
+        /*
+         * list of files / patterns to load in the browser
+         *
+         * we are building the test environment in ./spec-bundle.js
+         */
+        files: [{ pattern: './config/spec-bundle.js', watched: false }],
+
+        /*
+         * preprocess matching files before serving them to the browser
+         * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+         */
+        preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+
+        // Webpack Config at ./webpack.test.js
+        webpack: testWebpackConfig,
+
+        coverageReporter: {
+            type: 'in-memory'
+        },
+
+        remapCoverageReporter: {
+            'text-summary': null,
+            json: './coverage/coverage.json',
+            html: './coverage/html'
+        },
+
+        // Webpack please don't spam the console when running in karma!
+        webpackMiddleware: { stats: 'errors-only' },
+
+        /*
+         * test results reporter to use
+         *
+         * possible values: 'dots', 'progress'
+         * available reporters: https://npmjs.org/browse/keyword/karma-reporter
+         */
+        reporters: ['mocha', 'coverage'],
+
+        // web server port
+        port: 9876,
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+        /*
+         * level of logging
+         * possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+         */
+        logLevel: config.LOG_INFO,
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: false,
+
+        /*
+         * start these browsers
+         * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+         */
+        browsers: [
+          // 'Chrome',
+          'PhantomJS'
+
+        ],
+
+        customLaunchers: {
+            ChromeTravisCi: {
+                base: 'Chrome',
+                flags: ['--no-sandbox']
+            }
+        },
+
+        /*
+         * Continuous Integration mode
+         * if true, Karma captures browsers, runs the tests and exits
+         */
+        singleRun: true
+    };
+
+    if (process.env.TRAVIS) {
+        configuration.browsers = [
+          'ChromeTravisCi',
+          'PhantomJS'
+        ];
+    }
+
+    config.set(configuration);
+};

package.json

@@ -1,15 +1,15 @@
 {
   "name": "aspnetcore-angular2-universal-starter",
-  "version": "0.5.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MarkPieszak/aspnetcore-angular2-starter.git"
-  },
+  "version": "0.6.0",
   "author": {
     "name": "Mark Pieszak",
     "email": "[email protected]",
     "url": "http://www.github.com/MarkPieszak"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MarkPieszak/aspnetcore-angular2-starter.git"
+  },
   "dependencies": {
     "@angular/common": "2.1.0",
     "@angular/compiler": "2.1.0",
@@ -20,15 +20,29 @@
     "@angular/platform-browser-dynamic": "2.1.0",
     "@angular/platform-server": "2.1.0",
     "@angular/router": "3.1.0",
-    "@types/node": "^6.0.46",
     "angular2-platform-node": "~2.1.0-rc.1",
-    "angular2-template-loader": "0.5.0",
     "angular2-universal": "~2.1.0-rc.1",
     "angular2-universal-polyfills": "~2.1.0-rc.1",
     "aspnet-prerendering": "^1.0.7",
-    "aspnet-webpack": "^1.0.21",
+    "aspnet-webpack": "^1.0.24",
+    "bootstrap": "4.0.0-alpha.5",
+    "ng2-bootstrap": "^1.1.16",
+    "preboot": "^4.5.2",
+    "rxjs": "5.0.0-rc.2",
+    "zone.js": "^0.6.26"
+  },
+  "devDependencies": {
+    "@types/hammerjs": "2.0.33",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "^6.0.46",
+    "@types/protractor": "1.5.20",
+    "@types/source-map": "0.1.28",
+    "@types/uglify-js": "2.6.28",
+    "@types/webpack": "1.12.35",
+    "@types/sinon": "1.16.31",
+    "angular2-template-loader": "0.6.0",
     "awesome-typescript-loader": "2.2.4",
-    "bootstrap": "^3.3.7",
+    "codelyzer": "1.0.0-beta.3",
     "css": "^2.2.1",
     "css-loader": "^0.25.0",
     "es6-shim": "^0.35.1",
@@ -37,17 +51,30 @@
     "file-loader": "^0.9.0",
     "html-loader": "^0.4.3",
     "isomorphic-fetch": "^2.2.1",
-    "jquery": "^2.2.1",
     "js.clone": "0.0.3",
     "json-loader": "^0.5.4",
-    "ng2-bootstrap": "^1.1.16",
-    "preboot": "^4.5.2",
+    "karma": "1.3.0",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-coverage": "1.1.1",
+    "karma-jasmine": "1.0.2",
+    "karma-mocha-reporter": "2.2.0",
+    "karma-remap-coverage": "0.1.2",
+    "karma-phantomjs-launcher": "1.0.2",
+    "karma-source-map-support": "1.2.0",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "1.8.0",
+    "phantomjs-polyfill": "0.0.2",
+    "phantomjs-prebuilt": "2.1.13",
+    "protractor": "4.0.9",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.8",
-    "rxjs": "5.0.0-beta.12",
     "source-map-loader": "0.1.5",
-    "style-loader": "^0.13.0",
-    "ts-loader": "^0.9.4",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^1.0.0",
+    "ts-node": "^1.6.1",
+    "tslint": "3.15.1",
+    "tslint-loader": "2.1.5",
+    "typedoc": "0.5.1",
     "typescript": "^2.0.3",
     "url-loader": "^0.5.7",
     "webpack": "^2.1.0-beta.25",
@@ -56,8 +83,7 @@
     "webpack-externals-plugin": "^1.0.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1",
-    "webpack-node-externals": "^1.4.3",
-    "zone.js": "^0.6.21"
+    "webpack-node-externals": "^1.4.3"
   },
   "keywords": [
     "aspnetcore",
@@ -85,6 +111,7 @@
     "pretest": "npm run lint",
     "preversion": "npm test",
     "protractor": "protractor",
+    "pree2e": "npm run webdriver:update -- --standalone",
     "rimraf": "rimraf",
     "test": "karma start",
     "tslint": "tslint",

protractor.conf.js

@@ -0,0 +1,49 @@
+/**
+ * @author: @AngularClass
+ */
+
+require('ts-node/register');
+var helpers = require('./helpers');
+
+exports.config = {
+    baseUrl: 'http://localhost:5000/',
+
+    // use `npm run e2e`
+    specs: [
+      helpers.root('Client/**/**.e2e.ts'),
+      helpers.root('Client/**/*.e2e.ts')
+    ],
+    exclude: [],
+
+    framework: 'jasmine2',
+
+    allScriptsTimeout: 110000,
+
+    jasmineNodeOpts: {
+        showTiming: true,
+        showColors: true,
+        isVerbose: false,
+        includeStackTrace: false,
+        defaultTimeoutInterval: 400000
+    },
+    directConnect: true,
+
+    capabilities: {
+        'browserName': 'chrome',
+        'chromeOptions': {
+            'args': ['show-fps-counter=true']
+        }
+    },
+
+    onPrepare: function () {
+        browser.ignoreSynchronization = true;
+    },
+
+    /**
+     * Angular 2 configuration
+     *
+     * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
+     * `rootEl`
+     */
+    useAllAngular2AppRoots: true
+};