sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

added unit tests to widgets

Browse Source
This commit is contained in:
woothu
2018-10-09 13:33:43 +02:00
parent b318110c7d
commit 4741d4231a
14 changed files with 233 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Widgets.vue
+33 -30
View File
@@ -2,86 +2,94 @@
<div class="animated fadeIn">
<b-row>
<b-col sm="6" lg="3">
<widget01 header="89.9%" variant="success"/>
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="success" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="12.124" variant="info"/>
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="$98.111,00" variant="warning"/>
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="2 TB" variant="danger"/>
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" lg="3">
<widget01 header="89.9%" variant="background-success"/>
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="background-success" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="12.124" variant="background-info"/>
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="background-info" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="$98.111,00" variant="background-warning"/>
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="background-warning" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<widget01 header="2 TB" variant="background-danger"/>
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="background-danger" :value="25"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" :showLink="true"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" :showLink="true"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" :showLink="true"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" :showLink="true"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger px-5"/>
</b-col>
</b-row><!--/.row-->
<b-row>
@@ -160,7 +168,7 @@ import Widget04 from './widgets/Widget04'
import Widget05 from './widgets/Widget05'
export default {
name: 'widgets',
name: 'Widgets',
components: {
Widget01,
Widget02,
@@ -168,10 +176,5 @@ export default {
Widget04,
Widget05
},
data () {
return {
msg: 'Widgets'
}
}
}
</script>
src/views/widgets/Widget01.vue
+3 -3
View File
@@ -26,11 +26,11 @@ export default {
props: {
header: {
type: String,
default: 'Lorem ipsum...'
default: 'header|string'
},
text: {
type: String,
default: 'Lorem ipsum...'
default: 'text|string'
},
variant: {
type: String,
@@ -38,7 +38,7 @@ export default {
},
footer: {
type: String,
default: 'Lorem ipsum dolor sit amet enim.'
default: 'footer|string'
},
value: {
type: Number,
src/views/widgets/Widget02.vue
+2 -2
View File
@@ -21,11 +21,11 @@ export default {
},
header: {
type: String,
default: 'Lorem ipsum...'
default: 'header|string'
},
text: {
type: String,
default: 'Income'
default: 'text|string'
},
showLink: {
type: Boolean,
src/views/widgets/Widget03.vue
+2 -2
View File
@@ -18,11 +18,11 @@ export default {
},
header: {
type: String,
default: 'Lorem ipsum...'
default: 'header|string'
},
text: {
type: String,
default: 'Income'
default: 'text|string'
},
}
}
src/views/widgets/Widget04.vue
+4 -4
View File
@@ -39,19 +39,19 @@ export default {
},
rightHeader: {
type: String,
default: '89k'
default: 'rightHeader|string'
},
rightFooter: {
type: String,
default: 'friends'
default: 'rightFooter|string'
},
leftHeader: {
type: String,
default: '459'
default: 'leftHeader|string'
},
leftFooter: {
type: String,
default: 'feeds'
default: 'leftFooter|string'
},
}
}
src/views/widgets/Widget05.vue
+2 -2
View File
@@ -32,11 +32,11 @@ export default {
},
header: {
type: String,
default: 'Lorem ipsum...'
default: 'header|string'
},
text: {
type: String,
default: 'Lorem ipsum...'
default: 'text|string'
},
variant: {
type: String,
tests/unit/.template.spec.js
+21
View File
@@ -0,0 +1,21 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/PATH'
Vue.use(BootstrapVue)
const ComponentName = 'COMPONENT_NAME'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('has a created hook', () => {
expect(typeof Component.data).toMatch('function')
})
})
tests/unit/Widgets.spec.js
-28
View File
@@ -1,28 +0,0 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Widgets from '@/views/Widgets'
Vue.use(BootstrapVue)
describe('Widgets.vue', () => {
it('has a name', () => {
expect(Widgets.name).toMatch('widgets')
})
it('has a created hook', () => {
expect(typeof Widgets.data).toMatch('function')
})
it('sets the correct default data', () => {
expect(typeof Widgets.data).toMatch('function')
const defaultData = Widgets.data()
expect(defaultData.msg).toMatch('Widgets')
})
it('is Vue instance', () => {
const wrapper = shallowMount(Widgets)
expect(wrapper.isVueInstance()).toBe(true)
})
it('is Widgets', () => {
const wrapper = shallowMount(Widgets)
expect(wrapper.is(Widgets)).toBe(true)
})
})
tests/unit/widgets/Widget01.spec.js
+37
View File
@@ -0,0 +1,37 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/widgets/Widget01'
Vue.use(BootstrapVue)
const ComponentName = 'Widget01'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('has a created hook', () => {
expect(typeof Component.data).toMatch('function')
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('correctly sets default props and data when created', () => {
const vm = new Vue(Component).$mount()
expect(vm.backgroundColor).toBe('')
expect(vm.styleClasses).toBe('')
expect(vm.header).toBe('header|string')
expect(vm.text).toBe('text|string')
expect(vm.variant).toBe('')
expect(vm.footer).toBe('footer|string')
expect(vm.value == 25).toBe(true)
})
it('correctly sets variant when background is not white', () => {
const Constructor = Vue.extend(Component)
const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
expect(vm.backgroundColor).toBe('success')
expect(vm.styleClasses).toBe('text-white bg-success')
})
})
tests/unit/widgets/Widget02.spec.js
+26
View File
@@ -0,0 +1,26 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/widgets/Widget02'
Vue.use(BootstrapVue)
const ComponentName = 'Widget02'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('correctly sets default props when created', () => {
const vm = new Vue(Component).$mount()
expect(vm.header).toBe('header|string')
expect(vm.text).toBe('text|string')
expect(vm.link).toBe('#')
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
expect(vm.showLink).toBe(false)
})
})
tests/unit/widgets/Widget03.spec.js
+24
View File
@@ -0,0 +1,24 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/widgets/Widget03'
Vue.use(BootstrapVue)
const ComponentName = 'Widget03'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('correctly sets default props when created', () => {
const vm = new Vue(Component).$mount()
expect(vm.header).toBe('header|string')
expect(vm.text).toBe('text|string')
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
})
})
tests/unit/widgets/Widget04.spec.js
+25
View File
@@ -0,0 +1,25 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/widgets/Widget04'
Vue.use(BootstrapVue)
const ComponentName = 'Widget04'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('correctly sets default props and data when created', () => {
const vm = new Vue(Component).$mount()
expect(vm.rightHeader).toBe('rightHeader|string')
expect(vm.rightFooter).toBe('rightFooter|string')
expect(vm.leftHeader).toBe('leftHeader|string')
expect(vm.leftFooter).toBe('leftFooter|string')
})
})
tests/unit/widgets/Widget05.spec.js
+36
View File
@@ -0,0 +1,36 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/widgets/Widget05'
Vue.use(BootstrapVue)
const ComponentName = 'Widget05'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('has a created hook', () => {
expect(typeof Component.data).toMatch('function')
})
it('correctly sets default props and data when created', () => {
const vm = new Vue(Component).$mount()
expect(vm.backgroundColor).toBe('')
expect(vm.styleClasses).toBe('')
expect(vm.header).toBe('header|string')
expect(vm.text).toBe('text|string')
expect(vm.variant).toBe('')
expect(vm.value == 25).toBe(true)
})
it('correctly sets variant when background is not white', () => {
const Constructor = Vue.extend(Component)
const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
expect(vm.backgroundColor).toBe('success')
expect(vm.styleClasses).toBe('text-white bg-success')
})
})
tests/unit/widgets/Widgets.spec.js
+18
View File
@@ -0,0 +1,18 @@
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/Widgets'
Vue.use(BootstrapVue)
const ComponentName = 'Widgets'
const wrapper = shallowMount(Component)
describe(ComponentName + '.vue', () => {
it('has a name', () => {
expect(Component.name).toMatch(ComponentName)
})
it('is Vue instance', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
})