Handling AJAX Post Request Callbacks in Jasmine Unit Test

Question

i have been trying to set up this test for a long time now...i really dont get what's not working here.

my Angular app:

<body ng-app="testApp">
<div class="container" droppable>
    <div class="row"><navi></navi></div>
    <div class="row">
            <div class="col-xs-8">
                <preview></preview>
                <editor></editor>
            </div>
            <div class="col-xs-4">
                <iframe src="" pull-down></iframe>
            </div>
    </div>
</div>

the controller:

testApp.controller('previewController', ['$scope', '$http', function($scope, $http) {
$scope.tmp = "test";
console.log("init controller");
$.ajax({
    url: "http://localhost/angularjs_testapp/request.php",
    type: "POST",
    success: function(data){
        console.log("server data:");
        console.log(data);
        $scope.data = data;},
    error: function(data){
        console.log("error occured");
        console.log(data);
    }
});
}]);

and at least the test:

describe('previewController', function() {
beforeEach(module('testApp'));
var scope, createController;

beforeEach(inject(function ($rootScope, $controller) {
    scope = $rootScope.$new();

    createController = $controller('previewController', {
            '$scope': scope
        });
}));

it('should be "test":', function(done) {
    console.log(scope);
    expect(scope.tmp).toBe("test");  //working
    expect(scope.data).toBe("hallo"); //not working
});
});

the server returns the ajax return value correctly if I just call it at the website. But out of the testing environment its not working. It seems like he is not communicating with the server. I made that a promise too, an also tried $http.post() instead of ajax to solve it, but its still not working. What am I doing wrong? May the karma engine fail the server communication?

Are you trying to do a full integration test? or do you just need to verify that the communication occurred like with a regular unit test? — mikeswright49, Jul 30 '15 at 12:33
Is that jQuery's ajax method, in Angular? Use $http! Then you can use $httpBackend to control it. — Seer, Jul 30 '15 at 13:12

mikeswright49 · Accepted Answer · 2015-07-30T13:29:05.547

1

So the issue you're running into is that you're attempting to see the results of a $promise before its resolved. Which mean's you'll have to change a couple of things, including using $http. Since this is a unit test rather than an integration test you want to use $httpBackend to stub out your communication so you don't actually need the backend server.

so your changes need to be:

//in your controller
testApp.controller('previewController', ['$scope', '$http', function($scope, $http) {
     $scope.tmp = "test";
     $http.post("http://localhost/angularjs_testapp/request.php",{})
.success function(data){
    console.log("server data:");
    console.log(data);
    $scope.data = data;}).
error(function(data){
    console.log("error occured");
    console.log(data);
    })
}]);   

//in your jasmine tests
describe('previewController', function() {
beforeEach(module('testApp'));
var scope, createController, httpBackend;

beforeEach(inject(function ($rootScope, $controller, $httpBackend) {
    scope = $rootScope.$new();
    httpBackend = $httpBackend;
    httpBackend.expectPOST("http://localhost/angularjs_testapp/request.php",{}).respond(200,{...Your Response...});
    createController = $controller('previewController', {
        '$scope': scope
    });

}));
afterEach(function () {
         httpBackend.verifyNoOutstandingExpectation();
         httpBackend.verifyNoOutstandingRequest();
});
it('should be "test":', function(done) {
    console.log(scope);
    expect(scope.tmp).toBe("test");  //working
    httpBackend.flush();
    expect(scope.data).toBe("hallo"); //not working
});
});

edited Jul 30 '15 at 13:29

answered Jul 30 '15 at 13:07

mikeswright49

3,381
19
22

hey, tank you for your answer! but now i receive `TypeError: httpBackend.expectPost is not a function` again – messerbill Jul 30 '15 at 13:25
Updated it was a typo it's supposed to be expectPOST – mikeswright49 Jul 30 '15 at 13:29
ok it seems to work a bit better now, but still not really working: `Expected Object({ hallo: 'hallo' }) to be Object({ hallo: 'hallo' }).` ?? why does this fail? its like `failed comparing 1=1` ... – messerbill Jul 30 '15 at 13:37
1

In this case you're using the ToBe vs. ToEqual as ToBe is equivalent to === vs. toEqual is == https://jasmine.github.io/2.0/introduction.html#section-Included_Matchers – mikeswright49 Jul 30 '15 at 13:40
ah bro, i feel so sorry `Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL. ` is the new error – messerbill Jul 30 '15 at 13:45
1

https://stackoverflow.com/questions/22604644/jasmine-async-callback-was-not-invoked-within-timeout-specified-by-jasmine-defa .I had left your code the way it was, but if you look you have a done argument in your it function block that is never used. As a result Jasmine gets upset. So if you don't need it, just get rid of done. – mikeswright49 Jul 30 '15 at 13:48
`Chrome 44.0.2403 (Mac OS X 10.10.4): Executed 1 of 1 SUCCESS (0.011 secs / 0.009 secs)` - that's it - i really love you man. May god or whoever bless you :D you have no idea how long i have been trying this shit....thanks man! – messerbill Jul 30 '15 at 13:50

Handling AJAX Post Request Callbacks in Jasmine Unit Test

1 Answers1