Laravel Dusk - Check box not clicking

569 views Asked by At

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

0

There are 0 answers