I'm developing a few browser tests using Laravel Dusk for my VueJs/Laravel Application. I'm trying to "check" a checkbox but I'm having issues. I managed to wait for its parent element to be visible, but when I check the checkbox and assert value to see if it's true, I get an error.
My test file
$this->browse(function ($browser) {
$browser->visit(route('login'))
->assertPathIs('/login')
->type('email', $this->user->email)
->type('password', 'password')
->press(trans('auth.login'))
->assertPathIs('/dashboard')
->visit(route('settings.edit', $this->customer->uuid))
->assertPathIs('/settings/edit/'.$this->customer->uuid)
->whenAvailable('@switch-input-tfa', function() use ($browser) {
$browser->check('switch-input')
->pause(2000)
//This fails
->assertInputValue('switch-input', true);
}, 4)
->press(trans('nav-side.logout'))
->assertPathIs('/login');
});
Vue JS File
<div class="flex">
<h3 class="flex-grow text-lg leading-6 font-medium text-gray-900 mb-2">
{{ __('settings.2fa_global') }}
</h3>
<switch-input
dusk="switch-input-tfa"
v-model="form.tfa_enabled"
@change="settingChanged($event,'tfa_enabled')"
show-icons
:inactive-value="false"
:active-value="true"
inactive-icon="times"
active-icon="check"
:show-on-right="false"
/>
</div>
Switch-input component
<div>
<input name="switch-input"
class="w-full h-full absolute inset-0 opacity-0"
type="checkbox"
@change="handleChange"
ref="input"
v-bind="$attrs"
:class="[$attrs.disabled ? '' : 'cursor-pointer']"
>
</div>
The error message
Expected value [1] for the [switch-input] input does not equal the actual value [on]. Failed asserting that 'on' matches expected true.
I also tried with the "uncheck" function ,but I still get the same error that actual value is ON