Android × HTML5 in Fukuoka　2013/09/07(土)

JavaScriptのテストコード

一緒に勉強しませんか？？

ぱくたそ無料写真素材を使用しております。ありがとうございます！ 　http://www.pakutaso.com/about.html

13年9月7日土曜日

自己紹介

twitterID: itoKami1123

下請け・派遣で福岡をふらふらしてます。

最近はJavascriptメインになってきました。

今年はTDDできる人になりたいです。

福岡の皆で技術の底上げが出来ればと思い

たまに初心者向けの勉強会をしてます。

13年9月7日土曜日

さてさてJavaScriptでWebアプリを作っていると..

13年9月7日土曜日

たまにうっかりミスでスペルミスによるエラーが発生しますよね！

ぱくたそ無料写真素材を使用しております。ありがとうございます！ 　http://www.pakutaso.com/about.html13年9月7日土曜日

Javaみたいに型や変数のチェックがあればなぁ...

動かすまでエラーか分からないなんてなぁ...

13年9月7日土曜日

＼　 __　 ／ ＿ （ｍ）　＿　　ﾋﾟｺｰﾝ 　　|ミ| ／　｀´　 ＼ 　( ﾟ∀ﾟ) 　　　 ノヽノ | 　　　　 　 <　<

そうだ！動かせばいいんじゃない！？

13年9月7日土曜日

よ〜し、

単体テストで動かすといったらxUnitだよなぁ。

QUnitを使おう！と思ってしらべてみると

13年9月7日土曜日

ん！？

13年9月7日土曜日

というわけでJasmineにしました。

13年9月7日土曜日

Testemを使ってjasmineをいれました。

Testemは、JavaScriptファイルが更新されると

自動でjasmineを動かしてくれます！便利！

http://blog.mach3.jp/2012/10/js-testem-script.html↑ブログを参考にインストールしました！

$ npm install testem -g node.jsのパッケージだよ

13年9月7日土曜日

Testemの準備

13年9月7日土曜日

{

"framework" : "jasmine",

"src_files" : [

"scripts/Dogaemon.js",

"spec/DogaemonSpec.js"

]

}

testemの設定ファイル testem.json に実行するJavaScriptと仕様を確認するテストのJavaScriptを書いて

$ testem を実行！

作るJavaScriptを指定する

仕様書ぽく動かすシナリオをテストコードで書く

13年9月7日土曜日

ブラウザで開くとテストが動く

ここにテスト結果が表示されます

13年9月7日土曜日

JavaScriptの動作を決める仕様書(Spec)を作成

13年9月7日土曜日

//さいきょうロボDogaemonの仕様書describe  ("Dogaemonクラス",  function()  {                  });

spec/DogaemonSpec.js

“Dogaemonクラス”の仕様を記述

13年9月7日土曜日

//さいきょうロボDogaemonの仕様書describe  ("Dogaemonクラス",  function()  {

   //  挨拶機能   describe  ("#helloメソッド",  function()  {                       });});

spec/DogaemonSpec.js

“Dogaemon#helloメソッド”の仕様を記述

13年9月7日土曜日

//さいきょうロボDogaemonの仕様書describe  ("Dogaemonクラス",  function()  {

   //  挨拶機能   describe  ("#helloメソッド",  function()  {

    it("ぼくどがえもんと挨拶する",  function()  {       var  dogaChan  =  new  Dogaemon();       expect(  dogaChan.hello()  )                  .toEqual('ぼくどがえもん');     });   });});

spec/DogaemonSpec.js

“Dogaemon#helloメソッド”が持っている機能を具体的に記述

13年9月7日土曜日

保存(ctr+s)！

13年9月7日土曜日

testemがファイル更新を検知してjasmine実行！

Dogaemonクラスとか無いよとエラー13年9月7日土曜日

仕様に合わった実装がないからですね...

13年9月7日土曜日

Dogaemonクラス作成

13年9月7日土曜日

//  さいきょうロボ　Dogaemonクラスvar  Dogaemon  =  (function(){

var  Dogaemon  =  function(){};

    Dogaemon.prototype  =  {       constructor:  Dogaemon,      

//  挨拶する       hello:  function(){         return  'ぼくどがえもん';

      }

    };

    return  Dogaemon;

 })();

scripts/Dogaemon.js

Dogaemon#helloメソッドを実装！

13年9月7日土曜日

保存(ctr+s)！

13年9月7日土曜日

仕様書どおり動く事が確認できました！

13年9月7日土曜日

仕様を変更してみます！

13年9月7日土曜日

//さいきょうロボDogaemonの仕様書describe  ("Dogaemonクラス",  function()  {

　　・・・省略・・・   //  お助け機能   describe  ("#help",  function()  {     it("お助けをお願いすると  false  を返す",  function()  {       var  dogaChan  =  new  Dogaemon();       expect(  dogaChan.help()  ).toBeFalsy();     });   });

});

spec/DogaemonSpec.js

“Dogaemon#helpメソッド”のび●の成長の為、助けをお願いしてもfalseを返す仕様にしました！

13年9月7日土曜日

testemが更新を検知して自動でjasmine実行！

helpメソッドとか無いよとエラー13年9月7日土曜日

// さいきょうロボ　Dogaemonクラスvar Dogaemon = (function(){ var Dogaemon = function(){

};

Dogaemon.prototype = { constructor: Dogaemon, // 挨拶する hello: function(){ return 'ぼくどがえもん'; }, // お助け機能 help: function(){ return false; } }; return Dogaemon;})();

scripts/Dogaemon.js

Dogaemon#helpメソッドを実装！

13年9月7日土曜日

仕様書どおり動く事が確認できました！

13年9月7日土曜日

こんな感じで動作確認と仕様書が同時にできます！

13年9月7日土曜日

でも、どうやって（どこまで）仕様確認テストを書くのか

分かってません...

13年9月7日土曜日

よかったら一緒に勉強してくれる人を探しております！

　　twitterID: itoKami1123 までご連絡下さい！

13年9月7日土曜日

【宣伝】福岡JavaEE勉強会（第１回）

JavaEEハンズオンワークショップ!一緒に

Webアプリを作りましょう！

http://www.zusaar.com/event/1026009

ご興味ある方が是非どうぞ！

13年9月7日土曜日

おしまい

13年9月7日土曜日

.toBe 同じオブジェクトならOK

.toEqual 同じ値ならOK

.toMatch 正規表現一致でOK

.toBeDefined 変数宣言されてる(undefinedで無い)ならOK

.toBeUndefined ↑の反対 (undefinedならOK)

.toBeNull nullならOK

.toBeTruthy trueならOK

.toBeFalsy ↑の反対( falseならOK)

.toContain 配列に含まれてたらOK

.toBeLessThan 小さければOK

.toBeGreaterThan ↑の反対( 大きければOK )

.toBeCloseTo 指定した精度に丸めた値が比較値と同じならOK

.toThrow 期待した例外発生があればOK

※　テスト条件を反転するときは .not を間につけます

Jasmineのテスト判定メソッド (マッチャー)

13年9月7日土曜日