Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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.1k
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
1k
走り出したプロジェクトが歩みを止めるまで/20210818 OSS LT vol2
skaji18
0
370
Other Decks in Technology
See All in Technology
セキュリティ運用って包括的にできていますか?SaaSを使って次のステップへ / Comprehensive Cyber Security Operations for Cloud Services Using SaaS
sakaitakeshi
0
270
Engineer Recruting Deck
siva_official
PRO
1
3.2k
Microsoft Ignite 2024 Update 2 - AIとIoT関連の最新情報をどこよりも早く!
iotcomjpadmin
0
190
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
4.6k
LLMを「速く」「安く」 動かすには / CloudNative Days Winter 2024
pfn
PRO
4
1.2k
実践/先取り「入門 Kubernetes Validating/Mutating Admission Policy」 / CloudNative Days Winter 2024
pfn
PRO
1
130
Bytebaseで実現する データベース管理の効率化
shogo452
1
130
140年の歴史あるエンタープライズ企業の内製化×マイクロサービス化への航海
yussugi
0
3.5k
Mastering Quickfix
daisuzu
2
480
Kubernetesを知る
logica0419
15
4k
GAS × Discord bot × Gemini で作ったさいきょーの情報収集ツール
ysknsid25
1
350
共創するアーキテクチャ ~チーム全体で築く持続可能な開発エコシステム~ / Co-Creating Architecture - A Sustainable Development Ecosystem Built by the Entire Team
bitkey
PRO
1
3.8k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Become a Pro
speakerdeck
PRO
25
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
A Tale of Four Properties
chriscoyier
156
23k
A designer walks into a library…
pauljervisheath
204
24k
Statistics for Hackers
jakevdp
796
220k
For a Future-Friendly Web
brad_frost
175
9.4k
Documentation Writing (for coders)
carmenintech
65
4.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
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