角度成分のテストtemplateUrl

Question

このテンプレートhtmlのテストに問題があります。私はカルマとスロンを使用しています。私はこれを取得しています不明なプロバイダ：_Provider < - _ < - サービスエラー。ここで

は私のコンポーネントです：

angular. 
    .module('app.component.thing-foo') 
    .component('thingFoo', { 
    templateUrl: 'components/thing-foo/thing-foo.html', 
    controller: ThingFooController, 
    bindings: { 
     thing: '<', 
     onSelect: '&' 
    } 
    }); 

function ThingFooController($log, service) { 
    var ctrl = this; 
    ctrl.$onInit = $onInit; 
    ctrl.$onChanges = $onChanges; 
    ctrl.thingList = []; 

    function $onInit(){ 
    getThingList(); 
    } 

    function $onChanges(changesObj){ 
    if (changesObj.thing) { 
     ctrl.thing = angular.copy(changesObj.thing.currentValue);   
    } 

    function getThingList(){ 
    service.getThings() 
    .then(function (result) { 
     ctrl.thingList = result.things; 
    }, function (error) { 
     $log.error('Did not work: $0', error); 
    }) 
    } 

    function selectionChanged(selected) { 
    ctrl.onSelect({thing: selected}); 
    } 
} 

事-foo.htmlという：

<span ui-dropdown class="dropdown-toggle"> 
    <a href id="query-menu-label" ui-dropdown-toggle> 
    Thing Picker <b class="caret"></b> 
    </a> 
    <ul calss="dropdown-menu" aria-labelledby="query-menu-label" role="menu"> 
    <li role="presentation" ng-repeat="thing in $ctrl.thingList"> 
     <a role="menuitem" ng-click="$ctrl.selectionChanged(thing)">{{ thing }}</a> 
    </li> 
    </ul> 
</span> 

私は失敗しているspecファイルの一部を含めています：

beforeEach(inject(function(_$compile_, _$componentController_, _$rootScope_){ 
    $compile = _$compile_; 
    $componentController = _$componentController_; 
    $rootScope = _$rootScope_; 
})); 

beforeEach(function(){ 
    scope = $rootScope.$new(); 
    element = angular.element('<thing-foo></thing-foo>'); 
    service = { 
    getThings: sinon.stub(); 
    }; 
    locals = { 
    service: service 
    }; 
}); 

it('loads html', function(){ 
var tag = $compile(element)(scope); 
scope.$apply(); 
expect(tag.html()).to.exist(); 
}); 

ここにはたくさんのコードがありますが、私はすべてを含んでいることを確認したかったのです。問題はng-repeatの$ ctrl.getThingListだと思います。私はサービスをいくつか注入するはずですか？もしそうなら、どうしたらいいですか？私は角度の単位テストを書くことで多くの練習がありません。どんな助けもありがとうございます。

Answer 1

$ providerがあなたのサービスを注入するように設定しようとしていませんか？ このようなもの：

// Put this before your first beforeEach 
beforeEach(module(function($provide) { 
    $provide.value('service', service); 
}