目的

使用karma和jasmine来配置自动化的js单元测试。

Karma和Jasmine

Karma是由Angular团队所开发的一种自动化测试工具。链接:http://karma-runner.github.io/

Karma会启动PhantomJS实例来运行测试,可以在其上使用Jasmine、Mocha等测试框架,也可以和Jenkins、Travis等CI(Continuous Integration,持续集成)进行整合。

Jasmine是一个按照BDD(behavior-driven development,行为驱动开发)思想开发的js测试框架,很适合做单元测试。链接:http://jasmine.github.io/

Karma为Jasmine提供了真实的浏览器环境,两者结合来做js单元测试非常方便。

安装和配置Karma

使用npm安装Karma:

npm install karma --save-dev

创建config文件:

node_modules/karma/bin/karma init [karma.config.js]

创建过程中需要进行各种配置,我们直接来看看生成的karma.config.js文件中的一些字段:

frameworks: ['jasmine'], // 单元测试框架,这里我们使用jasmine
files: [ './src/*.js', './client-tests/*.js'], // 需要包含的文件,包括测试的目标代码和测试代码
preprocessors: {'./static/src/*.js': 'coverage',}, // 预处理器,包括eslint、browserify、babel等等,这里我们使用了karma-coverage来生成代码覆盖率报告
reporters: ['progress', 'coverage'], // 报告,除了默认的progress报告测试进度,这里我们添加了karma-coverage
port: 9876, // 端口,karma会在localhost:[端口]启动一个测试服务器,这样我们可以用其他设备访问这个页面,得到更真实的设备测试结果
browsers: ['Chrome'], // 目标浏览器
singleRun: true, // 当singleRun为true时,测试完成后测试服务器和浏览器即被关闭
coverageReporter: {type : 'html',dir : 'coverage/'} // 这边是karma-coverage的配置

测试服务器使用了socket,Karma会监视目标js,当文件发生改变时后会实时更新浏览器端刷新测试结果。

启动karma:

node_modules/karma/bin/karma start karma.config.js

除了Karma之外,可能还需要用npm安装以下包:

测试框架相关:jasmine-core,karma-jasmine...
浏览器相关:karma-chrome-launcher...
其他插件(代码覆盖率等等):karma-coverage...

使用jasmine:

首先简单介绍几个概念:

bdd:行为驱动开发是一种敏捷开发的思维,其特点是在实际开发前先用语义化的测试案例来描述代码的作用、行为,再编写代码实现目标。

suits:测试套件。一个或多个测试案例组成一个测试套件,来测试一系列相关的行为。测试套件也可以嵌套测试套件。

specs:测试案例。测试的基本单位,一个测试案例通常用以测试一个行为。一个测试案例应当包含一个或多个期望。

用jasmine来编写就是:

describe("A suite", function() { // describe定义一个测试套件
  it("contains spec with an expectation", function() { // it定义一个测试案例
    expect(true).toBe(true); // expect定义一个期望
  });
});

将以上内容保存到karma.config指定的测试代码文件夹中,运行Karma,会报告我们定义了一个测试,通过了一个测试。

我们还可以在一个测试套件中使用beforeEach、afterEach、beforeAll和afterAll来指定每个测试案例或测试套件的前后所执行的代码来重置测试上下文:

describe("A spec using beforeEach and afterEach", function() {
  var foo = 0;

  beforeEach(function() {
    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);
  });
});

jasmine同时提供了spies的功能。spy是对函数调用的跟踪记录。

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

  beforeEach(function() {
    foo = {
      setBar: function(value) {
        bar = value;
      }
    };
    // 使用spies
    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();
  });
});

当然还有对异步的支持:

// 使用done来支持异步describe("long asynchronous specs", function() {
  beforeEach(function(done) {
    done();
  }, 1000);

  it("takes a long time", function(done) {
    setTimeout(function() {
      done();
    }, 9000);
  }, 10000);

  afterEach(function(done) {
    done();
  }, 1000);
});

小结

使用Karma+jasmine可以方便的进行单元测试、BDD开发和持续集成。正确的应用这些开发理念,可以加快开发,减少错误,让我们在开发过程中更自信、更愉快。

使用karma+jasmine做单元测试的更多相关文章

  1. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  2. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  3. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  4. karma、jasmine做angularjs单元测试

    引用文:karma.jasmine做angularjs单元测试 karma和jasmine介绍 <1>技术介绍 karma karma是Testacular的新名字 karma是用来自动化 ...

  5. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  6. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  7. Karma:1. 集成 Karma 和 Jasmine 进行单元测试

    关于 Karma 会是一个系列,讨论在各种环境下,使用 Karma 进行单元测试. 本文讨论 karma 集成 Jasmine 进行单元测试. 初始化 NPM 实现初始化 NPM 包管理,创建 pac ...

  8. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  9. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

随机推荐

  1. FZU Problem 2028 时空门问题(DFS+优化)

    一开始是MLE,后来想到了用vector,化二维为一维,做了这一步优化后,这就是很基础的一个广搜了 #include<iostream> #include<cstdio> #i ...

  2. phpstorm 格式化代码方法

    hpstorm 代码格式化方法: 快捷键:Ctrl + Alt + L 设置代码样式:File -> Settings -> Code Style ->PHP 根据个人php代码规范 ...

  3. HDU 5547 暴力

    Sudoku Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Subm ...

  4. mysql优化---优化工具MySQL performance tuning primer script

    MySQL performance tuning primer script一个简单好用的mysql优化工具,其实一个shell脚本 下载: $ wget http://www.day32.com/M ...

  5. 小米1S iptables禁止443端口

    shell@android:/system/bin # ./iptables -A INPUT -p tcp --dport 443 -j DROP./iptables -A INPUT -p tcp ...

  6. STL中map的一个知识点

    问题背景 在做USACO Section 1.1 Greedy Gift Givers的时候,我最初的想法是直接用一个map来进行数据处理.但是后来产生一个让我感到疑问的地方,后来我经过测试,发现了这 ...

  7. 好用的消息对话框-TipsWindown

    TipsWindow的官网地址为:http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html 这个是一个爱好者维护的!在这里感谢这 ...

  8. Jquery实现鼠标拖拽效果

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  9. CentOS 6.5 GIT 服务器搭建

    环境: Git Sserver IP: 10.6.0.2 Git Client IP: 10.6.0.126 1. 在 Git Server 安装软件所需的依赖包 yum install curl-d ...

  10. 防止多个UIAlertView重叠弹出

    http://www.jianshu.com/p/7ac398ef4532 项目中可能会遇到这种情况,好几个alertView因为逻辑关系全部弹出,用户需要一个个的点击才能将所有的alertView取 ...