SpookyJS + Mocha
MochaはNode.jsでも動くJavaScriptテストフレームワーク。
SpookyJSとは、PhantomJSというHeadless Webkit(GUIのないWebkit的なもの)を、クライアントサイドのテストUtilityとして使えるCasperJSをNode.jsで使えるようにしたモノです。
やりたいことと構成
Node.jsのプロジェクト(express)上でMocha使ってやってるBackendのテストと一緒に、FrontendのテストもSpookyJS経由で行う。
経緯
この前試したZombie.jsがうまくいかないみたいなので別の方法を探したというわけです。。
やってみよう！！
Mocha
Mochaのインストールとか簡単なhello world
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // install mocha | |
| // $ npm install -g mocha | |
| // hello mocha | |
| describe('test describe', function() { | |
| it('test contents', function() { | |
| assert.ok(true); | |
| }); | |
| }); | |
| // run mocha | |
| // $ mocha -R spec testfile.js |
導入としてこのサイトも参考にしました。
http://d.hatena.ne.jp/hokaccha/20111202/1322840375
今回はassertionをshouldでやってるけど、元々使ってるのもあってexpectを採用してます。
PhantomJS
インストールはmacなのでHomebrew。
$ brew install phantomjs
$ brew install phantomjs
CasperJS
こちらもHomebrewで。
$ brew install casperjs
$ brew install casperjs
APIなどはSpookyJSで使えるものと大体同じ、というかこちらが本家なのでAPIリファレンスをちゃんと見ておくと良いです。むしろSpookyの方にドキュメントが殆ど無い。。
http://casperjs.org/api.html#casper
SpookyJS
インストールはnpmでできます。
$ npm install spooky
入れた時にnode_module/spooky/template？だったかにsampleがあったのでnodeコマンドで実行して試せます。
その他環境
SpookyJSでunderscoreなど必要みたいなので、package.jsのdependenciesをこんな感じで書く。
"dependencies": { "express": "3.0.6", "jade": "*", "mocha": "*", "expect": "*", "spooky": "*", "underscore": "*"}
spookyHelper.js
ヘルパーを作っておいて、テストスクリプトから呼べるようにしておきます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Spooky = require('spooky'), | |
| _ = require('underscore'); | |
| function setup(context, done) { | |
| var spooky = context.spooky = new Spooky(context.config, function(err) { | |
| if(err) { | |
| var e = new Error('Failed to initialize Spooky.js'); | |
| e.details = err || error; | |
| throw e; | |
| } | |
| spooky.debug = true; | |
| spooky.fails = []; | |
| spooky.on('error', function(e) { console.error(e);}); | |
| spooky.on('console', function(line) { | |
| console.log(line); | |
| if(line.match(/FAIL/)){ | |
| spooky.fails.push(line); | |
| return; | |
| } | |
| }); | |
| spooky.on('log', function(log) { | |
| if(log.space === 'remote') { | |
| console.log(log.message.replace(/ \- .*/, '')); | |
| } | |
| }); | |
| done(); | |
| }); | |
| } | |
| module.exports.before = function(context) { | |
| context.config = _.defaults(context.config || {}, { | |
| casper: { | |
| verbose: true, | |
| logLevel: 'debug' | |
| } | |
| }); | |
| return function(done) { | |
| setup(context, done); | |
| } | |
| } | |
| module.exports.after = function(context) { | |
| return function(done) { | |
| context.spooky.removeAllListeners(); | |
| context.spooky.destroy(); | |
| done(); | |
| }; | |
| } |
spookyMochaTest.js
spookyHelper.jsを使って、spooky + mochaを実現してるコード。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var express = require('express'); | |
| var app = express(); | |
| // setup server | |
| app.get('/', function(req, res){ | |
| res.send('hello spooky'); | |
| }); | |
| module.exports = app; | |
| // start spooky test | |
| describe('Frontend tests', function() { | |
| describe('homepage', function() { | |
| var context = {}; | |
| var hooks = require('./spooky_helper'); | |
| var fails = []; | |
| var server = app.listen(4000, function() {}); | |
| before(hooks.before(context)); | |
| afterEach(function() { | |
| if(!this.ok) this.test.error(new Error(fails)); | |
| }); | |
| it('should return a 200 OK status', function(done) { | |
| var self = this; | |
| self.ok = true; | |
| // spooky flow start. | |
| context.spooky.start(); | |
| context.spooky.open('http://localhost:4000/'); | |
| context.spooky.then(function() { | |
| // casper API | |
| this.test.assertHttpStatus(200, 'successfully received 200 OK'); | |
| }); | |
| // spooky flow end. | |
| function onComplete() { | |
| if ( context.spooky.fails.length > 0 ) { | |
| fails.push(context.spooky.fails); | |
| self.ok = false; | |
| } | |
| done(); | |
| } | |
| context.spooky.on('run.complete', onComplete); | |
| context.spooky.run(function() { | |
| this.test.done(1); | |
| }); | |
| }); | |
| }); | |
| }); | |
こっからは、SpookyJS(CasperJS)のAPIゴリゴリ使って、テストを書いてく感じ。
CasperJSの使い方については、また書けたら書きます。
