经过Jasmine和Guard自动测试JavaScript

原文标题：Autotesting JavaScript with Jasmine and Guard

原文地址：http://edspencer.net/2013/06/15/autotesting-javascript-with-jasmine-and-guard/

经过Jasmine和Guard自动测试JavaScript

我喜欢Rails的一个缘由是：他介绍了自动测试的理念给我，即一个监听你文件系统改变的文本，而后在文件发生改变时，自动运行你的单元测试。

由于单元测试一般状况下运行得很快，你可能在你一两次保存文件后就获得了你的测试结果。容许你继续在编辑器中继续编辑代码，只有你在须要详细调试的状况下时，才将转向到浏览器中进行调试――由于有了命令行输出和操做系统的提醒，你能够大部分时间内集中你的主要注意力在问题解决上。

这是一个使人向往的工做方式，而且因为我工做上从新用到了JavsScript。由于我使用过不少ruby的程序，并且我很是熟练轻松地实现了这种方式，证实了这是一个很容易就实现的方式，并且，这是很是明智的，我尝试了这种方式。

安装Guard

Guard 的是“守卫”的意思，这里指是一个 ruby 小插件，他可以扫描你的文件系统中所改变的东西，而后在你所关心文件改变时运行你指定的代码。他为自动测试提供了简单而又有效的，基于文件系统的触发器。首先，让咱们确认一下，咱们安装了全部必需的ruby gem小插件。

gem install jasmine jasmine-headless-webkit guard-jasmine-headless-webkit guard \

 guard-livereload terminal-notifier-guard --no-rdoc --no-ri

这仅仅只是安装了一小部分的ruby插件，用于咱们的测试。首先咱们先经过安装ruby插件安装优秀的JavaScript行为驱动开发（BDD）测试框架：Jasmine，固然你可以使用你本身所喜好框架，可是，我认为Jasmine用起来很顺手而且彻底能够胜任咱们的要求。而后，咱们添加jasmine-headless-webkit插件，以及他的 "guard 双胞胎"(经过使用phantomjs在命令行上执行你的测试代码，而不须要在浏览器中执行)。

接下来，咱们安装了“guard-livereload”，它可以使得Guard可以做为一个 livereload 的服务器，在你修改文件后自动地在浏览器运行全部测试用例。这初步看起来很强大。同时这有一点疑惑，既然咱们已经能够在精简webkit环境运行咱们的测试，那为何还要给本身找麻烦去支持在浏览器中运行呢？恩，由于在咱们测试用例发现错误时，咱们能够从浏览器中获得更多的信息，例如堆栈跟踪，而这些信息对于实时调试是很是有帮助的。

最后咱们安装了“terminal-notifier-guard ”插件，它可以在每次运行完测试用例后给咱们一个通知。如今咱们已经安装了全部必须的插件了，如今咱们开始搭建软件环境了，很是感谢jasmine和guard提供了很简单明了的操做说明。

jasmine init

guard init

接下来，咱们要开始运行了，让咱们经过运行“guard”命令测试是否搭建成功。
guard

你应该看到的是这样的(原文的图片看不到，这是我本身的截图，注意我这里只装成功gaurd和livereload，因此与原文的图可能有区别)：



咱们看到guard已经启动完毕，告诉咱们在每次测试用例完成运行时，将会经过使用终端监听的方式给操做系统一个响应，同时，将会使用JasmineHeadlessWebkit运行这些测试用例，而不是经过浏览器。你将看到在5ms内运行了5个测试用例，而且你应该看到有一个闪屏的操做系统提示告诉你完成了测试。当你不想一直保持一个终端窗口可见时，例如使用笔记本工做时，这是很是棒的！

这5个测试的内容是什么？它们仅仅是咱们经过“jasmine init”建立的示例，你可以在 spec/javascripts 目录找到它们，一般状况下，只有一个文件 PlayerSpec.js

如今，咱们尝试去修改这个文件，而且修改后立刻保存。结果什么也没发生。缘由是经过“guard init” 生成的 Guardfile 文件中的监听文件条件与 jasmine 的文件结构不相符形成的。咱们得稍微麻烦一点，手动修改这个 Guardfile 这个文件。

若是你如今打开 Guardfile 文件，你将看到有30行左右的配置选项(不知怎的，笔者这只有11行)。文件中大部分是注释和可选项，这些你均可以随意删除掉的。Guard 指望你的测试文件遵循以下格式“my_spec.js”，注意js文件须要以 "_spec" 结尾。

一个简便的办法是直接修改 spec_location 变量，将后面的 _spec 移除掉就行。而后对  `guard ‘jasmine-headless-webkit’ do` 这一块作一样的操做。最终处理后的结果应该是这样的：

spec_location = "spec/javascripts/%s"

guard 'jasmine-headless-webkit' do

watch(%r{^app/views/.*\.jst$})

watch(%r{^public/javascripts/(.*)\.js$}) { |m| newest_js_file(spec_location % m[1]) }

watch(%r{^app/assets/javascripts/(.*)\.(js|coffee)$}) { |m| newest_js_file(spec_location % m[1]) }

watch(%r{^spec/javascripts/(.*)\..*}) { |m| newest_js_file(spec_location % m[1]) }

end

一旦你修改完毕 Guard，不须要重启 guard，它可以监听到Guardfile的改变，而且自动重启。如今一旦你保存 PlayerSpec.js 文件，你可以看到你的终端马上运行了你的测试用例，而且给了你测试结束的提示，固然假定你的测试仍然是经过的。

你是否是对 `guard ‘jasmine-headless-webkit’ do` 这块的内容有些疑惑呢？可能你已经猜到了，这就是设置guard将监听的文件。不管何时，知足当前匹配的文件一旦发生更改，guard 将会自动运行jasmine-headless-webkit命令，就是运行你的测试用例。这些是默认的选项，因此若是你的js文件没有在这些匹配选项中找到时，你所要作的就是仅仅将它放到正确的目录下便可。

Livereload

这篇文章的最后一个部分是关于我使用Livereload插件。Livereload由两部分组成：1个浏览器插件（支持Chrome, Firefox 和 其余浏览器），另一个是咱们已经启动过的Guard。首先你要作的是安装浏览器插件([http://livereload.com/])，这是至关简单的。

由于livereload的服务器已经在Guard运行起来了，如今咱们要作的是仅仅设置咱们的浏览器去加载这些测试用例（在 chrome 网上应用商店，中搜索 livereload，找到“扩展程序”中 LiveReload 安装，注意不是“应用”的那个
）。不幸的是，我找到的惟一一个办法是，从新打开另一个终端，而且在同一个目录下运行：

rake jasmine

这个操做将会启动一个轻量级的Web服务器，访问地址为：[http://localhost:8888。] 若是如今你在浏览器访问这个网址，将会看到以下内容：


点击一下浏览器中的livereload按钮（前提是你在浏览器中安装了这个插件），再次编辑你的文件，而后你将发现浏览器自动刷新了，而且运行了你的测试用例。这个操做是可选的，可是有一点我以为是至关有用的，就是在存在某些测试不经过时，我可以立马切换到浏览器中经过追踪堆栈信息和调试工具来查找问题。

到此为止，咱们介绍完了循环自动测试和怎么搭建运行环境。下一次当你返回如今代码，仅仅只须要执行 "guard" 和 "rake jasmine" ，而后，你立马就拥有了自动测试环境。最后，若是你发现一种能够不经过打开第二个终端窗口就启动guard服务器的方法，请在下面留言，谢谢！

译者所遇到的问题

安装 jasmine-headless-webkit

因为公司的电脑是XP系统的，尝试了多种方法都没有装上这个插件。暂时放下了，等有空到本身的电脑上的centos系统在尝试一下。

failed to build native extension

* 安装 DevKit
* 找不到 gmake

  gem install libv8

  执行这条命令仍是不行的

找不到不包含内核的测试插件

 

gem install bundler-1.3.5.gem -l
gem install bundle-0.0.1.gem -l

17:18:49 - ERROR - Could not load 'guard/jasmine-headless-webkit' or find class Guard::Jasmineheadlesswebkit

cd /d e:/software/gem

下载 jasmine-headless-webkit.gem 而后安装：
gem install jasmine-headless-webkit-0.8.4.gem -l

安装失败，好像用到了 QT 中的 qmake 工具

Building native extensions.  This could take a while...
ERROR:  Error installing jasmine-headless-webkit:
        ERROR: Failed to build gem native extension.

        D:/Ruby187/bin/ruby.exe extconf.rb
make: *** No rule to make target `clean'.  Stop.
D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib/qt/qmake.rb:
97:in ``': No such file or directory - which gmake (Errno::ENOENT)
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:97:in `get_exe_path'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:53:in `make_path'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:16:in `make_installed?'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:103:in `check_make!'
        from D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.4/lib
/qt/qmake.rb:37:in `make!'
        from extconf.rb:8

Gem files will remain installed in D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-hea
dless-webkit-0.8.4 for inspection.
Results logged to D:/Ruby187/lib/ruby/gems/1.8/gems/jasmine-headless-webkit-0.8.
4/ext/jasmine-webkit-specrunner/gem_make.out

 

 

安装gem

从以下网址上下载须要安装的 gem 软件
[http://rubygems.org/]

gem install jasmine-1.3.2.gem -l

安装jasmine

官方推荐的是用这种方式安装：

gem install jasmine

asmine requires rspec (>= 1.3.1, runtime)
从新安装 rspec

gem install rspec

jasmine requires selenium-webdriver (>= 0.1.3, runtime)
从新安装 rspec

gem install selenium-webdriver

从新装完这个后，终于能够装 jasmine 了，我但是等了很久啊...

jasmine init 失败

  C:\>jasmine init

  D:/Ruby187/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:29:in `gem_original

  _require': no such file to load -- json (LoadError)

 
  好像是确实json的库，看到Jasmine的requirement列表中，运行时是不须要的，可是开发版是须要的。因此从开发版中下在了gem，发现缺乏了rake，就将rake也装上了。
 

  gem install rake-10.1.0.gem

  gem install json_pure-1.8.0.gem

livereload

编辑 GuardFile，将：

watch(%r{public\.+\.(css|js|html)})

改为

watch(%r{.+\.(css|js|html)})

须要先启动服务器，再启动浏览器中链接，修改被监听的文件，保存后，浏览器中会自动刷新

版本问题

    gem install guard guard-livereload --no-rdoc --no-ri

    多是由于装的 2.0 版本的缘故
    安装 1.8.7 就没问题了

    gem install guard guard-livereload --no-rdoc --no-ri
    多是由于装的 2.0 版本的缘故
    安装 1.8.7 就没问题了

    可是启动 Guard 后，浏览器链接到服务器上仍是出现问题了。

总结

我只实现了监听文件，使用livereload插件链接guard，这样，在apache下调试简单的js文件仍是比较方便的。但由于个人项目是在 MyEclipse 部署服务器，同时在 emacs 中编辑 js 文件，每次更新完毕 js 文件确实会使浏览器从新刷新，可是因为 MyEclipse 没有部署最新的 js 文件，在浏览器上的效果仍是比价旧的，因此感受对我没太大的帮助。固然，若是你是在 MyEclipse 中编辑 js 文件仍是比较方便的，至少帮你省去了从新刷新浏览器的操做。 总有些好的工具咱们还不了解。要是早些知道的话，能大大提升开发效率，加快项目地开发。因此，有经验的程序员是很值得尊敬的，也不用担忧老程序员被新程序员替代，这些经验是很宝贵的财富。同时，这是我第一篇翻译的开发资料，学到了不少，只是花费的时间有些多，但这些花费时间是很值得的。 我没有在 XP 中搭建成这篇文章中最终要的自动测试和终端提醒功能，若是你们知道有安装成功的办法，请在留言中告诉我，谢谢。