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
Atomic Design とテストの○○な話
Search
takf
July 21, 2022
Programming
2
1.3k
Atomic Design とテストの○○な話
2022.07.20 開発×テスト LT会 - vol.3 #devtestlt
takf
July 21, 2022
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
280
Node.jsのアップグレードで気をつけたこと
takfjp
1
2k
FARM スタックに触れてみる
takfjp
0
690
React Testing Library の Query について整理してみた
takfjp
0
270
React.js 消えるライフサイクルメソッドについて
takfjp
0
92
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.7k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
350
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
250
meguro.es.pdf
takfjp
0
100
Other Decks in Programming
See All in Programming
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
Faster, greener, and happier- why Quarkus should be your next tech stack
hollycummins
0
130
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
400
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
460
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
まっちすいっち戦争 / match vs switch
takuyakatsusa
1
630
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
960
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
170
Honoとhtmx
yusukebe
6
1.1k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.7k
Catch Up with Swift 5.10
ojun9
1
450
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.7k
Web Components: a chance to create the future
zenorocha
304
41k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Become a Pro
speakerdeck
PRO
8
4.2k
We Have a Design System, Now What?
morganepeng
42
6.7k
How to Ace a Technical Interview
jacobian
272
22k
Done Done
chrislema
178
15k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Designing Experiences People Love
moore
135
23k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
Transcript
Atomic Design とテストの ◦◦ な話 2022.07.20 開発× テスト LT 会
- vol.3 #devtestlt @takfjp
自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React,
TypeScript, jest + testing-library バックエンド: CakePHP
None
みなさんコンポーネントのテスト 書いてますか?
Component の分け方悩みますよね〜
Atomic Design Web デザイナー Brad Frost 氏が2013 年に提案したデザインシステ ム
Atomic Design UI をパーツ単位で設計していく Atom > Molecules > Organisms >
Templates > Pages
弊社での取り組み事例 Atom > Molecules > Organisms に対して必ずテストを書く (Templates は使わない) コンポーネント以外のAPI
通信、カスタムフック、汎用ロジックに はテストを書く テストのカバレッジには Codecov を使う https://about.codecov.io/ Component を追加して、前回コミットよりもカバレッジが下がっ ている (= 追加されたコンポーネントにテストが書かれていない or 不十分である) 時にCI 上でエラーを通知する 不十分な場所には reviewdog が指摘コメントをつけてくれる
None
Pages のテストをどうする問題 基本的に、Organisms 以下のコンポーネントの組み合わせでできて いるという認識なのでテストは追加しない Codecov でも Pages はカバレッジの対象外にしている Pages
独自のロジックが出てくるとややこしくなる
逆に考えてみる話 Pages にテストを書かない -> テストが必要となるロジックを Pages に盛り込まない カスタムフック、汎用ロジックとして分離させておく -> 再利用可能
な形に保つ
Pages のつらみな話 後から共通となるロジックが見つかったり、分離させようとすると テストの追加を必要とする ロジックを分離した後、後付けでテストを書こうとすると意外に難 しかったり、うまくテストコードが機能しなかったりする
Atomic Design とコンポーネントテス トの教訓 Molucules 以下のテストを充実させてカバレッジを担保する Pages に結合する時ラクができるようにするため Pages にロジックを持たせず、共通化したり分離して薄く保つ
Pages の動作にはエンジニアがユーザ目線で QA を行う(QA への意 識を持つ)
もしそれでもつらくなったら 案として: Atomic Design を脱してコンポーネント構成を見直してみる テストをペアプロで作っていく メンバ全員のテストへの解像度を上げるにはかなり有効 jest 以外に E2E
テストを組み込んでテスト自体の堅牢性をあげる
We're Hiring! カジュアル面談やってます! https://connehito.com/recruit/
Thank you!
None