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