UI-router interfers with $httpbackend unit test, angular js

Question

This is a controller with a submit function:

$scope.submit = function(){   

 $http.post('/api/project', $scope.project)
      .success(function(data, status){
        $modalInstance.dismiss(true);
      })
      .error(function(data){
        console.log(data);
      })
  }
}

This is my test

it('should make a post to /api/project on submit and close the modal on success', function() {
    scope.submit();

    $httpBackend.expectPOST('/api/project').respond(200, 'test');

    $httpBackend.flush();

    expect(modalInstance.dismiss).toHaveBeenCalledWith(true);
  });

The error I get is:

Error: Unexpected request: GET views/appBar.html

views/appBar.html is my templateUrl:

 .state('project', {
    url: '/',
    templateUrl:'views/appBar.html',
    controller: 'ProjectsCtrl'
  })

So somehow ui-router is making my $httpBackend point to this instead of my submit function. I have the same issue in all my tests using $httpBackend.

Is there any solution to this?

Relevant UI-Router issue #212 with some workarounds: github.com/angular-ui/ui-router/issues/… — Chris T
– Chris T, Commented Jan 14, 2015 at 19:23

Cyril Gandon · Accepted Answer · 2016-04-14 07:02:44Z

48

Take this gist https://gist.github.com/wilsonwc/8358542

angular.module('stateMock',[]);
angular.module('stateMock').service("$state", function($q){
    this.expectedTransitions = [];
    this.transitionTo = function(stateName){
        if(this.expectedTransitions.length > 0){
            var expectedState = this.expectedTransitions.shift();
            if(expectedState !== stateName){
                throw Error("Expected transition to state: " + expectedState + " but transitioned to " + stateName );
            }
        }else{
            throw Error("No more transitions were expected! Tried to transition to "+ stateName );
        }
        console.log("Mock transition to: " + stateName);
        var deferred = $q.defer();
        var promise = deferred.promise;
        deferred.resolve();
        return promise;
    }
    this.go = this.transitionTo;
    this.expectTransitionTo = function(stateName){
        this.expectedTransitions.push(stateName);
    }

    this.ensureAllTransitionsHappened = function(){
        if(this.expectedTransitions.length > 0){
            throw Error("Not all transitions happened!");
        }
    }
});

Add it to a file called stateMock in your test/mock folder, include that file in your karma config if it isn't already picked up.

The setup before your test should then look something like this:

beforeEach(module('stateMock'));

// Initialize the controller and a mock scope
beforeEach(inject(function ($state //other vars as needed) {
    state = $state;
    //initialize other stuff
}

Then in your test you should add

state.expectTransitionTo('project');

edited Apr 14, 2016 at 7:02

Cyril Gandon

17.1k15 gold badges84 silver badges124 bronze badges

answered May 15, 2014 at 5:47

rosswil

1,0579 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Joe Over a year ago

Awesome! I was almost skipping ui-router all together. Great work! You should share this work with the ui-router folks so people can find it better.

Whisher Over a year ago

@user1572526 yeah Awesome! +1 rosswil just an huge headache ^^ it seems strange to me not to see just a lot of people here ....

evkline Over a year ago

Wow, this needs to be shared with ui-router, spent hours trying to determine why commenting out my $urlRouterProvider was fixing my tests. Thanks rosswil and for Whisher for pointing me here!!!

Ronan Quillevere Over a year ago

getting "TypeError: Cannot read property '$current' of undefined" with ui-router v0.2.11 (1937:19). The registerState method crashes, $state is undefined. Does anyone has the same issue ?

Paymahn Moghadasian Over a year ago

Can this be used to test that the correct $stateParams are passed on a transition using $state.go? ie: test that $state.go('users', {name: 'Bob' }) correctly passes {name: 'Bob'} as part of the transition?

|

Community · Accepted Answer · 2017-05-23 12:32:27Z

39

This Github issue about Unit Testing UI Router explains more fully what's happening.

The problem is that $httpBackend.flush() triggers a broadcast which then triggers the otherwise case of the stateProvider.

A simple solution can be to do the following setup, as mentionned by @darinclark in Github thread mentionned above. This is valid if you do not need to test state transitions. Otherwise have a look to @rosswil's answer that is inspired by @Vratislav answer on Github.

beforeEach(module(function ($urlRouterProvider) {
    $urlRouterProvider.otherwise(function(){return false;});
}));

EDITED

Thanks to Chris T to report this in the comments, seems after v0.2.14? the best way to do this is to use

beforeEach(module(function($urlRouterProvider) {
  $urlRouterProvider.deferIntercept();
}));

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Oct 28, 2014 at 16:11

Ronan Quillevere

3,9191 gold badge33 silver badges45 bronze badges

6 Comments

Chris T Over a year ago

UI-Router now has a $urlRouterProvider.deferIntercept() function. See github.com/angular-ui/ui-router/issues/…

Sa'ad Over a year ago

This is the quickest solution

Carlos Over a year ago

@ChrisT, your fix is the most elegant one. Thanx for posting it!

Michahell Over a year ago

The problem is that $httpBackend.flush() triggers a broadcast which then triggers the otherwise case of the stateProvider. is exactly what is happening to most people, probably.

DLight Over a year ago

$urlRouterProvider is deprecated as of v1.0.0. Use $urlServiceProvider.deferIntercept(); instead.

|

Jose Ignacio Hita · Accepted Answer · 2015-04-22 10:29:37Z

3

If you don't want to add gist files like it says in the correct solution you can add a "when" condition to your $httpBackend to ignore GET petitions of views like this:

$httpBackend.when("GET", function (url) {
    // This condition works for my needs, but maybe you need to improve it
    return url.indexOf(".tpl.html") !== -1;
}).passThrough();

answered Apr 22, 2015 at 10:29

Jose Ignacio Hita

9941 gold badge10 silver badges18 bronze badges

4 Comments

Victor Marchuk Over a year ago

I got .passThrough is not a function error, not sure why. This worked for me: $httpBackend.whenGET(/templates\/.*/).respond('');

Jose Ignacio Hita Over a year ago

You can see here the documentation, passThrough is a valid function: docs.angularjs.org/api/ngMockE2E/service/$httpBackend Is a function from requestHandler that is the answer of "when" function.

Adarsh Konchady Over a year ago

Even I got .passThrough is not a function error. '.respond' worked fine though.

jakub.g Over a year ago

.passThrough is available in angular e2e tests (ngMockE2E), but not in unit tests (ngMock)

Alex Carod · Accepted Answer · 2015-07-01 08:42:05Z

2

I have the same error your commented, after a call service they ask me about the url of otherwise ui-route.

To solve the problem of call the otherwise ui-route in testing is not inject $state in beforeach statment. In my testing $state not have sense to use it.

answered Jul 1, 2015 at 8:42

Alex Carod

1311 silver badge8 bronze badges

Comments

Maccurt · Accepted Answer · 2014-12-20 11:57:01Z

1

Move your services to their own module that have no dependency on ui.router. have your main app depend on this module. When you test don’t test the main app, test the module that has your services in it. The stateprovider won’t try to change state/route because this module knows nothing about the ui.router. This worked for me.

answered Dec 20, 2014 at 11:57

Maccurt

14k8 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

UI-router interfers with $httpbackend unit test, angular js

5 Answers 5

6 Comments

6 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

6 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related