Laravel/Vue.js#11 PhpStormからLaradock上の PHPUnitを動かしたら開発が捗った話

https://laravue.connpass.com/event/149802/
の登壇資料です

動画1(PHPUnit) https://www.youtube.com/watch?v=jzra2bgCMWU

動画2(Jest) https://www.youtube.com/watch?time_continue=1&v=zgvuKKI8vgg

Transcript

1. PhpStormからLaradock上の

   PHPUnitを動かしたら開発が捗った話

   

   

   ザッキー
   Twitter : @ytzk_
   Qiita : zackey2
   

   View Slide

2. ザッキー @ytzk_
   株式会社M&Aクラウド
   八丁堀どベンチャー
   Webエンジニア
   フロント・バック・インフラ・WiFiトラブルシューティング
   自己紹介
   

   View Slide

3. テクノロジーの力でM&Aに流通革命を
   PR
   

   View Slide

4. 業界初！募集型M&Aプラットフォーム
   PR
   

   View Slide

5. M&Aクラウドは
   Laravel JP Conference2020の
   ゴールドスポンサーです
   PR
   

   View Slide

6. WE ARE HIRING!
   M&Aクラウドでは
   一緒に働く仲間を募集しています
   PR
   https://www.wantedly.com/companies/macloud
   

   View Slide

7. ここから本題
   

   View Slide

8. 目次
   ● PhpStormからLaradock上の
   PHPUnitを動かせるとこんなに便利
   （Laradockに限らずDocker上でテスト動かせるはず）
   ● 設定の流れ
   ● PhpStormからVueもテストできる
   

   View Slide

9. PhpStormからLaradock上の
   PHPUnitを動かせるとこんなに便利
   

   View Slide

10. 背景
    - ローカルのLaravelの開発環境にはLaradockを使ってる
    - PR作ったらCircleCI上でテストが走る仕組みがある
    - ローカルマシンでテストする場合は、DockerコンテナにSSHしてコマンド
    ラインでPHPUnitを実行
    - テスト全部実行すると実行時間は4分くらいかかってだるい
    - 任意のテストだけ実行するのがだるい
    - リモートテストできたら楽だけど設定がうまくいかないから後回しに…
    

    View Slide

11. コマンドでPHPUnitを実行する場合
    

    View Slide

12. コマンドでPHPUnitを実行する場合
    全部実行する
    ファイル指定で実行する
    メソッド指定で実行する
    ▶ いちいちファイルやメソッドを指定するのめんどくさい
    

    View Slide

13. コマンドでPHPUnitを実行する場合
    実行結果表示例①
    ▶ 結果表示が簡素
    ▶ 全部実行が終わるまで具体的なエラー個所がわからない
    

    View Slide

14. コマンドでPHPUnitを実行する場合
    実行結果表示例②
    ▶ エラー個所のパスをエディタで開くのがめんどくさい
    

    View Slide

15. PHPStormでPHPUnitを実行する場合
    

    View Slide

16. PHPstormからPHPUnitを実行する場合
    実演タイム
    

    View Slide

17. PhpStormからPHPUnitを実行する場合
    実行の仕方
    ● エディター上の▷アイコンメニューから実行
    ● ショートカットキー
    ● ファイル監視
    ▶ 瞬時に実行可能
    ▶ ファイル単位・メソッド単位ですぐ実行できる
    

    View Slide

18. PhpStormからPHPUnitを実行する場合
    実行結果表示
    ▶ エラー個所にすぐジャンプできる
    ▶ テスト実行中でもエラーの詳細を見られる
    

    View Slide

19. 設定の流れ
    設定方法の詳細はQiita記事をご参照ください
    https://qiita.com/zackey2/items/d1e6fc183997efa5ab4b
    

    View Slide

20. Vueもテストできる
    

    View Slide

21. PhpStormからJestを動かしてVueもテストできる
    

    View Slide

22. まとめ
    - PhpStormからPHPUnitを実行すると便利
    - 瞬時に実行可能
    - ファイル単位・メソッド単位ですぐ実行できる
    - 設定方法はQiita記事 https://qiita.com/zackey2/items/d1e6fc183997efa5ab4b
    - PhpStorm上からJest動かしてvueのテストもできます
    

    View Slide

23. おわり
    

    View Slide