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
630
Riot.jsのタグをユニットテストする
Riot.js におけるユニットテスト技法と Riot-test-utils の紹介です。
karak
August 29, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
NPOでのDevinの活用
codeforeveryone
0
900
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
Goで作る、開発・CI環境
sin392
0
260
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Porting a visionOS App to Android XR
akkeylab
0
680
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Speed Design
sergeychernyshev
32
1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Raft: Consensus for Rubyists
vanstee
140
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing for Performance
lara
610
69k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
671
58k
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)