第5章 タスクの削除
02.詳細画面からの呼び出し実装
ビューのテスト実装
今回も、テストから実装していこう。
ビューのテストファイルを新規に作成する。
tests/Browser/TaskNewTest.phpという名前で、下記の内容のファイルを作成する。
<?php
namespace Tests\Browser;
use App\Task;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class TaskDeleteTest extends DuskTestCase
{
private $task;
protected function setUp()
{
parent::setUp();
$this->task = Task::create([
'title' => 'テストタスク',
'executed' => false,
]);
}
/**
* Delete Task Test.
*
* @return void
* @throws \Throwable
*/
public function testPushDelete()
{
$this->browse(function (Browser $browser) {
$browser->visit('/tasks/' . $this->task->id)
->press('削除')
->pause(1000)
->assertPathIs('/tasks');
});
}
}
詳細ページを表示し、削除ボタンをクリックし、一覧画面へ遷移する、 ということを確認する内容だ。
では、このテストを実行してみよう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
..............E....... 22 / 22 (100%)
Time: 41.8 seconds, Memory: 22.00MB
There was 1 error:
1) Tests\Browser\TaskDeleteTest::testPushDelete
InvalidArgumentException: Unable to locate button [削除].
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/ElementResolver.php:209
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/InteractsWithElements.php:304
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TaskDeleteTest.php:33
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/dusk/src/Concerns/ProvidesBrowser.php:67
/Users/[ユーザ名]/task-manager/task-manager/tests/Browser/TaskDeleteTest.php:36
ERRORS!
Tests: 22, Assertions: 61, Errors: 1.
これも、いつも通り失敗だ。 エラーメッセージも「削除ボタン」が無い、という、当然の内容だ。
ビューの実装
では、詳細画面のビューファイルに「削除ボタン」を追加しよう。
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">
{!! Form::open(['action' => ['TaskController@update', $task->id], 'method' => 'put']) !!}
<table class="table table-hover">
<thead>
<tr>
<td>タイトル</td>
<td>実行済み</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ Form::text('title', $task->title, ['id' => 'title', 'class' => 'form-control']) }}</td>
<td>{{ Form::checkbox('executed', 'on', $task->executed) }}</td>
</tr>
</tbody>
</table>
{{ Form::submit('更新', ['class' => 'btn btn-primary']) }}
{!! Form::close() !!}
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
{!! Form::open(['action' => ['TaskController@remove', $task->id], 'method' => 'delete']) !!}
{{ Form::submit('削除', ['class' => 'btn btn-danger']) }}
{!! Form::close() !!}
</div>
</div>
</div>
</body>
</html>
レイアウトとしてはあまり良い形では無いが、 もともとあった「更新ボタン」の下に「削除ボタン」を配置している。
これは、実装側を楽にする(フォームの呼び出し処理を簡単に行なう)ためなので、 後々には「レイアウトのリファクタリング」もやった方が良いだろう。
今回は、このまま進もう。
ビューファイルの修正も行なえたので、テストを再度実行しよう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
...................... 22 / 22 (100%)
Time: 47.91 seconds, Memory: 24.00MB
OK (22 tests, 62 assertions)
無事に成功した!
これで、削除機能も実装できた。
本章のまとめ
本章は短かったが、これで「タスク管理システム」として必要な機能を実装することができた。 だいぶTDDでの開発にも慣れてきただろうか?
次の章からは、Laravelの機能を使って、システムの機能拡張を行なっていく。 もちろん、TDDでの開発も続ける。 難しい箇所も出てくるだろうが、少しずつ進んでいこう。