Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Atomic Design とテストの○○な話
takf
July 21, 2022
Programming
2
810
Atomic Design とテストの○○な話
2022.07.20 開発×テスト LT会 - vol.3 #devtestlt
takf
July 21, 2022
Tweet
Share
More Decks by takf
See All by takf
Node.jsのアップグレードで気をつけたこと
takfjp
1
1k
FARM スタックに触れてみる
takfjp
0
140
React Testing Library の Query について整理してみた
takfjp
0
83
React.js 消えるライフサイクルメソッドについて
takfjp
0
70
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.2k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
310
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
200
meguro.es.pdf
takfjp
0
80
29歳でWeb業界に入って 人生がリスタートした話 (と、これからのこと)
takfjp
2
600
Other Decks in Programming
See All in Programming
パラメタライズドテスト
ledsun
0
220
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.3k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
550
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.7k
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
manfredsteyer
PRO
0
380
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
390
Lookerとdbtの共存
ttccddtoki
0
640
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
190
Introduction to Property-Based Testing @ COSCUP 2022
cybai
1
150
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
260
Automating Gradle benchmarks at N26
ubiratansoares
PRO
2
140
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
530
Featured
See All Featured
Teambox: Starting and Learning
jrom
123
7.7k
Debugging Ruby Performance
tmm1
65
10k
A Philosophy of Restraint
colly
192
15k
KATA
mclloyd
7
8.8k
Unsuck your backbone
ammeep
659
55k
Fireside Chat
paigeccino
13
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Raft: Consensus for Rubyists
vanstee
127
5.5k
Practical Orchestrator
shlominoach
178
8.7k
How GitHub (no longer) Works
holman
297
140k
Adopting Sorbet at Scale
ufuk
63
7.6k
How to train your dragon (web standard)
notwaldorf
60
3.9k
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