Open riencoertjens opened 1 year ago
So when I run your test the generated DOM is this:
<input type="checkbox" class="..." />
There is no click
listener on the input
hence nothing is happening.... I think this may be an expectation misalignment.
Normally where you have <button on:click="...">
in a test, you can't just click on it, because the DOM element is not attached to a root document. So if you do buttonElement.click()
it will not do anything because there is no document that contains the qwikloader
to process the click event. To work around this problem, we provide a userEvent
which emulates how qwikloader
works, by walking the dom tree and looking for the on:click
attribute and processing the QRL attached there. The userEvent
does not actually fire a real DOM event, it only triggers the Qwik's event handler attributes.
In your case, the <input type="checkbox" />
has no on:click
events; hence there is no action. It seems like what you are looking for is to fire an actual browser click
event so that the default browser checkbox can flip state. As of right now, this is not the purpose of userEvent
I am not sure what the right solution is so I would like to start a discussion. Here are the potential outcomes.
userEvent
to not only process the on:event
attributes but also fire the actually event so that it can be closer to the expected behavior. Would love to hear your thoughts.
if the behaviour of userEvent
is not changed I would at least rethink the naming, when do something as a user I don't about whether it should be a qwik event or browser event.
That being said, I expected solution no. 2 to be the case.
it seems they had a similar discussion in the testing-library
lib repo, there they have fireEvent
which does the same as the qwik userEvent
.
Out of that discussion came testing-library/user-event which implements userEvent how I was expecting it to work, having used testing library in the past that's probably why I was expecting it in the first place
I see, so your suggestion is that we should incorporate https://github.com/testing-library/user-event into userEvent
and simulate both.... That does seem reasonable...
Any chance you could take that on as a PR?
Which component is affected?
Qwik Rollup / Vite plugin
Describe the bug
I'm trying to trigger a click on a checkbox in a vitest using
userEvent
doesn't change thechecked
value of a checkboxreplacing
userEvent(selector, 'click')
withscreen.querySelector(selector).click()
works as expectedReproduction
https://github.com/riencoertjens/qwik-vitest/blob/main/src/components/example/checkbox.test.tsx#L22
Steps to reproduce
npm install
+npm run test.unit
on reproduction repo shows the passing and failing testsSystem Info
Additional Information
No response