はじめてのWallaby.js
•
0 likes•2,579 views
Wallaby.jsの入門編です。 インストールから基本的な使い方までを紹介します！ Goodpatch Advent Calendar 2015の7日目です。 http://sub-labo.com/2015/12/07/introduction-to-wallabyjs/
More Related Content
What's hot
What's hot (20)
Similar to はじめてのWallaby.js
Similar to はじめてのWallaby.js (20)
はじめてのWallaby.js
- 2. このスライドは •Goodpatch Advent Calendar 2015 の 7日目です。 •アイキャッチのロゴは Goodpatchのデザイナの @ryokoさんが作ってくれ ました。ありがたい・・ •公式のロゴはコレ
- 3. Wallaby.jsとは？ •JavaScriptのテストランナー (node.jsもブラウザも実行できる。 •ソースの変更を即時に検知して、必要なテストだ けを並列で実行する。 - 早い！ •カバレッジを表示したり、ブラウザ上での最後の 実行結果のキャプチャを表示できたりかゆいとこ ろに手が届く。 • 👽有料(個人向け:$140/法人向け:$220)です。👽
- 5. レシピ • Wallaby.js - 主役。 • jQuery - これのテストを書く • Mocha - これでテストを書く • そのほか(説明しません) - Gulp / Babel / webpack
- 6. では、はじめましょう！
- 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