unit test modified

helpers.js

@@ -4,7 +4,7 @@
 var path = require('path');
 
 // Helper functions
-var ROOT = path.resolve(__dirname, '..');
+var ROOT = path.resolve(__dirname, '.');
 
 function hasProcessFlag(flag) {
   return process.argv.join('').indexOf(flag) > -1;

karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function(config) {
   var webdriverConfig = {
     hostname: 'localhost',
     port: 4444
-  }
+  };
 
   var configuration = {
 
@@ -70,9 +70,6 @@ module.exports = function(config) {
     },
 
     remapIstanbulReporter: {
-      remapOptions: {
-        basePath: './src/app'
-      },
       reports: {
         html: 'coverage'
       }
@@ -125,13 +122,13 @@ module.exports = function(config) {
       'SeleniumChrome': {
         base: 'WebDriver',
         config: webdriverConfig,
-        browserName: 'chrome',
+        browserName: 'chrome'
       },
       // Remote Selenium Server with Firefox - launcher
       'SeleniumFirefox': {
         base: 'WebDriver',
         config: webdriverConfig,
-        browserName: 'firefox',
+        browserName: 'firefox'
       }
     },
 

package.json

@@ -12,11 +12,11 @@
     "clean:node": "rimraf node_modules/*",
     "clean:ngc": "rimraf **/*.ngfactory.ts",
     "clean:json": "rimraf *.records.json",
-    "clean:css": "rimraf **/*.css",
+    "clean:css": "rimraf src/**/*.css",
-    "clean:css:ts": "rimraf **/*.css.ts",
+    "clean:css:ts": "rimraf src/**/*.css.ts",
-    "clean:scss:ts": "rimraf **/*.scss.ts",
+    "clean:scss:ts": "rimraf src/**/*.scss.ts",
-    "clean:css:shim:ts": "rimraf **/*.css.shim.ts",
+    "clean:css:shim:ts": "rimraf src/**/*.css.shim.ts",
-    "clean:scss:shim:ts": "rimraf **/*.scss.shim.ts",
+    "clean:scss:shim:ts": "rimraf src/**/*.scss.shim.ts",
     "clean:coverage": "rimraf coverage",
     "clean:prod": "npm run clean:ngc && npm run clean:json && npm run clean:css && npm run clean:css:ts && npm run clean:scss:ts && npm run clean:css:shim:ts && npm run clean:scss:shim:ts && npm run clean:dist",
     "clean": "npm run clean:log && npm run clean:dist && npm run clean:prod && npm run clean:coverage && npm run clean:node",
@@ -51,7 +51,7 @@
     "protractor": "protractor",
     "e2e": "npm run protractor",
     "test": "karma start",
-    "coverage": "http-server -c-1 -o -p 4211 ./coverage",
+    "coverage": "http-server -c-1 -o ./coverage",
     "webdriver:start": "webdriver-manager start --seleniumPort 4444",
     "webdriver:update": "webdriver-manager update --standalone"
   },
@@ -119,7 +119,7 @@
     "css-loader": "^0.26.0",
     "html-webpack-plugin": "^2.21.0",
     "imports-loader": "0.6.5",
-    "istanbul-instrumenter-loader": "1.1.0",
+    "istanbul-instrumenter-loader": "^0.2.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~2.7.0",
     "json-loader": "0.5.4",
@@ -130,7 +130,7 @@
     "karma-jasmine": "^1.0.2",
     "karma-mocha-reporter": "^2.0.0",
     "karma-phantomjs-launcher": "^1.0.2",
-    "karma-remap-istanbul": "^0.4.0",
+    "karma-remap-istanbul": "^0.2.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webdriver-launcher": "^1.0.4",
     "karma-webpack": "1.8.0",

spec-bundle.js

@@ -47,7 +47,7 @@ testing.TestBed.initTestEnvironment(
  * 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', true, /\.spec\.ts/);
+var testContext = require.context('./src/tests', true, /\.spec\.ts/);
 
 /*
  * get all the files, for each file, call the context function

src/tests/app.component.spec.ts

@@ -1,3 +1,4 @@
+// ... test imports
 import {
   async,
   ComponentFixture,
@@ -6,6 +7,7 @@ import {
 } from '@angular/core/testing';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement
 } from "@angular/core";
 import { TranslateModule } from "ng2-translate";
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
@@ -16,24 +18,20 @@ import { Store } from "@ngrx/store";
 import { AppComponent } from '../app/app.component';
 import { HeaderComponent } from '../app/header/header.component';
 
+import { CommonModule } from '@angular/common';
 
-describe('App', () => {
+let comp:    AppComponent;
-  // provide our implementations or mocks to the dependency injector
+let fixture: ComponentFixture<AppComponent>;
-  /*beforeEach(() => TestBed.configureTestingModule({
+let de:      DebugElement;
-    providers: [
+let el:      HTMLElement;
-      AppComponent,
+
-      {
+
-        provide: TranslateService,
+describe('greeting component', () => {
-        useClass: class { dispatch = jasmine.createSpy('dispatch') }
-      },
-      {
-        provide: Store,
-        useClass: class { dispatch = jasmine.createSpy('dispatch') }
-      }
-    ]}));*/
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
+      imports: [ CommonModule, TranslateModule.forRoot(), NgbCollapseModule.forRoot()],
+      declarations: [ AppComponent, HeaderComponent ], // declare the test component
       providers: [
         AppComponent,
         {
@@ -41,54 +39,15 @@ describe('App', () => {
           useClass: class { dispatch = jasmine.createSpy('dispatch') }
         }
       ],
-      declarations: [
-        HeaderComponent
-      ],
-      imports: [TranslateModule.forRoot(), NgbCollapseModule.forRoot()],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    }).compileComponents().then(() => {
+      fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
     });
-    TestBed.compileComponents();
   });
 
-  /*it('should create the app', async(() => {
+  it('should create component', inject([AppComponent], (app: AppComponent) => {
-    let fixture = TestBed.createComponent(AppComponent);
+    // Perform test using fixture and service
-    let app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));*/
-
-  it('should create the app', inject([ AppComponent ], (app: AppComponent) => {
     expect(app).toBeTruthy();
   }));
-
- /* beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      providers: [
-        {
-          provide: TranslateService,
-          useClass: class { dispatch = jasmine.createSpy('dispatch') }
-        },
-        {
-          provide: Store,
-          useClass: class { dispatch = jasmine.createSpy('dispatch') }
-        }
-      ]
 });
-  });*/
-
-  /*it('should create component', async(() => {
-    TestBed.compileComponents().then(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-
-      // Access the dependency injected component instance
-      const app = fixture.componentInstance;
-
-      // Perform test using fixture and service
-      expect(true).toBe(true);
-    });
-  }));*/
-
-  it('true is true', () => expect(true).toBe(true));
-
-});
-

webpack.test.js

@@ -1,238 +0,0 @@
-/**
- * @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
-    }
-
-  };
-}