目的

使用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. Elixir - Hey, two great tastes that go great together!

    这是Elixir的作者 José Valim 参与的一次技术访谈,很有料,我们可以了解Elixir的一些设计初衷,目标等等. 原文在: http://rubyrogues.com/114-rr-eli ...

  2. hihoCoder挑战赛14 -1223

    描述 给定n个关于X的不等式,问最多有多少个成立. 每个不等式为如下的形式之一: X < C X <= C X = C X > C X >= C 输入 第一行一个整数n. 以下 ...

  3. CSDN改版问题多多

    刚刚上CSDN,发现改版了,推出C币功能. 然后看了2分钟,发现了一个Bug,于是准备提交到论坛.但是--居然提交Bug的论坛也出现Bug.印象中,每次CSDN更新版本号Bug都非常多,这,作为程序猿 ...

  4. 照片提取GPS 转成百度地图坐标

    感谢: 小慧only http://www.cnblogs.com/zhaohuionly/p/3142623.html  GPS转化坐标方法 大胡子青松 http://www.cnblogs.com ...

  5. python爬虫(二)_HTTP的请求和响应

    HTTP和HTTPS HTTP(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收HTML页面的方法 HTTPS(HyperText Transfer Prot ...

  6. Python的文件及异常

    1. Python的文件及异常 1.1 文件操作 1.1.1 从文件中读取数据 许多情况下,我们的信息是存储在文本中的.例如对用户行为的分析,用户访问系统或者网站的访问信息会被存储于文本中,然后对文本 ...

  7. Python面试知识点小结

    一.Python基础 1.Python语言特性: 动态型(运行期确定类型,静态型是编译型确定类型),强类型(不发生隐式转换,弱类型,如PHP,JavaScript就会发生隐患式转换) 2.Python ...

  8. java日志框架之logback(一)——logback工程简介

    Logback工程 致力于成为log4j工程的继承者 Logback的架构足够泛型化,故能够应用于许多不同的环境.当前,logback划分为三个组件: logback-core logback-cla ...

  9. Android 四大组件之 Service(一)

    Service是Android中四大组件之一,在Android开发中起到非常重要的作用,它运行在后台,不与用户进行交互. 1.Service的继承关系: java.lang.Object → andr ...

  10. Linux时间子系统(三) 用户空间接口函数

    一.前言 从应用程序的角度看,内核需要提供的和时间相关的服务有三种: 1.和系统时间相关的服务.例如,在向数据库写入一条记录的时候,需要记录操作时间(何年何月何日何时). 2.让进程睡眠一段时间 3. ...