Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js + Firebase のプロジェクトに自動テストを導入した話/20220216_...
Search
skaji18
February 15, 2022
Technology
1
1.3k
Vue.js + Firebase のプロジェクトに自動テストを導入した話/20220216_frontend-lt-vol6
追記(2022/02/19)
E2Eのコード部分を記事にまとめました
https://qiita.com/skaji18/items/413d51f96de5e0c6c84d
skaji18
February 15, 2022
Tweet
Share
More Decks by skaji18
See All by skaji18
脆弱性対応を支える技術/20221127_JJUG-CCC-2022-Fall
skaji18
2
1.2k
走り出したプロジェクトが歩みを止めるまで/20210818 OSS LT vol2
skaji18
0
410
Other Decks in Technology
See All in Technology
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
600
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
350
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
Introdução a Service Mesh usando o Istio
aeciopires
0
190
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2k
Digitization部 紹介資料
sansan33
PRO
1
5.6k
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
180
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
240
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Code Review Best Practice
trishagee
72
19k
Music & Morning Musume
bryan
46
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Docker and Python
trallard
46
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Cost Of JavaScript in 2023
addyosmani
55
9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Transcript
Vue.js + Firebase の プロジェクトに 自動テストを導入した話 フロントエンドLT会 - vol.6 (2022/02/16)
1
自己紹介 • 梶 紳之介 • skaji18/ @s_kaji_18 • 株式会社ラクス • 元
PHPer • 現在は Java, JavaScript, Vue.js がメイン 2
どんな話? • いわゆる掲示板のようなアプリ ◦ 発表者がスレ立て ◦ 参加者はリアクション ▪ スタンプ(絵文字) ▪
コメント • 社内勉強会(LT会など)で利用 プロジェクトの概要 3
frontend backend どんな話? 技術スタック 4 - Hosting - Authentication -
Cloud Firestore - Storage Vue.js VuexFire
自動テスト導入の経緯 5
Vueコンポーネントが 分割されていない Vuex が Fat ロジックも 分割されていない
リファクタリングしたい... 7
どんな話? • 外部から見た動作を変えずにソースコードの内部構造を整 理すること 整理: リファクタリングとは 8 リファクタリング (プログラミング) -
Wikipedia
どんな話? • 修正は段階的かつ小刻みに行い、わずかな変更であって も、その度にテストを行うことで、動作の異常をいち早く察知 する • プログラマにテストをサボらせないため、簡単にテストを実行 できるツール (xUnit/JUnitなど) も必要
整理: テストの重要性 9 リファクタリング (プログラミング) - Wikipedia
自動テストなんてなかった... 10
どんな話? • ユニットテスト ◦ 関数・クラス・コンポーネント単位のテスト ◦ テスト対象が依存する外部クラスなどはモック化して、テ スト対象のみに注力 ユニットテスト or
E2Eテスト? 11
Vueコンポーネントが 分割されていない Vuex が Fat ロジックも 分割されていない
どんな話? • E2Eテスト ◦ コンポーネントなどをすべて結合した状態で行うテスト ◦ ユーザの環境とその操作を再現する ◦ ユニットテストに比べるとデメリットもある ▪
実行速度が遅い、実行が安定しない → コレならできそう?? ユニットテスト or E2Eテスト? 13
どんな話? バックエンドが Firebase に依存しすぎてツラい • Firebase の認証を通過させる必要がある ◦ DBの更新系処理は認証済みでないと実行できないよう に制限をかけているため
E2Eテスト作成時の課題 14
frontend backend どんな話? 技術スタック 15 - Hosting - Authentication -
Cloud Firestore - Storage Vue.js VuexFire
どんな話? • 2020年半ば以降、Firebaseにemulatorが次々と実装 • これを使ってE2Eテストを作成 ◦ 詳細なコードは割愛(※ cypress 使ってます) ◦
どこかでブログ記事などでまとめる予定 ◦ 参考: ▪ CypressでFirebase Authenticationのe2eテスト書いてみる - Zenn ▪ https://zenn.dev/ucwork/articles/21b7caaeb1cc61 Firebase認証を突破する方法 16
これでリファクタリングできる!! 17
まとめ 18
• リファクタリングの前段として自動テストを導入 ◦ コードの複雑さによりユニットテストはNG ◦ 実行時間や不安定さを許容してE2Eテストを採用 • E2EテストにはFirebaseのemulatorを活用 • 次の展望はリファクタリングを実施していく
19
ご清聴ありがとうございました 20