Riot.jsのタグをユニットテストする

Riot.js におけるユニットテスト技法と Riot-test-utils の紹介です。

Transcript

1. Riot.js のタグを ユニットテストする Yasushi Kato <https://github.com/karak>
2. Who are you? Riot-test-utils を作った人 経緯 直前まで React Riot を実戦投入 →テスト書くのつらい
3. フロントエンドのテストがつらい Riot のいいところ • コンポーネント指向 • 素のHTMLっぽく書ける Riot の悪いところ • 素のHTMLと同じくらい テストしにくい ◦ グローバル状態 ◦ 副作用（含API） ◦ DOMの複雑化
4. 技法 1. Functional なタグ設計 2. Shallow Rendering 3. Snapshot Testing
5. 1. Functional なタグ設計
6. Functional なタグ設計の４箇条 1. Opts-in 2. Event-out 3. No internal states 4. No external dependency ＊オリジナルですが、 Redux や未訳の Riot 本も参考。 Opts だけで HTML が決まり、UI は即イベントに投げる 見た目（Presentation）に専念
7. 例：トグルボタン <toggle-button> <a class={pushed: opts.pushed} onclick={handleClick}> ... </a> <style> ... </style> handleClick() { this.trigger(“push”) } </toggle-button>
8. 2. Shallow Rendering
9. 親タグと子タグの依存関係を断つ search-box の内部に div を1個増やすだけで、 nav-bar（あるいはより上の page）も影響を受けてしまう。 →テストが壊れやすい。unit test ではない。 nav-bar search-box submit-button
10. 一階層のレンダリング <nav-bar> <div class=”row”> <div class=”col-3”> <search-box> <div class=”search-box”> <input type=”search”> </div> </search-box> </div> <div class=”col-1”> <submit-button> <span class=”submit-button”>....</span> </submit-button> </div> </div> </nav-bar> <nav-bar> <div class=”row”> <div class=”col-3”> <search-box> </search-box> </div> <div class=”col-1”> <submit-button> </submit-button> </div> </div> </nav-bar>
11. 3. Snapshot Testing
12. DOM構造の変化を検知 <nav-bar /> <nav-bar /> 1回目 2回目 結果を保存 差分検出 < /> HTML
13. タグのユニットテストのストラテジー 1. Functional なタグの組み合わせでアプリを作る 2. Shallow Rendering してテストする 3. 見た目は Snapshot で、 4. UI はイベントハンドラでテストする Riot-test-utils 使ってみて下さい。 (https://www.npmjs.com/package/riot-test-utils)