如何对(AngularJS)Web应用程序进行集成测试

32

我正在开发一个 Webapp。 它由两部分组成。一个 node rest 服务器和一个 angularjs 客户端。

应用程序的结构如下:Rest 服务器 <--> Api 模块 <--> Angular 应用程序

目前,该服务器经过了充分的测试。 我有单元测试和集成测试。 集成测试访问真实数据库并通过 http 调用 rest api。 我认为这是服务器测试的最高级别。 集成测试也运行速度快。 我相当自信地认为,我测试服务器的方式足以满足我的用例,并且我对结果感到满意。

然而,我不知道如何测试 angularjs 应用程序。 我为相关指令和模块编写了单元测试。编写这些测试并不是问题。

我想编写涵盖用户场景的集成测试。 例如注册场景:用户访问网站,转到注册表单,并提交数据。

angularjs 团队正在从 ng-scenarios 切换到 protractor。 Protractor 使用 Selenium 运行测试。 因此,有两个范围:应用程序范围和测试范围。

现在我可以想出三种不同的抽象方法。 我不确定哪种最适合我。

  • 模拟 Api 模块
  • 模拟 Rest 服务器
  • 使用完整的服务器

模拟 Api 模块

在这种情况下,我不需要设置一个服务器。所有互动都在浏览器中运行。

优点:

  • 不需要服务器

缺点:

  • Api 在浏览器范围内,我必须干预它。

我真的很喜欢这个解决方案,但是我发现很难模拟 Api。 Api 需要在浏览器范围内进行修改。 因此,我需要将修改从测试发送到浏览器。

这是可以做到的,然而我不知道如何在测试范围内运行像mockedApi.method.wasCalledOnce()这样的断言。

模拟REST服务器

优点:

  • 客户端不需要更改
  • 只需处理一个作用域

缺点:

  • 必须设置REST路由

我可以在nodejs中创建完整的Mock Rest Server。 Protractor Tests是用nodejs编写的,因此可以在测试中控制服务器。 在运行测试之前,我可以告诉服务器如何响应。 类似于这样:server.onRequest({method: 'GET', url: '/'}).respondWith('hello world')

然后我可以进行像wasCalledOnce这样的断言。

使用完整的带有数据库的服务器

每个测试都在完整的服务器上运行,并且可以向数据库中添加元素。 在每个测试之后,可以查看数据库中的预期元素。

优点:

  • 如果这些测试正在运行,则可以相当确定该应用在测试的用例中是功能性的

缺点:

  • 我已经使用rest server完成了相当强烈的集成测试。这感觉像是再做一次。
  • 设置取决于完整的服务器

当前结论

  • 模拟Api将完全分离服务器和客户端。
  • 使用Mock Api将是更高级别的测试,但需要一个虚假服务器
  • 进行完整的集成测试将提供最佳可靠性,但这也高度依赖于服务器代码

我该选择什么?你会选择什么?


请查看此链接:http://www.tuesdaydeveloper.com/2013/06/angularjs-testing-with-karma-and-jasmine/ - Adrian Mitev
嗨,Adrian,这篇博客文章涵盖了使用Jasmine和Karma进行控制器单元测试的内容。我正在寻找集成测试。由于ng-scenarios已被弃用(以前用于集成测试),因此我需要使用protractor进行集成测试。 - user524824
5个回答

4

我认为我在Protractor Google小组中回答了同样的问题。我和你一样,不想要服务器,但希望所有测试代码都在一个地方(在Protractor中),而不是分散在Protractor和浏览器之间。为了实现这一点,我自己开发了一个代理$ httpBackend服务,在Protractor中运行。它允许将$httpBackend服务配置为在Protractor中运行。我已经在开发它了一段时间,目前它具有合理完整的功能。如果您能看一下并让我知道是否遗漏了重要内容,那就太好了。

https://github.com/kbaltrinic/http-backend-proxy


这看起来不错。我会去看看! - user524824

3
这里提供了一种撰写 Angular 代码集成测试的方法。关键概念是以一种结构化的方式编写代码,使您可以以与 UI 消费方式非常相似的方式调用各种函数。但要成功实现这一点,适当解耦您的代码是很重要的。
更多信息请参见:http://www.syntaxsuccess.com/viewarticle/angular-integration-tests

有用的链接,正是我所需要的! - San Jay Falcon

3
这是一个非常好的问题,与特定工具无关。我在一个大型“绿地”项目上也遇到了同样的问题。
这里有一个词汇问题:单词“mock”被广泛使用,而您所说的“集成测试”更多地是“完整的端到端自动功能测试”。没有冒犯之意,只是清晰的措辞将有助于解决问题。
实际上,您自己提出了正确的答案:#2模拟其余服务器。#1可行,但很快就会变得太难开发和维护,#3是一个很好的想法,但与UI测试和UI验证无关。
为了实现前端的高可靠性,独立于后端,请模拟其余服务器,即开发一个愚蠢简单的REST服务器,它将是幂等的,即对于一个HTTP请求,始终回答相同的内容。保持幂等原则将使开发和测试比任何其他选项都更加容易。
然后,对于一次测试,您只需检查屏幕上显示的内容(测试顶部)以及发送到服务器的内容(测试底部),以便仅测试完整的UI堆栈一次。
完整的答案应该值得一篇博客文章,但我希望您可以从我的建议中感受到该怎么做。
此致
敬礼

0

这是一个很好的问题。我会这样做:

由于您已经拥有了相关指令和模块的角度单元测试,这非常完美。

另一个完美的事情是,您的服务器集成测试正在访问真实数据库,并确保通过http的rest api也能正常工作。

那么为什么不同时添加一些包含角度和服务器的高级集成测试呢?

如果可以避免模拟,为什么不尽可能地节省维护额外代码的工作呢?

此外,这是一篇不错的阅读材料:http://blog.ericbmerritt.com/2014/03/25/mocking-is-evil.html


0

在我看来,模拟REST服务器是最好、更简洁的选择。尝试使用Mountebank (http://www.mbtest.org),这是一个非常棒的虚拟化服务工具。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接