Wie testen Sie diese Komponente/Vorlage? :)

Question

Ich suche irgendeine Hilfe mit meinem Problem über meine UNITEST für AngularJS (und nvd3).

In der Tat, wenn ich versuche, mein Diagramm zu machen, habe ich einen Fehler. Es ist wie $ctrl.data und $ctrl.options waren komplett leer ...

Ich verstehe nicht, wo das Problem ist und ich versuchte, diese den ganzen Tag ohne Erfolg ..

zu entsperren Wenn jemand eine Vorstellung davon, wo kommen das Problem hat Ich danke im Voraus.

Der Code:

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

Karma/Jasmin:

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

Sie sind die Öffnung fehlt < in Ihrem Vorlagenbeispiel.

Wenn Sie jedoch $componentController verwenden Sie müssen jede Vorlage nicht kompilieren, also entweder tun:

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

Oder tun:

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