Unit testing AngularJS and Flot Charts - unit-testing

Question

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.

Answer 1

This may not be the answer to your question, but hopefully it will help steer you in the right direction. Here's the source of the exception from jquery.flot.js:
fontDefaults = {
style: placeholder.css("font-style"),
size: Math.round(0.8 * (+placeholder.css("font-size").replace("px", "") || 13)),
variant: placeholder.css("font-variant"),
weight: placeholder.css("font-weight"),
family: placeholder.css("font-family")
};
It appears that placeholder.css('font-size') is returning undefined. I seem to remember hearing of some problems with jQuery.css('margin') not working in PhantomJS, but jQuery.css('margin-left') behaving correctly.
If you explicitly set style: "font-size: 10px;" on the element do you get different results? I noticed you were setting the directive's class to pie, have you included any stylesheets?

Answer 2

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);
}]);