量角器 addMockModule 和 $httpProvider 拦截器 [英] Protractor addMockModule and $httpProvider interceptor

问题描述

这个问题是我另一个问题的可能解决方案(他们建议使用量角器中的 addMockModule):使用 Protractor 运行测试时调用其他 api.

This question is a possible solution for my other question (where they advice to use addMockModule from protractor): Call other api when running tests using Protractor.

我有以下文件:mockedRest.js 这是我要添加到量角器的模块.它应该拦截任何 REST 调用并替换地址(api/到 apiMock/).

I have the following file: mockedRest.js this is the module I want to add to protractor. It should intercept any REST calls and replace the address (api/ to apiMock/).

exports.apiMockModule = function () {

    console.log('apiMockModule executing');

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

    function mockedApiInterceptor() {
        return {
            request: function (config) {
                console.log('apiMockModule intercepted');
                if ((config.url.indexOf('api')) > -1) {
                    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() { 
        // test that clicks a button that performs a rest api call. left out as I can see the call in fiddler.
    });
});

但是，REST 调用仍然指向api/"而不是apiMock/"我不知道我是否需要做更多的事情才能让拦截器完成它的工作.还值得注意的是，apiMockModule 内没有任何内容记录到控制台，就像它没有加载模块一样.

However, the REST call is still pointing to 'api/' instead of 'apiMock/' I don't know if I have to do anything more in order to get the interceptor to do its work. It's also worth to note that there isn't anything logged to console inside the apiMockModule, like it isn't loading the module.

感谢任何建议.

推荐答案

我在 mock 模块中做了两个小错误修复以使其正常工作.

I make two minor bug fixes in mock module to make it works.

• 模拟模块不需要依赖于您的应用程序，
• config.url 必须由转换后的设置.

更新后的mockedRest.js:

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');
  }
};

我在这个环境下测试过这段代码:

I have tested this code in this environment:

• 量角器 0.24.1
• 角度 1.2.16
• ChromeDriver 2.10.267517
• 谷歌浏览器 35.0.1916.153
• Mac OS X 10.9.3 x86_64

你写道:

在 apiMockModule 中没有任何内容记录到控制台

There isn't anything logged to console inside the apiMockModule

正常，模块代码不是protractor执行的，而是发送到浏览器的(使用driver.executeScript).所以代码是由浏览器执行的.

It is normal, the module code is not executed by protractor, but sent to the browser (using driver.executeScript). So the code is executed by the browser.

但是可以 从浏览器获取日志进行调试:

...
it('tests the new apiMock', function() {
  browser.manage().logs().get('browser').then(function(browserLog) {
    console.log('log: ' + require('util').inspect(browserLog));
  });
...

这篇关于量角器 addMockModule 和 $httpProvider 拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！