I'm writing a small test for a form and I'm getting errors when running phpunit. It gets stuck because it can't see any options in one of the dropdown boxes named organisation
which is populated by vuejs. The dropdown in question is populated with a list of json values loaded when the page first loads up and is further filtered by the first dropdown list in the form, namely academic_certificate
.
Here's my view/blade file with the dropdown:
<select name="organisation" id="" class="form-control" {{-- required="required" --}} v-model="organisation">
<option value="">Select</option>
<option v-for="organisation in organisations | filterBy application_type in 'organisation_types'">
@{{ organisation.name }}
</option>
</select>
Here's my test:
/** @test */
public function verified_user_can_create_academic_certificate_application()
{
$faker = Faker::create();
$user = factory(App\Models\User::class)->create();
$applicant = Role::where('name', 'applicant')->firstOrFail();
$user->roles()->attach($applicant->id);
$this->actingAs($user)
->visit('/applicant/application/create')
->select('academic_certificate', 'application_type')
->type($faker->firstNameMale, 'first_names')
->type($faker->lastName, 'last_name')
// fill out rest of form ...
/****************************************
here's where it gets an error!
****************************************/
->select('Some organisation', 'organisation')
->select('1', 'qualification')
->type('IT', 'speciality')
->type('2002', 'year_of_award')
->press('Submit')
->see('complete');
}
On running the test:
$ vendor/bin/phpunit
PHPUnit 4.8.23 by Sebastian Bergmann and contributors.
E.FF
Time: 7.15 seconds, Memory: 37.00Mb
There was 1 error:
1) ApplicationTest::verified_user_can_create_academic_certificate_application
InvalidArgumentException: Input "organisation" cannot take "Some organisation" as a value (possible values: ,
{{ organisation.name }}
).
C:\wamp\www\attestation\vendor\symfony\dom-crawler\Field\ChoiceFormField.php:140
C:\wamp\www\attestation\vendor\symfony\dom-crawler\FormFieldRegistry.php:128
C:\wamp\www\attestation\vendor\symfony\dom-crawler\Form.php:77
C:\wamp\www\attestation\vendor\laravel\framework\src\Illuminate\Foundation\Testing\Concerns\InteractsWithPages.php:808
C:\wamp\www\attestation\vendor\laravel\framework\src\Illuminate\Foundation\Testing\Concerns\InteractsWithPages.php:788
C:\wamp\www\attestation\vendor\laravel\framework\src\Illuminate\Foundation\Testing\Concerns\InteractsWithPages.php:775
C:\wamp\www\attestation\tests\acceptance\applicant\ApplicationTest.php:55
Any help would be really appreciated, I'm trying to get to grips with testing and would hate to get stuck here! Thank you.
Edit
I realised that I was missing the value attribute in the markup:
<select name="organisation" id="" class="form-control" {{-- required="required" --}} v-model="organisation">
<option value="">Select</option>
<option
v-for="organisation in organisations | filterBy application_type in 'organisation_types'"
value="@{{ organisation.id }}"
>
@{{ organisation.name }}
</option>
</select>
I've added it now, but the same problem still exists.
select
test helper won't execute the JavaScript to build the list of possible options, and is always going to fail. Other things are going to fail for similar reasons. In many cases, Vue will build the actual HTML of the page/form in a way Laravel can't even see. – ceejayoz Mar 21 at 13:17