第2章 タスク詳細表示
05.一覧画面からの遷移実装
画面遷移のテスト
ここまでで、「一覧画面」と「詳細画面」の二つを表示する機能がそれぞれ実装できた。 となれば、次は「一覧画面」から「詳細画面」への画面遷移の機能が欲しくなる。
「一覧画面」で表示している項目に<a>タグでリンクがあり、
それをクリックすれば詳細画面に遷移する、となっていれば機能を満たせそうだ。
では、そのような機能を確認できるように、ビューのテストを実装していこう。
tests/Browser/TasksIndexTest.phpを下記のようにする。
<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class TasksIndexTest extends DuskTestCase
{
/**
* Tasks Index Test.
*
* @throws \Exception
* @throws \Throwable
*/
public function testIndex()
{
$this->browse(function (Browser $browser) {
$browser->visit('/tasks')
->assertSee('テストタスク')
->screenshot("tasks_index");
});
}
/**
* Index To Detail Test.
*
* @throws \Throwable
*/
public function testIndexToDetail() {
$this->browse(function (Browser $browser) {
$browser->visit('/tasks')
->assertSeeLink('テストタスク')
->clickLink('テストタスク')
->waitForLocation('/tasks/2', 1)
->assertPathIs('/tasks/2')
->assertSee('テストタスク');
});
}
}
ちょっと量が多いので、順に見ていこう。
assertSeeLink('テストタスク')でページ内に'テストタスク'という文字のリンクが存在するか確認し、clickLink('テストタスク')でそのリンクの文字'テストタスク'の部分をクリックし、waitForLocation('/tasks/2', 1)でページ遷移するのを1秒待ち、assertPathIs('/tasks/2')でLocationが実際に変更されたかを確認し、assertSee('テストタスク')で詳細情報として'テストタスク'が表示されていることを確認する。
という流れになる。
では、実際にビューのテストを実行してみよう。
$ php artisan dusk
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
..F 3 / 3 (100%)
Time: 7.74 seconds, Memory: 14.00MB
There was 1 failure:
1) Tests\Browser\TasksIndexTest::testIndexToDetail
Did not see expected link [テストタスク] within [body].
Failed asserting that false is true.
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/MakesAssertions.php:423
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TasksIndexTest.php:34
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/ProvidesBrowser.php:67
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TasksIndexTest.php:39
FAILURES!
Tests: 3, Assertions: 3, Failures: 1.
エラーが出た。
エラー内容を見ると「テストタスクというリンクがあるはずなのに無いよ」、と言われている。
つまり、上記の"1."の部分のAssertで引っかかっているわけだ。
では、一覧画面に各詳細ページへ遷移するためのリンクを組み込んでみよう。
一覧画面の修正
一覧画面は、コントローラから受け取ったタスクを繰り返しで表示している。 それぞれのタスクに「タスクID」があるので、それを使ってリンクを生成すれば良いだろう。
resources/views/tasks/index.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 List</h2>
<ul>
@foreach ($tasks as $task)
<li><a href="/tasks/{{ $task->id }}">{{ $task->title }}</a> <input type="checkbox"
name="checkbox_{{ $task->id }}" {!! $task->executed ? 'checked="checked"' : '' !!}>
</li>
@endforeach
</ul>
</div>
</body>
</html>
22行目、{{ $task->title }}としていたところを<a>タグで囲み、
href属性に詳細画面へのリンクを入れた。
遷移先のIDは$task->idでわかるので、/tasks/{{ $task->id }}で詳細画面へ進めるはずだ。
これで、再びビューのテストを実行してみよう。
$ php artisan dusk
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
... 3 / 3 (100%)
Time: 8.78 seconds, Memory: 14.00MB
OK (3 tests, 5 assertions)
無事に成功した。画面遷移のテストもコードで書くことができる、ということもわかった。 これは、多くのUIテストをコーディングできる(可能性がある)、ということだ。
本章のまとめ
この章では、「詳細画面」を実装し、「一覧画面」から遷移させることができるようになった。
詳細画面の表示そのものは一覧画面の延長であり、そんなに難しくなかったはずだ。 ここに、「エラー処理」でやること、「画面遷移」でやること、を付け加えたことで、 より「システム」らしくなったはずだ。
さらに、その「システムらしさ」もテストコードで表現できることもわかったはずだ。
リズムとして、テストコードで一歩進み、プロダクトコードで一歩進み、というように、 交互に足を動かしながら歩くように、一歩ずつ進んでいる。
ただ、時には大きく一歩を踏み出す場合もあるし、小さく一歩進んだ方が良い場合もある。 「すでにわかっている」なら大きく一歩、「よくわからないから確かめたい」なら小さく一歩、 それぞれを使い分けながら進んでいこう。