Wie kann ich testen, ob eine Vue-Komponente auf ein von $ root ausgegebenes Ereignis reagiert?

Question

Ich habe eine Komponente, die auf ein Ereignis wartet, das von der Vue $ -Root-Instanz ausgegeben wird.

export default { 
    data() { 
    return { 
     name: '' 
    } 

    }, 
    methods: { 
    openModal(name) { 
     this.name = name 
    } 
    }, 
    mounted() { 
    this.$root.$on('open-modal', name => { 
     this.openModal(name); 
    }); 
    } 
} 

Und ich habe einen anderen Ort der Code, wo ich dieses Ereignis aufrufen.

Wie kann ich einen Komponententest schreiben, der dieses Ereignis auf $ root aufruft und bestätigt, dass das Ereignis aufgerufen wurde? Ich verwende Vue Test Utils https://vue-test-utils.vuejs.org/en/ und kann keine Möglichkeit finden, das Ereignis aufzurufen.

Ich habe das versucht, aber es funktioniert nicht.

it('sets the modal name on the open-modal event',() => { 
    const wrapper = mount(Modal); 
    wrapper.vm.$root.$emit('open-modal', 'my-modal') 
    expect(wrapper.vm.$data.name).to.equal('my-modal'); 
    }); 

Answer 1

Ich habe herausgefunden, was falsch war. Ich habe das Ereignis korrekt ausgesendet. Das Problem war, dass meine Komponente VueRouter verwendet und $ router.push() in der openModal-Methode aufruft (ich habe das aus dem Codebeispiel weggelassen, um es kurz zu halten). Ich musste VueRouter in meinem Test stutzen und alles hat gut funktioniert. So sieht mein Test jetzt aus.

import { shallow, createLocalVue } from 'vue-test-utils'; 
import VueRouter from 'vue-router'; 
import Modal from '../cw-modal.vue'; 

const localVue = createLocalVue(); 
localVue.use(VueRouter); 


describe('cw-modal component',() => { 
    it('sets visible to true when the "open-modal" even is called with the modalName',() => { 
    const wrapper = shallow(Modal, { 
     propsData: { 
     cwModalName: 'my-modal' 
     }, 
     localVue, 
     router: new VueRouter() 
    }); 

    wrapper.vm.$root.$emit('open-modal', 'my-modal'); 
    expect(wrapper.vm.$data.visible).to.equal(true); 
    }); 
}