New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Form submit event is not triggered when Submit Button gets clicked #1030
Comments
I'm having the same issue, but I'm using bootstrapvue buttons and AVA within a nuxtjs project. If I find the form and trigger submit, my function will be called. If I trigger click on the button, it will not be called. It definitely works either way within browsers, just the test fails for button click. |
I did some research on this issue. It seems that But it dispatches a HTML submit event when a submit button click happens. See jsdom/jsdom#123 (comment) for details. I tried calling the click function on the HTMLButtonElement directly. This still wont work.
|
The issue is because Vue Test Utils doesn't add mounted DOM nodes to the document. You can fix this by setting it('button click triggers submit event', () => {
const wrapper = shallowMount(Form, {
attachToDocument: true
})
wrapper.find("[type='submit']").trigger('click')
assert.exists(
wrapper.emitted('submitEventTriggered'),
'Form submit not triggered'
)
}) In the future we might consider attaching to the document by default, to avoid issues like this. Although we would then need to run a cleanUp function at the end of each test. |
I'm still getting the same issue - if i trigger submit on the form directly, it works, but triggering click doesn't. There's one difference: i'm using Vuetify framework, so the button is not native HTML, but rather component. |
I had the same experience as @andreixk above with Vuetify. Form submit buttons do not behave properly in the vue-test-util wrapper object. The submit button never calls the form submit event. I am using @submit.prevent on the form, which never gets called. So this does not work...
But this does work...
However, this is a bug because it does not allow us to test the functionality of Submit buttons to ensure they work now and in the future. |
After reading through here a few more times, it looks like attachToDocument: true solves the problem. That one is really hard to understand. I have no idea what could be meant by saying that we would need to clean up after each test. Is this safe to do or not? Do I need to run a bunch of clean up code now that I turned on attachToDocument? Any insight is appreciated. |
According to the documentation you just need to call |
Perhaps we just mean calling destroy... https://vue-test-utils.vuejs.org/api/options.html#attachtodocument |
The solution to me was to used mount() instead of shallowMount and set attachToDocument: true. |
Version
1.0.0-beta.25
Reproduction link
https://github.com/marvinrabe/vue-test-util-form-submit-issue
Steps to reproduce
How to reproduce it manually:
When using the minimal reproduction:
yarn install
yarn test:unit
What is expected?
Test succeeds.
What is actually happening?
It fails with this error message:
When triggering the
submit.prevent
event directly on the form everything works fine.But then there is actually no test coverage for the submitting via button. Nothing prevents me to change
type="submit"
totype="button"
.The text was updated successfully, but these errors were encountered: