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
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Search
Kobayashi Kazuhiro
October 16, 2022
Programming
0
70
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Vue Fes Japan Online 2022 Sponsor Session
メドピアのサービスにおけるテスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜
Kobayashi Kazuhiro
October 16, 2022
Tweet
Share
More Decks by Kobayashi Kazuhiro
See All by Kobayashi Kazuhiro
OpenAPI と型 | Mita.ts #1
kzhrk
0
1.2k
Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか?
kzhrk
1
12k
Other Decks in Programming
See All in Programming
ALL CODE BASE ARE BELONG TO STUDY
uzulla
17
2.6k
Le côté obscur des IA génératives
pascallemerrer
0
140
CSC305 Lecture 06
javiergs
PRO
0
220
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
Advance Your Career with Open Source
ivargrimstad
0
510
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
CSC509 Lecture 06
javiergs
PRO
0
260
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
210
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Code Reviewing Like a Champion
maltzj
526
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Gamification - CAS2011
davidbonilla
81
5.5k
Agile that works and the tools we love
rasmusluckow
331
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Transcript
20 2 2 / 10 / 1 6 (Sun) ⼩林和弘
メドピアのサービスにおける テスト戦略の過去と未来 〜かかりつけ化薬局⽀援サービス kakari 〜 Vue Fes Japan Online 2 022 スポンサーセッション
⾃⼰紹介 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer,
Inc.
メドピアグループの紹介 https://medpeer.co.jp/recruit/
開発を⽀援する取り組み 輪読会やモブプロ • 輪読会 • Vue 3 migration guide •
TypeScript Handbook • JS Primer Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
開発を⽀援する取り組み 輪読会やモブプロ • モブプロ会 • 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.
開発を⽀援する取り組み スポンサー • Vue Fes 2 019 , 202 2
のプラチナスポンサー • v-tokyo# 1 3 スポンサー Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
詳細を知りたい⽅は、カジュアル⾯談へ 会社紹介はここまで(ノルマ達成) https://hrmos.co/pages/medpeer/jobs/ 00 000 2 7
kakari のテスト戦略の過去と未来
⽬次 kakari のテスト戦略の過去と未来 • kakari というサービスについて • ユニットテスト • Storybook
の導⼊と破棄 • E 2 E テスト • まとめ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
kakari の構成 Rails の MPA と Vue の SPA Copyright(C)
2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ユニットテスト(初期) ⼩林が参画したタイミング • Jest で書かれたユニットテスト • coverage は 50% を切る程度
• コンポーネント数は 82 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ユニットテスト(現在) • coverage は 60% を切る程度 • Vue ファイル数は 197
Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
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.
Storybookの導⼊ ビジュアルリグレッションテスト • reg-suit • 画像の差分検知を⾏い、レポートを作成してくれる • storycap • Storybook
のキャプチャを作成する Addon Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
Storybookの破棄 ⽌まらない腐敗 • 新規コンポーネント追加時に Storybook への追加が⾏われない • 既存コンポーネントを Storybook に追加しきれていない
• Vueファイル数: 145 • Story 数: 92(約 63.4% のコンポーネント) • 運⽤で更新された props や API 変更のモック反映が漏れる • Storybook のバージョンアップが滞っている Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
🙏 R.I.P. Storybook 🙏 Copyright(C) 2 0 2 2 ALL
RIGHTS RESERVED, MedPeer, Inc.
Storybookの破棄 反省点 • ゴール設定が不明確 • API 通信を⾏う organisms コンポーネントは対象外とするなど •
新規コンポーネント追加時に Story 追加を強制する仕組みが不⾜ Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
反省を活かしたStorybook運⽤ 素晴らしきコンポーネント開発 • 姉妹サービスの kakari for Clinic では新規開発時から Storybook を導⼊
• モックデータ、モック API を事前に設計 • CI ツールを使って PR 上で Story ファイル追加を強制 Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
直近の課題 class ベースコンポーネント Copyright(C) 2 0 2 2 ALL RIGHTS
RESERVED, MedPeer, Inc.
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.
まとめ • テストツールを導⼊するときはゴールと⽬的をはっきりさせておく • それを設定できないツールは導⼊不要の可能性が⾼い • それを説明できないツールは導⼊しても頓挫する可能性が⾼い • Vue 2
の LTS は 2023 年 12 ⽉なので Vue 3 アップデートやっていきましょう Copyright(C) 2 0 2 2 ALL RIGHTS RESERVED, MedPeer, Inc.
ご清聴ありがとうございました 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.