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
   

   View Slide

2. 自己紹介
   ● 梶 紳之介
   ● 　　skaji18／　　@s_kaji_18
   ● 株式会社ラクス
   ● 元 PHPer
   ● 現在は Java, JavaScript, Vue.js がメイン
   2
   

   View Slide

3. どんな話？
   ● いわゆる掲示板のようなアプリ
   ○ 発表者がスレ立て
   ○ 参加者はリアクション
   ■ スタンプ（絵文字）
   ■ コメント
   ● 社内勉強会（LT会など）で利用
   プロジェクトの概要
   3
   

   View Slide

4. frontend backend
   どんな話？
   技術スタック
   4
   - Hosting
   - Authentication
   - Cloud Firestore
   - Storage
   Vue.js
   VuexFire
   

   View Slide

5. 自動テスト導入の経緯
   5
   

   View Slide

6. Vueコンポーネントが
   分割されていない
   Vuex が Fat
   ロジックも
   分割されていない
   

   View Slide

7. リファクタリングしたい...
   7
   

   View Slide

8. どんな話？
   ● 外部から見た動作を変えずにソースコードの内部構造を整
   理すること
   整理: リファクタリングとは
   8
   リファクタリング (プログラミング) - Wikipedia
   

   View Slide

9. どんな話？
   ● 修正は段階的かつ小刻みに行い、わずかな変更であって
   も、その度にテストを行うことで、動作の異常をいち早く察知
   する
   ● プログラマにテストをサボらせないため、簡単にテストを実行
   できるツール (xUnit/JUnitなど) も必要
   整理: テストの重要性
   9
   リファクタリング (プログラミング) - Wikipedia
   

   View Slide

10. 自動テストなんてなかった...
    10
    

    View Slide

11. どんな話？
    ● ユニットテスト
    ○ 関数・クラス・コンポーネント単位のテスト
    ○ テスト対象が依存する外部クラスなどはモック化して、テ
    スト対象のみに注力
    ユニットテスト or E2Eテスト?
    11
    

    View Slide

12. Vueコンポーネントが
    分割されていない
    Vuex が Fat
    ロジックも
    分割されていない
    

    View Slide

13. どんな話？
    ● E2Eテスト
    ○ コンポーネントなどをすべて結合した状態で行うテスト
    ○ ユーザの環境とその操作を再現する
    ○ ユニットテストに比べるとデメリットもある
    ■ 実行速度が遅い、実行が安定しない
    → コレならできそう？？
    ユニットテスト or E2Eテスト?
    13
    

    View Slide

14. どんな話？
    バックエンドが Firebase に依存しすぎてツラい
    ● Firebase の認証を通過させる必要がある
    ○ DBの更新系処理は認証済みでないと実行できないよう
    に制限をかけているため
    E2Eテスト作成時の課題
    14
    

    View Slide

15. frontend backend
    どんな話？
    技術スタック
    15
    - Hosting
    - Authentication
    - Cloud Firestore
    - Storage
    Vue.js
    VuexFire
    

    View Slide

16. どんな話？
    ● 2020年半ば以降、Firebaseにemulatorが次々と実装
    ● これを使ってE2Eテストを作成
    ○ 詳細なコードは割愛（※ cypress 使ってます）
    ○ どこかでブログ記事などでまとめる予定
    ○ 参考:
    ■ CypressでFirebase Authenticationのe2eテスト書いてみる - Zenn
    ■ https://zenn.dev/ucwork/articles/21b7caaeb1cc61
    Firebase認証を突破する方法
    16
    

    View Slide

17. これでリファクタリングできる！！
    17
    

    View Slide

18. まとめ
    18
    

    View Slide

19. ● リファクタリングの前段として自動テストを導入
    ○ コードの複雑さによりユニットテストはNG
    ○ 実行時間や不安定さを許容してE2Eテストを採用
    ● E2EテストにはFirebaseのemulatorを活用
    ● 次の展望はリファクタリングを実施していく
    19
    

    View Slide

20. ご清聴ありがとうございました
    20
    

    View Slide