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
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
個人軟體時代
ethanhuang13
0
330
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Ruby Parser progress report 2025
yui_knk
1
450
RDoc meets YARD
okuramasafumi
4
170
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
AI時代のUIはどこへ行く?
yusukebe
18
9k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Six Lessons from altMBA
skipperchong
28
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Building an army of robots
kneath
306
46k
Documentation Writing (for coders)
carmenintech
74
5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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)