I have been working on a Vue component that includes a transition with a dynamically generated name. My challenge is to test whether the transition name is correctly set based on the props I pass into the component. Below is the code snippet of the component.
<template>
<aside :class="['cw-vue-modal', modalSizeClass]" v-show="showModal && modalName === currentModalName">
<transition :name="`${effect}-${speed}`" :duration="500">
<div class="cw-vue-modal-wrap" v-show="showModal">
<div class="cw-vue-modal-body">
<header>
<h2 v-if="currentModalTitle">{{ currentModalTitle }}</h2>
<a href="#" class="cw-vue-modal-close" @click.prevent="closeModal"></a>
</header>
<article :class="['cw-vue-modal-content', {'cw-vue-modal-pad' : padContent}]">
<slot name="content"></slot>
</article>
</div>
</div>
</transition>
</aside>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'cw-modal',
props: {
modalName: {
required: true,
type: String
},
padContent: {
required: false,
type: Boolean
},
modalSize: {
required: false,
type: String
},
effect: {
required: false,
type: String
},
speed: {
required: false,
type: String,
default: 'normal'
},
maskLight: {
required: false,
type: Boolean
}
},
computed: {
...mapGetters(['showModal', 'currentModalName', 'currentModalTitle']),
modalSizeClass() {
if (this.modalSize === 'small') return 'cw-vue-modal-sm';
if (this.modalSize === 'large') return 'cw-vue-modal-lg';
return 'cw-vue-modal-md';
}
},
methods: {
...mapActions(['closeModal'])
}
};
</script>I am currently using mocha along with chai and the avoriaz library for writing unit tests. Below is one of my test scenarios.
it('ensures the slow sliding effect is applied', () => {
getters = {
showModal: () => true,
currentModalName: () => 'my-modal',
currentModalTitle: () => null
};
store = new Vuex.Store({getters});
const wrapper = mount(Modal, {
propsData: { modalName: 'my-modal', effect: 'slide', speed: 'slow' },
store,
attachToDocument: true
});
expect($('.cw-vue-modal-wrap')).to.have.class('slide-slow-enter-active');
});I am facing an issue where the expected class is not being added to the DOM as anticipated. Any assistance on this matter would be highly appreciated.
Thank you!