Skip to content

Commit 4741d42

Browse files
woothuwoothu
committed
added unit tests to widgets
1 parent b318110 commit 4741d42

14 files changed

+233
-71
lines changed

‎src/views/Widgets.vue

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,94 @@
22
<div class="animated fadeIn">
33
<b-row>
44
<b-col sm="6" lg="3">
5-
<widget01 header="89.9%" variant="success"/>
5+
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
6+
variant="success" :value="25"/>
67
</b-col>
78
<b-col sm="6" lg="3">
8-
<widget01 header="12.124" variant="info"/>
9+
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
10+
variant="info" :value="25"/>
911
</b-col>
1012
<b-col sm="6" lg="3">
11-
<widget01 header="$98.111,00" variant="warning"/>
13+
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
14+
variant="warning" :value="25"/>
1215
</b-col>
1316
<b-col sm="6" lg="3">
14-
<widget01 header="2 TB" variant="danger"/>
17+
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
18+
variant="danger" :value="25"/>
1519
</b-col>
1620
</b-row><!--/.row-->
1721
<b-row>
1822
<b-col sm="6" lg="3">
19-
<widget01 header="89.9%" variant="background-success"/>
23+
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
24+
variant="background-success" :value="25"/>
2025
</b-col>
2126
<b-col sm="6" lg="3">
22-
<widget01 header="12.124" variant="background-info"/>
27+
<widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
28+
variant="background-info" :value="25"/>
2329
</b-col>
2430
<b-col sm="6" lg="3">
25-
<widget01 header="$98.111,00" variant="background-warning"/>
31+
<widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
32+
variant="background-warning" :value="25"/>
2633
</b-col>
2734
<b-col sm="6" lg="3">
28-
<widget01 header="2 TB" variant="background-danger"/>
35+
<widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
36+
variant="background-danger" :value="25"/>
2937
</b-col>
3038
</b-row><!--/.row-->
3139
<b-row>
3240
<b-col cols="12" sm="6" lg="3">
33-
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
41+
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
3442
</b-col>
3543
<b-col cols="12" sm="6" lg="3">
36-
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
44+
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
3745
</b-col>
3846
<b-col cols="12" sm="6" lg="3">
39-
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
47+
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
4048
</b-col>
4149
<b-col cols="12" sm="6" lg="3">
42-
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
50+
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
4351
</b-col>
4452
</b-row><!--/.row-->
4553
<b-row>
4654
<b-col cols="12" sm="6" lg="3">
47-
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
55+
<widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" :showLink="true"/>
4856
</b-col>
4957
<b-col cols="12" sm="6" lg="3">
50-
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
58+
<widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" :showLink="true"/>
5159
</b-col>
5260
<b-col cols="12" sm="6" lg="3">
53-
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
61+
<widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" :showLink="true"/>
5462
</b-col>
5563
<b-col cols="12" sm="6" lg="3">
56-
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
64+
<widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" :showLink="true"/>
5765
</b-col>
5866
</b-row><!--/.row-->
5967
<b-row>
6068
<b-col cols="12" sm="6" lg="3">
61-
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
69+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
6270
</b-col>
6371
<b-col cols="12" sm="6" lg="3">
64-
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
72+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
6573
</b-col>
6674
<b-col cols="12" sm="6" lg="3">
67-
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
75+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
6876
</b-col>
6977
<b-col cols="12" sm="6" lg="3">
70-
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
78+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
7179
</b-col>
7280
</b-row><!--/.row-->
7381
<b-row>
7482
<b-col cols="12" sm="6" lg="3">
75-
<widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
83+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
7684
</b-col>
7785
<b-col cols="12" sm="6" lg="3">
78-
<widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
86+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
7987
</b-col>
8088
<b-col cols="12" sm="6" lg="3">
81-
<widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
89+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
8290
</b-col>
8391
<b-col cols="12" sm="6" lg="3">
84-
<widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
92+
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger px-5"/>
8593
</b-col>
8694
</b-row><!--/.row-->
8795
<b-row>
@@ -160,18 +168,13 @@ import Widget04 from './widgets/Widget04'
160168
import Widget05 from './widgets/Widget05'
161169
162170
export default {
163-
name: 'widgets',
171+
name: 'Widgets',
164172
components: {
165173
Widget01,
166174
Widget02,
167175
Widget03,
168176
Widget04,
169177
Widget05
170178
},
171-
data () {
172-
return {
173-
msg: 'Widgets'
174-
}
175-
}
176179
}
177180
</script>

‎src/views/widgets/Widget01.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,19 @@ export default {
2626
props: {
2727
header: {
2828
type: String,
29-
default: 'Lorem ipsum...'
29+
default: 'header|string'
3030
},
3131
text: {
3232
type: String,
33-
default: 'Lorem ipsum...'
33+
default: 'text|string'
3434
},
3535
variant: {
3636
type: String,
3737
default: ''
3838
},
3939
footer: {
4040
type: String,
41-
default: 'Lorem ipsum dolor sit amet enim.'
41+
default: 'footer|string'
4242
},
4343
value: {
4444
type: Number,

‎src/views/widgets/Widget02.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ export default {
2121
},
2222
header: {
2323
type: String,
24-
default: 'Lorem ipsum...'
24+
default: 'header|string'
2525
},
2626
text: {
2727
type: String,
28-
default: 'Income'
28+
default: 'text|string'
2929
},
3030
showLink: {
3131
type: Boolean,

‎src/views/widgets/Widget03.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export default {
1818
},
1919
header: {
2020
type: String,
21-
default: 'Lorem ipsum...'
21+
default: 'header|string'
2222
},
2323
text: {
2424
type: String,
25-
default: 'Income'
25+
default: 'text|string'
2626
},
2727
}
2828
}

‎src/views/widgets/Widget04.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,19 @@ export default {
3939
},
4040
rightHeader: {
4141
type: String,
42-
default: '89k'
42+
default: 'rightHeader|string'
4343
},
4444
rightFooter: {
4545
type: String,
46-
default: 'friends'
46+
default: 'rightFooter|string'
4747
},
4848
leftHeader: {
4949
type: String,
50-
default: '459'
50+
default: 'leftHeader|string'
5151
},
5252
leftFooter: {
5353
type: String,
54-
default: 'feeds'
54+
default: 'leftFooter|string'
5555
},
5656
}
5757
}

‎src/views/widgets/Widget05.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ export default {
3232
},
3333
header: {
3434
type: String,
35-
default: 'Lorem ipsum...'
35+
default: 'header|string'
3636
},
3737
text: {
3838
type: String,
39-
default: 'Lorem ipsum...'
39+
default: 'text|string'
4040
},
4141
variant: {
4242
type: String,

‎tests/unit/.template.spec.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Vue from 'vue'
2+
import { shallowMount } from '@vue/test-utils'
3+
import BootstrapVue from 'bootstrap-vue'
4+
import Component from '@/views/PATH'
5+
6+
Vue.use(BootstrapVue)
7+
8+
const ComponentName = 'COMPONENT_NAME'
9+
const wrapper = shallowMount(Component)
10+
11+
describe(ComponentName + '.vue', () => {
12+
it('has a name', () => {
13+
expect(Component.name).toMatch(ComponentName)
14+
})
15+
it('is Vue instance', () => {
16+
expect(wrapper.isVueInstance()).toBe(true)
17+
})
18+
it('has a created hook', () => {
19+
expect(typeof Component.data).toMatch('function')
20+
})
21+
})

‎tests/unit/Widgets.spec.js

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎tests/unit/widgets/Widget01.spec.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Vue from 'vue'
2+
import { shallowMount } from '@vue/test-utils'
3+
import BootstrapVue from 'bootstrap-vue'
4+
import Component from '@/views/widgets/Widget01'
5+
6+
Vue.use(BootstrapVue)
7+
8+
const ComponentName = 'Widget01'
9+
const wrapper = shallowMount(Component)
10+
11+
describe(ComponentName + '.vue', () => {
12+
it('has a name', () => {
13+
expect(Component.name).toMatch(ComponentName)
14+
})
15+
it('has a created hook', () => {
16+
expect(typeof Component.data).toMatch('function')
17+
})
18+
it('is Vue instance', () => {
19+
expect(wrapper.isVueInstance()).toBe(true)
20+
})
21+
it('correctly sets default props and data when created', () => {
22+
const vm = new Vue(Component).$mount()
23+
expect(vm.backgroundColor).toBe('')
24+
expect(vm.styleClasses).toBe('')
25+
expect(vm.header).toBe('header|string')
26+
expect(vm.text).toBe('text|string')
27+
expect(vm.variant).toBe('')
28+
expect(vm.footer).toBe('footer|string')
29+
expect(vm.value == 25).toBe(true)
30+
})
31+
it('correctly sets variant when background is not white', () => {
32+
const Constructor = Vue.extend(Component)
33+
const vm = new Constructor({ propsData: {variant : 'background-success'}}).$mount()
34+
expect(vm.backgroundColor).toBe('success')
35+
expect(vm.styleClasses).toBe('text-white bg-success')
36+
})
37+
})

‎tests/unit/widgets/Widget02.spec.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Vue from 'vue'
2+
import { shallowMount } from '@vue/test-utils'
3+
import BootstrapVue from 'bootstrap-vue'
4+
import Component from '@/views/widgets/Widget02'
5+
6+
Vue.use(BootstrapVue)
7+
8+
const ComponentName = 'Widget02'
9+
const wrapper = shallowMount(Component)
10+
11+
describe(ComponentName + '.vue', () => {
12+
it('has a name', () => {
13+
expect(Component.name).toMatch(ComponentName)
14+
})
15+
it('is Vue instance', () => {
16+
expect(wrapper.isVueInstance()).toBe(true)
17+
})
18+
it('correctly sets default props when created', () => {
19+
const vm = new Vue(Component).$mount()
20+
expect(vm.header).toBe('header|string')
21+
expect(vm.text).toBe('text|string')
22+
expect(vm.link).toBe('#')
23+
expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
24+
expect(vm.showLink).toBe(false)
25+
})
26+
})

0 commit comments

Comments
 (0)