Vue.js + Firebase のプロジェクトに自動テストを導入した話/20220216_frontend-lt-vol6

追記（2022/02/19）
E2Eのコード部分を記事にまとめました
https://qiita.com/skaji18/items/413d51f96de5e0c6c84d

Transcript

1. Vue.js + Firebase の プロジェクトに 自動テストを導入した話 フロントエンドLT会 - vol.6 （2022/02/16） 1
2. 自己紹介 • 梶 紳之介 • 　　skaji18／　　@s_kaji_18 • 株式会社ラクス • 元 PHPer • 現在は Java, JavaScript, Vue.js がメイン 2
3. どんな話？ • いわゆる掲示板のようなアプリ ◦ 発表者がスレ立て ◦ 参加者はリアクション ▪ スタンプ（絵文字） ▪ コメント • 社内勉強会（LT会など）で利用 プロジェクトの概要 3
4. frontend backend どんな話？ 技術スタック 4 - Hosting - Authentication - Cloud Firestore - Storage Vue.js VuexFire
5. 自動テスト導入の経緯 5
6. Vueコンポーネントが 分割されていない Vuex が Fat ロジックも 分割されていない
7. リファクタリングしたい... 7
8. どんな話？ • 外部から見た動作を変えずにソースコードの内部構造を整 理すること 整理: リファクタリングとは 8 リファクタリング (プログラミング) - Wikipedia
9. どんな話？ • 修正は段階的かつ小刻みに行い、わずかな変更であって も、その度にテストを行うことで、動作の異常をいち早く察知 する • プログラマにテストをサボらせないため、簡単にテストを実行 できるツール (xUnit/JUnitなど) も必要 整理: テストの重要性 9 リファクタリング (プログラミング) - Wikipedia
10. 自動テストなんてなかった... 10
11. どんな話？ • ユニットテスト ◦ 関数・クラス・コンポーネント単位のテスト ◦ テスト対象が依存する外部クラスなどはモック化して、テ スト対象のみに注力 ユニットテスト or E2Eテスト? 11
12. Vueコンポーネントが 分割されていない Vuex が Fat ロジックも 分割されていない
13. どんな話？ • E2Eテスト ◦ コンポーネントなどをすべて結合した状態で行うテスト ◦ ユーザの環境とその操作を再現する ◦ ユニットテストに比べるとデメリットもある ▪ 実行速度が遅い、実行が安定しない → コレならできそう？？ ユニットテスト or E2Eテスト? 13
14. どんな話？ バックエンドが Firebase に依存しすぎてツラい • Firebase の認証を通過させる必要がある ◦ DBの更新系処理は認証済みでないと実行できないよう に制限をかけているため E2Eテスト作成時の課題 14
15. frontend backend どんな話？ 技術スタック 15 - Hosting - Authentication - Cloud Firestore - Storage Vue.js VuexFire
16. どんな話？ • 2020年半ば以降、Firebaseにemulatorが次々と実装 • これを使ってE2Eテストを作成 ◦ 詳細なコードは割愛（※ cypress 使ってます） ◦ どこかでブログ記事などでまとめる予定 ◦ 参考: ▪ CypressでFirebase Authenticationのe2eテスト書いてみる - Zenn ▪ https://zenn.dev/ucwork/articles/21b7caaeb1cc61 Firebase認証を突破する方法 16
17. これでリファクタリングできる！！ 17
18. まとめ 18
19. • リファクタリングの前段として自動テストを導入 ◦ コードの複雑さによりユニットテストはNG ◦ 実行時間や不安定さを許容してE2Eテストを採用 • E2EテストにはFirebaseのemulatorを活用 • 次の展望はリファクタリングを実施していく 19
20. ご清聴ありがとうございました 20