unit test added

helpers.js

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

karma.conf.js

@@ -0,0 +1,140 @@
+/**
+ * @author: @AngularClass
+ */
+
+module.exports = function(config) {
+  var webdriverConfig = {
+    hostname: '4science-devel1',
+    port: 4202
+  }
+
+  var testWebpackConfig = require('./webpack.test.config.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'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-phantomjs-launcher'),
+      require('karma-webdriver-launcher'),
+      require('karma-coverage'),
+      require('karma-remap-istanbul'),
+      require('karma-sourcemap-loader'),
+      require('karma-webpack')
+    ],
+
+    // 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: './spec-bundle.js', watched: false } ],
+
+    /*
+     * preprocess matching files before serving them to the browser
+     * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+     */
+    preprocessors: { './spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+
+    // Webpack Config at ./webpack.test.js
+    webpack: testWebpackConfig,
+
+    coverageReporter: {
+      reporters:[
+        {type: 'in-memory'},
+        {type: 'json', subdir: '.', file: 'coverage-final.json'},
+        {type : 'html', dir : 'coverage/'}
+      ]
+    },
+
+    remapCoverageReporter: {
+      'text-summary': null,
+      json: './coverage/coverage.json',
+      html: './coverage/html'
+    },
+
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage'
+      }
+    },
+
+    // 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: [ 'coverage', 'karma-remap-istanbul' ],
+
+    // web server port
+    port: 4212,
+
+    // 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: true,
+
+    /*
+     * start these browsers
+     * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+     */
+    browsers: [
+      'Chrome'
+    ],
+
+    customLaunchers: {
+      ChromeTravisCi: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      },
+      'chrome': {
+        base: 'WebDriver',
+        config: webdriverConfig,
+        browserName: 'chrome',
+      },
+      'firefox': {
+        base: 'WebDriver',
+        config: webdriverConfig,
+        browserName: 'firefox',
+      }
+    },
+
+    /*
+     * Continuous Integration mode
+     * if true, Karma captures browsers, runs the tests and exits
+     */
+    singleRun: false
+  };
+
+  if (process.env.TRAVIS){
+    configuration.browsers = [
+      'ChromeTravisCi'
+    ];
+  }
+
+  config.set(configuration);
+};

package.json

@@ -49,6 +49,8 @@
     "postglobal": "npm link protractor",
     "protractor": "protractor",
     "e2e": "npm run protractor",
+    "test": "karma start",
+    "coverage": "http-server -c-1 -o -p 4211 ./coverage",
     "webdriver:start": "webdriver-manager start --seleniumPort 4444",
     "webdriver:update": "webdriver-manager update --standalone"
   },
@@ -98,6 +100,7 @@
     "@types/express": "4.0.34",
     "@types/express-serve-static-core": "4.0.39",
     "@types/hammerjs": "2.0.33",
+    "@types/jasmine": "^2.2.34",
     "@types/memory-cache": "0.0.29",
     "@types/mime": "0.0.29",
     "@types/morgan": "1.7.32",
@@ -112,12 +115,27 @@
     "cookie-parser": "1.4.3",
     "copy-webpack-plugin": "4.0.1",
     "imports-loader": "0.6.5",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~2.7.0",
     "json-loader": "0.5.4",
+    "karma": "^1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "1.8.0",
+    "karma-cli": "^1.0.1",
+    "karma-remap-istanbul": "^0.2.1",
+    "karma-webdriver-launcher": "^1.0.4",
+    "karma-phantomjs-launcher": "^1.0.2",
     "node-sass": "3.13.0",
     "nodemon": "1.11.0",
+    "protractor-istanbul-plugin": "~2.0.0",
     "raw-loader": "0.5.1",
     "reflect-metadata": "0.1.8",
     "rimraf": "2.5.4",
+    "source-map-loader": "^0.1.5",
     "string-replace-loader": "1.0.5",
     "ts-helpers": "1.1.2",
     "ts-node": "1.7.0",
@@ -130,8 +148,6 @@
     "webpack-bundle-analyzer": "1.4.1",
     "webpack-dev-middleware": "1.8.4",
     "webpack-dev-server": "2.1.0-beta.11",
-    "webpack-merge": "1.0.2",
+    "webpack-merge": "1.0.2"
-    "jasmine-spec-reporter": "~2.7.0",
-    "protractor-istanbul-plugin": "~2.0.0"
   }
 }

protractor.conf.js

@@ -12,7 +12,7 @@ exports.config = {
   // Change to 'false' to run tests using a remote Selenium server
   directConnect: true,
   // Change if the website to test is not on the localhost
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: 'http://localhost:3000/',
   // -----------------------------------------------------------------
   specs: [
     './e2e/**/*.e2e-spec.ts'
@@ -66,7 +66,7 @@ exports.config = {
   plugins : [{
     path: 'node_modules/protractor-istanbul-plugin'
   }],
-  
+
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,

spec-bundle.js

@@ -0,0 +1,62 @@
+/**
+ * @author: @AngularClass
+ */
+
+/*
+ * When testing with webpack and ES6, we have to do some extra
+ * things to get testing to work right. Because we are gonna write tests
+ * in ES6 too, we have to compile those as well. That's handled in
+ * karma.conf.js with the karma-webpack plugin. This is the entry
+ * file for webpack test. Just like webpack will create a bundle.js
+ * file for our client, when we run test, it will compile and bundle them
+ * all here! Crazy huh. So we need to do some setup
+ */
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+// Typescript emit helpers polyfill
+require('ts-helpers');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy'); // since zone.js 0.6.15
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+// RxJS
+require('rxjs/Rx');
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(
+  browser.BrowserDynamicTestingModule,
+  browser.platformBrowserDynamicTesting()
+);
+
+/*
+ * Ok, this is kinda crazy. We can use the context method on
+ * require that webpack created in order to tell webpack
+ * what files we actually want to require or import.
+ * Below, context will be a function/object with file names as keys.
+ * Using that regex we are saying look in ../src then find
+ * any file that ends with spec.ts and get its path. By passing in true
+ * we say do this recursively
+ */
+var testContext = require.context('./src/tests', true, /\.spec\.ts/);
+
+/*
+ * get all the files, for each file, call the context function
+ * that will require the file and load it up here. Context will
+ * loop and require those spec files here
+ */
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+// requires and returns all modules that match
+var modules = requireAll(testContext);

src/tests/app.component.spec.ts

@@ -0,0 +1,51 @@
+import {
+  async,
+  TestBed
+} from '@angular/core/testing';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  OnDestroy,
+  OnInit, HostListener
+} from "@angular/core";
+import { TranslateService } from "ng2-translate";
+import { HostWindowState } from "../app/shared/host-window.reducer";
+import { Store } from "@ngrx/store";
+import { HostWindowActions } from "../app/shared/host-window.actions";
+
+// Load the implementations that should be tested
+import { AppComponent } from '../app/app.component';
+
+
+describe('App', () => {
+  // provide our implementations or mocks to the dependency injector
+  /*beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      AppComponent,
+      {
+        provide: TranslateService,
+        useClass: class { dispatch = jasmine.createSpy('dispatch') }
+      },
+      {
+        provide: Store,
+        useClass: class { dispatch = jasmine.createSpy('dispatch') }
+      }
+    ]}));*/
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+});

webpack.test.config.js

@@ -0,0 +1,238 @@
+/**
+ * @author: @AngularClass
+ */
+
+const helpers = require('./helpers');
+const path = require('path');
+
+/**
+ * Webpack Plugins
+ */
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
+
+/**
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = function (options) {
+  return {
+
+    /**
+     * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
+     *
+     * Do not change, leave as is or it wont work.
+     * See: https://github.com/webpack/karma-webpack#source-maps
+     */
+    devtool: 'inline-source-map',
+
+    /**
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
+
+      /**
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: ['.ts', '.js'],
+
+      /**
+       * Make sure root is src
+       */
+      modules: [ path.resolve(__dirname, 'src'), 'node_modules' ]
+
+    },
+
+    /**
+     * Options affecting the normal modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module
+     *
+     * 'use:' revered back to 'loader:' as a temp. workaround for #1188
+     * See: https://github.com/AngularClass/angular2-webpack-starter/issues/1188#issuecomment-262872034
+     */
+    module: {
+
+      rules: [
+
+        /**
+         * Source map loader support for *.js files
+         * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+         *
+         * See: https://github.com/webpack/source-map-loader
+         */
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'source-map-loader',
+          exclude: [
+            // these packages have problems with their sourcemaps
+            helpers.root('node_modules/rxjs'),
+            helpers.root('node_modules/@angular')
+          ]
+        },
+
+        /**
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         */
+        {
+          test: /\.ts$/,
+          loader: 'awesome-typescript-loader',
+          query: {
+            // use inline sourcemaps for "karma-remap-coverage" reporter
+            sourceMap: false,
+            inlineSourceMap: true,
+            compilerOptions: {
+
+              // Remove TypeScript helpers to be injected
+              // below by DefinePlugin
+              removeComments: true
+
+            }
+          },
+          exclude: [/\.e2e\.ts$/]
+        },
+
+        /**
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader',
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Raw loader support for *.css files
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.css$/,
+          loader: ['to-string-loader', 'css-loader'],
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Instruments JS files with Istanbul for subsequent code coverage reporting.
+         * Instrument only testing sources.
+         *
+         * See: https://github.com/deepsweet/istanbul-instrumenter-loader
+         */
+        {
+          enforce: 'post',
+          test: /\.(js|ts)$/,
+          loader: 'istanbul-instrumenter-loader',
+          include: helpers.root('src'),
+          exclude: [
+            /\.(e2e|spec)\.ts$/,
+            /node_modules/
+          ]
+        }
+
+      ]
+    },
+
+    /**
+     * Add additional plugins to the compiler.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#plugins
+     */
+    plugins: [
+
+      /**
+       * Plugin: DefinePlugin
+       * Description: Define free variables.
+       * Useful for having development builds with debug logging or adding global constants.
+       *
+       * Environment helpers
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+       */
+      // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+      new DefinePlugin({
+        'ENV': JSON.stringify(ENV),
+        'HMR': false,
+        'process.env': {
+          'ENV': JSON.stringify(ENV),
+          'NODE_ENV': JSON.stringify(ENV),
+          'HMR': false,
+        }
+      }),
+
+      /**
+       * Plugin: ContextReplacementPlugin
+       * Description: Provides context to Angular's use of System.import
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+       * See: https://github.com/angular/angular/issues/11580
+       */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        helpers.root('src'), // location of your src
+        {
+          // your Angular Async Route paths relative to this root directory
+        }
+      ),
+
+       /**
+       * Plugin LoaderOptionsPlugin (experimental)
+       *
+       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+       */
+      new LoaderOptionsPlugin({
+        debug: true,
+        options: {
+
+        }
+      }),
+
+    ],
+
+    /**
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
+     *
+     * See: https://webpack.github.io/docs/configuration.html#node
+     */
+    node: {
+      global: true,
+      process: false,
+      crypto: 'empty',
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+
+  };
+}

webpack.test.js

@@ -0,0 +1,238 @@
+/**
+ * @author: @AngularClass
+ */
+
+const helpers = require('./helpers');
+const path = require('path');
+
+/**
+ * Webpack Plugins
+ */
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
+
+/**
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = function (options) {
+  return {
+
+    /**
+     * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
+     *
+     * Do not change, leave as is or it wont work.
+     * See: https://github.com/webpack/karma-webpack#source-maps
+     */
+    devtool: 'inline-source-map',
+
+    /**
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
+
+      /**
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: ['.ts', '.js'],
+
+      /**
+       * Make sure root is src
+       */
+      modules: [ path.resolve(__dirname, 'src'), 'node_modules' ]
+
+    },
+
+    /**
+     * Options affecting the normal modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module
+     *
+     * 'use:' revered back to 'loader:' as a temp. workaround for #1188
+     * See: https://github.com/AngularClass/angular2-webpack-starter/issues/1188#issuecomment-262872034
+     */
+    module: {
+
+      rules: [
+
+        /**
+         * Source map loader support for *.js files
+         * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+         *
+         * See: https://github.com/webpack/source-map-loader
+         */
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'source-map-loader',
+          exclude: [
+            // these packages have problems with their sourcemaps
+            helpers.root('node_modules/rxjs'),
+            helpers.root('node_modules/@angular')
+          ]
+        },
+
+        /**
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         */
+        {
+          test: /\.ts$/,
+          loader: 'awesome-typescript-loader',
+          query: {
+            // use inline sourcemaps for "karma-remap-coverage" reporter
+            sourceMap: false,
+            inlineSourceMap: true,
+            compilerOptions: {
+
+              // Remove TypeScript helpers to be injected
+              // below by DefinePlugin
+              removeComments: true
+
+            }
+          },
+          exclude: [/\.e2e\.ts$/]
+        },
+
+        /**
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader',
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Raw loader support for *.css files
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.css$/,
+          loader: ['to-string-loader', 'css-loader'],
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /**
+         * Instruments JS files with Istanbul for subsequent code coverage reporting.
+         * Instrument only testing sources.
+         *
+         * See: https://github.com/deepsweet/istanbul-instrumenter-loader
+         */
+        {
+          enforce: 'post',
+          test: /\.(js|ts)$/,
+          loader: 'istanbul-instrumenter-loader',
+          include: helpers.root('src'),
+          exclude: [
+            /\.(e2e|spec)\.ts$/,
+            /node_modules/
+          ]
+        }
+
+      ]
+    },
+
+    /**
+     * Add additional plugins to the compiler.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#plugins
+     */
+    plugins: [
+
+      /**
+       * Plugin: DefinePlugin
+       * Description: Define free variables.
+       * Useful for having development builds with debug logging or adding global constants.
+       *
+       * Environment helpers
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+       */
+      // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+      new DefinePlugin({
+        'ENV': JSON.stringify(ENV),
+        'HMR': false,
+        'process.env': {
+          'ENV': JSON.stringify(ENV),
+          'NODE_ENV': JSON.stringify(ENV),
+          'HMR': false,
+        }
+      }),
+
+      /**
+       * Plugin: ContextReplacementPlugin
+       * Description: Provides context to Angular's use of System.import
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+       * See: https://github.com/angular/angular/issues/11580
+       */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        helpers.root('src'), // location of your src
+        {
+          // your Angular Async Route paths relative to this root directory
+        }
+      ),
+
+       /**
+       * Plugin LoaderOptionsPlugin (experimental)
+       *
+       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+       */
+      new LoaderOptionsPlugin({
+        debug: true,
+        options: {
+
+        }
+      }),
+
+    ],
+
+    /**
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
+     *
+     * See: https://webpack.github.io/docs/configuration.html#node
+     */
+    node: {
+      global: true,
+      process: false,
+      crypto: 'empty',
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+
+  };
+}