Feature/link

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components/"
+}

.gitignore

@@ -1,2 +1,3 @@
 bower_components
 node_modules
+coverage

angular-progress-arc.js

@@ -2,9 +2,8 @@
 
     'use strict';
 
-    var app = angular.module('angular-progress-arc', []);
-
-    app.provider('progressArcDefaults', function () {
+    angular.module('angular-progress-arc', [])
+    .provider('progressArcDefaults', function () {
 
         var defaults = {
             size: 200,
@@ -27,9 +26,8 @@
                 });
             };
         };
-    });
-
-    app.directive('progressArc', ['progressArcDefaults', function (progressArcDefaults) {
+    })
+    .directive('progressArc', ['progressArcDefaults', function (progressArcDefaults) {
         return {
             restrict: 'E',
             scope: {
@@ -40,41 +38,38 @@
                 complete:         '&', // Expression evaluating to float [0.0, 1.0]
                 background:       '@'  // Color of the background ring. Defaults to null.
             },
-            compile: function (element, attr) {
-
-                progressArcDefaults(attr);
+            link: function (scope, element, attr) {
+                progressArcDefaults(scope);
 
-                return function (scope, element, attr) {
-                    // Firefox has a bug where it doesn't handle rotations and stroke dashes correctly.
-                    // https://bugzilla.mozilla.org/show_bug.cgi?id=949661
-                    scope.offset = /firefox/i.test(navigator.userAgent) ? -89.9 : -90;
-                    var updateRadius = function () {
-                        scope.strokeWidthCapped = Math.min(scope.strokeWidth, scope.size / 2 - 1);
-                        scope.radius = Math.max((scope.size - scope.strokeWidthCapped) / 2 - 1, 0);
-                        scope.circumference = 2 * Math.PI * scope.radius;
-                    };
-                    scope.$watchCollection('[size, strokeWidth]', updateRadius);
-                    updateRadius();
+                // Firefox has a bug where it doesn't handle rotations and stroke dashes correctly.
+                // https://bugzilla.mozilla.org/show_bug.cgi?id=949661
+                scope.offset = /firefox/i.test(navigator.userAgent) ? -89.9 : -90;
+                var updateRadius = function () {
+                    scope.strokeWidthCapped = Math.min(scope.strokeWidth, scope.size / 2 - 1);
+                    scope.radius = Math.max((scope.size - scope.strokeWidthCapped) / 2 - 1, 0);
+                    scope.circumference = 2 * Math.PI * scope.radius;
                 };
+                scope.$watchCollection('[size, strokeWidth]', updateRadius);
+                updateRadius();
             },
             template:
                 '<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}">' +
-                    '<circle class="ngpa-background" fill="none" ' +
+                    '<circle fill="none" ' +
                         'ng-if="background" ' +
                         'ng-attr-cx="{{size/2}}" ' +
                         'ng-attr-cy="{{size/2}}" ' +
                         'ng-attr-r="{{radius}}" ' +
-                        'ng-attr-stroke="{{background}}" ' +
-                        'ng-attr-stroke-width="{{strokeWidthCapped}}"' +
+                        'stroke="{{background}}" ' +
+                        'stroke-width="{{strokeWidthCapped}}"' +
                         '/>' +
-                    '<circle class="ngpa-progress" fill="none" ' +
+                    '<circle fill="none" ' +
                         'ng-attr-cx="{{size/2}}" ' +
                         'ng-attr-cy="{{size/2}}" ' +
                         'ng-attr-r="{{radius}}" ' +
-                        'ng-attr-stroke="{{stroke}}" ' +
-                        'ng-attr-stroke-width="{{strokeWidthCapped}}"' +
-                        'ng-attr-stroke-dasharray="{{circumference}}"' +
-                        'ng-attr-stroke-dashoffset="{{(1 - complete()) * circumference}}"' +
+                        'stroke="{{stroke}}" ' +
+                        'stroke-width="{{strokeWidthCapped}}"' +
+                        'stroke-dasharray="{{circumference}}"' +
+                        'stroke-dashoffset="{{(1 - complete()) * circumference}}"' +
                         'ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}})' +
                             '{{ (counterClockwise && counterClockwise != \'false\') ? \' translate(0, \' + size + \') scale(1, -1)\' : \'\' }}"' +
                         '/>' +

bower.json

@@ -27,5 +27,8 @@
   ],
   "dependencies": {
     "angular": ">=1.2.19"
+  },
+  "devDependencies": {
+    "angular-mocks": "^1.5.0"
   }
 }

karma.conf.js

@@ -0,0 +1,54 @@
+module.exports = function(config) {
+  'use strict';
+
+  config.set({
+    basePath: '',
+    files: [
+      'bower-components/angular/angular.js',
+      'bower-components/angular-mocks/angular-mocks.js',
+      'angular-progress-arc.js',
+      'test/**/*.js'
+    ],
+    browsers: [
+      'PhantomJS'
+    ],
+    frameworks: [
+      'jasmine'
+    ],
+    reporters: [
+      'dots',
+      'coverage'
+    ],
+    preprocessors: {
+      'angular-progress-arc.js': ['coverage']
+    },
+    plugins: [
+      'karma-phantomjs-launcher',
+      'karma-coverage',
+      'karma-jasmine',
+      'karma-junit-reporter'
+    ],
+    notifyReporter: {
+      reportEachFailure: true,
+      reportSuccess: false
+    },
+    coverageReporter: {
+      reporters: [
+        {
+          type: 'html',
+          subdir: 'report-html'
+        },
+        {
+          type: 'lcov',
+          subdir: 'report-lcov'
+        },
+        {
+          type: 'text-summary',
+          subdir: 'report-summary',
+          file: 'text-summary.txt'
+        }
+      ]
+    }
+  });
+};
+

package.json

@@ -6,6 +6,11 @@
   "directories": {
     "example": "example"
   },
+  "scripts": {
+    "pretest": "npm install && node_modules/.bin/bower install --allow-root",
+    "test": "node_modules/karma/bin/karma start karma.conf.js --no-auto-watch --single-run --reporters 'coverage,dots'",
+    "test-watch": "node_modules/karma/bin/karma start karma.conf.js --auto-watch"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/mathewbyrne/angular-progress-arc.git"
@@ -27,9 +32,14 @@
   },
   "homepage": "http://mathewbyrne.github.io/angular-progress-arc/",
   "devDependencies": {
-      "grunt": "~0.4.5",
-      "grunt-contrib-uglify": "~0.5.0",
-      "grunt-contrib-jshint": "~0.10.0"
+    "bower": "^1.7.7",
+    "grunt": "~0.4.5",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-uglify": "~0.5.0",
+    "karma-coverage": "^0.5.3",
+    "karma-jasmine": "^0.3.7",
+    "karma-junit-reporter": "^0.3.8",
+    "karma-phantomjs-launcher": "^1.0.0"
   },
   "dependencies": {
     "angular": ">=1.2.19"

test/progressArc.js

@@ -0,0 +1,50 @@
+describe('progressArc', function() {
+    'use strict';
+
+    beforeEach(module('angular-progress-arc'));
+
+    var $compile;
+    var $rootScope;
+    var $httpBackend;
+    beforeEach(inject(function(_$compile_, _$rootScope_, _$httpBackend_){
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+    }));
+
+    afterEach(function() {
+        $httpBackend.verifyNoOutstandingExpectation();
+        $httpBackend.verifyNoOutstandingRequest();
+    });
+
+    it('should inject an svg with the children', function() {
+        var $scope = $rootScope.$new();
+        var element = $compile('<progress-arc></progress-arc>')($scope);
+        $rootScope.$digest();
+        expect(element[0].getElementsByTagName('svg').length).toEqual(1);
+        expect(element[0].getElementsByTagName('circle').length).toEqual(1);
+    });
+
+    it('should display the background circle if the background attr is provided', function() {
+        var $scope = $rootScope.$new();
+        var element = $compile('<progress-arc background="\'black\'"></progress-arc>')($scope);
+        $rootScope.$digest();
+        expect(element[0].getElementsByTagName('svg').length).toEqual(1);
+        expect(element[0].getElementsByTagName('circle').length).toEqual(2);
+    });
+
+    it('should update the stroke-dashoffset when complete is updated', function() {
+        var $scope = $rootScope.$new();
+        $scope.complete = 0.5;
+        var element = $compile('<progress-arc complete="complete"></progress-arc>')($scope);
+        $rootScope.$digest();
+        var circle = angular.element(element[0].getElementsByTagName('circle'));
+        expect(parseFloat(circle.attr('stroke-dashoffset'))).toBeGreaterThan(279.0);
+
+        $scope.complete = 1.0;
+        $rootScope.$digest();
+        circle = angular.element(element[0].getElementsByTagName('circle'));
+        expect(circle.attr('stroke-dashoffset')).toEqual('0');
+    });
+});
+

test/progressArcDefaults.js

@@ -0,0 +1,14 @@
+describe('progressArcDefaults', function() {
+    'use strict';
+
+    beforeEach(module('angular-progress-arc'));
+
+    it('should set values appropriately', inject(function(progressArcDefaults) {
+        var target = {};
+        progressArcDefaults(target);
+        expect(target.size).toEqual(200);
+        expect(target.strokeWidth).toEqual(20);
+        expect(target.stroke).toEqual('black');
+        expect(target.background).toBeNull();
+    }));
+});