单元测试 AngularJS 和 Flot Charts答案

【问题标题】：Unit testing AngularJS and Flot Charts单元测试 AngularJS 和 Flot Charts
【发布时间】：2013-10-31 22:55:41
【问题描述】：

我正在尝试对 (Jasmine) AngularJS 和 Flot Charts 进行单元测试，但收到以下错误。我没有在我的应用程序控制台中收到这些错误，并且图表按预期呈现。

PhantomJS 1.9.2 (Mac OS X) Charts Directive 应该填充容器元素 FAILED TypeError：'undefined' 不是对象（评估 'placeholder.css("font-size").replace'）在 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)：执行 30 次，共 40 次（1 次失败）（0 秒 / 0.126 秒）

图表指令： FAILED - 应该填充容器元素 TypeError: 'undefined' is not an object (evalating 'placeholder.css("font-size").replace') 在 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)：执行 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');
    });
});

非常感谢任何见解。

【问题讨论】：

标签： unit-testing angularjs jasmine flot karma-runner

【解决方案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，您是否包含任何样式表？

【讨论】：

我试图欺骗占位符对象但没有成功。通过控制台日志，我发现 tmpl 对象未定义。通过手动编译 html 字符串并传递 $rootScope 而不是“范围”范围来解决这个问题。

【解决方案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);
}]);

【讨论】：