AngularJS JSONP unit test with Karma

This tests the resource call being made and a response is being recieved.

by Varun Krishna P

HTML

<script src="http://pivotal.github.io/jasmine/lib/jasmine-1.3.1/jasmine.js"></script>
<script src="http://pivotal.github.io/jasmine/lib/jasmine-1.3.1/jasmine-html.js"></script>
<link rel="stylesheet" href="http://pivotal.github.io/jasmine/lib/jasmine-1.3.1/jasmine.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <title>Jasmine Spec Runner</title>
        <script type="text/javascript">
            (function() {
                var jasmineEnv = jasmine.getEnv();
                jasmineEnv.updateInterval = 1000;

                var htmlReporter = new jasmine.HtmlReporter();

                jasmineEnv.addReporter(htmlReporter);

                jasmineEnv.specFilter = function(spec) {
                    return htmlReporter.specFilter(spec);
                };

                var currentWindowOnload = window.onload;

                window.onload = function() {
                    if (currentWindowOnload) {
                        currentWindowOnload();
                    }
                    execJasmine();
                };

                function execJasmine() {
                    jasmineEnv.execute();
                }

            })();
        </script>
    </head>
    
    <body></body>

</html>

JavaScript

var myApp = angular.module('search', ['ngResource']);
myApp.factory('SearchService', function($q,$rootScope,$resource) {
    var _search = {};
    _search.user = function(opts){
        return $resource('https://api.github.com/users/:user', {user: opts.user}, {
            search: {method:'JSONP',params:{callback: 'JSON_CALLBACK'}}
        });
    }
    return _search;
});


describe('search tests', function () {
    var svc, httpBackend;

    beforeEach(function (){  
      module('ngResource');
      module('search');
      inject(function($httpBackend, SearchService) {
        svc = SearchService;      
        httpBackend = $httpBackend;
      });
    });

    afterEach(function() {
      httpBackend.verifyNoOutstandingExpectation();
      httpBackend.verifyNoOutstandingRequest();
    });

    it('should send the message and return the response', function (){
        var returnData = { testing: 'anything'};
        httpBackend.expectJSONP('https://api.github.com/users/gigablox?callback=JSON_CALLBACK').respond(returnData);
        svc.user({user:'gigablox'}).search(function(user) {
            expect(user.testing).toEqual('anything');
        });
        httpBackend.flush();
    });
});