이 구성 요소/템플릿을 테스트하는 방법은 무엇입니까? :)

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