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.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
360
Other Decks in Technology
See All in Technology
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
160
Nuxt × Vue Router の力を最大限に引き出す機能を紹介
ytr0903
2
480
管理画面とユーザー機能の調和を取り戻す!~クエリパフォーマンス改善の成功物語~ / Restore harmony between administrative and user functions!
minisera
1
360
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
190
インシデント対応の 実践と品質文化の醸成
____rina____
1
200
20241017_俺たちは雰囲気で scope をやっているけどもうちょっとなんとかならんのか?
tokai235
0
420
JBoss EAPによるクラウドネイティブのススメ
chiroito
0
150
XSS攻撃から考察するAWS設定不備の恐怖/20241012 Hironobu Otaki
shift_evolve
0
180
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
230
最新のWasm事情
askua
5
2.6k
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
2
200
人工衛星開発のための C2A フレームワークとその開発体験
sksat
1
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Done Done
chrislema
181
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
0
9
BBQ
matthewcrist
85
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
For a Future-Friendly Web
brad_frost
174
9.4k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building Adaptive Systems
keathley
38
2.2k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Raft: Consensus for Rubyists
vanstee
136
6.6k
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