последний тест не проходит:
/* eslint-disable */
import Vue from 'vue'
import CoolModal from 'components/ui/CoolModal'
const vm = new Vue({
template: `<div>
<CoolModal :disabled="disabled" v-if="show" @ok="isOK = true" @cancel="isCancel = true">
<h3 slot="header">Header text</h3>
<div>
Body text
</div>
<p slot="footer">Footer text</p>
</CoolModal>
</div>`,
data () {
return {
show: false,
disabled: false,
isOK: false,
isCancel: false,
nameOkButton: 'OK'
}
},
components: {
CoolModal
}
}).$mount()
const $element = selector => vm.$el.querySelector(selector)
vm.show = true
/* @test {CoolModal test} */
describe('CoolModal', () => {
/* @test {CoolModal header} */
it('Header text is correct', () => {
expect($element('.modal-header').textContent.trim()).toBe('Header text')
})
/* @test {CoolModal body} */
it('Body text is correct', () => {
expect($element('.modal-body').textContent.trim()).toBe('Body text')
})
/* @test {CoolModal footer} */
it('Footer message is correct', () => {
expect($element('.modal-footer').textContent.trim()).toBe('Footer text')
})
/* @test {CoolModal OK button click} */
it('OK button click is work', () => {
const oldIsOK = vm.isOK
$element('.modal-button--ok').click()
expect(vm.isOK).not.toBe(oldIsOK)
expect(vm.isOK).toBe(true)
})
/* @test {CoolModal Cancel button click} */
it('Cancel button click is work', () => {
const oldIsCancel = vm.isCancel
$element('.modal-button--cancel').click()
expect(vm.isCancel).not.toBe(oldIsCancel)
expect(vm.isCancel).toBe(true)
})
/* @test {CoolModal nameOkButton prop} */
it('nameOkButton prop change is correct', () => {
const oldText = $element('.modal-button--ok').textContent.trim()
vm.nameOkButton = 'OK Text'
expect($element('.modal-button--ok').textContent.trim()).toBe('OK Text')
})
})
Песочница для этого есть
Обсуждают сегодня