Vueのテスト手法とVRTのススメ

Bonfire frontend#5の登壇資料です

Transcript

1. Vueのテスト手法と VRTのすすめ Bonfire frontend#5 おとべ（株式会社ゆめみ）
2. 自己紹介させてください
3. おとべです instagram twitter note github { , , , , } .com/unotovive
4. おとべです ・フロントエンド ・デザイン ・ゆめみでバイトしてる大学 　生です。
5. 本題
6. テスト書いてますか？ フロントエンドで
7. テストについて初歩的な話 今日は おすすめのVRテスト と を話します
8. そもそもテストいる？ フロントエンドで
9. 弊社のフロントエンドエンジニアSさん
10. 場合による
11. 重い 案件が重い・実装が重い
12. 案件の重さとテストの重さ ショボい案件 単体 テスト VR テスト E2E テスト
13. 案件の重さとテストの重さ ショボい案件 単体 テスト VR テスト E2E テスト
14. バランスが必要 ショボい案件 単体 テスト
15. バランスが必要 デカくて ムズい 案件 単体 テスト VR テスト E2E テスト
16. バランスだけじゃ駄目 でも
17. どんなテストが必要か 考えて取捨選択する
18. どんなテストがあって どういう特徴で 何に適しているのか
19. Vueのテスト手法いろいろ テストを知る
20. 単体テスト （コンポーネントテスト）
21. どんなテスト？ ・機能や関数、コンポーネントなどの小さい単位で行うテスト ・小さい単位なので軽く高速であるべき ・常に１００％を目指すべき
22. Vueでは？
23. Vueの単体テスト ・内部の実装（関数など）にフォーカスしすぎない ・コンポーネントのインターフェースをテストする ・@vue/test-utilsを使ってコンポーネントをマウントする
24. vue-test-utils
25. ブラックボックス？ Props Render Actions component computed filter methods
26. ブラックボックス？ Props Render Actions component computed filter methods 入り口と出口だけを気にする
27. https://www.youtube.com/watch?v=OIpfWTThrK8
28. ブラックボックス内に 子コンポーネントがある…
29. 単体テストなので 子コンポーネントを一緒に チェックとかはしたくない
30. とか
31. 子コンポーネントなので 渡しているPropsを変えて テストしたい
32. とか
33. 子コンポーネントなので イベントが発行されている かをテストしたい
34. とか
35. 全部Vue Test Utilsで 出来ます！！！
36. 単体テストが適するところ ・ロジックが多い大型案件（自社サービスに多めな印象） ・権限周りとかで表示出し分けが複雑になってる所 ・サイトと言うよりはアプリケーションと呼ばれるような物
37. 単体テストが適さない所 ・ペライチLP作ってください〜 ・要るわけがない ・複雑でないミニマルなアプリケーション（バランスを見て）
38. E2E Test （インテグレーションテスト）
39. どんなテスト？ ・実際にブラウザを通して一連の操作を行ってみるテスト ・ブラウザを通すしストーリーがあるので都度とても長い ・開発の終盤にQAチームとかが手動でやったりもする
40. Vueでは？ ・Vueと言うよりも出来てるアプリケーションで行うテスト ・そのためVue独自の何か、がある訳ではない ・正直なところ僕は大体QAチームに丸投げ
41. ということで詳しいことは スキップ Seleniumとか使うみたい
42. e2eテストが適するところ ・ 品質がとても大事な案件 ・QAチームを通す予定が無いもの ・継続的に機能改良などを続けていく大型の案件 ・ 品質がとても大事な案件 ・QAチームを通す予定が無いもの ・継続的に機能改良などを続けていく大型の案件
43. e2eテストが適さない所 ・QAさんがいる　　　 ・ある程度の信頼性が担保されてればまあ良い所
44. Visual Regression Test （画像差分テスト） 今日の推し
45. Visual Regression Test （画像回帰テスト） みんな使って
46. どんなテスト？ ・今のスクショと前のスクショを比較してくれる　 ・1pxのズレも見逃さない ・予期せぬスタイル崩れとかを予防できる！ ・開いてスクショトルのでソコソコに重い＋遅い
47. こんなかんじ
48. Vueでは？ ・Storybookのストーリー単位で見れる(Reg-suit+storycap) ・PR時にCIで動作し、GitHubやSlackにレポートを送信 ・僕の事を救ってくれたテストランキング第一位
49. Storybook ・ コンポーネント単位でUIを確認できる ・デザイナーとの疎通などが楽になる ・コンポーネントカタログ的な使い方ができる
50. Storybook
52. Reg-suit ・「よしなに」VRTをやってくれる ・レポートをS3とかに上げて自動共有 ・ドキュメントがとても充実してる
54. VueでVRTを使ってみる 超かんたん
55. カンタン３STEP 1.Storybookを入れて設定する 2.Reg-suitとStorycapを入れて設定 3.CIrcleCIの設定を書く（CIなら何でもいいけど）
56. これだけ！
57. せっかくなのでTips: ・CIで動かすDockerは公式のイメージを使うとイイ ・日本語の表示はDockerにフォントのインストールが必要
58. ほかのテストと違って Storyさえ書いてれば良い
59. VRTが適するところ ・中規模以上のアプリケーション ・大量にコンポーネント分けしてる場合 ・新規Joinのメンバーが来たりする場合
60. VRTが適さない所 ・さっさと作って終わり！メンテも改善も無し！みたいなの ・単一画面とかコンポーネント分けがされてない所（無くても ・PRを眺めただで関係ない所のCSSの問題が見抜ける神がいる
61. まとめ テストの種類が分かったので
62. バランスが大事 テストを実装するかどうかは
63. 取捨選択をする テストの種類が分かったので
64. Unit テスト VR テスト E2E テスト 規模やアプリケーションの形態に 応じて使い分ける 高い信頼性が必要なときや 工数に余裕があるときにプラス 選択の指標
65. Vue Test Utilsを使っとけば 間違いないしカンタン Vueのテストは
66. VRTはフロントエンドとして とても良い選択肢 認知度低めの
67. 平和なエンジニアライフを 目指しましょう 何が必要か考えて
68. 最後に宣伝
69. Yumemi.vue#6 2/2 (木) Roppongi.vue＃５ 2/25 (火)
70. おわり まさかり歓迎です。優しく投げて下さい。