起

博主是电信行业的码农，在工作单位也搞搞单元测试和TDD了什么。目前对Web技术很感兴趣，尝试新的领域里面也试试看TDD.

这次要用TDD的方式要实现一个简单画图板功能，支持Chrome和Firefox。

准备工作

安装Karma

npm install -g karma

墙内的朋友安装的时候可能会看到这样的错误

Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-windows.zip
Saving to C:\TEMP\phantomjs\phantomjs-1.9.7-windows.zip

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: read ECONNRESET
    at errnoException (net.js:901:11)
    at TCP.onread (net.js:556:19)

这个时候需要自己手动下载一份phantomjs-1.9.7-windows.zip放到对应目录，然后继续执行npm install -g karma，安装就会成功。

执行karma init就会像执行npm init，一样提示你配置好你的karma.conf.js文件。配置文件里面主要就是一个JSON对象，根据注释提示调整下即可。(如果你和我一样使用的测试框架是Mocha,断言库是chai的话，还需要为Karma安装Mocha的插件npm install karma-mocha & npm install karma-chai。)

我的配置文件和目录结构

./
│  karma.conf.js
├─lib
|
└─test
    testwwp.js

启动karma，karma会启动你需要的浏览器，并执行case。不过我们还没有添加任何Case。

>karma start
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser Firefox
WARN [launcher]: Chrome have not captured in 60000 ms,killing.
WARN [launcher]: Firefox have not captured in 60000 ms,killing.
INFO [launcher]: Trying to start Chrome again.
INFO [launcher]: Trying to start Firefox again.
INFO [Chrome 33.0.1750 (Windows 7)]: Connected on socket XSBr3JzPetUpruEbr30w
INFO [Firefox 27.0.0 (Windows 7)]: Connected on socket LfejRTLN--KYyhSlr30x
Chrome 33.0.1750 (Windows 7): Executed 0 of 0 ERROR (1.061 secs / 0 secs)
Firefox 27.0.0 (Windows 7): Executed 0 of 0 ERROR (1.252 secs / 0 secs)

添加Case

按照TDD的节奏，该写一个失败的Case了。

"use strict";

var expect = chai.expect;

describe('fist test',function() {

  it('should Failed',function() {
    expect(1).to.equal(2);
  });

});

Karma的配置文件加载了Mocha和Chai，在测试文件中就不需要像node.js一样require('xxx')了。如果你的karma配置文件中autoWatch是true的话，当你保存文件之后Karma就告诉你的Case在两个浏览器里面执行的结果了。

INFO [watcher]: Changed file "D:/git/karmatddpost/test/testwwp.js".
Chrome 33.0.1750 (Windows 7) fist test should Failed Failed
        expected 1 to equal 2
        AssertionError: expected 1 to equal 2
Firefox 27.0.0 (Windows 7) fist test should Failed Failed
        expected 1 to equal 2
Chrome 33.0.1750 (Windows 7): Executed 1 of 1 (1 Failed) ERROR (0.357 secs / NaN secs)
Firefox 27.0.0 (Windows 7): Executed 1 of 1 (1 Failed) ERROR (0.383 secs / NaN secs)

Karma的TDD的工作环境算是配置好了。接下来就可以开发简易画图板了。

捐赠

如果您觉得本文对您有帮助，欢迎请作者一杯咖啡

https://me.alipay.com/shupengfei