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

时间 2019-12-05

原文原文链接

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

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

前言

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

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

开始你的第一个测试

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

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">

        // Paste in the test code here.

    </script>
</html>

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

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

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进行单元测试（翻译中...）