单元测试AngularJS和FLOT图表 [英] Unit testing AngularJS and Flot Charts
问题描述
我想单元测试（茉莉花）AngularJS和FLOT图表，但收到以下错误。我没有在我的应用程序的控制台收到这些错误和图表呈现预期。
I am trying to unit test (Jasmine) AngularJS and Flot Charts but receive the following errors. I do not receive these errors in the console of my application and the charts render as expected.
PhantomJS 1.9.2（Mac OS X中）图表指令应填充失败容器元素
类型错误：未定义不是一个对象（评估'placeholder.css（FONT-SIZE）代替。）
在parseOptions（/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:740）
在图（/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673）
在/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:3059
在/Library/WebServer/Documents/zui/app/js/directives/charts.js:6
在/Library/WebServer/Documents/zui/app/js/libs/angular.js:7942
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:10
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:23
在调用（/Library/WebServer/Documents/zui/app/js/libs/angular.js:2902）
在workFn（/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1795）
在/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1782
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24
PhantomJS 1.9.2键（Mac OS X）：执行的40 30（1失败）（0秒/ 0.126秒）
PhantomJS 1.9.2 (Mac OS X) Charts Directive should populate the container element FAILED TypeError: 'undefined' is not an object (evaluating 'placeholder.css("font-size").replace') at parseOptions (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:740) at Plot (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673) at /Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:3059 at /Library/WebServer/Documents/zui/app/js/directives/charts.js:6 at /Library/WebServer/Documents/zui/app/js/libs/angular.js:7942 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:10 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:23 at invoke (/Library/WebServer/Documents/zui/app/js/libs/angular.js:2902) at workFn (/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1795) at /Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1782 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24 PhantomJS 1.9.2 (Mac OS X): Executed 30 of 40 (1 FAILED) (0 secs / 0.126 secs)
图表指令：
失败 - 应该填充容器元素类型错误：未定义不是一个对象（评估'placeholder.css（FONT-SIZE）代替。）
在parseOptions（/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:740）
在图（/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673）
在/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:3059
在/Library/WebServer/Documents/zui/app/js/directives/charts.js:6
在/Library/WebServer/Documents/zui/app/js/libs/angular.js:7942
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:10
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:23
在调用（/Library/WebServer/Documents/zui/app/js/libs/angular.js:2902）
在workFn（/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1795）
在/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1782
在/Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24
PhantomJS 1.9.2键（Mac OS X）：执行的40 31（1失败）（0秒/ 0.134秒）
Charts Directive: FAILED - should populate the container element TypeError: 'undefined' is not an object (evaluating 'placeholder.css("font-size").replace') at parseOptions (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:740) at Plot (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673) at /Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:3059 at /Library/WebServer/Documents/zui/app/js/directives/charts.js:6 at /Library/WebServer/Documents/zui/app/js/libs/angular.js:7942 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:10 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:23 at invoke (/Library/WebServer/Documents/zui/app/js/libs/angular.js:2902) at workFn (/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1795) at /Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1782 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24 PhantomJS 1.9.2 (Mac OS X): Executed 31 of 40 (1 FAILED) (0 secs / 0.134 secs)
指令：
angular.module('directives.FlotCharts', [])
.directive('flotChart', function () {
return {
restrict: 'EA',
controller: ['$scope', '$attrs', function ($scope, $attrs) {
var plotid = '#' + $attrs.id,
model = $scope[$attrs.ngModel];
$scope.$watch('model', function (x) {
$.plot(plotid, x.data, x.options);
});
}]
};
});
控制器：
angular.module('Charts', ['directives.FlotCharts'])
.controller('diskChartCtrl', ['$scope', function ($scope) {
$scope.model = {};
$scope.model.data = [
{
label: "Available",
data: 20,
color:"#00a34a"
},
{
label: "Used",
data: 100,
color:"#c00"
}
];
$scope.model.options = {
series: {
pie: {
innerRadius: 0.5, // for donut
show: true,
label: {
formatter: function (label, series) {
return '<div class="pie">' + label + ': ' +
series.data[0][1] + 'GB <br>(' + Math.round(series.percent) + '%)</div>';
}
}
}
},
legend: {
show: false
}
};
}])
}]);
测试规格：
describe('Charts Directive', function () {
var scope, html, tmpl, ctrl, $compile;
var compileTmpl = function (markup, scope) {
var el = $compile(markup)(scope);
scope.$digest();
return el;
};
beforeEach(function () {
module('directives.FlotCharts');
module('Charts');
inject(function ($rootScope, _$compile_, $controller) {
$compile = _$compile_;
scope = $rootScope.$new();
ctrl = $controller('diskChartCtrl', {$scope: scope});
html = angular.element('<div data-flot-chart id="disk" data-chart="pie" data-status="danger" data-ng-model="model" data-ng-controller="diskChartCtrl"></div>');
tmpl = compileTmpl(html, scope);
});
});
it('should populate the container element', function () {
expect(true).toBe(true);
//expect(tmpl.html()).toContain('canvas');
});
});
任何了解大大AP preciated。
Any insight is greatly appreciated.
推荐答案
我能解决这个问题，因为通过编译针对rootScope的标记和内嵌设置宽度和高度评价风格。这可能是缺少width和height属性的问题。
I was able to solve this issue as commented by compiling the markup against rootScope and setting inline width and height styles. It may have been an issue of missing width and height properties.
inject(['$rootScope', '$compile', '$controller', function ($rootScope, $compile, $controller) {
scope = $rootScope.$new();
ctrl = $controller('itemChartCtrl', { $scope: scope });
tmpl = '<div data-flot-chart id="items" data-chart="pie" data-status="danger" data-ng-model="model" data-ng-controller="itemChartCtrl" style="width:300px;height:300px"></div>';
$compile(tmpl)($rootScope);
}]);
这篇关于单元测试AngularJS和FLOT图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
