Upgrade to Pro — share decks privately, control downloads, hide ads and more …

メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜

メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜

Vue Fes Japan Online 2022 Sponsor Session
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜

Kobayashi Kazuhiro

October 16, 2022
Tweet

More Decks by Kobayashi Kazuhiro

Other Decks in Programming

Transcript

  1. 20
    2 2
    /
    10
    /
    1
    6
    (Sun)                                            ⼩林和弘
    メドピアのサービスにおける


    テスト戦略の過去と未来
    〜かかりつけ化薬局⽀援サービス kakari 〜
    Vue Fes Japan Online
    2 022

    スポンサーセッション

    View full-size slide

  2. ⾃⼰紹介
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  3. メドピアグループの紹介
    https://medpeer.co.jp/recruit/

    View full-size slide

  4. 開発を⽀援する取り組み
    輪読会やモブプロ
    • 輪読会


    • Vue
    3
    migration guide


    • TypeScript Handbook


    • JS Primer
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  5. 開発を⽀援する取り組み
    輪読会やモブプロ
    • モブプロ会


    • Vue
    3
    のドキュメント翻訳


    • Nuxt bridge の migration


    • esbuild-loader の導⼊
    https://tech.medpeer.co.jp/entry/
    2
    022
    /
    04
    /
    0 1
    /
    1 1
    4
    5 0
    0
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  6. 開発を⽀援する取り組み
    スポンサー
    • Vue Fes
    2
    019
    ,
    202 2
    のプラチナスポンサー


    • v-tokyo#
    1
    3
    スポンサー
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  7. 詳細を知りたい⽅は、カジュアル⾯談へ
    会社紹介はここまで(ノルマ達成)
    https://hrmos.co/pages/medpeer/jobs/
    00
    000
    2 7

    View full-size slide

  8. kakari のテスト戦略の過去と未来

    View full-size slide

  9. ⽬次
    kakari のテスト戦略の過去と未来
    • kakari というサービスについて


    • ユニットテスト


    • Storybook の導⼊と破棄


    • E
    2
    E テスト


    • まとめ
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  10. kakari の構成
    Rails の MPA と Vue の SPA
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  11. ユニットテスト(初期)
    ⼩林が参画したタイミング
    • Jest で書かれたユニットテスト


    • coverage は 50% を切る程度


    • コンポーネント数は 82
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  12. ユニットテスト(現在)
    • coverage は 60% を切る程度


    • Vue ファイル数は 197
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  13. Storybookの導⼊
    コンポーネント開発
    • Storybook上でコンポーネント開発


    • Rails View にマウントしながらコンポーネントを確認するのがつらい


    • ビジュアルリグレッションテスト導⼊


    • Storybook + reg-suit
    https://tech.medpeer.co.jp/entry/
    2
    020
    /
    04
    /
    1 0
    /
    1 6
    0
    0 0
    0
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  14. Storybookの導⼊
    ビジュアルリグレッションテスト
    • reg-suit


    • 画像の差分検知を⾏い、レポートを作成してくれる


    • storycap


    • Storybook のキャプチャを作成する Addon
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  15. Storybookの破棄
    ⽌まらない腐敗
    • 新規コンポーネント追加時に Storybook への追加が⾏われない


    • 既存コンポーネントを Storybook に追加しきれていない


    • Vueファイル数: 145


    • Story 数: 92(約 63.4% のコンポーネント)


    • 運⽤で更新された props や API 変更のモック反映が漏れる


    • Storybook のバージョンアップが滞っている
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  16. 🙏 R.I.P. Storybook 🙏
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  17. Storybookの破棄
    反省点
    • ゴール設定が不明確


    • API 通信を⾏う organisms コンポーネントは対象外とするなど


    • 新規コンポーネント追加時に Story 追加を強制する仕組みが不⾜
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  18. 反省を活かしたStorybook運⽤
    素晴らしきコンポーネント開発
    • 姉妹サービスの kakari for Clinic では新規開発時から Storybook を導⼊


    • モックデータ、モック API を事前に設計


    • CI ツールを使って PR 上で Story ファイル追加を強制
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  19. 直近の課題
    class ベースコンポーネント
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  20. Playwright の導⼊
    E
    2
    E
    • Vue が使われているページの正常系のテスト網羅


    • Vue
    2

    3
    のマイグレーション時の動作保証


    • vue-property-decorator → composition-api


    • ユニットテストでモックされがちなライブラリの動作保証


    • vuex
    3

    5
    (pinia 🍍)


    • vue-router
    3

    4
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  21. まとめ
    • テストツールを導⼊するときはゴールと⽬的をはっきりさせておく


    • それを設定できないツールは導⼊不要の可能性が⾼い


    • それを説明できないツールは導⼊しても頓挫する可能性が⾼い


    • Vue
    2
    の LTS は 2023 年 12 ⽉なので Vue
    3
    アップデートやっていきましょう
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide

  22. ご清聴ありがとうございました
    We are hiring !!
    https://hrmos.co/pages/medpeer/jobs/
    00
    000
    2 7
    フロントエンドエンジニア求⼈
    https://medpeer.co.jp/recruit/
    https://tech.medpeer.co.jp/
    採⽤情報
    メドピア開発者ブログ
    Copyright(C)
    2 0 2
    2
    ALL RIGHTS RESERVED, MedPeer, Inc.

    View full-size slide