开始对Angular App进行单元测试(1)

发表于:2016-06-02来源:推酷作者:jackpu点击数: 标签:单元测试
在写测试之前,我们还得对基础的JS的单元测试框架和如何写测试用例等一些问题做一个简要的介绍。

  前言

  在写测试之前,我们还得对基础的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.重构

原文转自: http://www.jackpu.com/yi-kai-shi-dui-angular-appjin-xing-dan-yuan-