Laravel 5.5 & Vue.js Blade Testing

Question

I have the following in my blade...

<div>
  <contact-form></contact-form>
</div>

I want to test to ensure that the Vue.js component is always mounted in my tests...

public function testRoute()
{
    $this->visit('/');
    //stuck here
}

Basically I'mm looking forward to testing that the blade has <contact-form>. How should I proceed?

@MeeraTank am running feature tests not coding the actual features — Geoff
– Geoff, Commented Oct 4, 2018 at 12:52
@GEOFFREYMWANGI <contact-form></contact-form> doesn't seem like a valid html markup for me. So validating against it seems like bad practice. Proof me if I'm wrong.... — Bart
– Bart, Commented Oct 8, 2018 at 23:28
@Bart I believe the op is using a vue component. vuejs.org/v2/guide/components.html — Adam Rodriguez
– Adam Rodriguez, Commented Oct 8, 2018 at 23:39
@adam thanks for pointing that out. I'm not into Vue so much... But on the other hand, is Dusk capable of handling all the Vue markups? — Bart
– Bart, Commented Oct 8, 2018 at 23:49

Seva Kalashnikov · Accepted Answer · 2018-10-08 23:30:26Z

9

+25

Use assertSee

Assert that the given string is contained within the response

$this
    ->visit('/')
    ->assertSee('<contact-form>')
    ->assertSee('</contact-form>');

See more laravel 5.5 testing assertions here

Or if you want to get deeper into client side browser testing look at Laravel Dusk, it has assertSourceHas method.

edited Oct 8, 2018 at 23:30

answered Oct 8, 2018 at 23:22

Seva Kalashnikov

4,4322 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

online Thomas Over a year ago

+1 because assertSourceHas will look at the unrendered html. <contact-form> will no longer look like that after being rendered by Vue / react / angular / ... which is probably key in this question.

Adam Rodriguez · Accepted Answer · 2018-10-08 23:37:23Z

2

You can use the call or get method from MakesHttpRequests.php trait to inspect the text:

// this returns \Illuminate\Foundation\Testing\TestResponse
$response = $this->get('/');
// use the TestResponse api
$response->assertSee($value);

Github source code reference: https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/Concerns/MakesHttpRequests.php

https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/TestResponse.php

edited Oct 8, 2018 at 23:37

answered Oct 8, 2018 at 23:10

Adam Rodriguez

1,8561 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

Laravel 5.5 & Vue.js Blade Testing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related