このコンポーネント/テンプレートのテスト方法は？ :)

Question

私はAngularJS（およびnvd3）のための私のUNITESTに関する私の問題について助けを探しています。

実際、私のチャートを作成しようとするとエラーが発生します。誰かが問題を来る場所のアイデアを持っている場合 私は成功せず、この一日のロックを解除しようとしたところ、問題があると理解しない

..

...それは$ctrl.dataようなものだと$ctrl.optionsはcompletly空でした私は前もって感謝します。

コード：

myComp.comp.js：

angular.module('myMod') 
     .component('myComp', { 
      template: '<div><nvd3 options="$ctrl.options" data="$ctrl.wrapped"></nvd3></div>', 
      bindings: { 
       data: '<', 
       zoom: '<' 
      }, 
      controller: myCtrl 
     }) 

myCtrl.$inject = ['$scope'] 
function myCtrl($scope) { 
    //Here I set wrapped with data 
    //and set the options for nvd3 
} 

myComp.spec.js：

describe('component: myComp', function() { 

    beforeEach(module('myComp')); 

    var $ctrl, 
     $bindings, 
     $template, 
     scope, 
     elmt; 

    beforeEach(inject(function($compile, $componentController, $rootScope, $document) { 

     $scope = $rootScope.$new(); 

     $bindings = { 
      zoom: true, 
      data: [ /*DATA SAMPLE HERE*/ ] 
     } 

     $ctrl = $componentController('myComp', $scope, $bindings); 
     elmt = angular.element('my-comp data="$ctrl.data" zoom="$ctrl.zoom"></my-comp>'); 
     elmt = $compile(elmt)($scope); 

     $scope.$apply(); 
    })); 

    it("test", function() { 
     expect(1).toBe(1); 
    }); 
}); 

カルマ/ジャスミン：あなたがいる

Chrome 53.0.2785 (Mac OS X 10.12.0) component: myComp test FAILED 
    TypeError: Cannot read property 'ordinal' of undefined 
     at Object.nv.models.multiBarHorizontal (bower_components/nvd3/build/nv.d3.js:8823:23) 
     at Object.nv.models.multiBarHorizontalChart (bower_components/nvd3/build/nv.d3.js:9180:30) 
     at Object.updateWithOptions (bower_components/angular-nvd3/dist/angular-nvd3.js:106:72) 
     at Object.refresh (bower_components/angular-nvd3/dist/angular-nvd3.js:53:39) 
     at bower_components/angular-nvd3/dist/angular-nvd3.js:449:68 
     at bower_components/angular-nvd3/dist/angular-nvd3.js:517:43 
     at Scope.$digest (bower_components/angular/angular.js:17524:23) 
     at Scope.$apply (bower_components/angular/angular.js:17790:24) 
     at Object.<anonymous> (ml.report/variableImportances/variableImportances.spec.js:38:9) 
     at Object.invoke (bower_components/angular/angular.js:4718:19) 
    Error: Declaration Location 
     at window.inject.angular.mock.inject (bower_components/angular-mocks/angular-mocks.js:3047:25) 
     at Suite.<anonymous> (myComp.comp.js:'XX':'XX') 
     at myComp.spec.js:'XX':'XX' 
     at myComp.spec.js:'XX':'XX' 
     /* I have put 'XX' in place of the real lines/col 

Answer 1

オープニングがありませんテンプレートサンプルのあなたが任意のテンプレートをコンパイルする必要があり、そのいずれかを実行していない$componentControllerを使用している場合

はしかし、：

$ctrl = $componentController('myComp', $scope, $bindings); 

または、実行します。

$scope.zoom = true; 
$scope.data = [ /*DATA SAMPLE HERE*/ ]; 
elmt = angular.element('<my-comp data="data" zoom="zoom"></my-comp>'); 
elmt = $compile(elmt)($scope); 

$scope.$apply(); 
$ctrl = elmt.controller('myComp');