GitLabとOrvalを活用したフロントエンドテスト

Transcript

1. GitLabとOrvalを活用した フロントエンドテスト nyamadan
2. ファイナンシャルサービス本部 基盤開発部 pixivcoban開発担当 フロントエンドエンジニア 好きなメソッドはflatMap nyamadan
3. pixivcoban
4. • BOOTHやFANBOXで使えるプリペイド型の支払い手段 • オトクにBOOTHやFANBOXが利用できます • たまに誤解されますが内製です
6. Cloud Run Frontend Cloud Run Web API HTTP API
7. 廊下ブースも是非
8. ソフトウェアテストの 重要性と目的
9. 昨年MEETUP発表より引用
10. 昨年MEETUP発表より引用
11. ソフトウェアテストを重視 冒険の道筋を照らす灯 Candle by Shawn Carpenter https://flic.kr/p/8ee93Z
12. テストカバレッジ 未踏の領域に光を当てる S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
13. テストカバレッジ S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
14. 夜空の星々 S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
15. 光を放ち S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
16. 闇を照らすように S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
17. ソフトウェアの 隅々に S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
18. 光を当てる S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
19. コードの１行１行が テストされる S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
20. 不具合という暗闇 S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
21. 信頼性という名の S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
22. 信頼性という名の 光 S k y s c a p e s by emiliokuffer https://flic.kr/p/ToHGie
23. リリース時(04/02)のカバレッジ
24. Key by Paul Schadler https://flic.kr/p/aDjL1s 72%達成の鍵 ツール導入によるテスト自動化
25. Orvalの導入 通信コード生成とモック作成の自動化
26. Orvalの導入 HTTP APIとそのモック作成は手間がかかる作業だが、 これを自動化することでテストの効率を大幅に向上させる。 userGetを自動生成したい getUserNameWithAgeがテスト対象
27. Orvalの導入 OpenAPIの活用 HTTP API仕様はOpenAPIのYAML形式で記述 設計とテストの一貫性が保たれる。
28. OpenAPIの例 ここリクエストパス この辺からレスポンス …　…　…
29. Orvalの導入 自動生成の力 OpenAPIのYAMLからAPIクライアントとMSW(Mock Service Worker)のコードを自動生成し、手作業を減らしてテストを効率 化する。
30. OpenAPIから生成されたメソッド
31. OpenAPIから生成された型
32. モックサーバーを使用してテスト このへんでMSW起動 MSWがデータを返す
33. さらなる光を求めて 80%への挑戦
34. カバレッジの可視化 GitLab上で可視化 テストの状況を即座に把握できるように
35. カバレッジの可視化 テストされていないコードパスの可視化
36. コードレビューにおけるカバレッジの効果 誤ったテストケース パスを通っていない
37. カバレッジ可視化の結果
38. 7/31のカバレッジ
39. カバレッジ上昇
40. テストが導いた新たな高み
41. テストが導いた新たな高み マージリクエストのマージ数は増加を続ける リリース🎉
42. 我々は止まらない 更なる高みへ
43. ファイナンシャルサービス本部 基盤開発部
44. ファイナンシャルサービス本部 決済基盤やpixivcobanを開発するエンジニアが所属する そのうち３名が主としてフロントエンド開発を行う 基盤開発部 pixivcoban専任 今日話した人 決済基盤専任 去年話した人 決済基盤専任 最近は国際化を頑張ってる人