采用tdd进行javascript开发

 

昨天与同事实现一个简单的地图定位功能，功能虽然简单，可是过程却是痛苦的，且程度是极度的。痛苦的主要原因源自于调试前端界面，也就是javascript部分。多年前也曾经写过许多javascript程序，那段历史可以追溯到ajax还未出现之前。以前写的时候因为自身、环境等各种原因，从来没有考虑过写javascript的单元测试。
经过昨天，深刻地体会了一次如果没有对javascript做单元测试，调试的过程是多么的痛苦。由于时间问题，今天粗略的google了一下javascript单元测试库，发现主要有：

• JSUnit – http://www.jsunit.net/
• jspec – http://jspec.info/
• jasmine – http://pivotal.github.com/jasmine/
• QUnit – http://docs.jquery.com/Qunit
• jsspec – http://code.google.com/p/jsspec/

在选择的时候原本准备选用jasmine，主要原因有三个：

1. jasmine（茉莉花）本人最喜欢的花；
2. jasmine的语法非常优美，非常适合BDD；
3. jasmine可以与rails集成。

但是最后由于使用rails g jasmine:install时出错而打住了。最后选择了QUnit，因为他是jQuery提供的，jQuery有是那么的流行，定位地图很多也是基于jQuery写的，另外，有一个叫做mockjax的扩展，可以方便的模拟ajax请求。

下面用一个简单的例子记录今日的学习过程，并展示用QUnit如何进行TDD。

需求定义

提供一个消息窗体函数，该函数可以将一个div渲染成一个消息窗口。函数需要知道将渲染的div是哪个；需要知道用什么内容去渲染该消息窗体。

详细过程