angularjs - 如何在 Protractor 测试中在 httpBackendMocks 之间切换

Question

我试图在 Protractor 测试中模拟对 API 调用的响应。在不同的测试中(以及在测试中)，应用程序将 POST 到一个 API(总是相同的 URL)，并发布不同的数据，并期待不同的响应。

具体来说，它是一个搜索引擎，我发送不同的查询并期望返回不同的结果。我让它像下面的代码一样成功运行，但它变得难以管理:

var httpBackendMock = function() {
  angular.module('httpBackendMock', ['ngMockE2E'])
    .run(function($httpBackend) {
      $httpBackend.whenPOST('//search_endpoint').respond(function(method, url, query, headers) {
        query = JSON.parse(query);
        if (query.bla = 'foo') {
          var results = {... lots of json ...};
        } else if (query.bla = 'bar') {
          var results = {... lots of json ...};
        } else if (query.something.else != 'whatever') {
          var results = {... lots of json ...};
        ... etc ...
        } else {
          var results = {... lots of json ...};
        }
        return [200, results];
      });
      $httpBackend.whenGET(/.*/).passThrough();
    })
};

beforeEach(function(){
  browser.addMockModule('httpBackendMock', httpBackendMock);
});

我想做的是将每个可能的响应放在一个单独的模拟中，然后删除 beforeEach并在需要时添加模拟，如下所示:

it('paginates', function(){
  // mocking a search with 13 results, showing 10 results per page
  browser.addMockModule('search_results', <some function>);
  $('#searchbox').sendKeys('some keyword search');
  $('#searchbutton').click();
  expect($('#results li').count()).toEqual(10);
  browser.clearMockModules();
  browser.addMockModule('search_results_page2', <some other function>);
  $('#next').click();
  expect($('#results li').count()).toEqual(3)
});

这有两个问题。

1)它不起作用。清除并添加第二个模拟后， getRegisteredMockModules()仅显示第二个模拟，但似乎第一个模拟仍在使用，基于 expect s和使用时的人工检查 browser.pause()与 ChromeDriver。似乎您至少不重新加载页面就无法更改模拟。

2) 即使它确实有效，每个模拟模块也有大量重复代码，因为它必须设置所有内容，包括 passThrough() .

如果我可以将我想要的响应传递到我正在添加的模拟中，那会更好，但是我尝试了，并且传递到我自己的函数中的任何内容在 angular.module 中都不可用。范围。我能想到的唯一方法是创建另一个带有提供者的 Angular 模块，该提供者具有一个变量，可以跟踪所需的响应，并将其注入(inject)到模拟模块中。我还没有尝试过，但这似乎是一个不必要的复杂解决方案。

Answer 1

Protractor 中的模拟模块基本上是在每次整页刷新时在浏览器中执行的代码。这是一种为您省去自己做这件事的麻烦的机制，因为这样的刷新完全清除了浏览器的状态(当然 cookie 除外)。正如您已经发现的那样，在您触发这样的刷新(使用 browser.get() )之前，您的模块永远不会执行。您可以使用 browser.executeScript() 手动执行此操作如果你想。

关于 mock 后端带来的困惑 - 我采取了以下方法:
为您的后端提供一个默认的模拟实现，同时使其易于覆盖并在每次测试之前使用 init 函数注册它:

模拟后端base.js

exports.httpBackendMockBase = function () {
    var exposeBackendCalls = function ($httpBackend) {
        this.getLoginAuthenticated = $httpBackend.whenGET(/login\/authenticated.*/);
        this.getFindStuff = $httpBackend.whenGET(/lookup\/findStuff.*/);
        this.getFullProfile = $httpBackend.whenGET(/api\/full.*/);
    };

    angular.module('httpBackendMockBase', ['myClientApp', 'ngMockE2E'])
    .service('httpBackendMockBase', exposeBackendCalls)
    .run(function (httpBackendMockBase, testFixture) {
        httpBackendMockBase.getLoginAuthenticated.respond(function () {
            return [200, null, {}];
        });
        httpBackendMockBase.getFindStuff.respond(function () {
            return [200, { stuff: testFixture.stuff }, {}];
        });
        httpBackendMockBase.getFullProfile.respond(function () {
            return [200, { profile: testFixture.fullProfile }, {}];
        });
    });
};

如果您需要在某些时候覆盖它的一部分，请注册一个新的模拟模块。在您的 afterEach 中删除它堵塞:

模拟后端特殊用户.js

exports.httpBackendMock = function() {
    angular.module('httpBackendMockSpecialUser', []).run(function (httpBackendMockBase, testFixture) {
        httpBackendMockBase.getLoginAuthenticated.respond(function() {
            return [200, testFixture.specialUser, {}];
        });
    });
};

testFixture来自另一个模块，该模块保存我们的数据并在 之前注册模拟后端库 :

夹具.js

exports.data = {
    stuff: null,
    fullProfile: {},
    specialUser: {}
};

exports.module = function (data) {
    angular.module('backendFixture', []).constant('testFixture', data);
};

初始化函数:

var fixtureModule = require('fixture');
var baseMockedBackend = require('mocked-backend-base');

browser.addMockModule('backendFixture', fixtureModule.module, fixtureModule.data);
browser.addMockModule('httpBackendMockBase', baseMockedBackend.httpBackendMockBase);