Jasmine 为 JavaScript 提供了 TDD （测试驱动开发）的框架，对于前端软件开发提供了良好的质量保证，这里对 Jasmine 的配置和使用做一个说明。

目前，Jasmine 的最新版本是 2.3 版，这里以 2.3 版进行说明。网上已经有一些关于 Jasmine 的资料，但是，有些资料比较久远，已经与现有版本不一致。所以，这里特别以最新版进行说明。

1. 下载

官网地址：http://jasmine.github.io/

官网文档地址：http://jasmine.github.io/2.3/introduction.html

下载地址：https://github.com/jasmine/jasmine/releases

在 GitHub 上提供了独立版本 jasmine-standalone-2.3.4.zip 和源码版本，如果使用的话，直接使用 standalone 版本即可。

解压之后，可以得到如下所示的文件结构。

其中，lib 中是 Jasmine 的实现文件，在 lib/jasmine-2.3.4 文件夹中，可以看到如下的文件。

打开最外层的 SpecRunner.html ，这是一个 Jasmine 的模板，其中提供了测试的示例，我们可以在使用中直接套用这个模板。其中的内容为：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Jasmine Spec Runner v2.3.4</title>

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

  <link rel="stylesheet" href="lib/jasmine-2.3.4/jasmine.css">

  <script src="lib/jasmine-2.3.4/jasmine.js"></script>

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

  <script src="lib/jasmine-2.3.4/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>

可以看到其中引用了 lib/jasmine-2.3.4/jasmine.js, lib/jasmine-2.3.4/jasmine-html.js 和 lib/jasmine-2.3.4/boot.js 三个系统文件，其中 boot.js 是网页情况下的启动文件，在 张丹 的 jasmine行为驱动,测试先行 这篇文章中，要写一个 report.js 的启动脚本，这里已经不用了，直接使用 boot.js 就可以。

页面下面引用的  src/Player.js 和 src/Song.js 是我们的测试对象，而 spec/SpecHelper.js 和 spec/PlayerSpec.js 则是两个对应的测试文件，测试用例就定义在 spec 中。

2. 测试的定义

我们还是直接看示例，

一个是 Song.js，这里定义了一个 Song 的类，通过原型定义了一个persistFavoriteStatus 实例方法，注意，这里还没有实现，如果调用则会抛出异常。脚本如下。

function Song() {

}

Song.prototype.persistFavoriteStatus = function(value) {

  // something complicated

  throw new Error("not yet implemented");

};

另外一个是 player.js，定义了 Player 类，定义了一个歌手，通过原型定义了 play, pause, resume 和 makeFavorite 实例方法。对象有一个 isPlaying 的状态，其中 resume 还没有完成。

function Player() {

}

Player.prototype.play = function(song) {

  this.currentlyPlayingSong = song;

  this.isPlaying = true;

};

Player.prototype.pause = function() {

  this.isPlaying = false;

};

Player.prototype.resume = function() {

  if (this.isPlaying) {

    throw new Error("song is already playing");

  }

  this.isPlaying = true;

};

Player.prototype.makeFavorite = function() {

  this.currentlyPlayingSong.persistFavoriteStatus(true);

};

下面看测试的定义，具体测试的说明，直接加在注释中。

describe("Player", function() {

  var player;

  var song;

  beforeEach(function() {

    player = new Player();

    song = new Song();

  });

  // 检测正在歌手进行的歌曲确实是指定的歌曲

  it("should be able to play a Song", function() {

    player.play(song);

    expect(player.currentlyPlayingSong).toEqual(song);

    //demonstrates use of custom matcher

    expect(player).toBePlaying(song);

  });

  // 进行测试的分组，这里测试暂停状态

  describe("when song has been paused", function() {

    beforeEach(function() {

      player.play(song);

      player.pause();

    });

    // isPlaying 的状态检测

    it("should indicate that the song is currently paused", function() {

      expect(player.isPlaying).toBeFalsy();

      // demonstrates use of 'not' with a custom matcher

      //

      expect(player).not.toBePlaying(song);

    });

    // 恢复

    it("should be possible to resume", function() {

      player.resume();

      expect(player.isPlaying).toBeTruthy();

      expect(player.currentlyPlayingSong).toEqual(song);

    });

  });

  // demonstrates use of spies to intercept and test method calls

  // 使用 spyOn 为对象创建一个 mock 函数

  it("tells the current song if the user has made it a favorite", function() {

    spyOn(song, 'persistFavoriteStatus');

    player.play(song);

    player.makeFavorite();

    expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);

  });

  //demonstrates use of expected exceptions

  // 异常检测

  describe("#resume", function() {

    it("should throw an exception if song is already playing", function() {

      player.play(song);

      expect(function() {

        player.resume();

      }).toThrowError("song is already playing");

    });

  });

});

使用浏览器直接打开 SpenRunner.html 看到的结果

可以看到测试都通过了。

如果我们将第一个测试 expect(player.currentlyPlayingSong).toEqual(song); 改成 expect(player.currentlyPlayingSong).toEqual( 1 );

测试通不过，显示会变成这样。

3. 语法

3.1 describe 和 it

describe 用来对测试用例进行分组，分组可以嵌套，每个分组可以有一个描述说明，这个说明将会出现在测试结果的页面中。

describe("Player", function() {

      describe("when song has been paused", function() {

而 it 就是测试用例，每个测试用例有一个字符串的说明，匿名函数内就是测试内容。

  // 检测正在歌手进行的歌曲确实是指定的歌曲

  it("should be able to play a Song", function() {

    player.play(song);

    expect(player.currentlyPlayingSong).toEqual(song);

  });

测试结果的断言使用 expect 进行，函数内提供测试的值，toXXX 中则是期望的值。

上面的测试使用 toEqual 进行相等断言判断。

3.2 beforeEach 和 afterEach

示例中还出现了 beforeEach。

  var player;

  var song;

  beforeEach(function() {

    player = new Player();

    song = new Song();

  });

顾名思义，它表示在本组的每个测试之前需要进行的准备工作。在我们这里的测试中，总要用到 player 和 song 这两个对象实例，使用 forEach 保证在每个测试用例执行之前，重新对这两个对象进行了初始化。

afterEach 会在每一个测试用例执行之后执行。

3.3 自定义的断言

除了系统定义的 toEqual 等等断言之外，也可以使用自定义的断言，在上面的示例中就出现了 toBePlaying 断言。

    //demonstrates use of custom matcher

    expect(player).toBePlaying(song);

这个自定义的断言定义在 SpecHelper.js 文件中。

beforeEach(function () {

  jasmine.addMatchers({

    toBePlaying: function () {

      return {

        compare: function (actual, expected) {

          var player = actual;

          return {

            pass: player.currentlyPlayingSong === expected && player.isPlaying

          };

        }

      };

    }

  });

});

其中调用了 jasmine 的 addMatchers 函数进行定义，原来这里不叫断言，称为 matcher ，也就是匹配器。

断言是一个函数，返回一个对象，其中有一个 compare 的函数，这个函数接收两个参数，第一个是实际值，第二个为期望的值。具体的断言逻辑自己定义，这里比较歌手演唱的对象是否为我们传递的对象，并且歌手的状态为正在表演中。

断言函数需要返回一个对象，对象的 pass 属性为一个 boolean 值，表示是否通过。

4. 常用断言

4.1 toEqual

深相等，对于对象来说，会比较对象的每个属性。对于数组来说，会比较数组中每个元素。

  describe("The 'toEqual' matcher", function() {

    it("works for simple literals and variables", function() {

      var a = 12;

      expect(a).toEqual(12);

    });

    it("should work for objects", function() {

      var foo = {

        a: 12,

        b: 34

      };

      var bar = {

        a: 12,

        b: 34

      };

      expect(foo).toEqual(bar);

    });

  });

4.2 toBe

对于对象，引用相等。对于值，值相等。

pass: actual === expected

例如

  it("and has a positive case", function() {

    expect(true).toBe(true);

  });

4.3 toBeTruthy

是否为真。

  it("The 'toBeTruthy' matcher is for boolean casting testing", function() {

    var a, foo = "foo";

    expect(foo).toBeTruthy();

    expect(a).not.toBeTruthy();

  });

4.4 toBeFalsy

是否为假。

  it("The 'toBeFalsy' matcher is for boolean casting testing", function() {

    var a, foo = "foo";

    expect(a).toBeFalsy();

    expect(foo).not.toBeFalsy();

  });

4.5 toBeDefined

是否定义过

  it("creates spies for each requested function", function() {

    expect(tape.play).toBeDefined();

    expect(tape.pause).toBeDefined();

    expect(tape.stop).toBeDefined();

    expect(tape.rewind).toBeDefined();

  });

4.6 toBeUndefined

没有定义

  it("The `toBeUndefined` matcher compares against `undefined`", function() {

    var a = {

      foo: "foo"

    };

    expect(a.foo).not.toBeUndefined();

    expect(a.bar).toBeUndefined();

  });

4.7 toBeNull

  it("The 'toBeNull' matcher compares against null", function() {

    var a = null;

    var foo = "foo";

    expect(null).toBeNull();

    expect(a).toBeNull();

    expect(foo).not.toBeNull();

  });

4.9 toBeGreaterThan

  it("The 'toBeGreaterThan' matcher is for mathematical comparisons", function() {

    var pi = 3.1415926,

      e = 2.78;

    expect(pi).toBeGreaterThan(e);

    expect(e).not.toBeGreaterThan(pi);

  });

4.10 toBeLessThan

  it("The 'toBeLessThan' matcher is for mathematical comparisons", function() {

    var pi = 3.1415926,

      e = 2.78;

    expect(e).toBeLessThan(pi);

    expect(pi).not.toBeLessThan(e);

  });

4.11 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);

  });

4.12 toContain

集合中是否包含。

  it("The 'toContain' matcher is for finding an item in an Array", function() {

    var a = ["foo", "bar", "baz"];

    expect(a).toContain("bar");

    expect(a).not.toContain("quux");

  });

4.13 toMatch

正则表达式的匹配

  it("The 'toMatch' matcher is for regular expressions", function() {

    var message = "foo bar baz";

    expect(message).toMatch(/bar/);

    expect(message).toMatch("bar");

    expect(message).not.toMatch(/quux/);

  });

4.14 toThrow

检测是否抛出异常

  it("The 'toThrow' matcher is for testing if a function throws an exception", function() {

    var foo = function() {

      return 1 + 2;

    };

    var bar = function() {

      return a + 1;

    };

    expect(foo).not.toThrow();

    expect(bar).toThrow();

  });

4.15 toHaveBeenCalled

4.16 toHaveBeenCalledWith

是否调用过。

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() {

    expect(bar).toBeNull();

  });

});

RequireJS Jasmine 2.0 编写测试

http://ju.outofmemory.cn/entry/96587

使用 Jasmine 进行测试驱动的 JavaScript 开发的更多相关文章

  1. TDD测试驱动的javascript开发(3) ------ javascript的继承

    说起面向对象,人们就会想到继承,常见的继承分为2种:接口继承和实现继承.接口继承只继承方法签名,实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承. ...

  2. 构建简单的Maven工程，使用测试驱动的方式开发项目

    构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2. ...

  3. 使用模拟对象（Mock Object）技术进行测试驱动开发

    敏捷开发 敏捷软件开发又称敏捷开发,是一种从上世纪 90 年代开始引起开发人员注意的新型软件开发方法.和传统瀑布式开发方法对比,敏捷开发强调的是在几周或者几个月很短的时间周期,完成相对较小功能,并交付 ...

  4. Scrum敏捷软件开发之技术实践——测试驱动开发TDD

    重复无聊的定义 测试驱动开发,英文全称Test-Driven Development,简称TDD,是一种不同于传统软件开发流程的新型的开发方法.它要求在编写某个功能的代码之前先编写测试代码,然后只编写 ...

  5. 关于测试驱动的开发模式以及实战部分，建议看《Python Web开发测试驱动方法》这本书

    关于测试驱动的开发模式以及实战部分,建议看<Python Web开发测试驱动方法>这本书

  6. 软件工程 - Test-Driven Development (TDD)，测试驱动开发

    参考 https://baike.baidu.com/item/%E6%B5%8B%E8%AF%95%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91/3328831?fr=al ...

  7. JavaScript开发工具大全

    译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采 ...

  8. 为何说 JavaScript 开发很疯狂

    [编者按]本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 网络开发乐趣多多!Ja ...

  9. 2013年JavaScript开发人员调查结果

    JavaScript开发人员调查现在已经结束,一如既往社区对结果进行了进一步分析: 总结(汉语) 原始数据(电子表格) 2012年结果 51%的被参与者写客户端代码,而28%的人说他们编写服务器端代码 ...

随机推荐

  1. Characteristics of Some CISCs, RISCs, and Superscalar Processors

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Although RISC archite ...

  2. Python之编写函数

    Python之编写函数 在Python中,定义一个函数要使用 def 语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用 return 语句返回. 我们以自定 ...

  3. 超简易静态Web服务器

    使用 HttpListener 写的一个超简易静态Web服务器 开发环境:VS2010 + .NET2.0 http://files.cnblogs.com/zjfree/EasyIIS.rar

  4. URLRedirector 解决网页上无法访问 google CDN 的问题（fonts、ajax、themes、apis等）

    URLRedirector 解决网页上无法访问 google CDN 的问题(fonts.ajax.themes.apis等) 由于某些原因,在访问国外的网站时有时候会特别慢,像 stackoverf ...

  5. in-list iterator

    in-list iterator --针对目标sql的in后面是常量集合的首选项处理方法,其处理效率通常都会比in-list expansion高--使用in-list iterator的时候,in所 ...

  6. input内强制保留小数点后两位 位数不足时自动补0

    input内强制保留小数点后两位 位数不足时自动补0 小数点后位数超出2位时进行四舍五入 需引入jquery包 1.11.2版本 1 function xiaoshu(x) 2 { 3 var f = ...

  7. Web动画API教程2：AnimationPlayer和Timeline

    本文转载: Web动画API教程2:AnimationPlayer和Timeline

  8. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数005·graphics-obj，基本绘图单元，包括线段、矩形、椭圆、圆形

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数005·graphics-obj,基本绘图单元,包括线段.矩形.椭圆.圆形 graphics-obj,基本绘图单元, ...

  9. 处理mysql上百万条数据的优化

    php 处理上百万条的数据库如何提高处理查询速度 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字 ...

  10. Spring MVC 学习资料

    引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Jav ...