From f37cbc8ffa7facedef29d2571fbcd5c6da498f30 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Wed, 17 Feb 2016 10:39:12 +0800 Subject: [PATCH 1/9] Changed compile to link as former was not working in angular 1.4.9 --- angular-progress-arc.js | 57 +++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/angular-progress-arc.js b/angular-progress-arc.js index 5213e77..c7aa693 100644 --- a/angular-progress-arc.js +++ b/angular-progress-arc.js @@ -40,42 +40,39 @@ complete: '&', // Expression evaluating to float [0.0, 1.0] background: '@' // Color of the background ring. Defaults to null. }, - compile: function (element, attr) { + link: function (scope, element, attr) { + progressArcDefaults(scope); - progressArcDefaults(attr); - - 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: - '' + - '' + + '' + - '' + '' From ca4c8359d96dc1a1baf609f73cf6a7e66050d1b5 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Wed, 17 Feb 2016 16:15:28 +0800 Subject: [PATCH 2/9] Chain definition, added late binding attributes back --- angular-progress-arc.js | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/angular-progress-arc.js b/angular-progress-arc.js index c7aa693..8ef0c23 100644 --- a/angular-progress-arc.js +++ b/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: { @@ -55,24 +53,24 @@ updateRadius(); }, template: - '' + + '' + '' + '' + '' From 0e0f922649936b18293f06b4aeb6b01562d3cbb7 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Wed, 17 Feb 2016 16:15:37 +0800 Subject: [PATCH 3/9] Added karma config --- karma.conf.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 karma.conf.js diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..43d428d --- /dev/null +++ b/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' + } + ] + } + }); +}; + From 103d15ff6a17e3f83e4c87ae9c8e7ab01aad2925 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Wed, 17 Feb 2016 16:15:51 +0800 Subject: [PATCH 4/9] Added tests and updated deps --- package.json | 15 +++++++++--- test/progressArc.js | 47 +++++++++++++++++++++++++++++++++++++ test/progressArcDefaults.js | 20 ++++++++++++++++ 3 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 test/progressArc.js create mode 100644 test/progressArcDefaults.js diff --git a/package.json b/package.json index 11fd5d4..cea2507 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,11 @@ "directories": { "example": "example" }, + "scripts": { + "pretest": "npm install && node_modules/.bin/bower install --allow-root && node_modules/.bin/gulp ngtemplates", + "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,13 @@ }, "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" + "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" diff --git a/test/progressArc.js b/test/progressArc.js new file mode 100644 index 0000000..b462e40 --- /dev/null +++ b/test/progressArc.js @@ -0,0 +1,47 @@ +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('')($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('')($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('')($scope); + $rootScope.$digest(); + expect(angular.element(element[0].getElementsByTagName('circle')[0]).attr('stroke-dashoffset')).toEqual((1 - $scope.complete) * $scope.circumference); + + $scope.complete = 1.0; + expect(angular.element(element[0].getElementsByTagName('circle')[0]).attr('stroke-dashoffset')).toEqual((1 - $scope.complete) * $scope.circumference); + }); +}); + diff --git a/test/progressArcDefaults.js b/test/progressArcDefaults.js new file mode 100644 index 0000000..2ce4296 --- /dev/null +++ b/test/progressArcDefaults.js @@ -0,0 +1,20 @@ +describe('progressArcDefaults', function() { + 'use strict'; + + var progressArcDefaults; + beforeEach(function() { + module('angular-progress-arc'); + angular.module('progressArcDefaults', []) + .config(function(_progressArcDefaults_) { + progressArcDefaults = _progressArcDefaults_; + }); + inject(); + }); + + it('should set values appropriately', function() { + progressArcDefaults.setDefault('size', 100); + var target = {}; + progressArcDefaults(target); + expect(target.size).toEqual(100); + }); +}); From cf9f94f5c51d3651195a24a410ebb0e3b173a45e Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Mon, 22 Feb 2016 13:42:51 +0800 Subject: [PATCH 5/9] Updated tests --- test/progressArc.js | 9 ++++++--- test/progressArcDefaults.js | 20 +++++++------------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/test/progressArc.js b/test/progressArc.js index b462e40..231dc4a 100644 --- a/test/progressArc.js +++ b/test/progressArc.js @@ -36,12 +36,15 @@ describe('progressArc', function() { it('should update the stroke-dashoffset when complete is updated', function() { var $scope = $rootScope.$new(); $scope.complete = 0.5; - var element = $compile('')($scope); + var element = $compile('')($scope); $rootScope.$digest(); - expect(angular.element(element[0].getElementsByTagName('circle')[0]).attr('stroke-dashoffset')).toEqual((1 - $scope.complete) * $scope.circumference); + var circle = angular.element(element[0].getElementsByTagName('circle')); + expect(parseFloat(circle.attr('stroke-dashoffset'))).toBeGreaterThan(279.0); $scope.complete = 1.0; - expect(angular.element(element[0].getElementsByTagName('circle')[0]).attr('stroke-dashoffset')).toEqual((1 - $scope.complete) * $scope.circumference); + $rootScope.$digest(); + circle = angular.element(element[0].getElementsByTagName('circle')); + expect(circle.attr('stroke-dashoffset')).toEqual('0'); }); }); diff --git a/test/progressArcDefaults.js b/test/progressArcDefaults.js index 2ce4296..5c7f56a 100644 --- a/test/progressArcDefaults.js +++ b/test/progressArcDefaults.js @@ -1,20 +1,14 @@ describe('progressArcDefaults', function() { 'use strict'; - var progressArcDefaults; - beforeEach(function() { - module('angular-progress-arc'); - angular.module('progressArcDefaults', []) - .config(function(_progressArcDefaults_) { - progressArcDefaults = _progressArcDefaults_; - }); - inject(); - }); + beforeEach(module('angular-progress-arc')); - it('should set values appropriately', function() { - progressArcDefaults.setDefault('size', 100); + it('should set values appropriately', inject(function(progressArcDefaults) { var target = {}; progressArcDefaults(target); - expect(target.size).toEqual(100); - }); + expect(target.size).toEqual(200); + expect(target.strokeWidth).toEqual(20); + expect(target.stroke).toEqual('black'); + expect(target.background).toBeNull(); + })); }); From 7ba6c2f8e39bec85786f9d35f3c0d044818adf43 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Mon, 22 Feb 2016 13:43:01 +0800 Subject: [PATCH 6/9] Added bowerrc and ignore coverage folder --- .bowerrc | 3 +++ .gitignore | 1 + 2 files changed, 4 insertions(+) create mode 100644 .bowerrc diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..c8474bf --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "bower_components/" +} diff --git a/.gitignore b/.gitignore index 7bf6eb1..0173852 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ bower_components node_modules +coverage From b49404b385ad605c58580f0fafce118253a51812 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Mon, 22 Feb 2016 13:43:12 +0800 Subject: [PATCH 7/9] Added angular mocks to bower dev deps --- bower.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bower.json b/bower.json index 3949b3c..d42904b 100644 --- a/bower.json +++ b/bower.json @@ -27,5 +27,8 @@ ], "dependencies": { "angular": ">=1.2.19" + }, + "devDependencies": { + "angular-mocks": "^1.5.0" } } From a83b9350f647d51fc41911e5cc555137ac36b793 Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Mon, 22 Feb 2016 13:43:49 +0800 Subject: [PATCH 8/9] Updated test commands --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index cea2507..0efd350 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "example": "example" }, "scripts": { - "pretest": "npm install && node_modules/.bin/bower install --allow-root && node_modules/.bin/gulp ngtemplates", + "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" }, @@ -32,6 +32,7 @@ }, "homepage": "http://mathewbyrne.github.io/angular-progress-arc/", "devDependencies": { + "bower": "^1.7.7", "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-uglify": "~0.5.0", From f29ae836c8564602b10a75d0aa346d8c46908ebe Mon Sep 17 00:00:00 2001 From: Michael Robinson Date: Mon, 22 Feb 2016 13:49:41 +0800 Subject: [PATCH 9/9] Build --- angular-progress-arc.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-progress-arc.min.js b/angular-progress-arc.min.js index 4ee6724..b70d8f4 100644 --- a/angular-progress-arc.min.js +++ b/angular-progress-arc.min.js @@ -1,2 +1,2 @@ /*! angular-progress-arc - v1.0.0 (http://mathewbyrne.github.io/angular-progress-arc/) */ -!function(a){"use strict";var b=a.module("angular-progress-arc",[]);b.provider("progressArcDefaults",function(){var b={size:200,strokeWidth:20,stroke:"black",background:null};this.setDefault=function(a,c){return b[a]=c,this},this.$get=function(){return function(c){a.forEach(b,function(a,b){c[b]||(c[b]=a)})}}}),b.directive("progressArc",["progressArcDefaults",function(a){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@"},compile:function(b,c){return a(c),function(a){a.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var b=function(){a.strokeWidthCapped=Math.min(a.strokeWidth,a.size/2-1),a.radius=Math.max((a.size-a.strokeWidthCapped)/2-1,0),a.circumference=2*Math.PI*a.radius};a.$watchCollection("[size, strokeWidth]",b),b()}},template:'"}}])}(window.angular); \ No newline at end of file +!function(a){"use strict";a.module("angular-progress-arc",[]).provider("progressArcDefaults",function(){var b={size:200,strokeWidth:20,stroke:"black",background:null};this.setDefault=function(a,c){return b[a]=c,this},this.$get=function(){return function(c){a.forEach(b,function(a,b){c[b]||(c[b]=a)})}}}).directive("progressArc",["progressArcDefaults",function(a){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@"},link:function(b,c,d){a(b),b.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var e=function(){b.strokeWidthCapped=Math.min(b.strokeWidth,b.size/2-1),b.radius=Math.max((b.size-b.strokeWidthCapped)/2-1,0),b.circumference=2*Math.PI*b.radius};b.$watchCollection("[size, strokeWidth]",e),e()},template:'"}}])}(window.angular); \ No newline at end of file