Add test coverage for protractor and ability to combine reports with

Karma. Add some base karma tests and update readme.

Author: skrustev

.gitignore

@@ -2,4 +2,5 @@ node_modules
 bower_components
 dist
 test_out
-coverage
+coverage
+instrument

.travis.yml

@@ -13,5 +13,8 @@ before_install:
 script:
   - npm run start
   - sleep 3
+  - npm run instrument
   - npm run test-single
-  - npm run protractor
+  - npm run protractor
+  - npm run cover-combined
+  - cat ./coverage/final/lcov.info | coveralls

README.md

@@ -1,6 +1,8 @@
 #Ignite UI directives for AngularJS
 
-[![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular) [![Codacy Badge](https://api.codacy.com/project/badge/grade/f7b38e525b504be0aabc891079530521)](https://www.codacy.com/app/kdinev/igniteui-angular)
+[![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular)
+[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)
+[![Codacy Badge](https://api.codacy.com/project/badge/grade/f7b38e525b504be0aabc891079530521)](https://www.codacy.com/app/kdinev/igniteui-angular)
 
 Use the directives found in `igniteui-angular.js` to use [Ignite UI](http://igniteui.com) controls in [AngularJS](http://angularjs.com) pages. [Work with the running samples here](http://igniteui.github.io/igniteui-angular).
 
@@ -150,7 +152,11 @@ Simply do:
 
 	npm install
 
-The command is preconfigured and it will also call `bower install` behind the scenes.
+The command is preconfigured and it will also call `bower install` behind the scenes. 
+
+Then you need to instrument the source file with:
+
+	npm run instrument
 
 ####Running Unit Tests
 The easiest way to run the unit tests is to use the npm script:
@@ -190,6 +196,25 @@ Running the tests is done with:
 
 **Note:** You will need to run the protractor on a separate bash
 
+###Code coverage
+After running the Karma or Protractor tests by default a coverage will be created for each of them.
+
+To combine the both reports into one single report you need to execute:
+
+	npm run cover-combined
+	
+After that the default directory where you can open the code coverage is igniteui-angular/coverage/final/lcov/src.
+
+**Running specific coverage:** 
+
+To view only the Karma coverage you can see it under *coverage/karma/**/lcov-report/src*. 
+
+To view the code coverage only for the Protractor you need to run the command:
+
+	npm run cover-protractor
+
+After that the location is the same(igniteui-angular/coverage/final/lcov/src). That is because the Protractor report is not easily readable by default.
+
 ---------------------------------------
 
 ##What is Ignite UI?

package.json

@@ -2,27 +2,33 @@
   "name": "igniteui-angular",
   "dependencies": {},
   "devDependencies": {
+    "mkdirp": "",
     "coveralls": "",
     "grunt": "",
     "grunt-contrib-jshint": "",
     "grunt-contrib-uglify": "",
     "grunt-contrib-watch": "",
     "jshint-stylish": "",
     "protractor": "",
+    "protractor-istanbul-plugin": "",
     "http-server": "",
     "bower": "",
     "shelljs": "",
+    "istanbul-coveralls": "",
     "karma": "",
     "karma-jasmine": "",
     "karma-coverage": "",
     "karma-chrome-launcher": "",
     "karma-firefox-launcher": "",
     "karma-junit-reporter": ""
-
   },
   "scripts": {
     "postinstall": "bower install",
-
+	"instrument": "istanbul instrument ./src/ -o ./instrument/",
+	
+	"cover-protractor": "rm -rf coverage/tmp && mkdirp coverage/tmp/ && cp coverage/protractor/*.json coverage/tmp/ && istanbul report --include=./coverage/tmp/*.json -dir coverage/final",
+	"cover-combined": "rm -rf coverage/tmp && mkdirp coverage/tmp/ && cp coverage/karma/**/coverage*.json coverage/tmp/ && cp coverage/protractor/*.json coverage/tmp/ && istanbul report --include=./coverage/tmp/*.json -dir coverage/final",
+	
     "prestart": "npm install",
     "start": "http-server -a localhost -p 8000 &",
 

test/app/index.html

@@ -141,7 +141,8 @@ <h1>igEditors</h1>
 
 		<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
 		<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
-		<script type="text/javascript" src="../../src/igniteui-angular.js"></script>
+		<!-- <script type="text/javascript" src="../../src/igniteui-angular.js"></script> -->
+		<script type="text/javascript" src="../../instrument/igniteui-angular.js"></script>
 		<script type="text/javascript" src="js/my-app-utils.js"></script>
 		<script type="text/javascript" src="js/my-app.js"></script>
 	</body>

test/karma.conf.js

@@ -37,8 +37,8 @@ module.exports = function(config){
 
 		coverageReporter: {
 			reporters:[
-				{ type: 'lcov', dir:'coverage/' },
-				{ type: 'json', dir:'coverage/', file: 'coverage.json' },
+				{ type: 'lcov', dir:'coverage/karma/' },
+				{ type: 'json', dir:'coverage/karma/', file: 'coverage.json' },
 			],
 		},
 

test/protractor-conf.js

@@ -2,12 +2,17 @@ var cfg = {
 
 	allScriptsTimeout: 11000,
 
+	plugins : [{
+		path: "../node_modules/protractor-istanbul-plugin",
+		outputPath: "coverage/protractor"
+    }],
+	
 	specs: [
 		"e2e/*.js"
 	],
 	//chromeOnly: true, //https://github.com/angular/protractor/issues/187
-	capabilities: {
-		"browserName": "chrome"
+	capabilities: { 
+		'browserName': "chrome"
 	},
 
 	baseUrl: "http://localhost:8000/test/app/",
@@ -21,7 +26,7 @@ var cfg = {
 
 if (process.env.TRAVIS) {
 	cfg.capabilities.chromeOptions = {
-			'args': ['--no-sandbox']
+			'args': ["--no-sandbox"]
 		};
 }
 

test/unit/directiveSpecs.js

@@ -104,7 +104,7 @@ describe('Ignite directives', function() {
 	}));
 
 	it('should create tree', inject(function($compile, $rootScope) {
-		var treeTpl ='<ig-tree id="tree1" data-source="ProductCategories">';
+		var treeTpl ='<ig-tree id="tree1" data-source="ProductCategories">' +
 		'<bindings child-data-property="ProductSubcategories" text-key="Name" value-key="ProductCategoryID"></bindings>' +
 		'</ig-tree>';
 		var tree = angular.element('<div ng-app="my-app"><div ng-controller="NorthwindCtrl">' + treeTpl + '</div>');
@@ -116,4 +116,40 @@ describe('Ignite directives', function() {
 		expect(treeElement.data('igTree')).not.toBeUndefined();
 		expect(treeElement.data('igTree').options.bindings.constructor).toBe(Object);
 	}));
+	
+	it('should create data chart', inject(function($compile, $rootScope) {
+		var dataChartTpl ='<ig-data-chart id="datachart1" data-source="dataChart">' +
+            '<axes><axis name="NameAxis" type="categoryX" title="Country" label="CountryName"></axis>' +
+            '<axis name="PopulationAxis" type="numericY"  minimumvalue="0" title="Milions of People"></axis></axes>' +
+            '<series><series name="2015Population" type="column" is-highlighting-enabled="true" is-transition-in-enabled="true" x-axis="NameAxis" y-axis="PopulationAxis" value-member-path="Pop2015">' +
+			'</series></series></ig-data-chart>';
+		var dataChart = angular.element('<div ng-app="my-app"><div ng-controller="NorthwindCtrl">' + dataChartTpl + '</div>');
+		var scope = $rootScope.$new();
+		$compile(dataChart)(scope);
+		scope.$digest();
+		var dataChartElement = dataChart.find('#datachart1');
+		expect(dataChartElement.length).toBe(1);
+		expect(dataChartElement.data('igDataChart')).not.toBeUndefined();
+	}));
+	
+	it('should create hierarchical grid', inject(function($compile, $rootScope) {
+		var hierarchicalGridTpl ='<ig-hierarchical-grid id="hgrid1"  data-source="northwindEmployees" width="100%" height="400px" auto-commit="true" auto-generate-columns="false" auto-generate-layouts="false">' +
+            '<columns> <column key="FirstName" header-text="First Name" width="25%" data-type="string"></column>' +
+				'<column key="LastName" header-text="Last Name"  width="25%"  data-type="string"></column>' +
+				'<column key="Title" header-text="Title"  width="25%" data-type="string"></column>' +
+				'<column key="BirthDate" header-text="Birth Date"  width="25%" data-type="date"></column></columns>' +
+				'<column-layouts><column-layout key="Orders" response-data-key="results" primary-key="OrderID" auto-generate-columns="false" width="100%">' +
+            '<columns><column key="OrderID" header-text="OrderID" width="25%" data-type="string"></column>' +
+				'<column key="Freight" header-text="Freight"  width="25%"  data-type="string"></column>' +
+				'<column key="ShipName" header-text="ShipName"  width="25%" data-type="string"></column>' +
+				'<column key="ShipAddress" header-text="ShipAddress"  width="25%" data-type="string"></column></columns>' +
+             '<features><feature name="Paging" page-size="10"></feature></features></column-layout></column-layouts>ig-hierarchical-grid>';
+		var hierarchicalGrid = angular.element('<div ng-app="my-app"><div ng-controller="NorthwindCtrl">' + hierarchicalGridTpl + '</div>');
+		var scope = $rootScope.$new();
+		$compile(hierarchicalGrid)(scope);
+		scope.$digest();
+		var hGridElement = hierarchicalGrid.find('#hgrid1');
+		expect(hGridElement.length).toBe(1);
+		expect(hGridElement.data('igHierarchicalGrid')).not.toBeUndefined();
+	}));
 });