The Wayback Machine - https://web.archive.org/web/20201212162944/https://github.com/vuejs/vue-test-utils/issues/1732
Skip to content
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

Textarea set to blank doesn't execute bound watcher #1732

Open
jandroalvarez opened this issue Nov 12, 2020 · 8 comments
Open

Textarea set to blank doesn't execute bound watcher #1732

jandroalvarez opened this issue Nov 12, 2020 · 8 comments

Comments

@jandroalvarez
Copy link

@jandroalvarez jandroalvarez commented Nov 12, 2020

In a test, I'm trying to set the value of a textarea to blank.
The textarea is bound to the model using v-model.lazy. with a data() property which is linked to a watcher.
If I change the textarea value using setValue() the watcher is executed and the test works fine.
However, if I do setValue('') the watcher is never executed.

Code:

<template>
   <textarea id="labeling-text" v-model.lazy="myProperty"></textarea>
</template>

<script>
watch: {
    myProperty() {
      this.$emit('myEvent', this.myProperty)
    }
  }
</script>

// Test
 it('Raises an event when textarea changes', done => {
    const wrapper = mount(MyComponent)
    wrapper.find('#labeling-text').setValue('')
    wrapper.vm.$nextTick(() => {
      expect(wrapper.emitted()['myEvent']).toBeTruthy()
      done()
    })
  })
})

Expected behavior:
The watcher raised the event.

Current behavior
The watcher is not executed so the event is not raied.

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Nov 12, 2020

Seems to be expected as the .lazy modifier only updates myProperty on the change event, but setting the value of the textarea like that is like typing in it and therefore triggers an input event (which the non-lazy v-model would listen for).

Try calling blur() on the element after setting the value, that should trigger the change event.

@jandroalvarez
Copy link
Author

@jandroalvarez jandroalvarez commented Nov 12, 2020

Hi @LinusBorg

Thank you for your quick reply. I had already tried you proposal and it doesn't work. Same result. The watched property is not executed.
I've even tried to remove .lazy modifier but the result is the same.

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Nov 12, 2020

I think this is just jest succing at simulating the change event.

Try https://vue-test-utils.vuejs.org/api/wrapper/#trigger

@jandroalvarez
Copy link
Author

@jandroalvarez jandroalvarez commented Nov 16, 2020

I didn't clarify it in my previous post.
I tried using trigger('blur') and it didn't work out.

@lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Nov 20, 2020

We actually cover this case explicitly by checking for lazy and doing change:

if (this.element._vModifiers && this.element._vModifiers.lazy) {
@lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Nov 20, 2020

Did you forget to declare myProperty in your real code, or just your repro?

Anyway, this is working fine for me (including setValue('')). Does this help?

Component:

<template>
  <div>
    <textarea id="labeling-text" v-model.lazy="myProperty"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myProperty: 'ok'
    }
  },
  watch: {
    myProperty() {
      this.$emit('myEvent', this.myProperty)
    }
  }
}
</script>

Test:

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

it('Raises an event when textarea changes', async () => {
  const wrapper = mount(HelloWorld)
  const $ta = wrapper.find('#labeling-text')
  await $ta.setValue('OK!!!')
  console.log(wrapper.emitted('myEvent')) // => [ [ 'OK!!!' ] ]
})
@jandroalvarez
Copy link
Author

@jandroalvarez jandroalvarez commented Nov 21, 2020

I just forgot to include the property in the repro. Sorry!
What version of vuejs are you using right now?

@lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Nov 22, 2020

I just created a new project using the Vue CLI and chose 2.x when I was trying to reproduce this issue. Should be using the latest version of 2.x.

If you are using Vue 3, you will need v2 of this library (which you can get with yarn add @vue/test-utils@next, or creating a new project with the Vue CLI).

Are you still having this problem? The code above was working for me. Maybe you can post a repository with the bug so I can reproduce it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.