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
410
Other Decks in Technology
See All in Technology
あなたの知らない OneDrive
murachiakira
0
240
JOAI発表資料 @ 関東kaggler会
joai_committee
1
330
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.6k
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
620
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
310
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
110
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
2
200
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
3
260
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
トヨタ生産方式(TPS)入門
recruitengineers
PRO
3
240
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing Experiences People Love
moore
142
24k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Adaptive Systems
keathley
43
2.7k
Six Lessons from altMBA
skipperchong
28
4k
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