continue upgrad to ng4; basic webpack test usage setup

project-manager/.angular-cli.json

@@ -1,6 +1,6 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.25.5",
     "name": "sprachkern"
   },
   "apps": [
@@ -13,20 +13,18 @@
       ],
       "index": "index.html",
       "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "mobile": false,
       "styles": [
         "styles.css",
         "../node_modules/jquery-ui-bundle/jquery-ui.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css"
-
-
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
-        "../node_modules/jquery-ui-bundle/jquery-ui.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],
       "environmentSource": "environments/environment.ts",
@@ -37,13 +35,22 @@
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
@@ -51,18 +58,6 @@
   },
   "defaults": {
     "styleExt": "css",
-    "prefixInterfaces": false,
+    "component": {}
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
   }
 }

project-manager/karma.conf.js

@@ -10,12 +10,18 @@ module.exports = function(config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', '@angular/cli'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('@angular/cli/plugins/karma')
+    ],
 
 
     // list of files / patterns to load in the browser
     files: [
-      './src/**/*.spec.ts'
+      './src/test.ts'
     ],
 
 
@@ -33,6 +39,8 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
+      './src/test.ts': ['@angular/cli']
+
     },
 
 

project-manager/src/app/blog/blog.component.spec.ts

@@ -0,0 +1,9 @@
+import {BlogComponent} from './blog.component'
+
+describe('', () => {
+
+  it('', () => {
+
+  });
+
+});

project-manager/src/app/test-example/basic-test.spec.ts

@@ -10,7 +10,7 @@ describe('Basic test', () => {
   });
 
   // Testfall 1
-  it('should succeed on fundamental matchers', () => {
+  it('should succeed on most commonly used matchers', () => {
     expect(1+1).toBe(2)
     expect(null).toEqual(null);
     expect('Hello world').toContain('Hello');
@@ -23,13 +23,14 @@ describe('Basic test', () => {
   });
 
   //Testfall 2
-  it('someInt should have value from beforeEach', () => {
+  it('someInt should have value from beforeEach()', () => {
     expect(someInt).toBe(2);
     someInt = 20;
+    expect(someInt).toBe(20);
   });
 
   // Testfall 3
-  it('someInt should have overwritten value from beforeEach', () => {
+  it('someInt should have overwritten value from beforeEach()', () => {
     expect(someInt).toBe(2);
   });
 

project-manager/src/environments/environment.ts

@@ -1,7 +1,7 @@
 // The file contents for the current environment will overwrite these during build.
 // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `angular-cli.json`.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
   production: false,

project-manager/src/main.ts

@@ -1,11 +1,9 @@
-import "./polyfills.ts";
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { platformBrowser }    from '@angular/platform-browser';
-
 import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
 
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/retryWhen';
@@ -34,4 +32,3 @@ if (environment.production) {
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-

project-manager/src/polyfills.ts

@@ -1,19 +1,68 @@
-// This file includes polyfills needed by Angular and is loaded before
+/**
-// the app. You can add your own extra polyfills to this file.
+ * This file includes polyfills needed by Angular and is loaded before the app.
-import 'core-js/es6/symbol';
+ * You can add your own extra polyfills to this file.
-import 'core-js/es6/object';
+ *
-import 'core-js/es6/function';
+ * This file is divided into 2 sections:
-import 'core-js/es6/parse-int';
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
-import 'core-js/es6/parse-float';
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
-import 'core-js/es6/number';
+ *      file.
-import 'core-js/es6/math';
+ *
-import 'core-js/es6/string';
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
-import 'core-js/es6/date';
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
-import 'core-js/es6/array';
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
-import 'core-js/es6/regexp';
+ *
-import 'core-js/es6/map';
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
-import 'core-js/es6/set';
+ */
-import 'core-js/es6/reflect';
 
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

project-manager/src/test.ts

@@ -0,0 +1,35 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+import 'rxjs/Rx';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

project-manager/src/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+  "lib": [
+    "es2016",
+    "dom"
+  ],
+    "outDir": "../out-tsc/app",
+    "target": "es5",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

project-manager/src/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es6",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts"
+  ]
+}

project-manager/src/typings.d.ts

@@ -0,0 +1,4 @@
+/* SystemJS module definition */
+declare var module: {
+  id: string;
+};

project-manager/tsconfig.json

@@ -1,18 +1,16 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "mapRoot": "./",
-    "module": "es6",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
-    "sourceMap": true,
     "target": "es5",
-    "typeRoots": [
+    "lib": [
-      "../node_modules/@types"
+      "es2016",
+      "dom"
     ]
   }
 }