[译]开始对Angular App进行单元测试（1）

Tikitoo 发布于2019-08-19 18:27 / 1616人阅读

摘要：小结我们初步了解了使用来进行测试，这样有利于我们接下来去理解使用进行单元测试翻译中

这是一些列文章，陆续翻译整理中...

原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/

@ Bradley Braithwaite

前言

在写测试之前，我们还得对基础的JS的单元测试框架和如何写测试用例等一些问题做一个简要的介绍。

先说说 jasmine ，它算作一个行为驱动开发(behaviour driven development,BBD)的 JavaSciprt的框架，会让人困惑的是，它也可以用测试驱动开发(test driven development,TBD)的思想来写测试。
BBD和TBD两种风格会有些区别，但是使用jasmine确实可以用TBD的方式。jasmine会提供一种结构去组织你的测试以及一些函数来进行代码输出的断言。究竟是TBD还是BBD实际取决于开发者自己的如何去组织自己的测试，当然下文我们仅仅用TBD来进行讲解。

开始你的第一个测试

先建一个项目文件比如jasmine-test,然后粘贴下面的代码到一个html文件中。

用浏览器打开该文件。界面如图:

注意specs，它实际上指的是用例，它同样也是BBD的专业术语之一。截下来我们先来点简单的逻辑判断。

describe("calculator", function () {
    it("1 + 1 should equal 2");
});

将上面的代码粘贴到刚才的html文件中。

函数describe实际指的就是前文提到的specs（测试的逻辑分组），而函数it实际会展现这组测试。
运行结果如下图:

由于我们实际上没有添加测试的主体，因此状态上方显示的是pending,截下来我们会添加一段函数.

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(1);
});

上面的截图，实际上反应的就测试失败，因为1+1并不等于2。

上面出现了两个新函数expect以及toBe，Expect代表着预期，我们将需要使用的测试放进区，然后函数会进行运行结果的断言。而toBe呢则代表着匹配器,卡框架提供的匹配器还有很多，常用的大概有下面这些：

expect(true).toBe(true);
expect(false).not.toBe(true);
expect(1).toEqual(1);
expect("foo").toEqual("foo");
expect("foo").not.toEqual("bar");

我们再把这段代码改成正常的。

it("1 + 1 should equal 2", function() {
    expect(1 + 1).toBe(2);
});

刷新浏览器，我们就可以看到正确的结果了。

前面我们大致了解了jasmine的基本用法，实际上测试驱动开发的的一个基本原则就是我们再写功能的同时写测试，花些时间去掌握这项技能有利于提升我们的工作效率的。

流程大致如图三个部分，我们所写的每个测试都英国是遵循这三个流程。

红色部分:失败的测试，有利于我们消除bug;

绿色部分：需要我们写足够的代码让我们的测试通过，透过前面的部分，我们可以了解这些bug;

黄色部分，代码重构过程我们可以避免重蹈覆辙，并且提升安全性。

Demo

记下来我们写一些代码去体会上面的流程

写一个不通过的测试

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

2.使测试通过

如果我们开始写足够多的代码时候，其中一些可能类似下面：

var calculator = {
    sum: function(x, y) {
        return 2; // <-- note this is hardcoded
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

这样做有利于我们避免代码更多的错误

3.重构

在我们确保我们的逻辑正常后，我们可以测试更多用例，直到结果能够一直和期望的一致。

var calculator = {
    sum: function(x, y) {
        return x + y;
    }
}

describe("calculator", function () {
    
    it("1 + 1 should equal 2", function () {
        expect(calculator.sum(1, 1)).toBe(2);
    });

});

小结

我们初步了解了使用jasmine来进行TBD测试，这样有利于我们接下来去理解使用karama进行单元测试（翻译中...）

云服务器 GPU云服务器对数据进行分析单元测试对邮箱空间进行清理对数据进行统计排行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79621.html

[译] 如何对 Angular Controller 进行单元测试

摘要：原文地址上面一篇文章简单介绍了如何使用进行的单元测试我们用了一段简单的代码进行计算的测试。添加测试接下来终于到了我们的主题，添加一些单元测试给我们忽略代码中部分，主要集中在的代码中。原文地址：http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/@Bradley Braithwaite show...

aboutU 2019-08-21 10:53 评论0 收藏0
[译]使用karma进行angular测试

摘要：前面我们写过了的一篇文章开始对进行单元测试而提供了非常有用的工具去帮助我们进行的测试。接下来，会增加一些内容写测试用例接下来我们可以开始进行测试了，我们在命令行工具里输入下面的命令我们将下面的代码粘贴到中去。 showImg(https://segmentfault.com/img/bVx65M); 紧随前文如何对Angular Controller进行单元测试,但是我们也提到了前文工...

Tony 2019-08-19 18:30 评论0 收藏0
[译] 通过 Webpack 实现 AngularJS 的延迟加载

摘要：虽然这些东西都是非常棒的，但是它们都不是实现延迟加载所必需的东西。我们通过的配置对象中的属性就可以实现延迟加载。单元测试的技巧把改成是全局依赖并不意味着你应该从控制器中删除它。因为在单元测试中，你只会加载这一个控制器而非整个应用模块。原文链接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 随着你的单页应用扩大，...

Zhuxy 2019-08-19 17:42 评论0 收藏0
[译] 在 Angular 中使用 HammerJS (触摸手势)

摘要：是一个为应用添加触摸手势的非常受欢迎的库文中将看到结合一起使用是多么的简单原文示例是针对版本经过测试在目前最新的版本中此教程依然适用文章将以来统一代称版本名词滑动和类似但滑动更快速无粘滞左滑右滑上滑下滑头像轮播简介我们将构建一个头像轮播可以 HammerJS 是一个为 web 应用添加触摸手势的非常受欢迎的库,文中,将看到 Angular 结合 HammerJS 一起使用是多么的简单 ...

lifesimple 2019-08-20 17:29 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（一） --- 相关背景、社区、工具介绍

摘要：下一篇译精通使用开发二原版书名第一章之道这一章主要是介绍，包括这个框架以及它背后的项目。幸运的是，拥有一个活跃的，支持度高的社区。另外，社区还为已经存在的工具箱里贡献了许多有意思的工具。下一篇：【译】《精通使用AngularJS开发Web App》（二）原版书名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 评论0 收藏0