Service Injection to test controller jasmin - angularjs

Question

Newest Update
My service or factory can still not be found.
'use strict';
/* jasmine specs for controllers go here */
describe("Backpage Controller", function(){
describe('Root Ctrl', function() {
var scope, ctrl, myService;
beforeEach(module("backpageApp"));
beforeEach(inject(function(Data, $controller, $rootScope) {
myService = Data;
scope = $rootScope.$new();
ctrl = $controller("RootCtrl", {$scope:scope});
}));
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('rent')
});
it('should create "listings" model with 10 listings', function() {
expect(myService.listings.length).toBe(10)
});
});
});
This is the newest error.
Chrome 32.0.1700 (Mac OS X 10.8.4) Backpage Controller Root Ctrl should create "listings" model with 10 listings FAILED
TypeError: Cannot read property 'length' of undefined
at null.<anonymous> (/Users/judyngai/Desktop/Jan2014/newback/trynewversion/minibackpage/test/unit/controllersSpec.js:24:32)
Chrome 32.0.1700 (Mac OS X 10.8.4): Executed 2 of 2 (1 FAILED) (0.284 secs / 0.058 secs)
my services.js file contain this, I am using the angular seed project.
angular.module('backpage.services', [])
.factory('Data', function($resource) {
return $resource('data/data.json');
});
my app.js file is this
var backpageApp = angular.module('backpageApp', ['ui.router', 'ngResource', 'ngRoute','backpage.services', 'backpagecontrollers']);
I am very new to angular js. I am trying to write a jasmin spec that test my RootCtrl.
I created a service to share between controllers
angular.module('backpage.services', [])
.factory('Data', function($resource) {
return $resource('data/data.json');
});
I injected the module above to my application level module.
The RootCtrl has a 'Data' parameter given to its function so the scope object can access the shared data.json fetched by $resource.
I set this to the Data in the Root Ctrl
$scope.listings = Data.query();
Now I am having trouble figuring out how to inject the service I created to my spec written in jasmin.
My Jasmin file currently looks something like this
describe("Backpage Controller", function(){
describe('Root Ctrl', function() {
var scope, ctrl;
beforeEach(module("backpageApp"));
var $injector = angular.injector(['backpageApp']);
var myService = $injector.get('backpage.services');
beforeEach(inject(function($controller, $httpBackend) {
scope = {};
ctrl = $controller("RootCtrl", {$scope:scope});
}));
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('rent')
});
it('should create "listings" model with 10 listings', function() {
expect(myService.listings.length).toBe(10)
});
});
});
I am currently getting this error when I run the jasmin test
Chrome 32.0.1700 (Mac OS X 10.8.4) Backpage Controller Root Ctrl encountered a declaration exception FAILED
Error: [$injector:unpr] Unknown provider: backpage.servicesProvider <- backpage.services
I have taken a look at the testing examples on angular js official documentation, the sample uses
$httpBackend
in the jasmin code to grab the json file but the $httpBackend doc says its use with $http service but I am using resource.
Also the data.json contain 10 listings of advertisements.
any help is appreciated.

Answer 1

When you run beforeEach(module("backpageApp")); angular-mocks loads all the dependencies automatically and allow you to inject them as in regular applications (not tests)
You also need to create a scope with $rootScope:
var scope, ctrl, myService;
beforeEach(module("backpageApp"));
beforeEach(inject(function(Data, $controller, $httpBackend, $rootScope) {
myService = Data;
scope = $rootScope.$new();
ctrl = $controller("RootCtrl", {$scope:scope});
}));

Answer 2

I figured it out I should just use $httpBackend from angular js to fetch the data.json file.
I have this as a variable httpBackend
I injected this into $httpBackend
httpBackend.when('GET', 'data/data.json').respond([{id: 1 }, {id: 2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}, {id:10}]);
and flush it back out
httpBackend.flush();
for testing purposes