http-backend-proxy 不适用于量角器 e2e

Question

我是 e2e 测试和 Angular 的新手，我正在尝试弄清楚如何模拟 http 请求。我有一个应用程序，我需要向页脚和常量文件之类的东西发出 xhr 请求，我想实际通过，但实际的服务调用就像向数据库添加一些东西，我想模拟（这样每当我运行 e2e 测试，它不会每次都填充测试数据）。

我最终会使用 API，但为了让球滚动，我在处理该元素点击的那个函数上对 /someUrl 进行 $http 访问。

describe('companyManagement', function() {
    var proxy;
    var HttpBackend = require('http-backend-proxy');
    beforeEach(function(){
        proxy = new HttpBackend(browser);

        proxy.onLoad.whenGET('/someUrl/').respond(200,{'mock':'data'});
        browser.get('/#/companyManagement');

        browser.pause();
        element(by.repeater('org in vm.organizations').row(0)).element(by.css('.contentHeader')).click();
    });
    it('alias should be correct in the org list', function(){
        var x;
    });
});

这是我当前的代码。我需要 http-backend-proxy，并在我的每个之前为我的 it 语句设置一些东西，我稍后会写。 beforeEach 创建一个新的 HttpBackend 对象，并执行proxy.onLoad.whenGET('/someUrl').respond(200,{mock:'data'});。然后我获取页面（在我的 .conf 文件中设置了 baseUrl），并暂停浏览器以便查看控制台。此时，当我查看浏览器控制台时，它给出了我的意外请求错误。一种用于modules/footer/footer.html，一种用于constants/constants.json。

错误：意外请求：GET modules/footer/footer.html 预计不再有请求 $httpBackend@http://localhost:9000/bower_components/angular-mocks/angular-mocks.js:1244:1 发送请求@http://localhost:9000/bower_components/angular/angular.js:10515:1 $http/serverRequest@http://localhost:9000/bower_components/angular/angular.js:10222:16 进程队列@http://localhost:9000/bower_components/angular/angular.js:14745:28 scheduleProcessQueue/http://localhost:9000/bower_components/angular/angular.js:14761:27 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:15989:16 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:15800:15 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:16097:13 引导应用@http://localhost:9000/bower_components/angular/angular.js:1660:9 调用@http://localhost:9000/bower_components/angular/angular.js:4478:14 引导/doBootstrap@http://localhost:9000/bower_components/angular/angular.js:1658:1 bootstrap/angular.resumeBootstrap@http://localhost:9000/bower_components/angular/angular.js:1686:12 匿名@http://localhost:9000/#/companyManagement 第 69 行 > 功能：1:1 handleEvaluateEvent@http://localhost:9000/#/companyManagement:69:20

页面上没有显示任何内容，因此 protactor 无法单击该元素。我已经尝试过proxy.onLoad.whenGET('/.*/').respond(200,{'mock':'data'}); 之类的方法，但发生了同样的错误。

有人可以向我解释如何正确模拟 http 请求吗？

Answer 1

您可以使用相应的方法简单地发出对 HTML 和其他静态文件的所有请求。 http-backend-proxy 将忽略它们，它们的响应将保持不变。

proxy.onLoad.whenGET(/\.html$/).passThrough();
proxy.onLoad.whenGET(/constants\.json$/).passThrough();

这是一种常见的方法，因为 SPA 通常会发出大量 XHR 请求来获取模板，在大多数情况下不必模拟这些模板。但是由于 http-backend 默认会跟踪所有请求，因此您必须明确指出哪些特定的请求需要被忽略。