初步了解 Angular 2 端到端的测试

来源:开源中国社区 作者:zhangkai
  

有许多原因使我过去不愿对自己的应用添加自动化测试。原因之一是不知道其中的效益成本比率,另一个原因是考虑到集成到现有生产环境的应用可能比较难。测试应用而不用从头重构代码,仅仅只是引入测试要怎么做呢?

首先我们先从简单区分测试的类型开始。应用测试有很多类型,但最为常见的是单元测试及端对端测试(亦称为集成测试)。单元测试是测试代码自身行为的一种测试。在用户看来什么也没有做,但可以确保其方法能达到期望的目的。集成测试是模仿用户行为的一种测试。比如说,登陆系统,创建帖子,退出系统等这些操作都可以自动化,并且你可以用眼睛看到其过程是怎么发生的。


 

这两种类型的测试,它们通常彼此结合使用。对于新的开发来说,这将是理想的。如果时间有限制,或继承于现有项目的情况下,端对端测试或许比单元测试更加合适。因为我们并不需要过多了解先前的代码库,同样可以覆盖更多场景,这将比单元测试更快,因为单元测试并不测试单个单元而是整个场景。

单元测试依然重要,但如果你必须要在开始的时候选择一个,我认为端对端测试会是更好的选择。在这篇文章中,我将测试一个现有的Angular 2的待办事项的项目。我将使用集成测试,并覆盖一系列的场景。

如果你需要熟悉Angular 2的入门,请看这篇文章 Angular 2 article from Jscrambler

被测试的场景
 

  • 当应用初始化加载时,有3件待处理的事情

  • 需要加载新待办事项

  • 点击一个待办事项,然后跳到待办事项的详细页

  • 删除一个待办事项

  • 编辑一个待办事项标题,然后保存后,可以在首页的待办事项列表中看到新标题

  • 不允许保存一个空的待办事项,在点了禁用的保存按钮后,待办事项的列表依然还是原来的总数

  • 起初加载首页时,添加新待办事项的按钮应处于禁用状态

  • 保存待办事项的按钮仅应在输入待办事项标题后处于编辑状体

Todo 应用程序概述

让我们简单的描述一下TODO应用程序。应用程序将首先在主页上列出待办事项清单。有三个待办事项会详细列出。

这写数据不会由服务端提供,而是从设备文件硬编码中加载。

在首页上,我们可以添加新的待办事项。我们可以通过点击代办事项的标题来访问其详细信息页面。在此页面上,我们可以编辑代办事项标题或删除待办事项。

克隆并设置Todo 应用程序
 

1.首先克隆我已经推送到存储库这里但未经测试的应用程序,确保你是在主分支克隆的。接下来,你需要安装几个工具以便能进行下面的操作,在本教程中,使用Candidate已经发布的Angular 2,版本为2。

2.确保您已安装NodeJS的版本是Node 4.x.x或更高版本。

3.使用以下命令安装节点依赖项:

1
npm install

当然是在克隆的存储库中操作

4.使用Angular-CLI进行开发。安装Angular-CLI 全局使用下面命令:

1
npm install -g angular-cli@latest

5.Angular 2   端到端测试使用被称为 protractor  的工具来运行,安装protractor   全局使用下面命令:

1
npm install -g protractor

6.安装所有依赖项后,使用以下命令启动开发服务器:

1
ng serve

然后导航到浏览器地址:http://localhost:4200,您将看到三个待办事项列表。

如果您在启动服务器时遇到问题,您可以参考stackoverflow issue来解决问题。

Angular 2测试相关的重要概念
 

端对端测试的文件夹在e2e。 其中有一个已预备好的案列文件,文件名为 es2/app.e2e-spec.ts

其中的测试文件是用 jasmine 框架开发的。有很多方式模块化、组织Angular 2端对端测试,但这里为了方便,这篇文章都将在一个文件中进行。

我们这个应用仅有一个功能那就是待办事项。为了满足大家的好奇心或有人在想比上述更复杂的情况,试想一个需要测试订单、用户配置等功能更复杂的应用的场景。对此测试的场景,我将在e2e文件夹中分别为每个待测试功能创建一个文件夹,并将各自测试文件放置其中。

这种情况下,我们将有两个文件夹分别命名为e2e/orders 和 e2e/userProfile。每个文件夹中仅会有一个测试文件,或者为了满足更多待测试功能的需要而创建多个测试文件。需要注意的一点是每个测试文件都以word e2e-spec.ts结尾,这样Protractor测试工具才可以加载到。

Ok,还是回到我们简单的单个测试文件。如果你略有查看此文件,你会发现文件的头部有个导入声明(import statement)。导入是声明若干测试文件中所用的普通函数是源于哪里。然而这篇文章,我们不会使用这个,而将这个视为函数库。


 

在引入声明(import statement)之后,我们有一个描述性的代码块,它的两个函数调用即 beforeEach 里面的回调。

在描述代码块内,每个回调传递给 beforeEach 都需要测试。

每个测试再把里面的回调函数传递给

让我们用命令运行当前的测试

1
protractor

如果你在运行 protractor 两个命令中的一个时有问题,请参考这里

1
./node_modules/protractor/bin/webdriver-manager update

或者

1
webdriver-manager update

要是当前的测试失败,可能会在首页看到“app works”这样的文本提示。这并不是因为我们修改了首页的内容就出现这种情况。

在我们开始编写我们的测试之前,让我们理解一些重要的通用函数,然后使用 Angular 2 的端到端测试。


 

导航到页面

在测试文件中,有一个browser全局变量。它使用import语句引入

1
import { browser, element, by } from 'protractor/globals';

你现在可以添加上。

例如,我们使用下面语句导航到你的应用程序中可用的任何页面

1
browser.get('/');

到你的主页,和

1
browser.get('/users');

到users页面。请注意,这些网址是相对的URL,我们也可以使用绝对URL,但是我建议使用相对URL,因为如果你的域名改变,这更易于维护。

选择元素

通常的做法是在当前页面上选择元素。你可以通过一个叫做element的全局变量选择元素。它接受可以使用全局by创建的定位器。

使用选择具有green类的p标签例子如下

1
let greenParagraph = element(by.css('p.green'));

选择多个元素,有些轻微的变化

1
let greenParagraphs = element.all(by.css('p.green'));

这将给出一个数组,而不是一个单一的元素。

抓取元素文本
 

要得到一个元素的文本,你必须先选择它,然后调用getText方法,想下面这样。

1
2
let greenParagraph = element(by.css('p.green'));
let text = greenParagraph.getText();

点击元素

点击元素可以使用下面的语法完成

1
2
let submitButton = element(by("form .submit-button"));
submitButton.click();

统计元素

我们也可以使用下面的语法来统计元素个数。

1
2
let blueParagraphsList = elements.all(by("p.blue"));
let count = blueParagraphsList.count();

Test Scenarios测试方案
 

对于那些不太寻常的概念,我们列出了上面覆盖的场景。

确认要做的要三件事

当应用程序初次被加载的时候,我们有将要做三件事。

在测试文件 e2e/app.e2e-spec.ts 的内部, beforeEach 代码块的下面,删除调用的函数,并在下面添加

1
2
3
4
5
it("should show three todos when we first load the todo app", () => {
  browser.get("/");
  let todos = element.all(by.css(".todos .todo"));
  expect(todos.count()).toEqual(3);
})

不要忘记在这个文件的顶部添加这个导入声明

1
import { browser, element, by } from 'protractor/globals';

现在,当你运行 protractor  命令,另一个浏览器将会被打开且迅速关闭,在你的控制台上你能看到通过测试的时候显示为绿色。

好的!我们刚刚已经写完了我们第一个通过 Angular 2 的端到端测试。

添加一个新的待办事项

现在进行下一个,我们可以添加一个待办事项。让我们用下面的代码添加一个测试块

1
2
3
4
5
6
7
8
9
10
11
it("should be able to add a new todo", () => {
  browser.get("/");
  let newTodoInput = element(by.css(".add-todo input[type=text]"));
  newTodoInput.sendKeys("Todo 4");
 
  let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));
  newTodoSubmitButton.click();
 
  let todos = element.all(by.css(".todos .todo"));
  expect(todos.count()).toEqual(4);
})

我们在这里要做的是在待办事项输入框中输入文本并提交表单。然后我们检查是否有四个待办事项。 如果是的话,测试通过。

我们刚刚介绍了另一个函数sendKeys,它可以访问一个选中的元素,常用于输入文本到输入框这类元素中。

查看待办事项的详情页

我们应该能单击一个待办事项转到该待办事项的详情页,让我们用下面的测试实现它吧。

1
2
3
4
5
6
7
8
9
10
it("should be able to click on a todo on the homepage and get to the details page", () => {
  browser.get("/");
  let firstTodo = element.all(by.css(".todos .todo")).first();
  let firstTodoText = firstTodo.getText();
 
  firstTodo.click();
  let inputFieldText = element(by.css("todo input[type=text]")).getAttribute("value");
 
  expect(inputFieldText).toEqual(firstTodoText);
})

删除一个待办事项

我们应该能删除一个待办事项。现在让我们试着删除一个待办事项看看能不能成功。

我们将转到待办事项页并单击删除链接,当我们返回主页时,我们能看到减少了一个待办事项。

1
2
3
4
5
6
7
8
9
10
11
12
13
it("should be able to delete a todo", () => {
  browser.get("/");
  let firstTodo = element.all(by.css(".todos .todo")).first();
 
  firstTodo.click();
 
  let deleteLink = element(by.cssContainingText("span""Delete"));
  deleteLink.click();
 
  let todosList = element.all(by.css(".todos .todo"));
 
  expect(todosList.count()).toEqual(2);
})

编辑一个待办事项的标题

我们能编辑待办事项的标题,保存后能在主页的待办事项列表中显示新标题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
it("should be able to edit a todo title", () => {
  browser.get("/");
  let firstTodo = element.all(by.css(".todos .todo")).first();
 
  firstTodo.click();
 
  let todoInputField = element(by.css("todo input[type=text]"));
  todoInputField.clear();
  todoInputField.sendKeys("Editted Todo1 Title");
 
  let saveButton = element(by.css("todo button[type=submit]"));
  saveButton.click();
 
  firstTodo = element.all(by.css(".todos .todo")).first();
  let firstTodoText = firstTodo.getText();
 
  expect(firstTodoText).toEqual("Editted Todo1 Title");
})

不能保存空的待办事项

当我们想保存一个空的待办事项时,我们无法进行操作,并且单击禁用按钮时,待办事项列表依然保持同样的长度。

1
2
3
4
5
6
7
8
9
10
it("should not be able to save an empty todo", () => {
  browser.get("/");
  let newTodoInput = element(by.css(".add-todo input[type=text]"));
 
  let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));
  newTodoSubmitButton.click();
 
  let todos = element.all(by.css(".todos .todo"));
  expect(todos.count()).toEqual(3);
})

 

保存按钮在初始化时禁用

初始化时添加待办事项按钮被禁用,所以我们添加下列代码

1
2
3
4
5
6
it("should have add todo button be disabled initially", () => {
  browser.get("/");
  let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));
 
  expect(newTodoSubmitButton.isEnabled()).toEqual(false);
})

当我们开始输入时启用保存按钮

只用当我们开始输入待办事项标题时,待办事项保存按钮才被启用。

1
2
3
4
5
6
7
8
9
it("should only enable save todo button when we start typing a new todo title", () => {
  browser.get("/");
  let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));
  let newTodoInputField = element(by.css(".add-todo input[type=text]"));
 
  newTodoInputField.sendKeys("New Todo 4");
 
  expect(newTodoSubmitButton.isEnabled()).toEqual(true);
})

结论

现在,我们来总结一下 Angular2 的“端对端”测试。即使您没有任何的编程基础,也可以快速上手编写“端对端”测试。对于那些被引入代码库而又可能存在漏洞的部分,“端对端”测试是一个高效便捷的方法来捕获问题所在。
我们在概念部分中介绍了一些其他方法。您可以点击这里来浏览这些 Protractor API。并且可以在 GitHub repository 上找到这个应用的完整版和测试版。
我希望您看完这个介绍之后,在您修改任何一行代码之前都能兴奋的开始您的前端应用测试。如果您高兴,和我们交流一些您在日常测试中的高见。或者是您关于 Javascript 框架及 Angular2 的想法。感谢您的阅读。

本文标题:初步了解 Angular 2 端到端的测试
本文地址:https://www.oschina.net/translate/getting-started-with-angular-2-end-to-end-testing
参与翻译:imqipan, 无若, Tony, 3442853561, 独孤俊杰, wnull

英文原文:Getting Started with Angular 2 End To End Testing


 


时间:2016-11-06 12:54 来源:开源中国社区 作者:zhangkai 原文链接

好文,顶一下
(0)
0%
文章真差,踩一下
(0)
0%
------分隔线----------------------------


把开源带在你的身边-精美linux小纪念品
无觅相关文章插件,快速提升流量