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.2k
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
400
Other Decks in Technology
See All in Technology
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
160
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
110
PO初心者が考えた ”POらしさ”
nb_rady
0
190
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
130
Claude Code に プロジェクト管理やらせたみた
unson
5
2.4k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
910
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
180
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
OPENLOGI Company Profile
hr01
0
67k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Ace a Technical Interview
jacobian
277
23k
Music & Morning Musume
bryan
46
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Automating Front-end Workflow
addyosmani
1370
200k
It's Worth the Effort
3n
185
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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