[译]最先对Angular App举行单元测试（1）

2019年8月30日 168次阅读 来源: 静逸秋水

《[译]最先对Angular App举行单元测试（1）》

这是一些列文章，连续翻译整顿中…

原文地点: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文件中。

<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>

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

《[译]最先对Angular App举行单元测试（1）》

注重specs，它现实上指的是用例，它一样也是BBD的专业术语之一。截下来我们先来点简朴的逻辑推断。

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

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

函数describe现实指的就是前文提到的specs（测试的逻辑分组），而函数it现实会展示这组测试。
运转效果如下图:
《[译]最先对Angular App举行单元测试（1）》

由于我们现实上没有增加测试的主体，因而状况上方显现的是pending,截下来我们会增加一段函数.

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

《[译]最先对Angular App举行单元测试（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);
});

革新浏览器，我们就可以看到准确的效果了。
《[译]最先对Angular App举行单元测试（1）》

前面我们大抵相识了jasmine的基础用法，现实上测试驱动开辟的的一个基础原则就是我们再写功用的同时写测试，花些时刻去控制这项妙技有利于提拔我们的工作效率的。

流程大抵如图三个部份，我们所写的每一个测试都英国事遵照这三个流程。

<img src=”https://lh5.googleusercontent.com/-2avOSLXBtRo/VVF97CVqKlI/AAAAAAAABcc/wYjDPRC0CFk/w638-h86-no/Untitled%2Bdrawing.png” />

  • 赤色部份:失利的测试，有利于我们消弭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举行单元测试（翻译中…）

    原文作者：静逸秋水
    原文地址: https://segmentfault.com/a/1190000005616046
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞