Unit testing and simulating input

dariosalvi

I have the same problem, but I am using Quasar v1.5 and Quasar testing tools.

So my problem is that I have a component with a q-input and I would like to change its value and see how that affects the rest of the component.

Simplifying a bit, I have a component with a q-input inside. It is filled in with a value that comes from the props of the containing component. Like:

<template>
<div>
  <q-input v-model="value" @input="update()"></q-input>
</div>
</template>

<script>
export default {
  name: 'QINPUTDEMO,
  props: [ 'value' ],
  methods: {
    update () {
      this.$emit('input', this.value)
    }
  }
}
</script>

So you use it like here:

<template>
 <p>An example using the q-input demo</p>
 <q-input-demo v-model="txt"/>
</template>

<script>
export default {
  data () {
    return {
      txt: 'test'
    }
  }
}
</script>

In my test, I would like to write into the q-input and verify that the text has changed correctly:

it('sets the translated texts', async () => {
  const qinput = wrapper.find(components.QInput)
  qinput.setValue('text 1')
})

When I call setValue() the testing framework says: " [vue-test-utils]: wrapper.setValue() cannot be called on this element".

Any idea about how to fix it?

dariosalvi

Hello, little update form my side:

I have found out how to set the new value inside inside the q-input: you need to find a regular input instead of a q-input instance:

it('sets a value correctly', async () => {
    const input = wrapper.find('input[type=text]')
    input.setValue('test 1')
    expect(wrapper.vm.value).toBe('test 1')
}

This actually sets the text inside the q-input and also trigger the input event. Problems: if the q-input manages a prop directly (as in the example above), the test will pass, but Vue will complain with a:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

To avoid this, I have tried using data inside the q-input v-model instead of props directly:

<template>
<div>
  <q-input  v-model="text" @input="update()"></q-input>
</div>
</template>

<script>
export default {
  name: 'QINPUT',
  props: [ 'value' ],
  data () {
    return {
      text: this.value
    }
  },
  methods: {
    update () {
      this.$emit('input', this.text)
    }
  }
}
</script>

Note that here v-model=“text” instead of value. The effect is that the warning disappears, but after calling setValue(), the change is not propagated to wrapper.vm.value, even if I use await wrapper.vm.$nextTick() and the test fails.

So I haven’t found a way to properly test components that modify an input. This is a pity because most of my components are actually editors of some type of information. This guide here doesn’t help either.

seanaye

@dariosalvi Have you found a solution to this? I’m getting started with quasar + jest and I am running into the same issue. I have a component which wraps a q-input. I would like to test that v-model on my custom component works correctly but when I change the value props there is no input event emitted. The component works as expected through manual testing so the problem must be with jest

tedchwang

Here’s what I’m doing, in essence, and it looks to work fine.

In the .vue file:

<q-input v-model="formDataEmail" name="email" ref="email" />

In the .spec.js file:

  it("accepts email input", async () => {
    const email = "a1@b2.cd";
    const emailInput = wrapper.find("input[name=email]");
    await emailInput.setValue(email);
    expect(wrapper.vm.formDataEmail).toBe(email);
  });

So, the above works fine and we can at least use the name attribute to do the selection unambiguously.

However, using findComponent() to get the input element does not work, although it’ll be nice if it does:

  it("accepts email input", async () => {
    const email = "a1@b2.cd";
    const emailInput = wrapper.findComponent({ ref: "email" });
    await emailInput.setValue(email);
    expect(wrapper.vm.formData.email).toBe(email);
  });

//gives: [vue-test-utils]: wrapper.setValue() cannot be called on this element

akira28

@tedchwang
can you help me?
using this way mine insists on this error:

thanks…

charlieknoll

I think you may need to put email in quotes:

"input[name='email']"

akira28

@charlieknoll

unfortunately it doesn’t work

akira28

This is my code

charlieknoll

Can you get a reference to the element running this in your console?

document.querySelector("input[name='email']")

akira28

@charlieknoll
So what is happening is that I can’t use the trigger, setValue on the Quasar components:

Apparently it can’t run because it’s a Quasar component, if I put a <button> it works.

No More Posting New Topics!

Unit testing and simulating input