Testing angular components templateUrl - angularjs

Question

I'm having an issue testing this template html. I'm using karma and sinon. I'm getting this Unknown provider: _Provider <- _ <- service error.
Here is my component:
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});
}
}
thing-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>
I'm including the parts of the spec file that are failing:
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();
});
There's a lot of code here but I wanted to make sure I included everything. I think the problem is the $ctrl.getThingList in the ng-repeat. Am I supposed to inject the service some how? If so how do I do that? I don't have a lot of practice with writing unit tests for angular. Any help is appreciated.

Answer 1

Not entirely sure, but maybe try to configure $provider to inject your service?
Something like this:
// Put this before your first beforeEach
beforeEach(module(function($provide) {
$provide.value('service', service);
}