diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue index a3840f9c..77f60a5d 100644 --- a/src/views/Widgets.vue +++ b/src/views/Widgets.vue @@ -2,86 +2,94 @@
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -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' - } - } } diff --git a/src/views/widgets/Widget01.vue b/src/views/widgets/Widget01.vue index 8f571c14..0d78eb9f 100644 --- a/src/views/widgets/Widget01.vue +++ b/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, diff --git a/src/views/widgets/Widget02.vue b/src/views/widgets/Widget02.vue index 07c6fb3d..feb74f6d 100644 --- a/src/views/widgets/Widget02.vue +++ b/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, diff --git a/src/views/widgets/Widget03.vue b/src/views/widgets/Widget03.vue index a11a1310..f8ee91a7 100644 --- a/src/views/widgets/Widget03.vue +++ b/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' }, } } diff --git a/src/views/widgets/Widget04.vue b/src/views/widgets/Widget04.vue index f884067f..4450faac 100644 --- a/src/views/widgets/Widget04.vue +++ b/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' }, } } diff --git a/src/views/widgets/Widget05.vue b/src/views/widgets/Widget05.vue index 79101794..2314703d 100644 --- a/src/views/widgets/Widget05.vue +++ b/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, diff --git a/tests/unit/.template.spec.js b/tests/unit/.template.spec.js new file mode 100644 index 00000000..5f06b021 --- /dev/null +++ b/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') + }) +}) diff --git a/tests/unit/Widgets.spec.js b/tests/unit/Widgets.spec.js deleted file mode 100644 index 27fe9e32..00000000 --- a/tests/unit/Widgets.spec.js +++ /dev/null @@ -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) - }) -}) diff --git a/tests/unit/widgets/Widget01.spec.js b/tests/unit/widgets/Widget01.spec.js new file mode 100644 index 00000000..9b9a98ed --- /dev/null +++ b/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') + }) +}) diff --git a/tests/unit/widgets/Widget02.spec.js b/tests/unit/widgets/Widget02.spec.js new file mode 100644 index 00000000..d3ab4551 --- /dev/null +++ b/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) + }) +}) diff --git a/tests/unit/widgets/Widget03.spec.js b/tests/unit/widgets/Widget03.spec.js new file mode 100644 index 00000000..5dc049b6 --- /dev/null +++ b/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') + }) +}) diff --git a/tests/unit/widgets/Widget04.spec.js b/tests/unit/widgets/Widget04.spec.js new file mode 100644 index 00000000..8391af7b --- /dev/null +++ b/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') + }) +}) diff --git a/tests/unit/widgets/Widget05.spec.js b/tests/unit/widgets/Widget05.spec.js new file mode 100644 index 00000000..8249d9b1 --- /dev/null +++ b/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') + }) +}) diff --git a/tests/unit/widgets/Widgets.spec.js b/tests/unit/widgets/Widgets.spec.js new file mode 100644 index 00000000..418dc2a2 --- /dev/null +++ b/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) + }) +})