wip TDD、tailwindcss, @errorの書き方

wip: work in progress

refactoring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public function test_an_author_can_be_created(){
 
        $this->post('/authors', $this->data());
        $author = Author::all();
 
        $this->assertCount(1, $author);
        $this->assertInstanceOf(Carbon::class, $author->first()->dob);
        $this->assertEquals('1988/14/05', $author->first()->dob->format('Y/d/m'));
    }
 
    private function data(){
        return [
            'name' => 'Author Name',
            'dob' => '05/14/1988'
        ];
    }

$ phpunit –filter test_an_author_can_be_created

1
2
3
4
5
6
7
8
9
10
11
12
public function test_a_name_is_required(){
        $response = $this->post('/authors', array_merge($this->data(), ['name' => '']));
 
        $response->assertSessionHasErrors('name');
 
    }
 
    public function test_a_dob_is_required(){
        $response = $this->post('/authors', array_merge($this->data(), ['dob' => '']));
        $response->assertSessionHasErrors('dob');
 
    }

controller

1
2
3
4
5
6
7
8
9
10
11
12
public function store(){
        $data = $this->validateData();
 
        Author::create($data);
    }
 
    protected function validateData(){
        return request()->vadidate([
            'name' => 'required',
            'dob'=> '',
        ]);
    }

### tailwindcss
$ php artisan help preset
$ php artisan preset none
$ php artisan preset vue

$ npm install

https://tailwindcss.com/
$ npm install tailwindcss –save-dev

app.scss

1
2
3
4
5
@tailwind base;
 
@tailwind components;
 
@tailwind utilities;

$ npx tailwind init

webpack.mix.js

1
2
3
4
5
6
7
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./.config.js') ],
  });

$ npm install webpack

$ npm run dev

authors/create.blade.php

1
2
3
4
5
6
7
@extends('layouts.app')
 
@section('content')
    <dvi class="bg-gray-300 h-screen">
        asdfg
    </dvi>
@endsection

web.php

1
Route::get('/authors/create', 'AuthorsController@create');

create.blade.php
test

1
2
3
4
5
6
7
@extends('layouts.app')
 
@section('content')
    <div class="w-2/3 bg-gray-200 mx-auto">
        asdfg
    </div>
@stop

### @errorの
styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="w-2/3 bg-gray-200 mx-auto p-6 shadow">
        <form action="/authors" method="post" class="flex flex-col items-center">
            @csrf
        <h1>Add New Author</h1>
        <div class="pt-4">
            <input type="text" name="name" placeholder="Full Name" class="rounded px-4 py-2 w-64">
            @if{{$errors->has('dob')}}
                <p class="text-red-600">{{$errors->first('name')}}</p>
            @endif
        </div>
        <div class="pt-4">
            <input type="text" name="dob" placeholder="Date of Birth" class="rounded px-4 py-2 w-64">
            @if{{$errors->has('dob')}}
                <p class="text-red-600">{{$errors->first('dob')}}</p>
            @endif
        </div>
        <div class="pt-4">
            <button class="bg-blue-400 text-white rounded py-2 px-4">Add New Author</button>
        </div>
        </form>
    </div>
1
@error('name') <p class="text-red-600">{{$message}}</p> @enderror

tailwindはモダンな感じがする
しかし、6系になってフロント周りを中心に随分仕様が変わってます。