Я хочу протестировать модальное отображение bootstrap vue. На странице проекта модальная функция show/hide методом toggleModal при нажатии кнопки. Так что модальный стиль display
изменяется на none or ''
наоборот. В тесте karma я хочу проверить этот дисплей с помощью метода, но его измененные данные и свойство стиля не меняются, поэтому я потерпел неудачу в тестовом случае...
vm. $ nextTick (() => {
ожидать (modal.style.display).toBe( '')
})
Как я могу корректно проверить тестовый файл bootstrap-vue?
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
})
})
})
it('check modal method', () => {
const fm = new Vue(Index).$mount()
const modal = fm.$el.querySelector('.modal')
expect(modal.style.display).toBe('none')
modal.toggleModal()
fm.$nextTick(() => {
expect(modal.style.display).toBe('')
})
})
Откройте консоль вашего браузера, затем проверьте style.display
для Bootstrap-Vue Modal, значение равно none, когда hide(), значение является блочным! Важно, когда show().
поэтому измените expect(modal.style.display).toBe('')
expect(modal.style.display).toBe('block !important')
или же
Я не знаю Карму, возможно, существует одно использование, например expect(modal.style.display).toBe((item)=>{return item!=='none'})