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
1k
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
52
Node.jsのアップグレードで気をつけたこと
takfjp
1
1.7k
FARM スタックに触れてみる
takfjp
0
300
React Testing Library の Query について整理してみた
takfjp
0
130
React.js 消えるライフサイクルメソッドについて
takfjp
0
76
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.4k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
320
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
210
meguro.es.pdf
takfjp
0
86
Other Decks in Programming
See All in Programming
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
350
Rによる大規模データの処理
s_uryu
2
640
ECテックカンファレンス2023
kspace
1
360
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
340
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
260
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
230
AWSとCPUのムフフな関係
cmdemura
0
480
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Code Reviewing Like a Champion
maltzj
508
38k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Bootstrapping a Software Product
garrettdimon
299
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Unsuck your backbone
ammeep
659
56k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
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