Search code examples
laravellaravel-duskalpine.js

Why won't Laravel Dusk test fire off x-on:change() or x-model when clicking a radio button


I have a form with two radio buttons in it, both of which have x-models and x-on:change functions. When running a dusk test, the radio button looks selected but the underlying functionality that should occur when the button is clicked does not occur.

I've tried click(), radio() and check() in the Dusk test.

The radio buttons:

                             <ul>
                                <li>
                                    <input wire:model.defer="qcResult"
                                           x-model="qcResult"
                                           x-on:change="toggleQcReasonSection()"
                                           dusk="qc-result-pass"
                                           id="qc-result-pass"
                                           type="radio"
                                           name="qc-result"
                                           value="Pass"
                                    >
                                    <label for="qc-result-pass"
                                           class="text-green-500 font-bold"
                                    >
                                        Pass
                                    </label>
                                </li>
                                <li>
                                    <input wire:model.defer="qcResult"
                                           x-model="qcResult"
                                           x-on:change="toggleQcReasonSection()"
                                           dusk="qc-result-fail"
                                           id="qc-result-fail"
                                           type="radio"
                                           name="qc-result"
                                           value="Fail"
                                    >
                                    <label for="qc-result-fail"
                                           class="text-red-500 font-bold"
                                    >
                                        Fail
                                    </label>
                                </li>
                            </ul>
    {
        // $result would be either fail or pass.
        $browser->radio('@qc-result-' .  $result, ucfirst($result));
    }

Solution

  • It turns out having the x-data in the middle of the page was the issue. Ended up moving the x-data to the very first div on the page and that fixed it. What is really annoying is that everything worked fine locally and on our test server, when we deployed to prod it acted the same as in the test, like Alpine didn't even load. Once we moved the x-data to the top of the page it worked like magic.