Phpunit Laravel 测试通过 vuejs 填充下拉列表的表单答案

【问题标题】：Phpunit Laravel testing a form where dropdown is populated via vuejsPhpunit Laravel 测试通过 vuejs 填充下拉列表的表单
【发布时间】：2016-07-07 02:59:18
【问题描述】：

我正在为表单编写一个小测试，运行 phpunit 时出现错误。它卡住了，因为它在由 vuejs 填充的名为organisation 的下拉框中之一看不到任何选项。有问题的下拉列表填充了页面首次加载时加载的 json 值列表，并由表单中的第一个下拉列表进一步过滤，即academic_certificate。

这是我的视图/刀片文件和下拉列表：

<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>

这是我的测试：

/** @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');
}

在运行测试时：

$ 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

任何帮助都将不胜感激，我正在努力掌握测试并且不想被困在这里！谢谢。

编辑

我意识到我在标记中缺少 value 属性：

<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>

我现在已经添加了，但同样的问题仍然存在。

【问题讨论】：

我认为 Laravel 的表单填写测试无法与 Vue 一起使用。 Laravel 不会执行 JavaScript 或任何东西。
@ceejayoz 好的，谢谢。我可以通过以下方式解决它：symfony.com/doc/current/components/… 吗？
没有。您需要使用像 mochajs.org 这样的前端测试框架来测试 Vue 方面。
在这种情况下，我并没有真正尝试测试 vuejs。我想在提交后测试表单和以下操作。我想我应该为此使用 phpunit？
如您所见，事情没那么简单。 Laravel 的 select 测试助手不会执行 JavaScript 来构建可能的选项列表，并且总是会失败。由于类似的原因，其他事情也会失败。在许多情况下，Vue 会以 Laravel 甚至看不到的方式构建页面/表单的实际 HTML。

标签： php laravel phpunit vue.js

【解决方案1】：

您开头的<option value="">Select</option> 代码行有一个空值。我有几乎同样的问题。给你的价值一个价值，它可能会解决它。

【讨论】：