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

by nyamadan

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ファイナンシャルサービス本部基盤開発部 pixivcoban開発担当フロントエンドエンジニア好きなメソッドはﬂatMap nyamadan

Slide 3

Slide 3 text

pixivcoban

Slide 4

Slide 4 text

● BOOTHやFANBOXで使えるプリペイド型の支払い手段 ● オトクにBOOTHやFANBOXが利用できます ● たまに誤解されますが内製です

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Cloud Run Frontend Cloud Run Web API HTTP API

Slide 7

Slide 7 text

廊下ブースも是非

Slide 8

Slide 8 text

ソフトウェアテストの重要性と目的

Slide 9

Slide 9 text

昨年MEETUP発表より引用

Slide 10

Slide 10 text

昨年MEETUP発表より引用

Slide 11

Slide 11 text

ソフトウェアテストを重視冒険の道筋を照らす灯 Candle by Shawn Carpenter https://ﬂic.kr/p/8ee93Z

Slide 12

Slide 12 text

テストカバレッジ未踏の領域に光を当てる S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 13

Slide 13 text

テストカバレッジ S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 14

Slide 14 text

夜空の星々 S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 15

Slide 15 text

光を放ち S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 16

Slide 16 text

闇を照らすように S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 17

Slide 17 text

ソフトウェアの隅々に S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 18

Slide 18 text

光を当てる S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 19

Slide 19 text

コードの１行１行がテストされる S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 20

Slide 20 text

不具合という暗闇 S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 21

Slide 21 text

信頼性という名の S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 22

Slide 22 text

信頼性という名の光 S k y s c a p e s by emiliokuﬀer https://ﬂic.kr/p/ToHGie

Slide 23

Slide 23 text

リリース時(04/02)のカバレッジ

Slide 24

Slide 24 text

Key by Paul Schadler https://ﬂic.kr/p/aDjL1s 72%達成の鍵ツール導入によるテスト自動化

Slide 25

Slide 25 text

Orvalの導入通信コード生成とモック作成の自動化

Slide 26

Slide 26 text

Orvalの導入 HTTP APIとそのモック作成は手間がかかる作業だが、これを自動化することでテストの効率を大幅に向上させる。 userGetを自動生成したい getUserNameWithAgeがテスト対象

Slide 27

Slide 27 text

Orvalの導入 OpenAPIの活用 HTTP API仕様はOpenAPIのYAML形式で記述設計とテストの一貫性が保たれる。

Slide 28

Slide 28 text

OpenAPIの例ここリクエストパスこの辺からレスポンス …　…　…

Slide 29

Slide 29 text

Orvalの導入自動生成の力 OpenAPIのYAMLからAPIクライアントとMSW(Mock Service Worker)のコードを自動生成し、手作業を減らしてテストを効率化する。

Slide 30

Slide 30 text

OpenAPIから生成されたメソッド

Slide 31

Slide 31 text

OpenAPIから生成された型

Slide 32

Slide 32 text

モックサーバーを使用してテストこのへんでMSW起動 MSWがデータを返す

Slide 33

Slide 33 text

さらなる光を求めて 80%への挑戦

Slide 34

Slide 34 text

カバレッジの可視化 GitLab上で可視化テストの状況を即座に把握できるように

Slide 35

Slide 35 text

カバレッジの可視化テストされていないコードパスの可視化

Slide 36

Slide 36 text

コードレビューにおけるカバレッジの効果誤ったテストケースパスを通っていない

Slide 37

Slide 37 text

カバレッジ可視化の結果

Slide 38

Slide 38 text

7/31のカバレッジ

Slide 39

Slide 39 text

カバレッジ上昇

Slide 40

Slide 40 text

テストが導いた新たな高み

Slide 41

Slide 41 text

テストが導いた新たな高みマージリクエストのマージ数は増加を続けるリリース🎉

Slide 42

Slide 42 text

我々は止まらない更なる高みへ

Slide 43

Slide 43 text

ファイナンシャルサービス本部基盤開発部

Slide 44

Slide 44 text

ファイナンシャルサービス本部決済基盤やpixivcobanを開発するエンジニアが所属するそのうち３名が主としてフロントエンド開発を行う基盤開発部 pixivcoban専任今日話した人決済基盤専任去年話した人決済基盤専任最近は国際化を頑張ってる人