AngularJS: Angular UI Router load multiple templates for testing - angularjs

Question

I'm trying to perform a simple test on a helper function I've created:
function getPostId() {
return $stateParams._id;
}
And here is the test I am using, please note that getService is simply a wrapper for the Angular inject() function:
describe('wpApp Router', function() {
var $state, $stateParams, Router;
beforeEach(module('wpApp.core.router'));
beforeEach(function() {
$state = getService('$state');
$scope = getService('$rootScope');
$stateParams = getService('$stateParams');
Router = getService('Router');
$templateCache = getService('$templateCache');
$templateCache.put('/app/sections/posts/list/post-list.html', '');
});
it('should provide the current post ID', function() {
$state.go('posts.details', { _id: 1 });
$scope.$digest();
expect(Router.getPostId()).to.equal(1);
});
});
My router looks like this:
$stateProvider
.state('posts', {
url: '/posts',
controller: 'PostsListController as postsList',
templateUrl: '/app/sections/posts/list/post-list.html'
})
.state('posts.details', {
url: '/:_id',
controller: 'PostDetailsController as postDetails',
templateUrl: '/app/sections/posts/details/post-details.html'
})
I'm trying to set the current state to posts.details with an _id of 1. Then test my helper function to see if it is correctly retrieving the ID.
However, I am getting errors with the templates of the states, like the following: Unexpected request: GET /app/sections/posts/details/post-details.html
The state posts.details is a child of posts and both have their own templates, the problem is I am unable to load both into the templateCache or at least I can't figure out how to do so.
Is it possible to load both templates in order to fulfill the test?

Answer 1

In response to your actual question, the easiest approach to caching templates is by using something like karma-ng-html2js-preprocessor. It will cache all your application templates, and make them available to your tests as a module.
However, from what I can surmise from the code provided, this is un-necessary. Currently, your unit test is actually an integration test in that it's dependent on the routing of the 'posts.details' state in order to pass, and yet the method itself is concerned only with the $stateParams object.
So, instead, as $stateParams is in fact just a plain object, a simpler (and better) approach is just to mock it prior to your test:
beforeEach(module(function($provide) {
$provide.value('$stateParams', {
_id: 1
});
}));
and then you can test your service method in isolation from your states:
it('should provide the current post ID', function() {
expect(Router.getPostId()).toEqual(1);
);