$30 off During Our Annual Pro Sale. View Details »

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

skaji18
February 15, 2022

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

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

skaji18

February 15, 2022
Tweet

More Decks by skaji18

Other Decks in Technology

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