如何使用 karma 来测试 arale 的模块

[leoner]

下面的例子主要是基于 arale.base 模块

如果需要在 arale 模块使用 karma 需要新增下面2个文件:

• karma.conf.js — karma 的配置文件
• test-main.js — 用来 seajs 的配置和测试文件的加载

首先让我们看下一个模块目录的基本结构:

$ tree
.
|____karma.conf.js
|____package.json
|____src
| |____aspect.js
| |____attribute.js
| |____base.js
|____tests
| |____base-spec.js
| |____test-main.js

Karma 配置

首先我们可以通过下面的命令创建 karma.conf.js.

karma init

这个命令会有一系列提示, 让你进行选择, 比如需要加载那些文件, 使用那个测试框架, 指定打开的浏览器等.

在这个例子中我们选择 mocha 作为我们的测试框架. 如果选用其他测试框架, 本例子也是适用的, 下面也会给出使用其他测试框架需要注意的地方.

由于配置加载那些文件相对繁琐, 我们可以在后续进行手工配置, 所以直接回车就行

对于测试浏览器的选择, 使用默认即可, 后续也可以通过手动添加需要的浏览器.

现在你的 karma.conf.js 已经创建好了, 里面包括了基本的配置, 在下面我们就说下相对比较复杂的 files 配置

files 配置

这个选项定义了我们需要加载文件列表. 其中主要包含两部分内容

• 初始化加载文件, 也就是不需要通过 seajs 加载文件. 其中 MOCHA, seajs 这些都是.
• 那些文件是你想加载的? 也就是后续通过 seajs 来加载的文件.

下面你看到的就是我们的 files 的具体配置.

 files = [
   MOCHA,
   MOCHA_ADAPTER,
   'http://assets.spmjs.org/seajs/??seajs/2.1.0/sea.js',
   {pattern: 'src/*.js', included: false},
   {pattern: 'tests/*-spec.js', included: false},
   './tests/test-main.js'
 ];

其中注意的就是对于我们通过 seajs 来加载的文件, 只是配置了映射规则, 实际上在启动的时候并不会加载这些文件.

seajs 配置

在我们真正的项目运行中都需要一段代码来配置 seajs, 和加载对应模块的入口, 在这里也是一样的, 我们把这部分内容配置到了 test-main.js 中. 内容还是比较好理解的, 下面就是这个文件的详细内容.

var alias = {
   "class":"arale/class/1.1.0/class",
    "events":"arale/events/1.1.0/events",
    "$":"jquery/jquery/1.7.2/jquery",
    expect: "gallery/expect/0.2.0/expect",
    puerh: "popomore/puerh/0.1.0/puerh",
    handlebars: "gallery/handlebars/1.0.2/handlebars",
    sinon: "gallery/sinon/1.6.0/sinon"
}

// src alias
for (var file in window.__karma__.files) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (/\/src\//.test(file)) {
        var name = file.match(/\/src\/([^.]+)\.js/)[1]
        alias[name] = file
    }
  }
}

seajs.config({
    alias: alias
})

window.__karma__.start = function() {
    seajs.use(["./base/tests/base-spec.js"], function() {
        mocha.run()
    })
}

需要注意的地方

• 关于 karma.start 方法的重写
  这个是很重要的一个地方, 估计很多使用者不成功的原因就在这里. 如果不重写的话, 你就会看到 karma 不会加载任何测试文件. 因为在 karma-mocha-adapter 中的mocha.run 是在页面加载成功后就会执行 mocha.run() .而这个时候没有任何测试用例加载.

使用其他测试框架

比如选择 jasmine 作为测试框架, 只需要对 karma.start 重写方式进行改变

var _fn = window.__karma__.start
window.__karma__.start  = function() {
    seajs.use(["./base/tests/base-spec.js"], function(m) {
        _fn.call()
    })
}

其他测试框架的话也是类似, 可以自行研究呀.

运行测试

我们可以通过下面两个命令来运行测试:

$ karma start

如果你不想配置 Karma 自动的监控文件改变, 并自动运行测试, 也可以手动触发测试:

$ karma run

通过 Karma 运行 arale 模块.

karma 0.10.x 更新

• 配置文件更新. 现在也改为模块的形式了.

module.exports = function(config) {
  config.set({

    // base path, that will be used to resolve files and exclude
    basePath: '',


    // frameworks to use
    frameworks: ['mocha'],

• files 配置. 主要是测试框架也改为插件的形式提供. 需要写到 frameworks 配置中.

 // list of files / patterns to load in the browser
 // frameworks to use
    frameworks: ['mocha'],
    files: [
      'http://assets.spmjs.org/seajs/??seajs/2.1.0/sea.js',
      {pattern: 'src/*.js', included: false},
      {pattern: 'tests/*-spec.js', included: false},
      './tests/test-main.js'
    ],

[leoner]

目前有些地方明显不够灵活, 不过后续根据需求可以通过一些插件, 或者工具来动态的生成 test-main 这个文件.

[lepture]

为何要用 karma ?

在 travis 里跑也只能支持 PhantomJS。

[leoner]

@lepture 只是给用户提供一个选择呀, 并不是主要针对 arale的.

[popomore]

这个是 totoro 要做的么？可以关了么？

[leoner]

可以关了, 这个应该和 totoro 没有关系呀. 就是有些用户需要用 karam 来测试cmd 模块的解决方法. 看看能不能沉淀到那里?