[Bug]: Browser testing - wire:model.live.debounce

[SimonBroekaert]

What Happened

I don't know if this issue is due to Livewire behaviour or due to a bug in the browser testing or both...

Adding debounce to a wire:model makes it so that the field is not filled in when the submit button is pressed. If I use ->debug(), I can see the username being filled. If I do ->wait(5)->debug(), the field is empty again.

...
<x-form.input
	autofocus
	autocomplete="username"
	type="text"
	id="username"
	name="username"
	wire:model.live.debounce="form.username"
/>
...

test('a guest can register with valid credentials', function (): void {
        $country = Country::factory()
            ->create()
            ->refresh();

        $user = User::factory()
            ->usingDefaultLocale()
            ->make();

        /** @var TestCase $this */
        $this->visit
            ->type('username', $user->username)
            ->type('display-name', $user->display_name)
            ->type('email', $user->email)
            ->type('password', Config::string('fake.user_password'))
            ->select('locale', Locale::default()->value)
            ->select('country', $country->id)
            ->press('@register')
            ->assertPathIs('/email/verify');

        /** @var TestCase $this */
        $this->assertAuthenticated('web');
    });

This will throw a validation error that the username is a required field.

if we remove the debounce:

...
<x-form.input
	autofocus
	autocomplete="username"
	type="text"
	id="username"
	name="username"
	wire:model.live="form.username"
/>
...

The form will submit successfully.

I don't really know why the debounce breaks this test?

Thanks in advance.

How to Reproduce

• Create a Livewire component with a form that contains at least one required input field and a submit button
• Create a pest browser test that fills in the field and presses the submit button
• Check that the test succeeds
• Replace wire:model= with wire:model.live=
• Check that the test succeeds
• Replace wire:model.live= with wire:model.live.debounce=
• Check that the test fails

Sample Repository

No response

Pest Version

4.1.2

PHP Version

8.4

Operation System

macOS

Notes

No response

[SimonBroekaert]

Ok so I found out that the test works if we add the debounce time as wait time.

If we have:

wire:model.live.debounce.500ms="form.username"

We should:

$this->visit
    ->type('username', $user->username)
    ->wait(0.5)
    ->type('email', $user->email)
    ->type('password', Config::string('fake.user_password'))
    ->select('locale', Locale::default()->value)
    ->select('country', $country->id)
    ->press('@register')
    ->assertPathIs('/email/verify');

I don't know if this can be automatically done or fixed in some way?

Or maybe it could be added as information in the Livewire docs (cc: @calebporzio )