Wallaby.jsの入門編です。 インストールから基本的な使い方までを紹介します！ Goodpatch Advent Calendar 2015の7日目です。 http://sub-labo.com/2015/12/07/introduction-to-wallabyjs/

1. はじめての
Wallaby.js
2015/12/7 @subuta

2. このスライドは
•Goodpatch Advent
Calendar 2015 の
7日目です。
•アイキャッチのロゴは
Goodpatchのデザイナの
@ryokoさんが作ってくれ
ました。ありがたい・・
•公式のロゴはコレ

3. Wallaby.jsとは？
•JavaScriptのテストランナー
(node.jsもブラウザも実行できる。
•ソースの変更を即時に検知して、必要なテストだ
けを並列で実行する。 - 早い！
•カバレッジを表示したり、ブラウザ上での最後の
実行結果のキャプチャを表示できたりかゆいとこ
ろに手が届く。
• 👽有料(個人向け:$140/法人向け:$220)です。👽

4. インストール
1.http://wallabyjs.com/ から購入。
2.自分のIDEに合ったプラグインを
ダウンロードする。
3.IDE上でプラグインをインストールする。
4.Wallabyの起動後に表示されるActivationの
プロンプトに、メールで来たライセンスキー
を入力する。(もちろんトライアル利用も可

5. レシピ
•
Wallaby.js
- 主役。
• jQuery
- これのテストを書く
• Mocha
- これでテストを書く
•
そのほか(説明しません)
- Gulp / Babel /
webpack

6. では、はじめましょう！

7. シナリオ
• コンソールっぽいメッセー
ジ表示をするWebアプリ
ケーションを作る。
• 以下のリポジトリをクロー
ンしてください。
https://github.com/
subuta/introduction-to-
wallayjs

8. リポジトリの構成
• /src - ソース(今回は
JavaScriptのみをいじっ
ていきます。)
• /tests - mochaのテスト
• /example - 利用方法のサ
ンプル
• wallaby.js - Wallaby.js
のテストに関する設定

9. テストの設定
•
JSON形式(wallaby.json)やJavaScriptファ
イル(wallaby.js)として定義する。
• 設定値のオブジェクトを返すfunctionと
して定義する。
• files - ソース(カバレッジに含まれる)
• tests - テスト
• testFramework - どのテスト用のフレー
ムワークを利用するか
• compilers - ソースファイルのコンパイ
ルの設定(ES6/Coffee/TypeScript/JSXな
ど)
• 詳細はコチラへ

10. WebStormへの
テスト実行設定の追加
1.メニューから`Run - Edit Configrations`を選択する。
2.左上の追加(+)アイコンからWallaby.jsを追加する。
3.Name欄に任意の名前を入力し、Configuration File欄から
設定ファイル(wallaby.js)を選択する。
4.右下の`OK`ボタンを押す。
5.詳細はこの辺り。他のIDE(Visual Studio/Atomなど)にも対応してるよ！

11. 実装の流れ
•現状は、引数に渡された要素にスタイル用のク
ラスと”$ hello”を足すだけのライブラリ。
•コレに対して、以下の機能を足しながら、説明
していこうと思います。
•STEP1 - jQueryプラグイン化
•STEP2 - メッセージの変更
•STEP3 - アニメーションの追加

12. やること
•STEP1 - jQueryプラグイン化
•STEP2 - メッセージの変更
•STEP3 - アニメーションの追加

13. １. jQueryプラグイン化
•現状はES6のモジュールになっている
ので、そのままだとindex.htmlから
呼べない・・・
•jQueryプラグイン化して、だれでも
簡単に呼べるようにする！

14. 1. 実装の流れ
• wallabyを実行すると、IDE内
のコンソールに結果が表示。
• IDEの行番号の横にカバレッ
ジが表示(緑がOK/灰色がテス
ト無し/赤色がテストNG)
• エラー時は該当行の行末にエ
ラーメッセージが表示
• 保存しなくても変更を検知し
てテストを実施するよ！
https://youtu.be/YOcV8ruh4i4

15. やること
•STEP1 - jQueryプラグイン化
•STEP2 - メッセージの変更
•STEP3 - アニメーションの追加

16. 2. メッセージの変更
• せっかくなので、`hello`か
ら`hello wallaby.js`に変
えてみる。
• 既に有るテストが失敗する
ので、直していきます！

17. 2. 実装の流れ
• リファクタリングすると、
左側のカバレッジからす
でにあるテストケースが
失敗した事が、すぐ分かり
ます。
• 失敗したテストケースを
修正することで、デグレ
を防ぐことができます。
https://youtu.be/lGjVgGe95ac

18. やること
•STEP1 - jQueryプラグイン化
•STEP2 - メッセージの変更
•STEP3 - アニメーションの追加

19. 3. アニメーションの追加
• これだとメッセージ感が
薄いので、タイピングし
てるっぽいアニメーショ
ンを足したい。
• 良い感じなTyped.jsを使い
ます！

20. 3. 実装の流れ
• Wallaby.jsとSinon.jsを組
み合わせる事で、通常だと
やりづらい、細かな挙動
のテストが効率よく実装出
来ます。
• Sinon.jsの
FakeTimer(setTimeoutを
スキップ)は便利なので、
活用してみてください！
https://youtu.be/IMaHDgL4dCk

21. まとめ
•こんな感じになりました。
•wallaby.jsを使う事で、IDEの機能を活か
して、高速にテストを実装する事が出来
ます。
•まだまだ紹介できない機能はたくさん有
りますし、流行りのAngularJS/Reactな
どとの連携例もたくさん有ります！

22. まとめ
•[今まで(with istanbul/isparta)]
テストのカバレッジ(%)を見ながら、指
標値(例:80%)を下ったら、テストを追加
する。
•[これから(with wallaby.js)]
ソースを実装しながら、常に表示される
カバレッジを見つつ、カバーできてない
部分のテストを追加していく。

23. スライドは以上です。
最後までお付き合いいただき、
ありがとうございました！