Exploring ways to effectively test the bootstrap vue modal display function. On the project page, the modal toggles its visibility using the toggleModal method triggered by a button click. The modal's display style is switched between 'none' and '' accordingly. However, during testing with Karma, although the data change is detected, the style property remains unchanged leading to a failed test case.
vm.$nextTick(() => {
expect(modal.style.display).toBe('')
})
How can I successfully test the display of the bootstrap-vue modal?
index.vue
<div id="example">
<button @click="toggleModal">Show</button>
<b-modal v-model="show" centered size="lg" title="確認">
<h1>Modal Test</h1>
<button @click="toggleModal">Hide</button>
</b-modal>
</div>
var vm = new Vue({
el: '#example',
data: {
show: false,
},
methods: {
toggleModal: function () {
this.show = !this.show
}
}
})
index.spec.js
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
import Vue from 'vue'
import Index from '~/components/index'
// Mock our router, store and nuxt-link
import Vuex from 'vuex'
// import NuxtLink from '~/.nuxt/components/nuxt-link'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)
Vue.use(Vuex)
describe('/components/index.vue', () => {
let vm
beforeEach(() => {
const Constructor = Vue.extend(Index)
vm = new Constructor().$mount()
})
it('check modal method', () => {
const modal = vm.$el.querySelector('.modal')
expect(modal.style.display).toBe('none')
modal.toggleModal()
vm.$nextTick(() => {
expect(modal.style.display).toBe('') //expect to pass , but fail
})
})
})