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
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
160
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
13
7.6k
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
140
Agentic DevOps時代の生存戦略
kkamegawa
0
130
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
8
1.7k
"SaaS is Dead" は本当か!? 生成AI時代の医療 Vertical SaaS のリアル
kakehashi
PRO
3
190
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
260
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
550
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
220
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Rails Girls Zürich Keynote
gr2m
94
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Thoughts on Productivity
jonyablonski
69
4.7k
A better future with KSS
kneath
239
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
30
990
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専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人