dimanche 8 mars 2020

How to test input in Vue test utils

Hi I have input where I type text and after clicking run button text shows in another div with an id output, I,m trying to test that behavior but after Vue.nextTick nothing change can someone help me ??

I understand that this code is useless its just simulation of a bigger project

// .vue file
<template>
  <div>
    <input type="text" v-model="text" id="input" />
    <button @click="run" id="run" ref="run">Run</button>
    <button @click="reset" id="reset" ref="reset">reset</button>
    <div ref="output" id="output"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: ""
    };
  },
  methods: {
    run() {
      let output = document.getElementById("output");
      output.innerHTML = this.text;
    },
    reset() {
      let output = document.getElementById("output");
      this.text = "";
      output.innerHTML = "";
    }
  }
};
</script>

<style>
#output {
  width: 100px;
  background-color: black;
  color: white;
}
</style>


// .test 

import App from '../src/test.vue'
import { mount } from '@vue/test-utils'
import Vue from 'vue'

test('isWorking', async () => {
    const wrapper = mount(App)
    wrapper.setData({ text: 'hello' })
    let output = wrapper.find({ ref: 'output' })
    let run = wrapper.find({ ref: 'run' })
    run.trigger('click')
    await Vue.nextTick()
    expect(output.text()).toContain('hello')
})

Aucun commentaire:

Enregistrer un commentaire