Protractor: 支持向 Angular 2 应用程序添加模拟模块

创建于 2016-04-06 · 31评论 · 资料来源: angular/protractor

目前无法为 Angular 2 应用程序添加模拟模块。

此问题反映了此处发布的 TODO。

并且，要交叉引用相关的 SO 帖子： http://stackoverflow.com/questions/36354233/protractor-mocking-backend-with-angular2-on-api-request。

谢谢你。

user experience feature request

资料来源

alecxe

👍209 ❤3 👀1

最有用的评论

@jlin412是的，最终，但需要调查并仔细考虑它在 aot 和非 aot 中的工作方式。如果您使用混合，它将继续为 ng1 位工作。

其他人 - 请使用 github 的表情符号回复 +1 问题。添加评论使解析实际进度变得困难。我将删除这些评论，以便阅读。谢谢！

juliemr 于 2016-12-22

👍58

所有31条评论

@juliemr我们是否计划支持 Angular 2 的模拟？如果是，什么时候？如果我们使用混合模式，mock会同时继续工作吗？

jlin412 于 2016-12-14

@jlin412是的，最终，但需要调查并仔细考虑它在 aot 和非 aot 中的工作方式。如果您使用混合，它将继续为 ng1 位工作。

其他人 - 请使用 github 的表情符号回复 +1 问题。添加评论使解析实际进度变得困难。我将删除这些评论，以便阅读。谢谢！

juliemr 于 2016-12-22

👍58

@juliemr我们是否有关于角度2的模拟实现的ETA？
另外，在此期间我们可以使用替代方案吗？

jlin412 于 2017-01-05

👍47

来自： http://stackoverflow.com/questions/36354233/protractor-mocking-backend-with-angular2-on-api-request。

http-backend-proxy 和 httpbackend 包也是如此。

因此，我使用docker-compose创建了一个E2E测试环境，但我觉得它的实现有点夸张。

您目前有最佳实践吗？

kaishuu0123 于 2017-02-06

我在模拟我的后端调用时遇到了同样的问题。当我们使用连接中间件来运行我们的应用程序时，我创建了一个插件，允许您模拟您的 Angular 1 和 2 http 请求。

https://mdasberg.github.io/ng-apimock/

也许你可以使用它。

mdasberg 于 2017-02-06

👍5

我不确定这样做的机制，但我认为安装模拟模块的天真方法如下：

Protractor 会以某种方式覆盖这两种方法：

platformBrowserDynamic().bootstrapModule
platformBrowser().bootstrapModuleFactory

取而代之的是一个简单的包装器，它构造一个新的 ngModule 并提供我们想要模拟的模块（下面是它的伪代码）：

function bootstrapModuleOverride (moduleToBootstrap) {
  @NgModule({
    imports: [moduleToBootstrap],
    provide: ArrayOfMockModules,
    bootstrap: moduleToBootstrap.bootstrap
  })
  class moduleToBoostrapWrapper {}

  platformBrowserDynamic().bootstrapModule(moduleToBoostrapWrapper);
}

mrmeku 于 2017-03-24

👍1

知道是否有计划发布此功能吗？

YoannBureau 于 2017-09-14

👍8

+1 此功能。我们需要在 Angular 2+ 应用程序的 e2e 测试中进行模拟！

tauil 于 2017-09-21

Angular 2+ 正在增长，所以这个功能变得非常紧迫:)

PCasafont 于 2017-10-05

👍28

是的，这对我们目前的工作流程绝对至关重要。

alexboisselle-rd 于 2017-11-06

我们已经处于 angular5 并且仍然无法在 e2e 规范中模拟 http 😕

（ @tauil小世界，嗯？）

lfv89 于 2017-11-19

👍6

以下是我需要 addMockModule 的常见用途。

1）注入自定义拦截器。
https://angular.io/guide/http#writing -an-interceptor
如果测试失败，示例捕获 http 活动并使用量角器写入磁盘。

2）通常覆盖服务中的功能以模拟第三方数据服务。

      .decorator(
          'xyzService',
          [
            '$q', '$delegate',
            ($q, $delegate) => {
              $delegate.isEnabled = () => true;
              return $delegate;
            }
            $delegate.getProfileDetail = () =>
                  $q.when({name: 'Tester 001', title: 'E2E Tester'});
          ])

对于自定义服务：我们可以遵循 httpclient 模板方法。实施（1）也可能解决这个问题。

3) 用于访问单个页面对象内部（虽然不是洁净的）
ng.probe($0)._debugInfo
量角器执行脚本

leblancmeneses 于 2017-11-27

何时实施？

mkopylec 于 2018-02-15

👍5

真的可以做到这一点！

thedanhodson 于 2018-03-23

👎4 👍2

这个必备功能，怎么会是两岁？！

作为一种解决方法，您可以使用 jswiremock 来存根后端调用。我在这里写了一些说明： https ://gist.github.com/jamescookie/f7b854226ca1e133d1b7b2798095b7f4

jamescookie 于 2018-04-19

另一种选择是nock 。
它是一个用于模拟 HTTP 请求的通用库，不依赖于任何框架。

mkopylec 于 2018-04-19

您可以使用量角器站点上已经存在的ng-apimock 。这里有一篇很棒的博客文章

您可以将它用于 AngularJs 和 Angular 应用程序

mdasberg 于 2018-04-19

👍3

这个特性非常重要，我认为它应该是核心量角器的一部分，即使 ng-apimock 刚刚包含在量角器的核心库中。

00benallen 于 2018-05-24

尝试尽可能多地竖起大拇指，此功能的进展如何？目前这是一个沉重的阻碍。

Bmahecha123 于 2018-06-05

👍8

说真的，量角器刚刚被 Angular 抛弃了吗？

TetonRaven 于 2018-08-07

😕7

因此，在今天无需对量角器或角度进行任何更改的情况下，这部分是可行的。您可以为ng serve创建一个“模拟”配置，它将提供一组不同的模块。这应该允许您在不需要依赖服务器启动和运行的情况下进行后端测试，并避免必须在 HTTP 层实现模拟。我在这里创建了一个示例存储库来演示这一点： https ://github.com/westonpace/angular-example-mock-services

我还在这里概述了我回答 SO 问题所需的步骤： https ://stackoverflow.com/questions/39942118/how-to-inject-different-service-based-on-certain-build-environment-in-angular2

它不像在 Angular 1 中那样容易/可定制（例如，您不能为不同的测试添加不同的模拟服务），但是一旦脚手架启动并运行，添加和删除模拟服务应该非常简单。