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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
nyamadan
October 16, 2024
Technology
0
1.7k
GitLabとOrvalを活用したフロントエンドテスト
nyamadan
October 16, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.6k
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
170
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
3
220
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
2
3.1k
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
220
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
200
今日から始めるAmazon Bedrock AgentCore
har1101
4
420
Amazon Bedrock Knowledge Basesチャンキング解説!
aoinoguchi
0
160
AIが実装する時代、人間は仕様と検証を設計する
gotalab555
1
160
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
jonnojun
1
240
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
Featured
See All Featured
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
Claude Code のすすめ
schroneko
67
210k
Context Engineering - Making Every Token Count
addyosmani
9
670
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Everyday Curiosity
cassininazir
0
130
The Curse of the Amulet
leimatthew05
1
8.7k
How GitHub (no longer) Works
holman
316
140k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
220
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
Practical Orchestrator
shlominoach
191
11k
How to make the Groovebox
asonas
2
1.9k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
120
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専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人