angularjs - E2E 模拟 $httpBackend 对我来说实际上并没有通过

Question

虽然我相信我在关注 instructions here设置 $httpBackend 将选定的请求传递给服务器，它对我不起作用。

Here is a Plunkr with a failing test这显示了我在做什么，并在评论中解释了似乎出了什么问题。

我的探索表明，出于某种原因，模拟 $httpBackend没有真实 $httpBackend 的内部副本这样，当需要通过 XHR 请求时，它会将其传递给模拟 $httpBackend反而。第二次调用引发异常，因为它不知道如何处理请求。

对 dtabuenc 的回应

我感激地记得你关于中途测试的帖子。您确定了介于单元测试和 E2E 测试之间的重要集成测试范围。我站在那个中间地带。

我觉得你一点也不刻薄。你的回答是完全合理的......或者它是合理的如果它与“API reference / ngMockE2E / $httpBackend”的文本不矛盾。我引用:

This implementation can be used to respond with static or dynamic responses via the when api and its shortcuts (whenGET, whenPOST, etc) and optionally pass through requests to the real $httpBackend for specific requests (e.g. to interact with certain remote apis or to fetch templates from a webserver) ...

[I]n an end-to-end testing scenario or in a scenario when an application is being developed with the real backend api replaced with a mock, it is often desirable for certain category of requests to bypass the mock and issue a real http request .... To configure the backend with this behavior use the passThrough request handler of when instead of respond.[emphasis mine].

文档对 E2E $httpBackend 的问题保持沉默在 Jasmine 环境中使用。我想不出理由来排除它。如果有这样的原因，他们应该清楚地说明。说真的，谁读到了一个模拟组件，却没想到在测试环境中使用它？

“将请求传递给真正的 $httpBackend 以获取特定请求，例如与某些远程 API 交互”正是我打算做的。除了该组件的非模拟版本之外，“真正的 $httpBackend”可能意味着什么？

我不明白你的说法

The ngMocksE2E module is designed to be used on the "server" side of things where the actual angular application is executing.

“服务器”一词在该页面上恰好出现了 3 次，没有一次暗示任何应用程序代码都将在“服务器”上执行。我不知道在“事物的“服务器”端执行的“实际 Angular 应用程序”是什么意思。

文档非常清楚 E2E $httpBackend不限于端到端测试。它也适用于“在开发应用程序时将真正的后端 api 替换为模拟的场景”。

这距离我的应用程序是 的场景只有半步之遥。测试 使用真正的后端 API。”

在我的场景中，SUT 正在调用从服务器获取数据的组件。我的测试是为了验证这个依赖组件是否成功地向真正的后端发出此类请求，并将以预期的方式检索或保存数据。这是一个无法通过模拟后端行为来充分满足的集成测试。

Of course I can test (and do test) with mock XHR responses the component's ability to respond properly to what I predict will be the backend's behavior. That is not the same as validating that the component responds appropriately to the actual backend's behavior ... which might change as the application evolves and depart from the mocked responses in some significant way.

如果我了解如何将它交换到 SUT 的代码路径中，我会考虑为此目的使用您的中间测试器。我不。我认为您的 ngMidwayTester 无法访问发出 XHR 请求的组件。 .但如果必须的话，我确实知道如何将真正的 XHR 助手塞入管道中。

这是我现在的立场 .

任何人都可以展示如何制作 $httpBackend将某些请求传递给服务器 - 正如文档所宣称的那样 - 或者我将替换 passThrough自己用一个有效的 XHR 实现来实现。

我更喜欢第一个选项。如果驱动到第二个，我将在此处提供一个链接，以帮助其他分享我的需求和我对 API 文档的解释的人。

我错过了第三种方式吗？

Answer 1

以下是对 $httpBackend 用途的解释。那是在ngMockE2E模块。
ngMockE2E模块根本不是设计的，也不打算在 Jasmine 规范中使用。

在进行端到端测试时，测试有两个方面。一个是正​​在测试的 Angular 应用程序，另一个是 Jasmine 规范中的 angular-scenario 代码。

在 E2E 测试中，没有 angular 模块、ng-mocks 或任何与 jasmine 方面相关的东西(除了场景运行器)。
ngMocksE2E模块设计用于执行实际 Angular 应用程序的“服务器”端。它的主要目的是使我们能够预先响应，以便集成级别的 UI 测试可以比每个页面实际到服务器获取 JSON 更快地进行。

当与 ng-mocks 一起使用 Jasmine 时, angular 将始终用模拟后端替换 $httpBackend。添加 ngMocksE2E 时模块将无法获取任何“真实”$httpBackend正如您已经发现的那样，只会包装模拟并在传递时委托(delegate)给它。

看起来您正在尝试编写的测试类型不是测试 UI 集成，而是测试应用程序 javascript 和服务器集成。

这是完全合法的测试风格(在 Angular 社区中被称为“midwayTesting”)。您的问题是您使用了错误的工具。

我会看看这个:

https://github.com/yearofmoo/ngMidwayTester

您将使用它来代替 angular-mocks 和 angular.module() 以促进我假设您想要进行的那种测试。

你可以在这里读更多关于它的内容:

http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html

(抱歉，如果您已经链接到那里)

编辑: (解决有问题的其他评论)

你有一个真正的牛肉，因为文档不清楚 ngMockE2E不能在端到端测试设置的客户端(即业力/ Jasmine )端使用。像你解释的那样去解释事物并不是没有道理的，但这并不能改变解释是错误的事实。

如果在应用程序的服务器端而不是客户端使用时得到指示，ngMockE2E 将通过请求。这意味着您仍然可以通过某些难以模拟为预设响应的请求。我所说的客户端和服务器端的意思是在端到端测试中有两个端点。您有由标准应用服务器提供服务的要测试的应用程序，并且您有驱动应用程序的测试代码，该代码通常在 Karma 或另一个测试运行程序中执行，它使用标准 HTTP 请求与正在执行的应用程序进行通信另一个过程。

如果您查看文档以及如何设置 ngMockE2E你会注意到没有提到 Jasmine，并且说明是关于如何在真正的 Angular 应用程序中进行设置的:

myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);
myAppDev.run(function($httpBackend) {
  phones = [{name: 'phone1'}, {name: 'phone2'}];

  // returns the current list of phones
  $httpBackend.whenGET('/phones').respond(phones);

  // adds a new phone to the phones array
  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    phones.push(angular.fromJson(data));
  });
  $httpBackend.whenGET(/^\/templates\//).passThrough();
  //...
});

正如您在此示例中所看到的，它们正在模拟所有 JSON 数据指令，同时让它仍然从服务器获取模板。

为了从 jasmine 中使用它，设置会完全不同，使用 angular.mock.module('ngMockE2E')然后设置 $httpBackend.whenGET()在 beforeEach()而不是在 module.run() .

至于 ngMidwayTester我将您链接到，我相信这实际上与 ngMockE2E 兼容.本质上 ngMidwayTester替换 angular.mock.module()和 inject()有它自己的实现。所以你可以像这样使用它:

beforeEach(function(){
  tester = ngMidwayTester('app', 'ngMockE2E');
  $http = tester.inject('$http');
  $httpBackend = tester.inject('$httpBackend');
  $rootScope = tester.inject('$rootScope');
});

这应该可行，因为您不再使用 ngMock 模块(当您使用 angular.mock.module() 时总是包含该模块)。使用 ngMidwayTester 时，事情应该完全按照您希望的方式工作。 .