Mockjax use in an angular app

Question

I am new to AngularJS.

Can I use mockjax in AngularJS by calling mock end points using $http services method get/post. If not is there a way $http provides a way to create end points and call them?

For example The MockService is something like this

$.mockjax({
    url: '/sometest/abc',
    type: 'post',
    responseTime: 2000,
    responseText: {
        LoginSuccessful: true,
        ErrorMessage: "Login Successfuly",
        Token: "P{FsGAgtZT7T"
    }
});

And the DataService that I have created has is as below.

'use strict';

//Data service
angular.module('app').factory('dataService',['$http', function($http){

    var restCall = function (url, type, data, successCallback, errorCallback) {
        $http({
            method: type,
            url: url,
            data: data,
        }).
        success(function (data, status, headers, config) {
            successCallback(data);
        }).
        error(function (data, status, headers, config) {
            errorCallback(data)
        });
    };

    return {
        getTemplate: function (success, error) {
            restCall('/sometest/abc', 'GET', null, success, error);
     }
    };
}]);

And the controller is below as

angular.module('App').controller('mainCtrl', ['$scope', 'trackService', 'dataService',
        function ($scope, TrackService, ds) {

            ds.getTemplate(function (data) {
                //do some calculation
            }, function () {
                console.warn('Something is not right');
            });}]);

I want know that is this the correct way of using the $http, or something else should be done.This is something I am trying to achieve in the actual code, but not in Unit test using jasmine.

Answer 1

I had to do this recently and I found that using Angular's built-in stuff (angular-mocks) was pretty easy.

Here's the basic idea: you include a separate module in your test harness which mocks out your requests, it's a basic URL matcher with either strings or regular expressions...

// in some other file that you include only for tests...
var myTestApp = angular.module('myApp', ['myApp']);

myTestApp
  .config(function ($provide, $httpProvider) {
    // Here we tell Angular that instead of the "real" $httpBackend, we want it
    // to use our mock backend
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
  })
  .run(function ($httpBackend) {

     $httpBackend.whenGET('/some/url')
       .respond(function (method, url, requestData, headers) {
         // Do whatever checks you need to on the data, headers, etc

         // Then return whatever you need to for this test.
         // Perhaps we want to test the failure scenario...
         return [
           200,                       // Status code
           { firstname: 'Jordan' },   // Response body
           {}                         // Response headers
         ];
       });
  });

Check the first link above to read my blog post on this.