2

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

PhantomJS 1.9.2 (Mac OS X) Charts Directive 应该填充容器元素 FAILED TypeError: 'undefined' is not an object (evalating 'placeholder.css("font-size").replace') at parseOptions (/Library/WebServer /Documents/zui/app/js/libs/flot/jquery.flot.js:740) 在 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 在 /Library/WebServer/Documents/zui/app/js/directives/charts.js:6 在 /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 在调用 (/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 of 40 (1 FAILED) (0 secs / 0.126 secs)

图表指令：失败 - 应填充容器元素 TypeError：'undefined' is not an object (evalating 'placeholder.css("font-size").replace') at parseOptions (/Library/WebServer/Documents/zui/app/ js/libs/flot/jquery.flot.js:740) 在 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 在 /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 at /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24 PhantomJS 1.9.2 (Mac OS X): 执行 31 of 40 (1 FAILED) (0 secs / 0.134 secs)

指示：

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

非常感谢任何见解。

4

2 回答 2

0

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

于 2013-10-31T23:43:57.040 回答
0

通过针对 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);
}]);
于 2013-12-31T02:56:39.630 回答