feature(angular): upgrade to angular 1.5 and use native .component API

- rework component pattern into native component API
- add eslint
- enhance build testing targets
- run lint, mocha & karma by default
- enhance documentation

Author: tomastrajan

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "extends": "eslint-config-defaults",
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "globals": {
+    "angular": false
+  },
+  "ecmaFeatures": {
+    "modules": true
+  }
+}

README.md

@@ -1,4 +1,12 @@
-# Angular JS ES6 Module Testing Example [![Build Status](https://travis-ci.org/tomastrajan/angular-js-es6-testing-example.svg?branch=master)](https://travis-ci.org/tomastrajan/angular-js-es6-testing-example)
+# Angular JS 1.5 - ES6 Module Unit testing and Karma Integration testing seed [![Build Status](https://travis-ci.org/tomastrajan/angular-js-es6-testing-example.svg?branch=master)](https://travis-ci.org/tomastrajan/angular-js-es6-testing-example)
+
+Great seed for enterprise projects with heavy focus on unit and integration testing.
+
+This repository contains two releases:
+1. `1.0.0` - for Angular JS 1.4 and lower (uses [Component Pattern for Angular JS](https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b))
+2. `1.5.0` - for Angular JS 1.5 and abowe which supports native `.componet(name, options)` API
+
+## Info
 
 * original blog post describing [Proper testing of Angular JS 1.X applications with ES6 modules](https://medium.com/@tomastrajan/proper-testing-of-angular-js-applications-with-es6-modules-8cf31113873f)
 * [demo project](http://tomastrajan.github.io/angular-js-es6-testing-example/) with examples of mocha unit & karma integration tests
@@ -12,7 +20,7 @@
 
 1. Clone repository `git clone https://github.com/tomastrajan/angular-js-es6-testing-example.git`
 2. Enter project directory `cd angular-js-es6-testing-example`
-3. Install dependencies `npm install`
+3. Install dependencies `npm i` or `npm install`
 
 ## Scripts
 
@@ -26,5 +34,19 @@ All scripts are run with `npm run [script]`, for example: `npm run test`.
 * `server_build` - serve content from `build` directory
 * `server_dist` - serve content from `dist` directory
 
-* `test` - run all unit tests (with Mocha)
+* `lint` - lint code (with ESLint)
+* `mocha` - run all unit tests (with Mocha)
+* `watch` - run and watch all unit tests (with Mocha)
 * `karma` - run all integration tests (with Karma / Jasmine)
+* `test` - lint code and run all tests (with Mocha and Karma)
+
+* `ci` - for Travis CI
+
+# Tests
+
+For more detailed info about tests check the original [blog post](https://medium.com/@tomastrajan/proper-testing-of-angular-js-applications-with-es6-modules-8cf31113873f).
+
+
+* `*.test.js` - mocha unit tests
+* `*.integration.test.js` - mocha integration tests (manual)
+* `*.spec.js` - karma integration tests (spin up Angular JS app context)

karma.conf.js

@@ -7,8 +7,8 @@ module.exports = function(config) {
         reporters:  ['mocha'],
 
         logLevel: config.LOG_INFO,
-        autoWatch: false,
-        singleRun: true,
+        autoWatch: true,
+        singleRun: false,
         colors: true,
         port: 9876,
 
@@ -32,6 +32,9 @@ module.exports = function(config) {
                     jQuery: 'jquery'
                 })
             ]
+        },
+        webpackMiddleware: {
+            noInfo: true
         }
     });
 };

package.json

@@ -9,56 +9,59 @@
     "dist": "webpack --TARGET=DIST",
     "server_build": "node server.js",
     "server_dist": "node server.js --TARGET=DIST",
-    "test": "mocha --compilers js:babel-register ./src/**/*.test.js",
+    "lint": "eslint src/",
+    "mocha": "mocha --compilers js:babel-register ./src/**/*.test.js",
+    "watch": "mocha --compilers js:babel-register -w ./src/**/*.test.js",
     "karma": "karma start",
-    "ci": "npm run test && npm run dist"
+    "test": "npm run lint && npm run mocha && karma start --single-run",
+    "ci": "npm run lint && npm run mocha && npm run dist"
   },
   "author": "tomas.trajan@gmail.com",
   "license": "ISC",
   "dependencies": {
-    "angular": "^1.4.4",
-    "angular-animate": "^1.4",
-    "angular-highlightjs": "^0.4.3",
-    "angular-ui-bootstrap": "^0.13.4",
-    "angular-ui-router": "^0.2.15",
-    "bootstrap": "^3.3.5",
-    "highlight.js": "^8.8.0",
-    "jquery": "^2.1.4",
-    "lodash": "^3.10.1"
+    "angular": "1.5",
+    "angular-animate": "1.5",
+    "angular-ui-bootstrap": "0.13.4",
+    "angular-ui-router": "0.2.15",
+    "bootstrap": "3.3.5",
+    "jquery": "2.1.4",
+    "lodash": "3.10.1"
   },
   "devDependencies": {
-    "angular-mocks": "^1.4.7",
-    "awesome-typescript-loader": "^0.11.3",
-    "babel-core": "^6.4.0",
-    "babel-loader": "^6.2.1",
-    "babel-plugin-transform-runtime": "^6.4.3",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-register": "^6.4.3",
-    "babel-runtime": "^6.3.19",
-    "chai": "^3.2.0",
-    "chalk": "^1.1.0",
-    "clean-webpack-plugin": "^0.1.3",
-    "connect": "^3.4.0",
-    "css-loader": "^0.15.6",
-    "file-loader": "^0.8.4",
-    "html-loader": "^0.3.0",
-    "html-webpack-plugin": "^1.6.1",
-    "jasmine-core": "^2.3.4",
-    "karma": "^0.13.10",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-jasmine": "^0.3.6",
-    "karma-mocha-reporter": "^1.1.1",
-    "karma-webpack": "^1.7.0",
-    "minimist": "^1.1.3",
-    "mocha": "^2.2.5",
-    "ngtemplate-loader": "^1.3.0",
+    "angular-mocks": "1.5",
+    "awesome-typescript-loader": "0.11.3",
+    "babel-core": "6.5",
+    "babel-loader": "6.2.1",
+    "babel-plugin-transform-runtime": "6.4.3",
+    "babel-preset-es2015": "6.3.13",
+    "babel-register": "6.5",
+    "babel-runtime": "6.5",
+    "chai": "3.2.0",
+    "chalk": "1.1.0",
+    "clean-webpack-plugin": "0.1.3",
+    "connect": "3.4.0",
+    "css-loader": "0.15.6",
+    "eslint": "1.10.3",
+    "eslint-config-defaults": "8.0.2",
+    "file-loader": "0.8.4",
+    "html-loader": "0.3.0",
+    "html-webpack-plugin": "1.6.1",
+    "jasmine-core": "2.3.4",
+    "karma": "0.13.19",
+    "karma-chrome-launcher": "0.2.0",
+    "karma-jasmine": "0.3.6",
+    "karma-mocha-reporter": "1.1.1",
+    "karma-webpack": "1.7.0",
+    "minimist": "1.1.3",
+    "mocha": "2.2.5",
+    "ngtemplate-loader": "1.3.0",
     "open-browser-webpack-plugin": "0.0.2",
-    "serve-static": "^1.10.0",
-    "sinon": "^1.17.1",
-    "style-loader": "^0.12.3",
-    "typescript": "^1.5.3",
-    "url-loader": "^0.5.6",
-    "webpack": "^1.10.5",
-    "webpack-dev-server": "^1.10.1"
+    "serve-static": "1.10.0",
+    "sinon": "1.17.1",
+    "style-loader": "0.12.3",
+    "typescript": "1.5.3",
+    "url-loader": "0.5.6",
+    "webpack": "1.10.5",
+    "webpack-dev-server": "1.10.1"
   }
 }

src/app/app-component/app-component.directive.js

@@ -1,5 +1,7 @@
 export default class AppComponent {
 
-    // nothing here yet ...
+    constructor() {
+        this.name = 'Tomas';
+    }
 
-}
+}

src/app/app-component/app-component.js

@@ -8,15 +8,15 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand" ui-sref="app.feature-a">Angular JS 1.X ES6 modules testing example</a>
+                <a class="navbar-brand" ui-sref="app.feature-a">Angular JS 1.5 - ES6 Module Unit testing and Karma Integration testing seed</a>
             </div>
             <div id="navbar" class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li ui-sref-active="active"><a ui-sref="app.feature-a">Feature A</a></li>
                     <li ui-sref-active="active"><a ui-sref="app.feature-b">Feature B</a></li>
                 </ul>
                 <ul class="nav navbar-nav pull-right">
-                    <li><a href="javascript:void(0)" user-info-component></a></li>
+                    <li><user-info-component name="$ctrl.name"></user-info-component></li>
                 </ul>
             </div><!--/.nav-collapse -->
         </div>

src/app/app-component/app-component.tpl.html

@@ -5,7 +5,7 @@ export function routing($urlRouterProvider, $stateProvider) {
     $stateProvider
         .state('app', {
             abstract: true,
-            template: '<div app-component></div>'
+            template: '<app-component></app-component>'
         })
 
 }

src/app/app.config.js

@@ -2,10 +2,12 @@ import angular from 'angular';
 import uirouter from 'angular-ui-router';
 
 import { routing } from './app.config.js';
-import appComponent from './app-component/app-component.directive';
+
+import AppComponent from './app-component/app-component';
+import template from './app-component/app-component.tpl.html';
 
 export default angular
     .module('main.app', [uirouter])
     .config(routing)
-    .directive('appComponent', appComponent)
+    .component('appComponent', { controller: AppComponent, template })
     .name;

src/app/app.module.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
-import userInfoComponent from './component/user-info-component';
+import UserInfoComponent from './component/user-info-component';
 
 export default angular
     .module('main.app.common', [])
-    .directive('userInfoComponent', userInfoComponent)
+    .component('userInfoComponent', UserInfoComponent)
     .name;