added unit tests to widgets

src/views/Widgets.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)
+  })
+})