Merge branch 'master' of https://github.com/microting/eform-angular-frontend

Author: renemadsen

README.md

@@ -20,9 +20,39 @@ You need to create an account for Microting API and get your access credentials.
 
 ## Development recommendations
 
-  - Visual Studio 2015
-  - MS SQL Server Management Studio
-  - Node.js
+To work with back-end use <a href="https://www.visualstudio.com/vs/community/">**Visual Studio 2017 Community edition**</a>.
+
+To work with Angular front-end code recommended to use <a href="https://www.jetbrains.com/webstorm/">**WebStorm**</a> or <a href="https://code.visualstudio.com">**VS Code**</a>. If you're going to use VS Code you're need to install several plugins.
+
+1. <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials"> Angular Essentials</a>  - for Angular intellisense.
+2. <a href="https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode">Angular Snippets</a>  - for Angular snippets.
+3. <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials"> Angular Language Service</a> 
+4. <a href="https://augury.angular.io/"> Chrome Augury extention</a> - to observe variables and changes in a real time.
+
+After installing, run **cmd** navigate to front-end **eform-client** folder and type **npm i**, after that **npm start**. This will start **Webpack** development server that will reload on any change in the front-end code.
+
+There is two ways how to debug Angular application. 
+First way is to put breakpoints in the **Sources**. To do that Open **Chrome Dev Tools** and then navigate to **Sources** tab. Go down and open **webpack://** tab from left panel. After that open tab with *disk_name:/app_folder/eform-client* (for example *C:/Users/MyUser/eForm/eform-client/*). Here you will see an entire application as you see it in **VS Code** and put a **debugger** where you're need it.
+The second way is simple, you can just put a **debugger** word dirrectly in code. After that app will reload and with open **Chrome Dev Tools** on the function call **debugger** will be triggered. 
+For example **debugger** will be triggered on click *Logout* button:
+
+```
+logout(): Observable<any> {
+debugger;
+     return this.post(AuthMethods.Logout, {});
+   }
+```
+
+To use **Augury** go to **Chrome Dev Tools** and navigate to this tab. 
+The component tree displays a hierarchical relationship of the components. When a component is selected, Augury presents additional information about the selected component.
+
+1) View Source — a link to the source code of the component.
+2) Change Detection — displays whether or not Change Detection is in use for the component.
+3) Object Properties — lists the properties of the component.
+4) Dependencies - lists the dependencies of the component.
+
+To view the source code of the selected component, click the **View Source** link. This will bring the **Sources** tab into focus and display the source code.
+The major feature of Augury is the Router Tree, which displays the routing information for the application. The **Router Tree** tab is located next to the **Component Tree** tab along the top left side.
 
 
 ## Installation

eform-client/.gitignore

@@ -35,6 +35,9 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
+# Tests
+/test-output
+
 #System Files
 .DS_Store
 Thumbs.db

eform-client/gulpfile.js

@@ -0,0 +1,13 @@
+const Server = require('karma').Server;
+const path = require('path');
+const gulp = require('gulp');
+
+gulp.task("tests", function (done) {
+	new Server({
+		configFile: path.join(__dirname, 'karma.conf.js'),
+		singleRun: true,
+	}, function(exitCode) {
+		process.exit(exitCode); // <-- this is the important part
+		done(exitCode);
+	}).start();
+});

eform-client/karma.conf.js

@@ -4,41 +4,61 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
+
     frameworks: ['jasmine', '@angular/cli'],
+
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
+      require('karma-phantomjs-launcher'),
+      require('karma-junit-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [{
+
+
+    /*files: [{
       pattern: './src/test.ts',
       watched: false
-    }],
+    }],*/
+
+    files: [
+      './src/*-test.ts',
+      './src/test.ts'
+    ],
+
     preprocessors: {
       './src/test.ts': ['@angular/cli']
     },
+
+
     mime: {
       'text/x-typescript': ['ts', 'tsx']
+
+
     },
     remapIstanbulReporter: {
       reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
+        html: './test-output/coverage',
+        lcovonly: './test-output/coverage.lcov'
       }
     },
+
     angularCli: {
       config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage ?
-      ['progress', 'karma-remap-istanbul'] :
-      ['progress'],
-    port: 9876,
+
+    junitReporter: {
+      outputDir: 'test-output',
+      outputFile: 'unit.xml',
+      suite: 'unit'
+    },
+
+    reporters: ['progress', 'karma-remap-istanbul', 'junit'],
     colors: true,
     logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
+    browsers: ['PhantomJS'],
+    singleRun: true
   });
 };

eform-client/package.json

@@ -12,7 +12,8 @@
     "build": "ng build --env=prod",
     "server": "node server.js",
     "winserver-install": "node svc.js install",
-    "winserver-uninstall": "node svc.js uninstall"
+    "winserver-uninstall": "node svc.js uninstall",
+    "test-single-headless": "ng test --single-run=true --browsers=PhantomJS --reporters=progress,junit"
   },
   "private": true,
   "dependencies": {
@@ -55,14 +56,20 @@
     "@angular/compiler-cli": "^4.2.4",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
+    "angular-mocks": "^1.6.8",
     "codelyzer": "~2.0.0",
+    "gulp": "^3.9.1",
     "jasmine-core": "2.5.2",
     "jasmine-spec-reporter": "2.5.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
+    "karma-junit-reporter": "^1.2.0",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-remap-istanbul": "^0.6.0",
+    "path": "^0.12.7",
+    "phantomjs-prebuilt": "^2.1.16",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",

eform-client/readme.md

@@ -0,0 +1,5 @@
+# Test
+
+Run tests by executing 'gulp tests'.
+
+If gulp is not available install gulp globally in your cli by running `npm install --global gulp-cli`