Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

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.

share|improve this question
1  
I don't think Laravel's form filling tests are going to work with Vue. Laravel's not going to execute the JavaScript or anything. – ceejayoz Mar 20 at 22:05
    
@ceejayoz Okay thanks. Can I get around it with something like this: symfony.com/doc/current/components/… ? – haakym Mar 21 at 8:17
    
No. You'd need to use a front-end testing framework like mochajs.org instead to test the Vue side of things. – ceejayoz Mar 21 at 12:52
    
I'm not really trying to test vuejs in this case. I want to test the form and the following actions after its submission. I'd like to think I should be using phpunit for that? – haakym Mar 21 at 13:12
    
As you're seeing, it's not that simple. Laravel's 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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.