单元测试AngularJS和Flot图表

Question

我试图单元测试(茉莉花) AngularJS和Flot图表，但收到以下错误。我在我的应用程序的控制台中没有收到这些错误，图表按照预期呈现。

(/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:740) 1.9.2 (Mac )图表指令应该填充容器元素失败的TypeError：“未定义的”不是一个对象(计算‘placeholder.css(“字体大小’).replace‘)，在parseOptions上，它位于Plot (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673)/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/测试/单位/指令/charts.spec.js:23在调用(/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 /Library/WebServer//Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1782/zui/test/unit/指令/charts.spec.js:24 PhantomJS 1.9.2 (Mac )：执行40次中的30次(1次失败) (0秒/ 0.126秒) 图表指示: FAILED应该填充容器元素TypeError：'undefined‘不是一个对象(计算’placeholder.css(“字体大小‘).replace’)，在/Library/WebServer/ element (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673) at parseOptions .replace上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/调用(/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 )：执行40次中的31次(1次失败) (0秒/ 0.134秒)

指令：

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

任何洞察力都会受到极大的赞赏。

Answer 1

我能够通过编译针对rootScope的标记和设置内联宽度和高度样式来解决这个问题。这可能是一个丢失宽度和高度属性的问题。

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

Answer 2

这可能不是你问题的答案，但希望它能帮助你朝着正确的方向前进。以下是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")
};

看来placeholder.css('font-size')正在返回undefined。我似乎记得听说过jQuery.css('margin')没有在PhantomJS中工作，但是jQuery.css('margin-left')行为正确。

如果显式地在元素上设置style: "font-size: 10px;"，会得到不同的结果吗？我注意到您正在将指令的类设置为pie，您是否包含了任何样式表？