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
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
300
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
OPENLOGI Company Profile for engineer
hr01
1
34k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
MobileActOsaka_250704.pdf
akaitadaaki
0
120
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Code Review Best Practice
trishagee
69
18k
Site-Speed That Sticks
csswizardry
10
690
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Writing Fast Ruby
sferik
628
62k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
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専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人