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

by unotovive

Slide 1

Slide 1 text

Vueのテスト手法と VRTのすすめ Bonfire frontend#5 おとべ（株式会社ゆめみ）

Slide 2

Slide 2 text

自己紹介させてください

Slide 3

Slide 3 text

おとべです instagram twitter note github { , , , , } .com/unotovive

Slide 4

Slide 4 text

おとべです・フロントエンド・デザイン・ゆめみでバイトしてる大学　生です。

Slide 5

Slide 5 text

本題

Slide 6

Slide 6 text

テスト書いてますか？フロントエンドで

Slide 7

Slide 7 text

テストについて初歩的な話今日はおすすめのVRテストとを話します

Slide 8

Slide 8 text

そもそもテストいる？フロントエンドで

Slide 9

Slide 9 text

弊社のフロントエンドエンジニアSさん

Slide 10

Slide 10 text

場合による

Slide 11

Slide 11 text

重い案件が重い・実装が重い

Slide 12

Slide 12 text

案件の重さとテストの重さショボい案件単体テスト VR テスト E2E テスト

Slide 13

Slide 13 text

案件の重さとテストの重さショボい案件単体テスト VR テスト E2E テスト

Slide 14

Slide 14 text

バランスが必要ショボい案件単体テスト

Slide 15

Slide 15 text

バランスが必要デカくてムズい案件単体テスト VR テスト E2E テスト

Slide 16

Slide 16 text

バランスだけじゃ駄目でも

Slide 17

Slide 17 text

どんなテストが必要か考えて取捨選択する

Slide 18

Slide 18 text

どんなテストがあってどういう特徴で何に適しているのか

Slide 19

Slide 19 text

Vueのテスト手法いろいろテストを知る

Slide 20

Slide 20 text

単体テスト（コンポーネントテスト）

Slide 21

Slide 21 text

どんなテスト？・機能や関数、コンポーネントなどの小さい単位で行うテスト・小さい単位なので軽く高速であるべき・常に１００％を目指すべき

Slide 22

Slide 22 text

Vueでは？

Slide 23

Slide 23 text

Vueの単体テスト・内部の実装（関数など）にフォーカスしすぎない・コンポーネントのインターフェースをテストする・@vue/test-utilsを使ってコンポーネントをマウントする

Slide 24

Slide 24 text

vue-test-utils

Slide 25

Slide 25 text

ブラックボックス？ Props Render Actions component computed filter methods

Slide 26

Slide 26 text

ブラックボックス？ Props Render Actions component computed filter methods 入り口と出口だけを気にする

Slide 27

Slide 27 text

https://www.youtube.com/watch?v=OIpfWTThrK8

Slide 28

Slide 28 text

ブラックボックス内に子コンポーネントがある…

Slide 29

Slide 29 text

単体テストなので子コンポーネントを一緒にチェックとかはしたくない

Slide 30

Slide 30 text

とか

Slide 31

Slide 31 text

子コンポーネントなので渡しているPropsを変えてテストしたい

Slide 32

Slide 32 text

とか

Slide 33

Slide 33 text

子コンポーネントなのでイベントが発行されているかをテストしたい

Slide 34

Slide 34 text

とか

Slide 35

Slide 35 text

全部Vue Test Utilsで出来ます！！！

Slide 36

Slide 36 text

単体テストが適するところ・ロジックが多い大型案件（自社サービスに多めな印象）・権限周りとかで表示出し分けが複雑になってる所・サイトと言うよりはアプリケーションと呼ばれるような物

Slide 37

Slide 37 text

単体テストが適さない所・ペライチLP作ってください〜・要るわけがない・複雑でないミニマルなアプリケーション（バランスを見て）

Slide 38

Slide 38 text

E2E Test （インテグレーションテスト）

Slide 39

Slide 39 text

どんなテスト？・実際にブラウザを通して一連の操作を行ってみるテスト・ブラウザを通すしストーリーがあるので都度とても長い・開発の終盤にQAチームとかが手動でやったりもする

Slide 40

Slide 40 text

Vueでは？・Vueと言うよりも出来てるアプリケーションで行うテスト・そのためVue独自の何か、がある訳ではない・正直なところ僕は大体QAチームに丸投げ

Slide 41

Slide 41 text

ということで詳しいことはスキップ Seleniumとか使うみたい

Slide 42

Slide 42 text

e2eテストが適するところ・品質がとても大事な案件・QAチームを通す予定が無いもの・継続的に機能改良などを続けていく大型の案件・品質がとても大事な案件・QAチームを通す予定が無いもの・継続的に機能改良などを続けていく大型の案件

Slide 43

Slide 43 text

e2eテストが適さない所・QAさんがいる　　　・ある程度の信頼性が担保されてればまあ良い所

Slide 44

Slide 44 text

Visual Regression Test （画像差分テスト）今日の推し

Slide 45

Slide 45 text

Visual Regression Test （画像回帰テスト）みんな使って

Slide 46

Slide 46 text

どんなテスト？・今のスクショと前のスクショを比較してくれる　・1pxのズレも見逃さない・予期せぬスタイル崩れとかを予防できる！・開いてスクショトルのでソコソコに重い＋遅い

Slide 47

Slide 47 text

こんなかんじ

Slide 48

Slide 48 text

Vueでは？・Storybookのストーリー単位で見れる(Reg-suit+storycap) ・PR時にCIで動作し、GitHubやSlackにレポートを送信・僕の事を救ってくれたテストランキング第一位

Slide 49

Slide 49 text

Storybook ・コンポーネント単位でUIを確認できる・デザイナーとの疎通などが楽になる・コンポーネントカタログ的な使い方ができる

Slide 50

Slide 50 text

Storybook

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Reg-suit ・「よしなに」VRTをやってくれる・レポートをS3とかに上げて自動共有・ドキュメントがとても充実してる

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

VueでVRTを使ってみる超かんたん

Slide 55

Slide 55 text

カンタン３STEP 1.Storybookを入れて設定する 2.Reg-suitとStorycapを入れて設定 3.CIrcleCIの設定を書く（CIなら何でもいいけど）

Slide 56

Slide 56 text

これだけ！

Slide 57

Slide 57 text

せっかくなのでTips: ・CIで動かすDockerは公式のイメージを使うとイイ・日本語の表示はDockerにフォントのインストールが必要

Slide 58

Slide 58 text

ほかのテストと違って Storyさえ書いてれば良い

Slide 59

Slide 59 text

VRTが適するところ・中規模以上のアプリケーション・大量にコンポーネント分けしてる場合・新規Joinのメンバーが来たりする場合

Slide 60

Slide 60 text

VRTが適さない所・さっさと作って終わり！メンテも改善も無し！みたいなの・単一画面とかコンポーネント分けがされてない所（無くても・PRを眺めただで関係ない所のCSSの問題が見抜ける神がいる

Slide 61

Slide 61 text

まとめテストの種類が分かったので

Slide 62

Slide 62 text

バランスが大事テストを実装するかどうかは

Slide 63

Slide 63 text

取捨選択をするテストの種類が分かったので

Slide 64

Slide 64 text

Unit テスト VR テスト E2E テスト規模やアプリケーションの形態に応じて使い分ける高い信頼性が必要なときや工数に余裕があるときにプラス選択の指標

Slide 65

Slide 65 text

Vue Test Utilsを使っとけば間違いないしカンタン Vueのテストは

Slide 66

Slide 66 text

VRTはフロントエンドとしてとても良い選択肢認知度低めの

Slide 67

Slide 67 text

平和なエンジニアライフを目指しましょう何が必要か考えて