第4章 タスクの追加
02.ビューの実装(新規作成画面)
新規作成画面用ビューファイルの作成
では、新規作成画面用のビューファイルを作成しよう。 ここでは特に難しいことはせずに、更新画面用のものを流用する形で作成してしまおう。
resources/views/tasks/new.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>New Task</h2>
<div class="row">
<div class="col-md-offset-2 col-md-8">
{!! Form::open(['action' => ['TaskController@create'], 'method' => 'post']) !!}
<table class="table table-hover">
<thead>
<tr>
<td>タイトル</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ Form::text('title', '', ['id' => 'title', 'class' => 'form-control']) }}</td>
</tr>
</tbody>
</table>
{{ Form::submit('登録', ['class' => 'btn btn-primary']) }}
{!! Form::close() !!}
</div>
</div>
</div>
</body>
</html>
ビュー呼び出しのためのコントローラー修正とルートの追加
今回は、先にコントローラーの修正から入ろう。
app/Http/Controllers/TaskController.phpを下記のように修正する。
<?php
namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;
class TaskController extends Controller
{
(略)
public function new()
{
return view('tasks.new');
}
}
ここでは、単純にビューを呼び出すだけで良いので、これで良いはずだ。
実際に、テストで確かめてみよう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
.....F...... 12 / 12 (100%)
Time: 19.51 seconds, Memory: 24.00MB
There was 1 failure:
1) Tests\Feature\TaskControllerTest::testGetNewTaskPath
Expected status code 200 but received 500.
Failed asserting that false is true.
/Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/framework/src/Illuminate/Foundation/Testing/TestResponse.php:78
/Users/[ユーザ名]/task-manager/task-manager/tests/Feature/TaskControllerTest.php:111
FAILURES!
Tests: 12, Assertions: 26, Failures: 1.
おや、失敗してしまった。 こういう時は、ログファイルの確認だ。
storage/logs/laravel.logを見てみよう。
下記のようなログが残っているはずだ。
[2018-06-24 14:12:45] testing.ERROR: Action App\Http\Controllers\TaskController@create not defined. (View: /Users/[ユーザ名]/task-manager/task-manager/resources/views/tasks/new.blade.php) {"exception":"[object] (ErrorException(code: 0): Action App\\Http\\Controllers\\TaskController@create not defined. (View: /Users/[ユーザ名]/task-manager/task-manager/resources/views/tasks/new.blade.php) at /Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php:338, InvalidArgumentException(code: 0): Action App\\Http\\Controllers\\TaskController@create not defined. at /Users/[ユーザ名]/task-manager/task-manager/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php:338)
[stacktrace]
(略)
見辛いが、中身を読むとnew.blade.phpの中にあるTaskController@createが未定義ですよ、、、と書かれている。
これは、Formのactionで指定していたが、まだ存在しないルートを書いてしまうとエラーとなってしまうようだ。
ここは、先にルートだけ作っておこう。
routes/web.phpを下記のようになる。
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/tasks', 'TaskController@index');
Route::get('/tasks/{id}', 'TaskController@detail')->where('id', '[0-9]+');
Route::put('/tasks/{id}', 'TaskController@update')->where('id', '[0-9]+');
Route::get('/tasks/new', 'TaskController@new');
Route::post('/tasks', 'TaskController@create');
新規登録を行なうためのルートである、TaskController@createを追加した。
これでテストを再度実行してみよう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
............ 12 / 12 (100%)
Time: 18.38 seconds, Memory: 20.00MB
OK (12 tests, 26 assertions)
無事に成功した。 これで、安心してビューのテスト作成に専念できる。
ビューのテスト作成と実行
では、新規作成画面のビューのテストに入ろう。
いつも通り、artisanコマンドで作成しよう。
$ php artisan dusk:make TaskNewTest
Test created successfully.
ファイルができたら、tests/Browser/TaskNewTest.phpを下記のように実装しよう。
<?php
namespace Tests\Browser;
use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class TaskNewTest extends DuskTestCase
{
/**
* New Task Page Test.
*
* @return void
* @throws \Throwable
*/
public function testShowNew()
{
$this->browse(function (Browser $browser) {
$browser->visit('/tasks/new')
->assertSee('New Task');
});
}
}
新規作成ページにNew Taskが表示されているか、というテストだ。
これで実行してみよう。
$ vendor/bin/phpunit
PHPUnit 6.5.8 by Sebastian Bergmann and contributors.
............. 13 / 13 (100%)
Time: 21.74 seconds, Memory: 20.00MB
OK (13 tests, 27 assertions)
今回は追加で修正することなく、成功だ。
ここではビューのテストを作成する前に、コントローラーやルートの修正を行なっていた。
先にビューのテストを作成してテストを実行した場合、 ビューとコントローラーのテストの両方で失敗となり、 原因となる箇所がわかりにくくなるため、この順番で対応した。
問題が起きた場合には、「ここで問題が起きている」ということを明確にできるように、 手順を変えることも必要になる。 また、手順を入れ替えやすくするために、細かくチェックをしていく、ということも重要だ。