angularjs - 如何在不刷新页面(即不使用 browser.get)的情况下使用 $httpBackend (e2e)

Question

我正在使用 Protractor 和 ngMockE2E 来模拟 api 响应。如果我使用 browser.get 导航到下一页，效果很好。返回预期的模拟数据，但是当我使用搜索按钮上的 click() 导航到下一页时，$httpBackend 不会获取 GET 并返回实时数据。

我需要它在单击按钮时返回模拟数据，因为应用程序在加载时会启动一个 session 。 Browser.get 会导致页面刷新，因此虽然返回了模拟数据，但也会创建一个新 session ，这不是实时环境中发生的情况。

点击按钮后$httpBackend可以调用whenGET吗？

我正在使用 TypeScript 编写代码，http-backend-proxy对于在底层使用 ngMockE2E 的模拟模块:

//httpBackEndMocks.ts
var HttpBackend = require('http-backend-proxy');

var proxy = new HttpBackend(browser);

export class HttpBackendMocks {

    /**
     * Builds a mock module passing any number of the responses below
     */
    buildMockModule = (funcs: Function[]) => {
        if (Array.isArray(funcs)) {
            for (var arrayIndex in funcs) {
                funcs[arrayIndex];
            }
        }
        /** Allow all other GET requests to pass through e.g. html pages */
        proxy.onLoad.whenGET(/.*/).passThrough();
    }

    /**
     * ...
     */
    buildSimpleResponse() {
        var response = require('../responses/simple-respsonse.json');
        return proxy.onLoad.whenGET('the request url').respond(response);
    }

    otherResponse() {whenGET...}

    otherResponse() {whenGET...}

    ....

然后我可以要求:

//search.page.spec

var httpBackEndMocks: app.test.HttpBackendMocks = require('../httpBackEndMocks.js');

并加载我需要的响应:

beforeEach:
var responsesToLoad = [
       httpBackEndMocks.buildSimpleResponse(),
       httpBackEndMocks.otherResponse()
        ];
httpBackEndMocks.buildMockModule(responsesToLoad);

当我通过以下方式转换到下一页时:

//search.object.page

browser.get('the url ...');

它有效。它返回模拟数据，但会导致页面刷新初始化新 session 。

当我通过以下方式转换到下一页时:

this.submitButton.click(); //Code to cause button click omitted

它会在不刷新页面的情况下转换到下一页，因此在同一 session 中但返回实时数据。

Answer 1

我自己为有类似问题的人找到了解决方案:

应在 Protractor 启动应用程序之前添加具有任何所需响应的模拟模块。这样，每当调用初始 browser.get(...) 加载主页时，所有的 whenGET 都会被注册。

open(responsesToLoad: any[]): void {
        this.buildMockModuleWithRequiredResponses(responsesToLoad);
        browser.get('/home');
    }