Please enable JavaScript.
Coggle requires JavaScript to display documents.
Atomic Design ～堅牢で使いやすいUIを効率良く設計する https://amzn.to/2uJVv31 (テスト関連…
Atomic Design
～堅牢で使いやすいUIを効率良く設計する
https://amzn.to/2uJVv31
Atomic Designの構成要素
Atom（原子）
それ以上UIとしての機能性を破壊しない最小単位
Molecules（分子）
ユーザの具体的な動機に応える機能の単位
Organisms（有機体）
独立して成立するコンテンツ
Templates（テンプレート）
レイアウトに対する責務を担う
Pages（ページ）
コンテンツとコンポーネントをつなぐ
周辺のツール
Storybook
コンポーネント・リスト
Jest
テストフレームワーク
BDD形式で記述することができる
BackstopJS
Chrome Headlessが裏で動き、Storybookの任意の画面をキャプチャ、前回と比較
Enzyme
Jest上で動作する
子のコンポーネントをモック化して、対象のコンポーネントだけをレンダリングできる
StoryShots
Storybookのadd-on
Jestと連携してDOM構造のスナップショット・テストを実現する
Istanbul
Jestでのカバレッジをとる
react-addons-perf
無駄な更新を検出できる
React 16では動かない
ChromeのLighthouse
アクセシビリティを点数化
aXe
アクセシビリティの問題点をチェック・可視化
テスト関連
コンポーネント単体のテスト
Storybook上での表示確認
ストラクチュラル・リグレッション・テスト
DOM構造を前回と比較
StoryShots
ビジュアル・リグレッション・テスト
UIをレンダリングし、それをピクセル単位で比較
BackstopJS
ロジックテスト
Jest
インタラクション・テスト
Enzyme
コード・カバレッジ
Istanbul
レスポンシブ・レイアウト・テスト
Template層のmedia queryで実装し、Storybookを作成、BackstopJSで複数のviewportで確認する
リキッド・レイアウト・テスト
Template以外のコンポーネントについて、複数のviewportで表示じて、想定外の表示になっていないか確認
パフォーマンス・テスト
ネットワークアクセス
必要以上のリソースを取得していないか
無駄に大きな画像を取得していないか
JavaScript実行時間
react-addons-perf により、無駄な描画更新を検出
インクルーシブ・ユーザビリティ・テスト
クロス・プラットフォーム・テスト
BackstopJSでクロス・ブラウザでキャプチャ
アクセシビリティ・テスト
ChromeのLighthouseを利用
aXeを利用
Jest上で実行できる
それにより、自動化できる
アクセシビリティ・レイアウト・テスト
ズームによるレイアウト崩れなどを確認
進め方
トップダウンとボトムアップ
エンジニアはボトムアップ
デザイナはトップダウン
インターフェース・インベントリ
同じ役割だけど違う見た目になっているものを精査
コンポーネント・リストを継続的に更新
コンポーネント・リスト・ドリブン開発
先にモック・コンポーネントを実装する
コンポーネント単位で開発を進める