current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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);
);
share|improve this answer
    
Thank you, I am still getting started with testing, so this post is much more helpful than if you sent me the just first response. :) –  Neil Aug 19 '14 at 14:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.