JavaScript单元测试框架-Jasmine

转载自金石开的blog：http://www.cnblogs.com/zhcncn/p/4330112.html

Jasmine的开发团队来自PivotalLabs，他们一开始开发的JavaScript测试框架是JsUnit，来源于著名的JAVA测试框架JUnit。JsUnit是xUnit的JavaScript实现。但是JsUnit在2009年后就已经停止维护了，他们推出了一个新的BDD框架Jasmine。Jasmine不依赖于任何框架，所以适用于所有的Javascript代码。

所谓BDD（行为驱动开发，Behaviour Driven Development），是一种新的敏捷开发方法。Dan North对BDD给出的定义为：

BDD是第二代的、由外及内的、基于拉(pull)的、多方利益相关者的(stakeholder)、多种可扩展的、高自动化的敏捷方法。它描述了一个交互循环，可以具有带有良好定义的输出（即工作中交付的结果）：已测试过的软件。

BDD与TDD（Test Driven Development ）的主要区别是，使得非程序人员也能参与到测试用例的编写中来，大大降低了客户、用户、项目管理者与开发者之间来回翻译的成本。所以BDD更加注重业务需求而不是技术[1]。

下载

在Jasmine的Github官方主页：https://github.com/jasmine/jasmine
找到上方的releases，点击会跳转到https://github.com/jasmine/jasmine/releases。
下载已发布的zip包，比如下载当前（2015-03-09）的最新版本为：jasmine-standalone-2.2.0.zip

目录结构

解压之后，可以看到有1个html文件和3个文件夹。

  • lib：存放了运行测试案例所必须的文件，其内包含jasmine-2.2.0文件夹。可以将不同版本的Jasmine放在lib下，以便使用时切换。

    • jasmine.js：整个框架的核心代码。
    • jasmine-html.js：用来展示测试结果的js文件。
    • boot.js：jasmine框架的的启动脚本。需要注意的是，这个脚本应该放在jasmine.js之后，自己的js测试代码之前加载。
    • jasmine.css：用来美化测试结果。
  • spec：存放测试脚本。
    • PlayerSpec.js：就是针对src文件夹下的Player.js所写的测试用例。
    • SpecHelper.js：用来添加自定义的检验规则，如果框架本身提供的规则（诸如toBe,toNotBe等）不适用，就可以额外添加自己的规则（在本文件中添加了自定义的规则toBePlaying）。
  • src：存放需要测试的js文件。Jasmine提供了一个Example（Player.js，Song.js）。
  • SpecRunner.html：运行测试用例的环境。它将上面3个文件夹中一些必要的文件都包含了进来。如果你想将自己的测试添加进来的话，那么就修改相应的路径。

其中，spec文件夹，src文件夹和SpecRunner.html文件是Jasmine提供的一个完整示例，用浏览器打开 SpecRunner.html，即可看到执行的结果。

SpecRunner.html运行测试用例的例子：

<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.2.0</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">

  <script src="lib/jasmine-2.2.0/jasmine.js"></script>
  <script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
  <script src="lib/jasmine-2.2.0/boot.js"></script>

  <!-- include source files here... -->
  <script src="src/Player.js"></script>
  <script src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script src="spec/SpecHelper.js"></script>
  <script src="spec/PlayerSpec.js"></script>
</head>
<body></body>
</html>

核心概念

框架中的一些核心概念，可以参考官方文档中的介绍[2]。下面进入搬砖模式：

Suites

Suite表示一个测试集，以函数describe(string, function)封装，它包含2个参数：
string：测试组名称，
function：测试组函数。

一个Suite(describe)包含多个Specs(it)，一个Specs(it)包含多个断言（expect）。

Setup和Teardown操作

Jasmine的Setup和Teardown操作（Setup在每个测试用例Spec执行之前做一些初始化操作，Teardown在每个Sepc执行完之后做一些清理操作，这两个函数名称来自于JUnit），是由一组全局beforeEach，afterEach， beforeAll，afterAll函数来实现的。

  • beforeEach()：在describe函数中每个Spec执行之前执行。
  • afterEach()： 在describe函数中每个Spec数执行之后执行。
  • beforeAll()：在describe函数中所有的Specs执行之前执行，但只执行一次，在Sepc之间并不会被执行。
  • afterAll()： 在describe函数中所有的Specs执行之后执行，但只执行一次，在Sepc之间并不会被执行。

beforeAll 和 afterAll适用于执行比较耗时或者耗资源的一些共同的初始化和清理工作。而且在使用时还要注意，它们不会在每个Spec之间执行，所以不适用于每次执行前都需要干净环境的Spec。

this值

除了在describe函数开始定义变量，用于各it函数共享数据外，还可以通过this关键字来共享数据。

在在每一个Spec的生命周期（beforeEach->it->afterEach）的开始，都将有一个空的this对象（在开始下一个Spec周期时，this会被重置为空对象）。

嵌套Suite

describe函数可以嵌套，每层都可以定义Specs。这样就可以让一个Suite由一组树状的方法组成。

每个嵌套的describe函数，都可以有自己的beforeEach，afterEach函数。
在执行每个内层Spec时，都会按嵌套的由外及内的顺序执行每个beforeEach函数，所以内层Sepc可以访问到外层Sepc中的beforeEach中的数据。类似的，当内层Spec执行完成后，会按由内及外的顺序执行每个afterEach函数。

describe("A spec", function() {
  var foo;

  beforeEach(function() {
    foo = 0;
    foo += 1;
  });

  afterEach(function() {
    foo = 0;
  });

  it("is just a function, so it can contain any code", function() {
    expect(foo).toEqual(1);
  });

  it("can have more than one expectation", function() {
    expect(foo).toEqual(1);
    expect(true).toEqual(true);
  });

  describe("nested inside a second describe", function() {
    var bar;

    beforeEach(function() {
      bar = 1;
    });

    it("can reference both scopes as needed", function() {
      expect(foo).toEqual(bar);
    });
  });
});

Specs

Spec表示测试用例，以it(string, function)函数封装，它也包含2个参数：
string：测试用例名称，
function：测试用例函数。

Expectations

Expectation就是一个断言，以expect语句表示，返回true或false。expect语句有1个参数，代表要测试的实际值（the actual）。

只有当一个Spec中的所有Expectations全为ture时，这个Spec才通过，否则失败。

Expectation带实际值，它和表示匹配规则的Matcher链接在一起，Matcher带有期望值。

Matchers

Matcher实现了断言的比较操作，将Expectation传入的实际值和Matcher传入的期望值比较。
任何Matcher都能通过在expect调用Matcher前加上not来实现一个否定的断言（expect(a).not().toBe(false);）。

常用的Matchers有：

  • toBe()：相当于===比较。
  • toNotBe()
  • toBeDefined()：检查变量或属性是否已声明且赋值。
  • toBeUndefined()
  • toBeNull()：是否是null。
  • toBeTruthy()：如果转换为布尔值，是否为true。
  • toBeFalsy()
  • toBeLessThan()：数值比较，小于。
  • toBeGreaterThan()：数值比较，大于。
  • toEqual()：相当于==，注意与toBe()的区别。
    一个新建的Object不是（not to be）另一个新建的Object，但是它们是相等（to equal）的。 
    expect({}).not().toBe({});
expect({}).toEqual({});
  • toNotEqual()
  • toContain()：数组中是否包含元素（值）。只能用于数组，不能用于对象。
  • toBeCloseTo()：数值比较时定义精度，先四舍五入后再比较。 
      it("The ‘toBeCloseTo‘ matcher is for precision math comparison", function() {
var pi = 3.1415926,
  e = 2.78;

expect(pi).not.toBeCloseTo(e, 2);
expect(pi).toBeCloseTo(e, 0);
  });
  • toHaveBeenCalled()
  • toHaveBeenCalledWith()
  • toMatch()：按正则表达式匹配。
  • toNotMatch()
  • toThrow()：检验一个函数是否会抛出一个错误

自定义Matchers的实现

自定义Matcher（被称为Matcher Factories）实质上是一个函数（该函数的参数可以为空），该函数返回一个闭包，该闭包的本质是一个compare函数，compare函数接受2个参数：actual value 和 expected value。

compare函数必须返回一个带pass属性的结果Object，pass属性是一个Boolean值，表示该Matcher的结果（为true表示该Matcher实际值与预期值匹配，为false表示不匹配），也就是说，实际值与预期值具体的比较操作的结果，存放于pass属性中。

最后测试输出的失败信息应该在返回结果Object中的message属性中来定义。

var customMatchers = {
  toBeGoofy: function(util, customEqualityTesters) {
    return {
      compare: function(actual, expected) {
        if (expected === undefined) {
          expected = ‘‘;
        }
        var result = {};
        result.pass = util.equals(actual.hyuk, "gawrsh" + expected, customEqualityTesters);
        if (result.pass) {
          result.message = "Expected " + actual + " not to be quite so goofy";
        } else {
          result.message = "Expected " + actual + " to be goofy, but it was not very goofy";
        }
        return result;
      }
    };
  }
};

自定义Matchers的使用

对自定义Matcher有2种使用方法：

  • 将该函数添加到一个特定的describe函数的beforeEach中，以便该describe函数中的所有Spec都能调用到它。但其他describe中并不能使用该Matcher。
    该方法的例子可以参考官网提供的custom_matcher.js的实现[3]。
describe("Custom matcher: ‘toBeGoofy‘", function() {
  beforeEach(function() {
    jasmine.addMatchers(customMatchers);
  });

  it("can take an ‘expected‘ parameter", function() {
    expect({
      hyuk: ‘gawrsh is fun‘
    }).toBeGoofy(‘ is fun‘);
  });
});
  • 将该函数添加到全局的beforeEach函数中，这样所有的Suites中的所有的Specs，都可以使用该Matcher。
    该方法的例子可以参考Jasmine提供的Demo中的SpecHelper.js文件中的toBePlaying自定义的规则的实现。
//定义
beforeEach(function () {
  jasmine.addMatchers({
    toBePlaying: function () {
      // 自定义Matcher：toBePlaying
      return {
        //要返回的compare函数
        compare: function (actual, expected) {
          var player = actual;
          //compare函数中要返回的结果Object，这里是一个匿名Object，包含一个pass属性。
          return {
            pass: player.currentlyPlayingSong === expected && player.isPlaying
          }
        }
      };
    }
  });
});
//使用
describe("Player", function() {
  it("should be able to play a Song", function() {
    player.play(song);
    //demonstrates use of custom matcher
    expect(player).toBePlaying(song);
  });

  describe("when song has been paused", function() {
    it("should indicate that the song is currently paused", function() {
      // demonstrates use of ‘not‘ with a custom matcher
      expect(player).not.toBePlaying(song);
    });
)};

禁用Suites

Suites可以被Disabled。在describe函数名之前添加x即可将Suite禁用。
被Disabled的Suites在执行中会被跳过，该Suite的结果也不会显示在结果集中。

xdescribe("A spec", function() {
  var foo;

  beforeEach(function() {
    foo = 0;
    foo += 1;
  });

  it("is just a function, so it can contain any code", function() {
    expect(foo).toEqual(1);
  });
});

挂起Specs

有3种方法可以将一个Spec标记为Pending。被Pending的Spec不会被执行，但是Spec的名字会在结果集中显示，只是标记为Pending。

  • 如果在Spec函数it的函数名之前添加x（xit），那么该Spec就会被标记为Pending。
  • 一个没有定义函数体的Sepc也会在结果集中被标记为Pending。
  • 如果在Spec的函数体中调用pending()函数，那么该Spec也会被标记为Pending。pending()函数接受一个字符串参数，该参数会在结果集中显示在PENDING WITH MESSAGE:之后，作为为何被Pending的原因。
describe("Pending specs", function() {

  xit("can be declared ‘xit‘", function() {
    expect(true).toBe(false);
  });

  it("can be declared with ‘it‘ but without a function");

  it("can be declared by calling ‘pending‘ in the spec body", function() {
    expect(true).toBe(false);
    pending(‘this is why it is pending‘);
  });
});

高级特性

Spy

Spy能监测任何function的调用和方法参数的调用痕迹。需使用2个特殊的Matcher：

  • toHaveBeenCalled：可以检查function是否被调用过，
  • toHaveBeenCalledWith： 可以检查传入参数是否被作为参数调用过。

spyOn

使用spyOn(obj,‘function‘)来为obj的function方法声明一个Spy。不过要注意的一点是，对Spy函数的调用并不会影响真实的值。

describe("A spy", function() {
  var foo, bar = null;

  beforeEach(function() {
    foo = {
      setBar: function(value) {
        bar = value;
      }
    };

    spyOn(foo, ‘setBar‘);

    foo.setBar(123);
    foo.setBar(456, ‘another param‘);
  });

  it("tracks that the spy was called", function() {
    expect(foo.setBar).toHaveBeenCalled();
  });

  it("tracks all the arguments of its calls", function() {
    expect(foo.setBar).toHaveBeenCalledWith(123);
    expect(foo.setBar).toHaveBeenCalledWith(456, ‘another param‘);
  });

  it("stops all execution on a function", function() {
    // Spy的调用并不会影响真实的值，所以bar仍然是null。
    expect(bar).toBeNull();
  });
});

and.callThrough

如果在spyOn之后链式调用and.callThrough，那么Spy除了跟踪所有的函数调用外，还会直接调用函数额真实实现，因此Spy返回的值就是函数调用后实际的值了。

  ...
  spyOn(foo, ‘getBar‘).and.callThrough();
  foo.setBar(123);
  fetchedBar = foo.getBar();

  it("tracks that the spy was called", function() {
    expect(foo.getBar).toHaveBeenCalled();
  });

  it("should not effect other functions", function() {
    expect(bar).toEqual(123);
  });

  it("when called returns the requested value", function() {
    expect(fetchedBar).toEqual(123);
  });
});

and.stub

在调用and.callThrough后，如果你想阻止spi继续对实际值产生影响，你可以调用and.stub。也就是说，and.stub是将spi对实际实现的影响还原到最终的状态——不影响实际值。

spyOn(foo, ‘setBar‘).and.callThrough();

foo.setBar(123);
// 实际的bar=123
expect(bar).toEqual(123);

// 调用and.stub()后，之后调用foo.setBar将不会影响bar的值。
foo.setBar.and.stub();

foo.setBar(456);
expect(bar).toBe(123);

bar = null;
foo.setBar(123);
expect(bar).toBe(null);

全局匹配谓词

jasmine.any

jasmine.any的参数为一个构造函数，用于检测该参数是否与实际值所对应的构造函数相匹配。

describe("jasmine.any", function() {
  it("matches any value", function() {
    expect({}).toEqual(jasmine.any(Object));
    expect(12).toEqual(jasmine.any(Number));
  });

  describe("when used with a spy", function() {
    it("is useful for comparing arguments", function() {
      var foo = jasmine.createSpy(‘foo‘);
      foo(12, function() {
        return true;
      });

      expect(foo).toHaveBeenCalledWith(jasmine.any(Number), jasmine.any(Function));
    });
  });
});

jasmine.anything

jasmine.anything用于检测实际值是否为null或undefined，如果不为null或undefined，则返回true。

it("matches anything", function() {
    expect(1).toEqual(jasmine.anything());
});

jasmine.objectContaining

用于检测实际Object值中是否存在特定key/value对。

  var foo;

  beforeEach(function() {
    foo = {
      a: 1,
      b: 2,
      bar: "baz"
    };
  });

  it("matches objects with the expect key/value pairs", function() {
    expect(foo).toEqual(jasmine.objectContaining({
      bar: "baz"
    }));
    expect(foo).not.toEqual(jasmine.objectContaining({
      c: 37
    }));
  });

jasmine.arrayContaining

用于检测实际Array值中是否存在特定值。

  var foo;

  beforeEach(function() {
    foo = [1, 2, 3, 4];
  });

  it("matches arrays with some of the values", function() {
    expect(foo).toEqual(jasmine.arrayContaining([3, 1]));
    expect(foo).not.toEqual(jasmine.arrayContaining([6]));
  });

Jasmine Clock

Jasmine Clock用于setTimeout和setInterval的回调控制，它使timer的回调函数同步化，不再依赖于具体的时间，而是将时间离散化，使测试人员能精确控制具体的时间点。

安装与卸载

调用jasmine.clock().install()可以在特定的需要操纵时间的Spec或者Suite中安装Jasmine Clock，注意操作完后要调用jasmine.clock().uninstall()进行卸载。

  var timerCallback;

  beforeEach(function() {
    timerCallback = jasmine.createSpy("timerCallback");
    jasmine.clock().install();
  });
  afterEach(function() {
    jasmine.clock().uninstall();
  });

模拟超时（Mocking Timeout）

可以调用jasmine.clock().tick(nTime)来模拟计时，一旦tick中设置的时间nTime，其累计设置的值达到setTimeout或setInterval中指定的延时时间，则触发回调函数。

  it("causes an interval to be called synchronously", function() {
    setInterval(function() {
      timerCallback();
    }, 100);

    expect(timerCallback).not.toHaveBeenCalled();

    jasmine.clock().tick(101);
    expect(timerCallback.calls.count()).toEqual(1);

    jasmine.clock().tick(50);
    expect(timerCallback.calls.count()).toEqual(1);
    //tick设置的时间，累计到此201ms，因此会触发setInterval中的毁掉函数被调用2次。
    jasmine.clock().tick(50);
    expect(timerCallback.calls.count()).toEqual(2);
  });

异步支持（Asynchronous Support）

调用beforeEach，it或者afterEach时，可以添加一个可选参数（Function类型，在官方文档的例子中该参数为done）。当done函数被调用，表明异步操作的回调函数调用成功；否则如果没有调用done，表明异步操作的回调函数调用失败，则该Spec不会被调用，且会因为超时退出。
Jasmine等待异步操作完成的默认时间是5s，如果5s内异步操作没有完成，则Spec会因为超时退出。超时时间也可以通过全局的jasmine.DEFAULT_TIMEOUT_INTERVAL修改[4]。

var value;

// setTimeout代表一个异步操作。
beforeEach(function(done) {
  setTimeout(function() {
    value = 0;
    // 调用done表示回调成功，否则超时。
    done();
  }, 1);
});

// 如果在beforeEach中的setTimeout的回调中没有调用done，最终导致下面的it因超时而失败。
it("should support async execution of test preparation and expectations", function(done) {
  value++;
  expect(value).toBeGreaterThan(0);
  done();
});

参考资料

[1] [Javascript的Unit Test](http://www.tychio.net/tech/2013/07/10/unit-test.html)。
[2] [官方文档introduction.js](http://jasmine.github.io/2.2/introduction.html)
[3] [官方文档custom_matcher.js](http://jasmine.github.io/2.2/custom_matcher.html)
[4] [Jasmine——JavaScript 单元测试框架](http://inching.org/2014/03/05/javascript-jasmine/)

时间： 2024-10-23 07:34:00

JavaScript单元测试框架-Jasmine的相关文章

JavaScript单元测试框架JsUnit基本介绍和使用

JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit, Oracle SQL有UTPL/SQL. JsUnit JsUnit的官网: http://jsunit.net/ JsUnit遵循XUnit的一些惯例: 单元测试在JsUnit

javascript--QUnit【javascript单元测试框架】

QUnit官网 开源中国:http://www.oschina.net/p/qunit 参考:http://www.zhangxinxu.com/wordpress/2013/04/qunit-javascript-unit-test-单元测试/ http://blog.csdn.net/cyq1984/article/details/6398596 一.断言(Assert) async() Instruct QUnit to wait for an asynchronous operation

[转]javascript单元测试

1.      什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单个程序.函数.过程等:对于面向对象编程,最小单元就是方法,包括基类(超类).抽象类.或者派生类(子类)中的方法. 每个理想的测试案例独立于其它案例:为测试时隔离模块,经常使用stubs.mock 或fake等测试马甲程序.单元测试通常由软件开发人员编写,用于确保他们所写的代码符合软件需求和遵循开发目

构建自动化、跨浏览器的 JavaScript 单元测试

我们都知道在多个浏览器中测试我们的代码是多么的重要.至少在我们发布第一个项目的时候,我认为我们在网络开发社区做大部分工作还是相当不错的. 我们做的不够好的工作是测试代码时每一次做出的改变. 我个人对此感到很惭愧.我已经把"学习如何构建自动化.跨浏览器的JavaScript的单元测试"列在我的年度to-do清单中,但我每一次坐下来真正想要做的时候,我又退却了.虽然我肯定这一部分原因是因为我的懒惰,同时我认为这也是由于缺乏良好的可用信息在这个主题上. 有许多工具和框架(例如 Karma)宣

Java单元测试框架 JUnit

Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一个. JUnit有它自己的JUnit扩展生态圈.多数Java的开发环境都已经集成了JUnit作为单元测试的工具. 在线Javadoc:http://ww...更多JUnit信息 最近更新: JUnit 4.12 发布,Java 单元测试框架 发布于4个月前 C++模拟测试框架 Google Mock

javascript单元测试之jasmine

目前 JS 单元测试框架有丰富的选择,比如 Buster.js.TestSwarm.JsTestDriver 等.而 Jasmine 作为流行的 JavaScript 测试工具,提出BDD(Behavior Driven Development)行为驱动开发的概念,仅 66K 左右,且功能丰富,可以容易的写出清晰简洁的针对项目的测试用例.对基于 JavaScript 开发的项目来说,是一款不错的测试框架选择. 安装: 下载 jasmine最新版 https://github.com/pivota

前端单元测试框架-Mocha

引言 随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是'急剧上升',所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如React.Vue,因为有自己的语法规则,及时每个开发人员的编码风格规范各不相同,但最终的产出都大同小异,代码质量差距不是很大:但对于一些基础类库或方法的开发,我们就要谨慎又谨慎,代码质量一定要高,尽量避免出现Bug. 那我们如何做到产出高质量代码呢?单元测试才是正解,俗话说'跳过单元测试和不仔细过冒烟就交由QA测试的,就是在耍流氓'(这句话是我自己编的):

单元测试框架

单元测试1框架是软件测试框架2的一种. 包括了xUnit,JUnit,QUnit,NUnit等.而其中的JUnit,QUnit,NUnit都是xUnit家族中的成员. xUnit xUnit是各种代码驱动测试框架的统称,可以测试软件的不同单元.xUnit的特点是:提供了一个自动化测试3的解决方案,无须多次编写重复的测试代码,也无须记住该测试的预期结果. 四要素: 测试Fixtures Fixture指被测试的目标.而测试Fixture是一组单元测试成功的预定条件或预期结果的设定. 测试集 测试集

【JavsScript】JavaScript MVC 框架技术选型

你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于没有头绪?我正在撰写一本单页面应用的书,所以我阅读了大量网上的相关资料.在这里我尝试提供一些看法,希望可以帮助你下决定. 简介 这里讨论的是时下最热的框架,AngularJS.Backbone.Ember和Knockout.同时提到了Batman.CANjs.Meteor和Spine,但是没有详细展