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) 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)
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)
Directive:
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);
});
}]
};
});
Controller:
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
}
};
}])
}]);
Test Spec:
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');
});
});
Any insight is greatly appreciated.
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);
}]);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments