Как написать тест-кейс для начальной загрузки? - PullRequest
Новая
       18

Как написать тест-кейс для начальной загрузки?

0 голосов
/ 27 апреля 2018

Я хочу проверить модальное отображение начальной загрузки. На странице проекта, модальное это показать / скрыть методом toggleModal при нажатии кнопки. Таким образом, модальный стиль display изменяется на none or '' наоборот. В тесте кармы я хочу протестировать это отображение с вызванным методом, но только его измененные данные и свойство style не изменяется, поэтому я потерпел неудачу в тестовом примере ...

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
     })
  })
})

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018 
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('')
 })
})
0 голосов
/ 27 апреля 2018

Откройте консоль браузера, затем отметьте style.display для модального Bootstrap-Vue, значение равно нет при скрытии (), значение равно блок! Важно при показе ( ).

, поэтому измените expect(modal.style.display).toBe('') на expect(modal.style.display).toBe('block !important')

или

Я не знаю Карма , возможно, существует одно использование, подобное expect(modal.style.display).toBe((item)=>{return item!=='none'})

...