mirror of
https://github.com/koel/koel
synced 2025-02-16 13:28:32 +00:00
Add tests for overlay.vue
This commit is contained in:
parent
1851869ab5
commit
52c4393f02
2 changed files with 47 additions and 14 deletions
|
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
|
43
resources/assets/js/tests/components/shared/overlay.spec.js
Normal file
43
resources/assets/js/tests/components/shared/overlay.spec.js
Normal 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()
|
||||
})
|
||||
})
|
Loading…
Add table
Reference in a new issue