Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design とテストの○○な話

Fd3e212c7b5255c6164d7d52bfe79dfb?s=47 takf
July 21, 2022

Atomic Design とテストの○○な話

2022.07.20 開発×テスト LT会 - vol.3 #devtestlt

Fd3e212c7b5255c6164d7d52bfe79dfb?s=128

takf

July 21, 2022
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. Atomic Design とテストの ◦◦ な話 2022.07.20 開発× テスト LT 会

    - vol.3 #devtestlt @takfjp
  2. 自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React,

    TypeScript, jest + testing-library バックエンド: CakePHP
  3. None
  4. みなさんコンポーネントのテスト 書いてますか?

  5. Component の分け方悩みますよね〜

  6. Atomic Design Web デザイナー Brad Frost 氏が2013 年に提案したデザインシステ ム

  7. Atomic Design UI をパーツ単位で設計していく Atom > Molecules > Organisms >

    Templates > Pages
  8. 弊社での取り組み事例 Atom > Molecules > Organisms に対して必ずテストを書く (Templates は使わない) コンポーネント以外のAPI

    通信、カスタムフック、汎用ロジックに はテストを書く テストのカバレッジには Codecov を使う https://about.codecov.io/ Component を追加して、前回コミットよりもカバレッジが下がっ ている (= 追加されたコンポーネントにテストが書かれていない or 不十分である) 時にCI 上でエラーを通知する 不十分な場所には reviewdog が指摘コメントをつけてくれる
  9. None
  10. Pages のテストをどうする問題 基本的に、Organisms 以下のコンポーネントの組み合わせでできて いるという認識なのでテストは追加しない Codecov でも Pages はカバレッジの対象外にしている Pages

    独自のロジックが出てくるとややこしくなる
  11. 逆に考えてみる話 Pages にテストを書かない -> テストが必要となるロジックを Pages に盛り込まない カスタムフック、汎用ロジックとして分離させておく -> 再利用可能

    な形に保つ
  12. Pages のつらみな話 後から共通となるロジックが見つかったり、分離させようとすると テストの追加を必要とする ロジックを分離した後、後付けでテストを書こうとすると意外に難 しかったり、うまくテストコードが機能しなかったりする

  13. Atomic Design とコンポーネントテス トの教訓 Molucules 以下のテストを充実させてカバレッジを担保する Pages に結合する時ラクができるようにするため Pages にロジックを持たせず、共通化したり分離して薄く保つ

    Pages の動作にはエンジニアがユーザ目線で QA を行う(QA への意 識を持つ)
  14. もしそれでもつらくなったら 案として: Atomic Design を脱してコンポーネント構成を見直してみる テストをペアプロで作っていく メンバ全員のテストへの解像度を上げるにはかなり有効 jest 以外に E2E

    テストを組み込んでテスト自体の堅牢性をあげる
  15. We're Hiring! カジュアル面談やってます! https://connehito.com/recruit/

  16. Thank you!

  17. None