I am looking at testing some Vue.js components, as part of a Laravel application. So, I have a component that is used in a blade template and makes a GET request during the mounted lifecycle hook. Say this request takes 800 ms. Is it possible to use phpunit in this situation- to check the resulting HTML after said request?
I tried using sleep(1) (yes, probably a horrible idea), to give the request time to finish up (not 100% on this methodology), but the expected text was not available on the page after this brief sleep.
Here is what I am hoping to do:
$this->actingAs($user)
->visit('/teams/' . $team->slug . '/players'); // request is made when this route is hit.
$this->see('There are currently no players for this team.')
->see('There are currently no temporary players for this team.');
The see() calls resulted in error- the HTML was not present. I also checked- through the HTML output by phpunit on error, and all that is available in the HTML is what is inside of the blade template- the Vue component is not rendered at the point in which the see() call is made.
I suppose I am after some advice or direction.
I appreciate that this may not be what you're after or even compatible based on the version of Laravel you're using but have you heard about Laravel Dusk in the latest version (5.4).
https://laravel.com/docs/5.4/dusk