Search code examples
angularjsmockingui-testingangular-http-interceptors

ng mock e2e Unexpected Request


I'm using the ngMockE2E to mock the httpBackend while developing the UI in Angular JS. The App runs on a Grizzly-Server with a backend which is provided by a virtual machine. Now when I go on the Website the Console logs the Error:

Unexpected request: GET /api/info

No more request expected

In my case I only want to mock the data of one database. Additional to that I want to turn the mock ON/OFF on the fly via a button. This was working until the Error comes up. For that case I've written the following:

$httpBackend.whenPOST(function (url) {
        if (!mockup) {
            return false;
        }
        var target_url = (someUrl);
        return target_url === url;
    }).respond(function (method, url, data) {
        return [200, [someData], {}, 'mockupData'];
    }
);

Additional to that I've added the following to pass all the other requests:

// pass the rest of the queries
$httpBackend.whenGET(/.*/).passThrough();
$httpBackend.whenPOST(/.*/).passThrough();
$httpBackend.whenPUT(/.*/).passThrough();
$httpBackend.whenDELETE(/.*/).passThrough();

Solution

  • So for all of you who face the same problem. I found a workaround for the issue. But I'm sure there should be another better solution. For that I used an Interceptor which is also provided by angular. Here the api

    So I wrote this:

    app.factory('httpInterceptor', function () {
            return {
                'response': function (response) {
                    // therefore you can enable the mockup with a switch or a button
                    if (!mockup) {
                        return response;
                    }
                    try {
                        // in the config object is the requested url
                        if (response.config.url !== someUrl) {
                            // don't intercept; return response unchanged
                            return response;
                        }
                        // found an url which should be mocked
                        // generate or modify the data
                        var generatedData = generateSomeData();
                        response.data.push(generatedData)
                        return response;
                    } catch (TypeError) {
                        // don't intercept
                        return response;
                    }
                }
            }
        }
    );
    app.config(['$httpProvider', function ($httpProvider) {
        $httpProvider.interceptors.push('httpInterceptor');
    }]);