angularjs - Call other api when running tests using Protractor

Question

I currently have setup some tests using protractor. These tests are retrieving data from a WebApi. However, I want to point the WebApi calls to a real but mocked WebApi that just returns the objects I want to use as test data.

For example, the current request is:

http://localhost/myApp/api/profile/getUser/1

I want to manipulate this request so the test will use:

http://localhost/myApp/apiMock/profile/getUser/1

First I thought to write an interceptor that changes the request header but I don't have a clue how to make this work with Protractor. I can't use angular directly within my protractor tests, can I? If I can, writing the interceptor isn't a problem, I just don't know how to plug it in for my tests in protractor.

I've read the following post: E2E and Mocking but it doesn't fulfill my needs as I don't want to call the same url over and over again, I want to replace (part of) the dynamic url to point to the mocked api service.

Just to make myself more clear, I'm not looking for mocked data on the client side. I want to keep the API calls (in my opinion it's more E2E) but just point to another API url that returns mocked data.

Answer 1

The problem can be solved by adding a addMockModule

more details here: Protractor addMockModule and $httpProvider interceptor

solution:

exports.apiMockModule = function () {

  console.log('apiMockModule executing');

  var serviceId = 'mockedApiInterceptor';
  angular.module('apiMockModule', [])
      .config(['$httpProvider', configApiMock])
      .factory(serviceId,
      [mockedApiInterceptor]);

  function mockedApiInterceptor() {
      return {
          request: function (config) {
              console.log('apiMockModule intercepted');
              if ((config.url.indexOf('api')) > -1) {
                config.url = config.url.replace('api/', 'apiMock/');
              }

              return config;
          },
          response: function (response) {
              return response
          }
      };
  }

  function configApiMock($httpProvider) {
      $httpProvider.interceptors.push('mockedApiInterceptor');
  }
};

Then I have my actual test where I load the module.

describe('E2E addMockModule', function() {
    beforeEach(function() {
        var mockModule = require('./mockedRest');
        browser.addMockModule('apiMockModule', mockModule.apiMockModule);
        console.log('apiMockModule loaded');
        browser.get('#page');
    });
    it('tests the new apiMock', function() { 
        // your test that clicks a button that performs a rest api call. 
    });
});

Credits go to @gontard