單元測試AngularJS和FLOT圖表

Question

我試圖單元測試（茉莉花）AngularJS和海軍報圖，但收到以下錯誤。我在應用程序的控制檯中沒有收到這些錯誤，並且圖表按預期呈現。

PhantomJS 1.9.2 (Mac OS X) Charts Directive should populate the container element FAILED TypeError: 'undefined' is not an object (evaluating '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): Executed 30 of 40 (1 FAILED) (0 secs/0.126 secs)

Charts Directive: FAILED - should populate the container element TypeError: 'undefined' is not an object (evaluating '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): Executed 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'); 
    }); 
}); 

任何瞭解是極大的讚賞。

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，你有沒有包含任何樣式表？