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
GitLabとOrvalを活用したフロントエンドテスト
Search
nyamadan
October 16, 2024
Technology
0
1.4k
GitLabとOrvalを活用したフロントエンドテスト
nyamadan
October 16, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Operating Operator
shhnjk
1
580
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
PO初心者が考えた ”POらしさ”
nb_rady
0
210
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Invisible Side of Design
smashingmag
301
51k
Adopting Sorbet at Scale
ufuk
77
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How GitHub (no longer) Works
holman
314
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf 2023
tenderlove
30
1.1k
Transcript
GitLabとOrvalを活用した フロントエンドテスト nyamadan
ファイナンシャルサービス本部 基盤開発部 pixivcoban開発担当 フロントエンドエンジニア 好きなメソッドはflatMap nyamadan
pixivcoban
• BOOTHやFANBOXで使えるプリペイド型の支払い手段 • オトクにBOOTHやFANBOXが利用できます • たまに誤解されますが内製です
None
Cloud Run Frontend Cloud Run Web API HTTP API
廊下ブースも是非
ソフトウェアテストの 重要性と目的
昨年MEETUP発表より引用
昨年MEETUP発表より引用
ソフトウェアテストを重視 冒険の道筋を照らす灯 Candle by Shawn Carpenter https://flic.kr/p/8ee93Z
テストカバレッジ 未踏の領域に光を当てる S k y s c a p e
s by emiliokuffer https://flic.kr/p/ToHGie
テストカバレッジ S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
夜空の星々 S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
光を放ち S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
闇を照らすように S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
ソフトウェアの 隅々に S k y s c a p e
s by emiliokuffer https://flic.kr/p/ToHGie
光を当てる S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
コードの1行1行が テストされる S k y s c a p e
s by emiliokuffer https://flic.kr/p/ToHGie
不具合という暗闇 S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
信頼性という名の S k y s c a p e s
by emiliokuffer https://flic.kr/p/ToHGie
信頼性という名の 光 S k y s c a p e
s by emiliokuffer https://flic.kr/p/ToHGie
リリース時(04/02)のカバレッジ
Key by Paul Schadler https://flic.kr/p/aDjL1s 72%達成の鍵 ツール導入によるテスト自動化
Orvalの導入 通信コード生成とモック作成の自動化
Orvalの導入 HTTP APIとそのモック作成は手間がかかる作業だが、 これを自動化することでテストの効率を大幅に向上させる。 userGetを自動生成したい getUserNameWithAgeがテスト対象
Orvalの導入 OpenAPIの活用 HTTP API仕様はOpenAPIのYAML形式で記述 設計とテストの一貫性が保たれる。
OpenAPIの例 ここリクエストパス この辺からレスポンス … … …
Orvalの導入 自動生成の力 OpenAPIのYAMLからAPIクライアントとMSW(Mock Service Worker)のコードを自動生成し、手作業を減らしてテストを効率 化する。
OpenAPIから生成されたメソッド
OpenAPIから生成された型
モックサーバーを使用してテスト このへんでMSW起動 MSWがデータを返す
さらなる光を求めて 80%への挑戦
カバレッジの可視化 GitLab上で可視化 テストの状況を即座に把握できるように
カバレッジの可視化 テストされていないコードパスの可視化
コードレビューにおけるカバレッジの効果 誤ったテストケース パスを通っていない
カバレッジ可視化の結果
7/31のカバレッジ
カバレッジ上昇
テストが導いた新たな高み
テストが導いた新たな高み マージリクエストのマージ数は増加を続ける リリース🎉
我々は止まらない 更なる高みへ
ファイナンシャルサービス本部 基盤開発部
ファイナンシャルサービス本部 決済基盤やpixivcobanを開発するエンジニアが所属する そのうち3名が主としてフロントエンド開発を行う 基盤開発部 pixivcoban専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人