目次
- プロジェクトを作成する
- データベースファイルを作成する
- Visual Studio Code を設定する
- .env を編集して初期設定する
- タイムゾーンと言語を設定する
- Webサーバを起動して終了する
- マイグレーションファイルを生成する
- テスト用データを設定する
- モデルを作成する
- コントローラを作成する
- ルートを定義する
- データベースからデータを取り出す
- トップページにリンクを設置する
- ビューを使ってレコードを表示する
- コメントを個別に表示するページを作成する
- コメント投稿機能を実装する
- 投稿内容を検証する
- 投稿内容を編集する
- 投稿コメントを削除する
- テストの自動化を実現する
- テストカバレッジを計測する
- 複数のLinuxコマンドを実行し，履歴からも実行する
- ビューをレイアウト化する
- Bootstrap を導入する
- SQLite を操作する
- フェイカでシーダを拡張する
- ページネーションを作る
- シーダに登録日時と更新日時を追加する
- 一覧表示を更新日時の降順にする
- フラッシュメッセージを表示する
- スタイルシートでデザインを整える
Laravel によるコメント掲示板の開発
テストカバレッジを計測する
ここでは自動テストの際にソースコードのどの部分がテストされたのかを確認するために，テストカバレッジの計測を行います．
Laravel ではカバレッジレポートが HTML 形式で出力されます．まずは Web サーバの設定が完了しているかどうかを確認します．なお，ここの手順で Ubuntu の仮想環境をインストールした場合には Web サーバの設定ができているはずです．リモートサーバ (ubuntu) の IP アドレスだけをクライアント PC（Windows等）の Web ブラウザのアドレスバーに入力して次のようなページが表示されれば設定できています．
上の Default Page の実体は /var/www/html/index.html です．カバレッジレポートを保存するためにフォルダを作成します．今回は cv_reports という名前で作成することにします．
vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/ ⏎ total 12 -rw-r--r-- 1 vagrant vagrant 10671 10月 15 10:48 index.html vagrant@ubuntu2204 comment_app $ mkdir /var/www/html/cv_reports ⏎ vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/ ⏎ total 16 drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:12 cv_reports -rw-r--r-- 1 vagrant vagrant 10671 10月 15 10:48 index.html vagrant@ubuntu2204 comment_app $
フォルダを作成できたらテストを実行します．この時，--coverage-html レポート出力フォルダ名 というオプションを追加するだけでカバレッジレポートが作成されます．
vagrant@ubuntu2204 comment_app $ php artisan test --coverage-html /var/www/html/cv_reports/comment_app ⏎
PASS Tests\Unit\CommentsControllerTest
✓ example 0.03s
PASS Tests\Unit\ExampleTest
✓ that true is true 0.01s
PASS Tests\Feature\CommentsControllerTest
✓ comments index 0.20s
✓ comments show 3 0.03s
✓ comments edit 3 0.03s
PASS Tests\Feature\ExampleTest
✓ the application returns a successful response 0.04s
✓ the application returns a 404 error response 0.03s
Tests: 7 passed (7 assertions)
Duration: 0.43s
vagrant@ubuntu2204 comment_app $
カバレッジレポートが作成されているかどうか，ディレクトリの中身を覗いてみよう． /var/www/html/cv_reports/ ディレクトリ内にプロジェクト名 (comment_app) のフォルダが作成され，/var/www/html/cv_reports/comment_app/ 以下にさまざまなファイルが作成されました．
vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/ ⏎ total 16 drwxrwxr-x 3 vagrant vagrant 4096 10月 15 14:13 cv_reports -rw-r--r-- 1 vagrant vagrant 10671 10月 15 10:48 index.html vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/cv_reports/ ⏎ total 4 drwxrwxr-x 10 vagrant vagrant 4096 10月 15 14:13 comment_app vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/ ⏎ total 16 drwxrwxr-x 3 vagrant vagrant 4096 10月 15 14:13 cv_reports -rw-r--r-- 1 vagrant vagrant 10671 10月 15 10:48 index.html vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/cv_reports/ ⏎ total 4 drwxrwxr-x 10 vagrant vagrant 4096 10月 15 14:13 comment_app vagrant@ubuntu2204 comment_app $ ls -l /var/www/html/cv_reports/comment_app/ ⏎ total 60 drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 Console drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 Exceptions drwxrwxr-x 4 vagrant vagrant 4096 10月 15 14:13 Http drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 Models drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 Providers drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 _css drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 _icons drwxrwxr-x 2 vagrant vagrant 4096 10月 15 14:13 _js -rw-rw-r-- 1 vagrant vagrant 15806 10月 15 14:13 dashboard.html -rw-rw-r-- 1 vagrant vagrant 10351 10月 15 14:13 index.html vagrant@ubuntu2204 comment_app $
http://192.168.56.101/cv_reports/ にアクセスすると，comment_app ディレクトリが確認できたので，comment_app のリンクを開きます．
トップページです．コントローラのカバレッジを確認したいので，Http のリンクを開きます．
Controllers以下のカバレッジは 30.95% です．Controllers のリンクを開きます．
CommentsController.php のカバレッジが 30.95% です．さらにこのファイルのリンクを開きます．
この画面からソースコードのどの部分がテストされたかがわかります．例えば，12行目から14行目はテストで実行された部分です．
一方で，23行目や31行目から40行目はまだテストで実行されていません．どの行がテストされて，どの行がまだテストされていないかはこの画面から一目瞭然です．どうやらテスト項目が足りていないので，すべての行がテストで実行されるようにテストケースを追加し，カバレッジ 100% を目指そう．
