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.6k
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
410
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.3k
FARM スタックに触れてみる
takfjp
0
1k
React Testing Library の Query について整理してみた
takfjp
0
390
React.js 消えるライフサイクルメソッドについて
takfjp
0
110
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
370
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
280
meguro.es.pdf
takfjp
0
110
Other Decks in Programming
See All in Programming
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.4k
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
280
Tauriでネイティブアプリを作りたい
tsucchinoko
0
380
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
270
Jakarta EE meets AI
ivargrimstad
0
820
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
C++でシェーダを書く
fadis
6
4.2k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
140
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
970
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
300
Featured
See All Featured
Code Review Best Practice
trishagee
64
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Automating Front-end Workflow
addyosmani
1366
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Docker and Python
trallard
40
3.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
130
Designing for humans not robots
tammielis
250
25k
BBQ
matthewcrist
85
9.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
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