Jasmine Angular http testing

Question

I'm trying to test a REST API wrapped in an AngularJS service using Jasmine async testing. I know, I should be, and am, running tests on the API on the server, and using a mock $httpBackend to test the service.

but when i test this code :

'use strict';

describe('controllers: SiteCtrl', function() {
var scope, httpBackend, http, controller;
var zipcode = "94305";
beforeEach(module('ngMockE2E'));
beforeEach(module('ironridge'));

beforeEach(inject(function($rootScope, $controller, $httpBackend, $http) {
    scope = $rootScope.$new();
    httpBackend = $httpBackend;
    controller = $controller;
    http = $http;
    // httpBackend.w    hen('http://api.zippopotam.us/us/' + zipcode).respond({});
    $controller('SiteCtrl', {
        $scope: scope,
        $http: $http
    });
}));

it('should define more than 5 awesome things',function (){

    expect(scope.nav.radio).toMatch('site');
});
it("should match a correct zip code", function() {


    httpBackend.expectGET('http://api.zippopotam.us/us/' + zipcode).responde(200);
    http.get('http://api.zippopotam.us/us/' + zipcode).
            success(function(data) {
                console.log(data);
            }).
            error(function(status) {
                console.log(status);
            });
    httpBackend.flush();


});
});

but i get an error when running test

[16:01:41] all files 33.1 kB
[16:01:41] Finished 'scripts' after 1.06 s
[16:01:41] Starting 'test'...
WARN [watcher]: Pattern "/home/hpro/ironridge/src/**/*.mock.js" does    not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS  
INFO [PhantomJS 1.9.8 (Linux 0.0.0)]: Connected on socket Cfi_cbdTVW-YOCX8_BaV with id 45541989
PhantomJS 1.9.8 (Linux 0.0.0) controllers: SiteCtrl should match a correct zip code FAILED
 TypeError: 'undefined' is not a function (evaluating  'httpBackend.expectGET('http://api.zippopotam.us/us/' + zipcode).responde(200)')
    at /home/hpro/ironridge/src/app/site/site.controller.spec.js:28
PhantomJS 1.9.8 (Linux 0.0.0): Executed 2 of 2 (1 FAILED) (0.006 secs / 0.059 secs)
[16:01:42] 'test' errored after 1.41 s
[16:01:42] Error: 1
at formatError (/usr/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp.<anonymous> (/usr/lib/node_modules/gulp/bin/gulp.js:195:15)
at Gulp.emit (events.js:107:17)
at Gulp.Orchestrator._emitTaskDone (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
at /home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/index.js:275:23
at finish (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at cb (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
at removeAllListeners (/home/hpro/ironridge/node_modules/karma/lib/server.js:215:7)
at Server.<anonymous> (/home/hpro/ironridge/node_modules/karma/lib/server.js:226:9)
at Server.g (events.js:199:16)

Thanks for help :D

ngMockE2E is for end-to-end tests. You shouldn't use it for unit tests. — JB Nizet
– JB Nizet, Commented Jul 20, 2015 at 15:13
@AvraamMavridis after updating this typo Error: Unexpected request: GET app/site/site.html No more request expected at $httpBackend (/home/hpro/ironridge/bower_components/angular-mocks/angular-mocks.js:1227) at sendReq (/home/hpro/ironridge/bower_components/angular/angular.js:9704) at /home/hpro/ironridge/bower_components/angular/angular.js:9415 at processQueue (/home/hpro/ironridge/bower_components/angular/angular.js:13300) at /home/hpro/ironridge/bower_components/angular/angular.js:13316 at /home/hpro/ironridge/bower_components/angular/an — Hamdi
– Hamdi, Commented Jul 20, 2015 at 15:19
@JBNizet i follow tutorials like this one benlesh.com/2013/06/angular-js-unit-testing-services.html — Hamdi
– Hamdi, Commented Jul 20, 2015 at 15:21

changtung · Accepted Answer · 2015-07-21 14:47:48Z

1

You cannot do E2E tests with httpBackend. First option, to forfit E2E tests, and make tests for $httpBackend, without e2e tests and run it from grunt running grunt test. Which would be unit tests. Second option, which you can mix with first is to create separate file for E2E tests, also in Jasmine syntax and run it independly with protractor.

In edited code, use flush before calling handle.success. Flushing means that get operation goes into action. Instead of:

$http.get('http://api.zippopotam.us/us/' + zipcode).
            then(handler.success,handler.error);
            httpBackend.flush();

Write:

var prom = $http.get('http://api.zippopotam.us/us/' + zipcode);
httpBackend.flush();
prom.then(handler.success,handler.error);

It's possible that handler.success is called before flush is made.

edited Jul 21, 2015 at 14:47

answered Jul 20, 2015 at 15:28

changtung

1,6242 gold badges15 silver badges19 bronze badges

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

1 Comment

Hamdi Over a year ago

i have corrected the code but i get an undefined result from the http service when i log data pastebin.com/M5BgziJF help please

Collectives™ on Stack Overflow

Jasmine Angular http testing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related