Building Advance Blog on Laravel 5.5 with TDD mode #3 Post has comment

in previously episode we see how to set up PHPUnit and test blog homepage can access and single post can read from guest

in this episode, we need to show comment for a single post

first, we keep BDD user story in mind and follow this context

// Given a Post

// and Post have comments

// then I visit single post page

// I’ve to see the comment

Create Test

open PostTest and create new test name test_guest_can_see_comment_when_visit_single_post()

then grab user story before and paste

public function test_guest_can_see_comment_when_visit_single_post(){
        // Given a Post
        // and Post have comments
        // then I visit single post page
        // I’ve see the comment
    }

and we fill code follow

public function test_guest_can_see_comment_when_visit_single_post(){
        // Given a Post
        $post = factory('App\Post')->create();
        // and Post have comments
        $comment = factory('App\Comment')
                    ->create(['post_id'=>$post->id]);
        // then I visit single post page
        $response = $this->get('blog/'.$post->id);
        // I’ve see the comment
        $response->assertSee($comment->body);
    }

that should fail

Ok when we completely create spec then let fill out the blank.

don’t think complicated we need to

• update view for display comment
• create relationship between Post and Comment

Display Comment

goto show.blade.php grab HTML code display post and paste below that

we create comment section

<div class="row">
        <div class="col-md-8 col-md-offset-2">
           @foreach($post->comment as $comment)
            <div class="panel panel-default">
                <div class="panel-heading"></div>

<div class="panel-body">
                   <article>
                       <div class="body">{{ $comment->body }}</div>
                   </article>
                   </div>
            </div>˛
            @endforeach
        </div>
    </div>

we loop $post->comment for get Comment object and display comment body

try to test

should fail again because we doesn’t create relationship between model

open Post model and create comment function for relationship to comment model

class Post extends Model
{
    public function comment(){
        return $this->hasMany(Comment::class);
    }
}

then still test

yeah got green work

and look in browser again

wonderful we accomplish objective

Bonus section

but comment doesn’t show all necessary data eg.( owner ,created date)

add created_at

next we add comment create date

<div class="panel-heading">{{ $comment->created_at }}</div>

add to

save and refresh a browser

I’ve modify date format with diffForHumans()

{{ $comment->created_at->diffForHumans() }}

and refresh

look much better

Display comment creator

now we need to display comment creator this we gonna use test for make sure that comment has creator use php artisan make:test CommentTest --unit

use unit because this test in small scale not use other class

file should appears in test/unit

open this and fill test function and keep user story in mind

public function test_comment_should_has_creator()
 {
 // Giving comment object
 // should include User object 
 }

then fill in blank

public function test_comment_should_has_creator()
 {
 // Giving comment object
 $comment = factory(‘App\Comment’)->create();
 // should include User object 
 $this->assertInstanceOf(‘App\User’,$comment->creator); // I expect creator function has User instance
 }

and begin test

Hmm , not user table but we have already that

that error came from we doesn’t use RefreshDatabase trait

https://medium.com/media/12da67cf2fc20cef27527fbbe25e9bcb/href

try test again

OK, error this make sense.We don’t make a relation to User model

goto app/comment.php fill this function

public function creator(){
        return $this->BelongsTo(User::class,'user_id');
    }

like that

save and test

ok, got green it’s pass.

now we can display comment creator in a single post

I’ve to fill

{{ $comment->creator->name }} comment since

and try test first this should fail

save and go to browser

it’s work

Recap

this post we seen how to add comment to post with TDD way and add some feature for make comment look nice

if you like this please give me 50 claps and hit follow that encouragement to move forward

this project Github commit and you can star it