2

(Jasmine) AngularJS と Flot Charts を単体テストしようとしていますが、次のエラーが表示されます。アプリケーションのコンソールにこれらのエラーが表示されず、チャートが期待どおりにレンダリングされます。

PhantomJS 1.9.2 (Mac OS X) チャート ディレクティブは、コンテナー要素にデータを入力する必要があります/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 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) ) /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): 40 のうち 30 を実行 (1 失敗) (0 秒 / 0.126 秒)

チャート ディレクティブ: 失敗 - コンテナー要素を入力する必要があります。 js/libs/flot/jquery.flot.js:740) /Library/WebServer/Documents/ の Plot (/Library/WebServer/Documents/zui/app/js/libs/flot/jquery.flot.js:673) で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 (/Library/WebServer/Documents/zui/app/js/libs/angular.js:2902) /Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js の workFn (/Library/WebServer/Documents/zui/app/js/libs/angular-mocks.js:1795): /Library/WebServer/Documents/zui/test/unit/directives/charts.spec.js:24 の 1782: PhantomJS 1.9.2 (Mac OS X): 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');
    });
});

どんな洞察も大歓迎です。

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 に答える