第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()を修正した。 引数の$idTask::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)になったことを確認できた。

テストを気軽に実行できることで、少しの変化も、大きな変化でも、影響があるのか無いのか、 明確に確認できるようになる。

テストを書く手間はあるが、そのメリットをここで感じられるだろう。

Last Updated (JST): 7/7/2019, 2:32:08 PM