Add tests for overlay.vue

This commit is contained in:
Phan An 2018-01-01 22:38:56 +01:00
parent 1851869ab5
commit 52c4393f02
2 changed files with 47 additions and 14 deletions

View file

@ -1,16 +1,16 @@
<template>
<div id="overlay" v-show="state.showing" class="overlay" :class="state.type">
<div id="overlay" v-if="state.showing" class="overlay" :class="state.type">
<div class="display">
<sound-bar v-show="state.type === 'loading'"/>
<sound-bar v-if="state.type === 'loading'"/>
<i class="fa fa-exclamation-circle" v-show="state.type === 'error'"/>
<i class="fa fa-exclamation-triangle" v-show="state.type === 'warning'"/>
<i class="fa fa-info-circle" v-show="state.type === 'info'"/>
<i class="fa fa-check-circle" v-show="state.type === 'success'"/>
<span v-html="state.message"/>
<span class="message" v-html="state.message"/>
</div>
<button v-show="state.dismissable" @click.prevent="state.showing = false">Close</button>
<button class="btn-dismiss" v-if="state.dismissable" @click.prevent="state.showing = false">Close</button>
</div>
</template>
@ -58,16 +58,6 @@ export default {
*/
hide () {
this.state.showing = false
},
/**
* Set the overlay to be dismissable (or not).
* A Close button will be shown/hidden correspondingly.
*
* @param {Boolean} dismissable
*/
setDimissable (dismissable = true) {
this.state.dismissable = dismissable
}
},

View file

@ -0,0 +1,43 @@
import Component from '@/components/shared/overlay.vue'
import SoundBar from '@/components/shared/sound-bar.vue'
describe('components/shared/overlay', () => {
it('shows with default options', async done => {
const wrapper = mount(Component)
await wrapper.vm.show()
wrapper.contains(SoundBar).should.be.true
wrapper.contains('button.btn-dismiss').should.be.false
done()
})
it('allows option overriding', async done => {
const wrapper = mount(Component)
await wrapper.vm.show({
dismissable: true,
type: 'warning',
message: 'Foo'
})
wrapper.contains(SoundBar).should.be.false
wrapper.contains('button.btn-dismiss').should.be.true
wrapper.find('span.message').html().should.contain('Foo')
done()
})
it('hides', async done => {
const wrapper = mount(Component)
await wrapper.vm.show()
wrapper.contains('.display').should.be.true
await wrapper.vm.hide()
wrapper.contains('.display').should.be.false
done()
})
it('dismisses', async done => {
const wrapper = mount(Component)
await wrapper.vm.show({ dismissable: true })
wrapper.contains('.display').should.be.true
wrapper.find('button.btn-dismiss').trigger('click')
wrapper.contains('.display').should.be.false
done()
})
})