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.3k
GitLabとOrvalを活用したフロントエンドテスト
nyamadan
October 16, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
960
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
390
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
230
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
Github Copilot エージェントモードで試してみた
ochtum
0
100
Witchcraft for Memory
pocke
1
310
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
300
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
440
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
280
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
RailsConf 2023
tenderlove
30
1.1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
BBQ
matthewcrist
89
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Invisible Side of Design
smashingmag
299
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Orchestrator
shlominoach
188
11k
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専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人