搭建基于Karma和Jasmine的前端单元测试

简介

Jasmine是一个behavior-driven development ( 行为驱动开发 ) 测试框架, 不依赖于任何其他JavaScript框架, 不依赖DOM, 并且有很简洁的语法让你能够很轻松的编写单元测试. 本文并不会介绍Jasmine的语法, 重点是成功的搭建一个测试环境.

Karma是Testacular的新名字, 在2012年google开源了Testacular,2013年Testacular改名为Karma.
Karma是一个基于Node.js的JavaScript测试执行过程管理工具( Test Runner ). 该工具可用于测试所有主流Web浏览器, 也可集成到CI ( Continuous integration ) 工具, 也可和其他代码编辑器一起使用. 这个测试工具的一个强大特性就是, 它可以监控(Watch)文件的变化, 然后自行执行.

接下来的内容需要读者对 Node.jsNPM 有一个基本了解, 否则你可能搞不清楚我们究竟在干什么.

安装

为了能成功运行Jasmine单元测试, 请安装以下NPM Package. 它们并不都是必须的, 但为了完整性, 我会把所有要使用的包列在这里.

安装[karma-cli]

Commandline Interface. You will need to do this if you want to run Karma on Windows from the command line.

npm install karma-cli -g

安装Karma

Spectacular Test Runner for JavaScript.

npm install karma --save-dev

安装karma-jasmine

A Karma plugin - adapter for Jasmine testing framework.

npm install karma-jasmine --save-dev

安装karma-chrome-launcher

Launcher for Google Chrome and Google Chrome Canary.

npm install karma-chrome-launcher --save-dev

安装jasmine-core

Official packaging of Jasmine's core files for use by Node.js projects.Note: Since karma-jasmine 0.3.0 the jasmine library is no longer bundled with karma-jasmine and you have to install it on your own.

npm install jasmine-core --save-dev

安装karma-coverage

A Karma plugin. Generate code coverage.

npm install karma-coverage

配置

karma通过karma.config.js进行配置, 这个文件具体的配置项可以点击链接进入官网, 有很详细的介绍. 但我们通常不需要把所有的配置都弄清楚, 这并不代表它们不重要, 只是熟悉一些常用的配置就足以满足我们的需要.

我们可以通过karma init自动生成一个配置文件.整个过程完全是傻瓜式的操作.

C:\Users\Administrator>karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "C:\Users\Administrator\karma.conf.js".

运行karma

如果上面的步骤你执行的很顺利, 接下来试着在命令行运行karma start

C:\Users\Administrator>karma start
20 06 2016 08:59:21.910:WARN [karma]: No captured browser, open http://localhost:9876/
20 06 2016 08:59:21.925:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 06 2016 08:59:21.941:INFO [launcher]: Starting browser Chrome
20 06 2016 08:59:23.282:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#pJl8pFn3FBKacmLnAAAA with id 58410301
Chrome 51.0.2704 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.004 secs / 0 secs)

如果在命令行看到如下提示, 并且成功的打开了Chrome浏览器, 那么恭喜你, 你成功的运行了karma. 但是很明显你可以看到我们并没有写任何一个单元测试. Executed 0 of 0 ERROR (0.004 secs / 0 secs). 所以接下来我们要做的就是开始写单元测试.

写一个简单的单元测试

假设我们有一个js/main.js需要测试, 它包含了两个简单的函数.

function reverse(str) {
    return str.split('').reverse().join('');
}

function isInteger(num) {
    if (typeof num !== "number") return false;
    var pattern = /^[1-9]\d*$/g;
    return pattern.test(num);
}

我们创建一个test/mainSpec.js文件注意文件的路径需要和配置文件对应

describe("main.js", function() {

    it("reverse", function() {
        // Assert (verify the result)
        expect(reverse('abcd')).toEqual('dcba');
        expect(reverse('asdf')).toEqual('fdsa');
    });

    it("isInteger", function() {
        expect(true).toEqual(isInteger(20));
        expect(false).toEqual(isInteger("20"));
        expect(false).toEqual(isInteger(0));
    })


});

至于如何来写一个jasmine单元测试, 不是这篇文章的内容. 大家可以移步jasmine官网学习.
它的四要素就是describe, it, expect, toBe
再运行karma start 试试

C:\Users\Administrator>karma start
20 06 2016 09:10:18.766:WARN [karma]: No captured browser, open http://localhost:9876/
20 06 2016 09:10:18.782:WARN [karma]: Port 9876 in use
20 06 2016 09:10:18.782:INFO [karma]: Karma v0.13.22 server started at http://localhost:9877/
20 06 2016 09:10:18.782:INFO [launcher]: Starting browser Chrome
20 06 2016 09:10:20.109:INFO [Chrome 51.0.2704 (Windows 10 0.0.0)]: Connected on socket /#OoyWShGkmQDvgjqvAAAA with id 84751591
Chrome 51.0.2704 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.013 secs / 0.004 secs)

已经成功的执行了测试, karma会自动watch我们的js文件, 如果文件发生变化, 它会立刻做出响应.

生成测试报告

还记得我们之前安装的karma-coverage吗? 它是karma的一个插件, 提供了测试代码覆盖率的支持.
修改我们的karma.conf.js.

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
preprocessors: {
    'js/*.js': ['coverage']
},

// optionally, configure the reporter
coverageReporter: {
    type: 'html',
    dir:  'coverage/'
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
// coverage reporter generates the coverage
reporters: ['progress','coverage'],

涉及三个配置信息, 两个是必须的, 一个是可选的.

  1. preprocessors 预处理器配置
    这里配置哪些文件需要统计测试覆盖率, 例如, 如果你的所有代码文件都在 js文件夹中, 你就需要如下配置. 注意不要包含你所依赖的库,测试文件等等
  2. reports 报告配置
    在配置文件中包含下面的信息来激活覆盖率报告器.
  3. coverageReporter 报告选项, 默认格式如下
    type 是一个字符串值,其他取值可以进入官网查阅. 通常我们就用默认就好了.
    dir 则用来配置报告的输出目录。如果是一个相对路径的话,将相对与 basePath 参数。
    如果类型是 text 或者 text-summary,你可以配置 file 参数来指定保存的文件名。
coverageReporter = {
  type : 'text',
  dir : 'coverage/',
  file : 'coverage.txt'
}

如果没有文件名,就会输出到控制台。

集成到webstorm

到了上一步, 我们的工作就完成了, 你已经可以开始在项目中使用karma和jasmine, 但是为了方便我把它们集成到了webstorm. 这并不复杂.
进入run菜单下面的edit Configrations. 点击+, 选择karma. 配置好相应的路径.
然后再karma.conf.js上右键选择 run karma.conf.js
参考文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容