第2章 タスク詳細表示
03.ビューの実装
ビューファイルの作成
今回もビューファイルの作成から始めよう。
ここでは、タスクの詳細な情報を表示できる画面が欲しい。 本当は、この画面で情報の更新をできるようにしたいのだが、それは後の章に任せるとして、 「タイトル」と「実行済みフラグ」の表示にだけ注力しよう。
resources/views/tasks/detail.blade.phpというファイルを、下記のように作成してみよう。
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<title>Tasks</title>
</head>
<body>
<div class="container">
<h2>Tasks Detail</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<table class="table table-hover">
<thead>
<tr>
<td>タイトル</td>
<td>実行済み</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $task->title }}</td>
<td><input type="checkbox"
name="checkbox_{{ $task->id }}" {!! $task->executed ? 'checked="checked"' : '' !!}></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
ここも、前回の一覧表示と同じく、内容をシンプルに表示するだけのものにしておこう。 表示したい内容の指定方法も、前回と同じだ。
ビューのテスト作成と実行
では、作ったビューをテストできるように、テストコードを実装しよう。
$ php artisan dusk:make TaskDetailTest
Test created successfully.
これで作られたtests/Browser/TaskDetailTest.phpを下記のようにする。
<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class TaskDetailTest extends DuskTestCase
{
/**
* Task Detail Test.
*
* @throws \Throwable
*/
public function testShowDetail()
{
$this->browse(function (Browser $browser) {
$browser->visit('/tasks/2')
->assertSee('テストタスク')
->screenshot("task_detail");
});
}
}
今回も、画面内に「テストタスク」と表示されているか、というテストにしておく。 では、実行してみよう。
$ php artisan dusk
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
.F. 3 / 3 (100%)
Time: 8.53 seconds, Memory: 14.00MB
There was 1 failure:
1) Tests\Browser\TaskDetailTest::testShowDetail
Did not see expected text [テストタスク] within element [body].
Failed asserting that false is true.
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/MakesAssertions.php:348
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/MakesAssertions.php:319
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TaskDetailTest.php:20
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/ProvidesBrowser.php:67
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TaskDetailTest.php:22
FAILURES!
Tests: 3, Assertions: 3, Failures: 1.
もちろん、失敗だ。
新しく作ったビューを使うように、コントローラを修正していこう。
コントローラの実装
ここまで見てきたとおり、第2章は第1章でやったことを多く利用している。 そのため、次にやるべきこともきっと見えているだろう。
コントローラで、「モデルから必要な詳細データを呼び出し」、「それをビューに渡す」、という実装が必要だ。 必要な知識は今までにやったことの中にあるので、ゆっくりと思い返してみると、すぐに実装できそうだ。
前回は仮実装を重ねていたが、今回は十分に知識があるので一気に実装してみよう。
app/Http/Controllers/TaskController.phpを、下記のように修正してみる。
<?php
namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;
class TaskController extends Controller
{
public function index()
{
$tasks = Task::all();
return view('tasks.index', ['tasks' => $tasks]);
}
public function detail(int $id)
{
$task = Task::find($id);
return view('tasks.detail', ['task' => $task]);
}
}
17~22行目のdetail()を修正した。
引数の$idをTask::find()に渡すことで、タスクの詳細情報を取得している。
テストで$browser->visit('/tasks/2')という風にしているので、
「id = 2」のタスクを取得できるはずだ。
ビューのテスト
再びビューのテストを実行してみよう。
$ php artisan dusk
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
... 3 / 3 (100%)
Time: 8.14 seconds, Memory: 14.00MB
OK (3 tests, 3 assertions)
無事に成功となった。 続けて、PHPUnitでのテストも実行しておこう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
.... 4 / 4 (100%)
Time: 555 ms, Memory: 14.00MB
OK (4 tests, 8 assertions)
こちらも、問題なく成功だ。
detail()が受け取っている引数$idが数値として問題なく扱えていることも、
テストの成功を通してわかった。
不要なファイルの整理
突然だが、みなさんに一つ謝らなければならない。
第1章第3節でビューのテストを行なえるようにphp artisan dusk:installと実行したのだが、
覚えているだろうか?
このときに、サンプルのテストコードが含まれていたのだが、これを削除し忘れていた。
tests/Browser/ExampleTest.phpというファイルを削除して、もう一度ビューのテストを実行しよう。
$ php artisan dusk
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
.. 2 / 2 (100%)
Time: 6.61 seconds, Memory: 14.00MB
OK (2 tests, 2 assertions)
テストの数が自分で作ったものだけ(2 tests, 2 assertions)になったことを確認できた。
テストを気軽に実行できることで、少しの変化も、大きな変化でも、影響があるのか無いのか、 明確に確認できるようになる。
テストを書く手間はあるが、そのメリットをここで感じられるだろう。