Unit testing AngularJS with $httpBackend gives "Error: Unexpected Request"

Question

I'm gonna preface this question by saying I've already gotten a test to work for my "LoginCtrl" which performs almost the exact same task. I'm sure this is an issue of something really small I've overlooked. Thanks in advance for any help :)

I've set the expected value/response for httpBackend for my test, but when I run httpBackend.flush(), it's as if I never set the expectation.

Testing code:

describe('user register', function () {
    var scope, RegisterCtrl, httpBackend, userJohnDoe, userJohnDoeRegistered, Restangular;


    // TEST
    beforeEach(module('LR.User.Register'));


    describe('RegisterCtrl', function () {
        beforeEach(inject(function ($controller, _$httpBackend_, $rootScope, _Restangular_, $state) {
            scope = $rootScope.$new();
            httpBackend = _$httpBackend_;
            Restangular = _Restangular_;

            // Models
            userJohnDoeRegistered = {
                "access_token": "YzEyZDhjNjBlY2EwMTMxMmQzZGIzYWY5NDY4OGYwMjMzMGVjNDU3MDVhY2U0YjJmNDc1ODI3NWU0ODkzZGNkMQ",
                "expires_in": 7200,
                "token_type": "bearer",
                "scope": null,
                "refresh_token": "MmFhMTQ5NzU4ODI5ZjE2Mjk3ZjNlYzEwYzJkMjc4M2NkZjY2MjVkMjIwNWQzODUxYWNiYzY3NzIyMzEwYzJhNg",
                "user": {
                    "username": "johndoe",
                    "email": "[email protected]",
                    "id": 1,
                    "first_name": "John",
                    "middle_name": "f",
                    "last_name": "Doe",
                    "created": "2013-09-04T10:46:10-0500",
                    "updated": "2013-09-04T10:46:10-0500"
                },
                "status": "success",
                "status_code": 200,
                "status_text": "OK"
            };
            userJohnDoe = {
                "email": "[email protected]",
                "first_name": "John",
                "middle_name": "f",
                "last_name": "Doe",
                password: 'test123X',
                passwordSecond: 'test123X',
                client_id: '1_3b5zgimwg4kkko4wksk4sw0o48040o8ws8og8kg4wsowwkc44s'
            };

            httpBackend.whenPOST('/register', userJohnDoe).respond(userJohnDoeRegistered);


            RegisterCtrl = $controller('RegisterCtrl', {$scope: scope, $state: $state, Restangular: Restangular});
        }));
        afterEach(function () {
            httpBackend.verifyNoOutstandingExpectation();
            httpBackend.verifyNoOutstandingRequest();
        });


        it('should be able to register a fake user', inject(function () {
            var resolvedRegistration;
            var cb = function (response) {
                // Expect the userJohnDoe object
                resolvedRegistration = sanitizeRestangularOne(response);

                console.log(logTestHeader('REGISTRATION RESPONSE') +
                    JSON.stringify(resolvedRegistration, null, '   '));
            };

            // Set credentials
            scope.user = userJohnDoeCredentials;

            // Call login
            var register = scope.register_user().then(function() {
                cb();
            });
            scope.$digest();
            httpBackend.flush();
            expect(resolvedRegistration).toEqual(userJohnDoeRegistered);
        }));
    });


});

Output response:

Chrome 29.0.1547 (Mac OS X 10.8.4) user register RegisterCtrl should be able to register a fake user FAILED
    Error: Unexpected request: POST /register
    No more request expected
        at Error (<anonymous>)
        at $httpBackend (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular-mocks/angular-mocks.js:959:9)
        at y (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:64:282)
        at g (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:62:272)
        at r (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:96:140)
        at r (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:96:140)
        at /Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:97:293
        at Object.g.$eval (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:104:502)
        at Object.g.$digest (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular/angular.min.js:102:419)
        at null.<anonymous> (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/src/app/user/register/register.spec.js:74:19)
    Error: Declaration Location
        at window.jasmine.window.inject.angular.mock.inject (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/vendor/angular-mocks/angular-mocks.js:1781:25)
        at null.<anonymous> (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/src/app/user/register/register.spec.js:57:54)
        at null.<anonymous> (/Users/bobothefrofro/Development/lr-phoenix/phoenix-client/src/app/user/register/register.spec.js:9:5)
        at /Users/bobothefrofro/Development/lr-phoenix/phoenix-client/src/app/user/register/register.spec.js:1:1

Figured out the problem, see my answer for info.

robert.bo.roth
– robert.bo.roth

2013-09-04 17:01:39 +00:00
Commented Sep 4, 2013 at 17:01 — robert.bo.roth
– robert.bo.roth, Commented Sep 4, 2013 at 17:01

MBielski · Accepted Answer · 2013-09-04 16:53:53Z

3

My first thought is that something is making a request when you instantiate your controller. Maybe try adding the $httpBackend.flush() after your controller declaration line and see if that solves it. Also, should your $scope.$digest be after the $httpBackend.flush instead of before?

answered Sep 4, 2013 at 16:53

MBielski

6,6103 gold badges36 silver badges46 bronze badges

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

2 Comments

robert.bo.roth Over a year ago

Tried moving the flush() call around, but anytime it's called before digest() I get a "No pending request to flush!" error. It seems to me like my httpBackend.whenPOST declaration isn't firing for whatever reason

Michael J. Calkins Over a year ago

By default my controller calls a request method which is what was causing this issue for me.

robert.bo.roth · Accepted Answer · 2013-09-04 17:01:14Z

1

I found out what it was. my register_user() function was referencing $scope.user, which was being set to an undefined variable: userJohnDoeCredentials (a different variable name I had used for my previous test).

Not sure why my IDE wasn't complaining about me referencing an undefined variable, and it was passing all of my jslint tests, so that's strange too, but meh. It's fixed :D Only if now I could get the mock request to return what I want it to...

answered Sep 4, 2013 at 17:01

robert.bo.roth

1,3534 gold badges15 silver badges24 bronze badges

1 Comment

MBielski Over a year ago

Glad you got it fixed. I feel your pain on mocks. They are a whole different animal.

Collectives™ on Stack Overflow

Unit testing AngularJS with $httpBackend gives "Error: Unexpected Request"

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related