HTTP/AJAX Mocking and assertions

[appleton]

Currently I'm running my tests against a server which responds to my AJAX requests with canned chunks of JSON. It would be great to be able to make assertions against these requests in a similar way to karma

$httpBackend.expectGET('some/url').respond({some: 'JSON'});

The only solution I have right now is to run protractor and my connect server in the same process and then write an interface a bit like this manually.

I'd love to get a discussion going about plans to deal with this in protractor.

[juliemr]

It'd help to get a better idea of what you're hoping to test. Protractor is intended for end to end tests, so the primary use case is when you have an actual backend hooked up. It sounds like you're looking to test just your UI via your static files, without any real $http requests hitting backends?

Protractor provides a way to override modules, so it would certainly be possible to have a helper file that would make setting up your $http mocks easier. You still need some way to serve your static files, though.

[appleton]

My exact case is that I have a rails app serving an API and the static files which make up my Angular app. I'd like to test the Angular app but stop at the AJAX requests and keep the rails app out of it.

I have a lightweight connect server which serves the Angular app for integration testing and currently it just returns canned responses to the AJAX API requests. I'd like to be able to make assertions against those requests and set them to return different responses in different tests.

I didn't realise that I could override modules from protractor - that sounds like exactly what I need! I take it I can just use the mock $httpBackend like I do in Karma unit tests? Is there an example somewhere of how to go about this with Protractor?

[davemo]

Hey @mrappleton, we do something similar with a Rails app that acts as only API in dev and also serves static assets in production. We use Lineman to manage our static assets in dev mode and run a small apiProxy configuration that talks to the Rails API transparently. Lineman has a built in fake-server that sounds similar to what you are using connect for. Once we are ready to move to prod we execute lineman build which bundles up all our static assets that we just dump into the Rails public directory.

If you need the flexibility of defining the API responses in each test you may want to check out a small gem that we made @testdouble called servme. It gives you a small DSL that allows you to stub responses for particular requests, here's an example:

before(:each) do
  on({
    :url => "/api/login",
    :method => :post,
    :params => {
      :login => "todd",
      :password => "scotch"
    }
  }).respond_with(:token => "1234567890")
end

In general I agree with @juliemr that Protractor is the ideal tool for writing tests that hit your actual backend or an actual fake backend as opposed to $httpBackend; I feel the latter is most appropriate for unit tests.

[appleton]

Hey @davemo serveme looks very cool, however what I'm really after though is to avoid Rails entirely with these tests and just isolate the Angular app as a system. I think having access to the mock $httpBackend would do the job for me, @juliemr do you have any pointers on getting this set up? Will I be able to access the mocked object from within my specs?

[juliemr]

@mrappleton - unfortunately, the javascript running in your application is separated from the javascript running in your specs, so you won't be able to access the mocked object from your specs. The only way that code is sent to the browser under test is via webdriver.executeScript, which can only return a primitive or an element. That means you won't be able to use the unit testing $httpBackend. Here's an example of a very simple way to override a module:

    // This function will be executed in the context of the application under test, so it may not refer to any local variables.
    var mockModuleA = function() {
      var newModule = angular.module('moduleA', []);
      newModule.factory('$http', function() {
        mockHttp = function() { return 'foo!' };
        return mockHttp;
      });
    };

    it('should override services via mock modules', function() {
      ptor.addMockModule('moduleA', mockModuleA);\
      ptor.get('app/index.html');
      // your test here
    });

[appleton]

Thanks for the explanation @juliemr, makes perfect sense. What I've decided to do is change my API mocking to be a little smarter so it can more closely simulate POSTing and saving data - that way I can just do a POST then reload a page and assert that the data is shown.

[ozanturksever]

i use ngMockE2E as mock, works perfect.

var mock_code = function () {
    angular.module('httpBackendMock', ['ngMockE2E'])
        .run(function ($httpBackend) {
            $httpBackend.whenGET('/api/login').respond({status:'loggedin'});
            $httpBackend.whenGET(/.*/).passThrough();
        });
};

it('should override services via mock modules', function() {
      ptor.addMockModule('httpBackendMock', mock_code);
      ptor.get('app/index.html');
      // your test here
});

[benlesh]

@ozanturksever How are you getting the ngMockE2E module? Do you have it referenced in your test or on the browser already? The code that you have won't work unless the angular-mock.js file is referenced somewhere.

[ozanturksever]

i have grunt tasks that generates reference for it, so for tests it is referenced after angular.js. I also made a little change in angular-mocks.js. It is not queuing responses anymore, responds immediately.

$ diff angular-mocks-protractor.js angular-mocks.js
911c911
<           setTimeout(resp,0);
---
>           responses.push(resp);

[benlesh]

Very clever, @ozanturksever, thanks for the insight.

[mcalthrop]

@juliemr: with reference to your suggested solution... thank you. My setup is slightly different, and I'm having trouble adapting your solution to my requirements.

The code for the service (ie, the service that I want to mock) looks something like this:

angular.module('XServiceModule', ['ngResource']).factory(
    'XService',
    function ($resource) {
        return $resource(
            'path/to/service'
        );
    }
);

That service is called as a POST from the controller like this:

XService.save(
    {},
    JSON.stringify(YModel),
    function (value, getResponseHeaders) {
        // everybody is happy; do something
    },
    function (httpResponse) {
        // error handling here
    }
);

From an e2e testing pov (I'm using Protractor), what I want to do is to specify exactly the JSON object that is returned when that service is called – but I'm stuck!

Can you help out? Am sure I am close... :-)

many thanks

Matt

[mcalthrop]

I think I might have found a solution:

// this mock service will return success
var mockXServiceModuleSuccess = function () {
    angular.module('XServiceModule', []).factory(
        'XService',
        function () {
            return {
                save: function (params, postData, onSuccess, onError) {
                    var value = {},         // set as necessary
                        getResponseHeaders = function () {
                            return {};      // set as necessary
                        };
                    onSuccess(value, getResponseHeaders);
                }
            };
        }
    );
};
// and this one will fail
var mockXServiceModuleError = function () {
    angular.module('XServiceModule', []).factory(
        'XService',
        function () {
            return {
                save: function (params, postData, onSuccess, onError) {
                    var httpResponse = {};  // set as necessary
                    onError(httpResponse);
                }
            };
        }
    );
};

And then, at the relevant parts in the testing code, add the mocked module:

browser.addMockModule('XServiceModule', mockXServiceModuleSuccess);

or:

browser.addMockModule('XServiceModule', mockXServiceModuleError);

I have given that a go, and it seems to be working.

Does it look right to you? Is there something I have missed?

cheers

Matt

[mcalthrop]

The only thing I think I might have missed is to return a promise from the mocked save() method, which I guess would look like this:

return $q.defer().deferred.promise;

Does that look right?
And how would I inject $q?