单元测试 AngularJS 和 Flot Charts

Question

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

PhantomJS 1.9.2 （Mac OS X） 图表指令应填充容器元素失败 TypeError： 'undefined' 不是对象（计算 '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）： 已执行 30 个，共 40 个（1 个失败）（0 秒/0.126 秒）

图表指令： 失败 - 应填充容器元素 类型错误："未定义"不是对象（计算"占位符.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）： 执行 31 个（共 40 个）（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

这可能不是您问题的答案，但希望它能帮助您朝着正确的方向前进。 以下是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 ，您是否包含任何样式表？

Answer 2

我能够通过针对 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);
}]);