Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Riot.jsのタグをユニットテストする
Search
karak
August 29, 2018
Programming
1
640
Riot.jsのタグをユニットテストする
Riot.js におけるユニットテスト技法と Riot-test-utils の紹介です。
karak
August 29, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
160
速いWebフレームワークを作る
yusukebe
5
1.7k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
300
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
Rancher と Terraform
fufuhu
2
210
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
410
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
A better future with KSS
kneath
239
17k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Become a Pro
speakerdeck
PRO
29
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Unsuck your backbone
ammeep
671
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
KATA
mclloyd
32
14k
Transcript
Riot.js のタグを ユニットテストする Yasushi Kato <https://github.com/karak>
Who are you? Riot-test-utils を作った人 経緯 直前まで React Riot を実戦投入
→テスト書くのつらい
フロントエンドのテストがつらい Riot のいいところ • コンポーネント指向 • 素のHTMLっぽく書ける Riot の悪いところ •
素のHTMLと同じくらい テストしにくい ◦ グローバル状態 ◦ 副作用(含API) ◦ DOMの複雑化
技法 1. Functional なタグ設計 2. Shallow Rendering 3. Snapshot Testing
1. Functional なタグ設計
Functional なタグ設計の4箇条 1. Opts-in 2. Event-out 3. No internal states
4. No external dependency *オリジナルですが、 Redux や未訳の Riot 本も参考。 Opts だけで HTML が決まり、UI は即イベントに投げる 見た目(Presentation)に専念
例:トグルボタン <toggle-button> <a class={pushed: opts.pushed} onclick={handleClick}> ... </a> <style> ...
</style> handleClick() { this.trigger(“push”) } </toggle-button>
2. Shallow Rendering
親タグと子タグの依存関係を断つ search-box の内部に div を1個増やすだけで、 nav-bar(あるいはより上の page)も影響を受けてしまう。 →テストが壊れやすい。unit test ではない。
nav-bar search-box submit-button
一階層のレンダリング <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>
3. Snapshot Testing
DOM構造の変化を検知 <nav-bar /> <nav-bar /> 1回目 2回目 結果を保存 差分検出 <
/> HTML
タグのユニットテストのストラテジー 1. Functional なタグの組み合わせでアプリを作る 2. Shallow Rendering してテストする 3. 見た目は
Snapshot で、 4. UI はイベントハンドラでテストする Riot-test-utils 使ってみて下さい。 (https://www.npmjs.com/package/riot-test-utils)