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

Answer 1

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?