angularjs how to define a new property on $scope without a view - angularjs

Question

I am trying BDD with Jasmine and angularJS app. My requirement is to create a select element in my view which gets it's data from a factory. So in true spirit of BDD, I am writing my factory and controller first before I start writing my view.
My test for factory:
describe('getTypeOfUnit', function(){
it('should return typeofunits', inject(function(getTypeOfUnit){
expect(getTypeOfUnit).not.toBeNull();
expect(getTypeOfUnit instanceof Array).toBeTruthy();
expect(getTypeOfUnit.length).toBeGreaterThan(0);
})) ;
});
So I am testing that my data is not null, is an array and contains at least one item. It fails since there is no factory.
This is the factory to make the tests pass:
angular.module('myApp.services', [])
.factory('getTypeOfUnit', function(){
var factory = ['Research Lab', 'Acedamic Unit', 'Misc'];
return factory;
});
Now onto the controller. Here is the empty controller:
angular.module('myApp.controllers', [])
.controller('describeUnitController',[function($scope){
console.log('exiting describeUnit');
}]);
And tests for controller:
describe('controllers', function(){
var describeScope;
beforeEach(function(){
module('myApp.controllers');
inject(function($rootScope, $controller){
console.log('injecting contoller and rootscope in beforeEach');
describeScope = $rootScope.$new();
var describerController = $controller('describeUnitController', {$scope: describeScope});
});
}) ;
it('should create non empty "typeOfUnitsModel"', function() {
expect(describeScope["typeOfUnits"]).toBeDefined();
var typeOfUnits = describeScope.typeOfUnits;
expect(typeOfUnits instanceof Array).toBeTruthy();
expect(typeOfUnits.length).toBeGreaterThan(0);
});
});
So I am testing that my controller returns a non empty array. Same as the service. These tests fail. So next step is to define a property on the scope object in the controller:
.controller('describeUnitController',[function($scope){
$scope.typeOfUnits = [];
console.log('exiting describeUnit');
}]);
Now I get an error:
TypeError: Cannot set property 'typeOfUnits' of undefined
Why does the controller not know about the scope? I thought DI would automatically make it available?
Thank you in advance. Also please comment on my tests.

Answer 1

Found two mistakes with my code:
The controller does not know about the $scope. Not sure why. So I can do one of the following:
.controller('describeUnitController',['$scope',function($scope){
$scope.typeOfUnits = [];
console.log('exiting describeUnit');
}]);
OR
.controller('describeUnitController',function describeUnitController($scope){
$scope.typeOfUnits = [];
console.log('exiting describeUnit');
});
I am not sure why it is this way. But lesson learned.
I then tried to use the service as follows:
.controller('describeUnitController',function describeUnitController($scope, GetTypeOfUnit){
$scope.typeOfUnits = getTypeOfUnit;
});
This gave me the famous Error: unknown provider for GetTypeOfUnit
Apparantly, I have to add the services module to the factory module in order to use the service and make the tests pass. But my app.js has them all defined:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers','ui.bootstrap','$strap.directives'])
But since I am testing, I have to load the services module in the controllers module as well. If the app was loading (like in the browser), I would not have to do this.
Am I understanding this correctly? Thank you all.