README

为 Laravel Dusk 添加与 Livewire 一起工作的功能。

警告

此包仍在开发中。它尚未准备好用于生产，API 可能会随时更改。

提供的宏

以下示例测试了 NameComponent Livewire 组件。

waitUntilLivewireCommitSucceeds

确定 Livewire 是否完成了请求周期可能很棘手。您可以使用 $browser->pause(...)，但这并不太可靠。

waitUntilLivewireCommitSucceeds 方法等待 Livewire 为指定的方法（和可选参数）完成请求周期。

$browser->type('@name-input', 'John Doe')
    ->click('@split-button-debounced')
    ->waitUntilLivewireCommitSucceeds('splitNameParts', ['John Doe'])
    ->assertSeeIn('@first-name', 'John');

如果调用没有参数，或者参数不同，则上述调用不会匹配请求。如果您不关心参数，可以省略它们。

$browser->type('@name-input', 'John Doe')
    ->click('@split-button-debounced')
    ->waitUntilLivewireCommitSucceeds('splitNameParts')
    ->assertSeeIn('@first-name', 'John');

waitUntilLivewireCommitFails

waitUntilLivewireCommitSucceeds 的相反操作。

$browser->type('@name-input', 'John Doe')
    ->click('@button-to-404-debounced')
    ->waitUntilLivewireCommitFails('throws404')
    ->assertSeeIn('@first-name', 'empty');

clickAndWaitUntilLivewireCommitSucceeds

此操作将 waitUntilLivewireCommitSucceeds 设置为监听 Livewire 请求周期并点击元素。

$parameters = ['John Doe']; // Optional, leave this out if you don't have parameters or wish to match any parameters

$browser->type('@name-input', 'John Doe')
    ->clickAndWaitUntilLivewireCommitSucceeds('@split-button-debounced', 'splitNameParts', $parameters)
    ->assertSeeIn('@first-name', 'John');

waitUntilLivewireUpdateSucceeds

确定 Livewire 是否完成了围绕属性更新的请求周期可能很棘手。您可以使用 $browser->pause(...)，但这并不太可靠。

waitUntilLivewireUpdateSucceeds 方法等待 Livewire 为指定的属性键完成请求周期。

$browser->type('@age-input', '42')
    ->click('@split-button-debounced')
    ->waitUntilLivewireUpdateSucceeds(['age'])
    ->assertSeeIn('@age', '42');

或多个属性

$browser->type('@age-input', '42')
    ->type('@job-input', 'Plumber')
    ->click('@split-button-debounced')
    ->waitUntilLivewireUpdateSucceeds(['age', 'job'])
    ->assertSeeIn('@age', '42')
    ->assertSeeIn('@job', 'Plumber');

在此最后一个示例中，浏览器将等待一个更新周期完成，其中 age 和 job 这两个 Livewire 属性都被更新。如果这些属性被延迟（默认情况下），则 Livewire 将等待请求。在上面的示例中，它们被延迟到点击 @split-button-debounced。

正则表达式匹配

您可以在 waitUntilLivewireUpdateSucceeds 中使用正则表达式匹配，只需在属性键前面加上 / 并在后面加上 /。

$browser->type('@hobby-name-2', 'Gaming Professionally')
    ->click('@split-button-debounced')
    ->waitUntilLivewireUpdateSucceeds(['/hobbies\.[^\.]+\.name/'])
    ->assertValue('@hobby-name-2', 'Gaming Professionally');

waitUntilLivewireUpdateFails

waitUntilLivewireUpdateSucceeds 的相反操作。

$browser->type('@age-input', '42')
    ->click('@button-to-404-debounced')
    ->waitUntilLivewireUpdateFails(['age'])
    ->assertSeeIn('@age', '-1');

clickAndWaitUntilLivewireUpdateSucceeds

此操作将 waitUntilLivewireUpdateSucceeds 设置为监听 Livewire 请求周期并点击元素。

$browser->type('@age-input', '42')
    ->clickAndWaitUntilLivewireUpdateSucceeds('@split-button-debounced', ['age'])
    ->assertSeeIn('@age', '42');

action 参数

有时一系列操作可能触发得太快，以至于您无法监听 Livewire 提交

// ! This test fails sometimes when the button is kinda slow. In that case the waitUntilLivewireCommitSucceeds is in time (but that's not reliable).
$browser->type('@name-input', 'John Doe')
    ->click('@split-button')
    // *🚀 hyperfast split-button somehow already completed a full commit here*
    ->waitUntilLivewireCommitSucceeds('splitNameParts', ['John Doe']) // test fails here due to timeout
    ->assertSeeIn('@first-name', 'John');

因为 waitUntilLivewireCommitSucceeds 设置了监听器，它将错过在设置之前发生的提交。然后，测试将因超时异常而失败。

在这种情况下，您将确保在操作开始之前设置监听器。这样我们就不错过提交。为了重申，我们想要

1. 设置 Livewire 提交的监听器
2. 点击按钮，该按钮触发 Livewire 提交
3. 等待监听器被 Livewire 提交（成功或失败）触发
4. 断言，因为我们知道 Livewire 提交已完成

您可以通过提供闭包（我们称之为操作）来确保上述序列，该闭包将在设置监听器后执行。以下函数支持此功能

• waitUntilLivewireCommitSucceeds
• waitUntilLivewireCommitFails
• waitUntilLivewireUpdateSucceeds
• waitUntilLivewireUpdateFails

以下是一个示例，展示如何使用此 action 参数与 waitUntilLivewireCommitSucceeds。

$browser->type('@name-input', 'John Doe')
    ->waitUntilLivewireCommitSucceeds(
        'splitNameParts',
        ['John Doe'],
        action: function () use ($browser) {
            $browser->click('@split-button');
        }
    )
    ->assertSeeIn('@first-name', 'John');

在内部，clickAndWaitUntilLivewireCommitSucceeds 和 clickAndWaitUntilLivewireUpdateSucceeds 函数使用 action 参数在浏览器上调用 click。因此，上述示例可以通过使用这些函数中的任何一个来简化。

注意

上述所有示例均来自测试。如果您想查看更多围绕示例的代码，请查看这些测试。

要生成示例，请运行 composer compile-readme。这是通过luttje/php-example-tester完成的。

安装

您可以通过 composer 安装此包

composer require luttje/livewire-gloom

用法

创建一个新的 Dusk 测试用例，并使用上述描述的宏

class ExampleTest extends BrowserTestCase
{
    public function testExample(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/example')
                ->type('@name-input', 'John Doe')
                ->clickAndWaitUntilLivewireCommitSucceeds('@split-button', 'splitNameParts', ['John Doe'])
                ->assertSeeIn('@first-name', 'John');
        });
    }
}

测试

请确保您已通过运行以下命令安装了 Dusk Chrome 驱动程序：

./vendor/bin/dusk-updater detect --auto-update

然后运行测试：

composer test

许可证

MIT 许可证（MIT）。有关更多信息，请参阅许可证文件。

e (MIT)。有关更多信息，请参阅许可证文件。