if "to" prop is available', () => {
20 | const wrapper = mount(VButton, {
21 | propsData: {
22 | to: '/home'
23 | },
24 | stubs: ['router-link']
25 | })
26 |
27 | expect(wrapper.contains('router-link-stub')).toBe(true)
28 | expect(wrapper.attributes().to).toBe('/home')
29 | })
30 |
31 | test('Renders the correct classes based on props passed', () => {
32 | const wrapper = mount(VButton, {
33 | propsData: {
34 | success: true,
35 | warning: true,
36 | error: true,
37 | disabled: true
38 | },
39 | stubs: ['router-link']
40 | })
41 |
42 | expect(wrapper.attributes().class).toContain('success')
43 | expect(wrapper.attributes().class).toContain('warning')
44 | expect(wrapper.attributes().class).toContain('error')
45 | expect(wrapper.attributes().class).toContain('disabled')
46 | })
47 |
48 | test('Renders slots', () => {
49 | const wrapper = mount(VButton, {
50 | slots: {
51 | default: 'Click here'
52 | }
53 | })
54 |
55 | expect(wrapper.text()).toContain('Click here')
56 | })
57 |
58 | test('Emits click event', () => {
59 | const wrapper = mount(VButton)
60 | wrapper.find('button').trigger('click')
61 | expect(wrapper.emitted().click).toBeTruthy()
62 | expect(wrapper.emitted().click.length).toBe(1)
63 | })
64 | })
65 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VButton/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
72 |
73 |
137 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VHamburger/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import { action } from '@storybook/addon-actions'
4 | import VHamburger from '.'
5 |
6 | const wrapper = {
7 | components: { VHamburger }
8 | }
9 |
10 | storiesOf('Atom - VHamburger', module)
11 | .addDecorator(withInfo)
12 | .add('default', () => ({
13 | ...wrapper,
14 | template: '',
15 | methods: {
16 | action: action('hamburger clicked')
17 | }
18 | }), { info: true })
19 | .add('open', () => ({
20 | ...wrapper,
21 | template: ''
22 | }), { info: true })
23 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VHamburger/index.test.js:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import Hamburger from '.'
3 |
4 | describe('Atom - Hamburger', () => {
5 | test('renders correctly with the right props', () => {
6 | const wrapper = shallowMount(Hamburger, {
7 | propsData: {
8 | isOpen: true
9 | }
10 | })
11 |
12 | expect(wrapper.attributes().class).toContain('open')
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VHeading/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VHeading from '.'
4 |
5 | const wrapper = {
6 | components: { VHeading }
7 | }
8 |
9 | storiesOf('Atom - VHeading', module)
10 | .addDecorator(withInfo)
11 | .add('level', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 | Heading 1
16 | Heading 2
17 | Heading 3
18 | Heading 4
19 |
20 | `
21 | }), { info: true })
22 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VHeading/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VHeading from '.'
3 |
4 | describe('Atom - VHeading', () => {
5 | test('Renders the correct tag', () => {
6 | const wrapper = mount(VHeading, {
7 | propsData: {
8 | level: 2
9 | }
10 | })
11 |
12 | expect(wrapper.contains('h2')).toBe(true)
13 | })
14 |
15 | test('Renders slots', () => {
16 | const wrapper = mount(VHeading, {
17 | propsData: {
18 | level: 1
19 | },
20 | slots: {
21 | default: 'VHeading title'
22 | }
23 | })
24 |
25 | expect(wrapper.text()).toBe('VHeading title')
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VHeading/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
34 |
53 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/chevron-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
43 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/credit-card-diners-club.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/credit-card-elo.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/credit-card-visa.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/icons/twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
56 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VIcon from '.'
4 |
5 | const wrapper = {
6 | components: { VIcon }
7 | }
8 |
9 | storiesOf('Atom - VIcon', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
16 |
17 |
18 | `
19 | }), { info: true })
20 | .add('color', () => ({
21 | ...wrapper,
22 | template: `
23 |
24 |
25 |
26 |
27 | `
28 | }), { info: true })
29 | .add('size', () => ({
30 | ...wrapper,
31 | template: `
32 |
33 |
34 |
35 |
36 |
37 | `
38 | }), { info: true })
39 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VIcon from '.'
3 |
4 | describe('Atom - VIcon', () => {
5 | test('Renders the correct classes based on props passed', () => {
6 | const wrapper = mount(VIcon, {
7 | propsData: {
8 | name: 'linkedin',
9 | size: 'large',
10 | color: 'red'
11 | }
12 | })
13 |
14 | expect(wrapper.attributes().class).toContain('large')
15 | expect(wrapper.attributes().class).toContain('red')
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 |
67 |
68 |
108 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VImage/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VImage from '.'
4 |
5 | const wrapper = {
6 | components: { VImage }
7 | }
8 |
9 | storiesOf('Atom - VImage', module)
10 | .addDecorator(withInfo)
11 | .add('local image', () => ({
12 | ...wrapper,
13 | template: `
14 |
18 | `
19 | }), { info: true })
20 | .add('url', () => ({
21 | ...wrapper,
22 | template: `
23 |
26 | `
27 | }), { info: true })
28 | .add('picture tag', () => ({
29 | ...wrapper,
30 | template: `
31 |
41 | `
42 | }), { info: true })
43 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VImage/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VImge from '.'
3 |
4 | describe('Atom - VImge', () => {
5 | test('Caclculate the src correctly', async () => {
6 | const wrapper = await mount(VImge, {
7 | propsData: {
8 | src: 'https://via.placeholder.com/350x150'
9 | }
10 | })
11 |
12 | expect(wrapper.find('img').attributes().src).toBe('https://via.placeholder.com/350x150')
13 | })
14 |
15 | test('renders a picture tag', async () => {
16 | const wrapper = await mount(VImge, {
17 | propsData: {
18 | picture: true,
19 | src: 'https://via.placeholder.com/800x800',
20 | sources: [
21 | {
22 | srcset: 'https://via.placeholder.com/300x300',
23 | media: '(max-width: 300px)'
24 | },
25 | {
26 | srcset: 'https://via.placeholder.com/600x600',
27 | media: '(max-width: 600px)'
28 | }
29 | ]
30 | }
31 | })
32 |
33 | let sources = wrapper.findAll('source')
34 |
35 | expect(wrapper.find('picture').exists()).toBe(true)
36 | expect(sources.length).toBe(2)
37 | expect(sources.at(0).attributes().media).toBe('(max-width: 300px)')
38 | expect(sources.at(0).attributes().srcset).toBe('https://via.placeholder.com/300x300')
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VImage/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
![]()
16 |
17 |
23 | ![]()
28 |
29 |
15 |
19 |
20 |
21 |
22 | Value is : "{{ selectedValue }}"
23 |
24 | `,
25 | data () {
26 | return {
27 | selectedValue: null
28 | }
29 | }
30 | }), { info: true })
31 | .add('multiple options', () => ({
32 | ...wrapper,
33 | template: `
34 |
35 |
39 |
40 |
44 |
45 |
49 |
50 |
51 |
52 | Value is : "{{ selectedValue }}"
53 |
54 | `,
55 | data () {
56 | return {
57 | selectedValue: ['option1', 'option3']
58 | }
59 | }
60 | }), { info: true })
61 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputCheckbox/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VInputCheckbox from '.'
3 |
4 | describe('Atom - VInputCheckbox', () => {
5 | test('Two way data binding', () => {
6 | const wrapper = mount(VInputCheckbox)
7 |
8 | wrapper.find('input').trigger('click')
9 |
10 | expect(wrapper.emitted().input).toBeTruthy()
11 | expect(wrapper.emitted().input[0][0]).toBe(true)
12 | })
13 |
14 | test('Has correct classes based on passed props', () => {
15 | const wrapper = mount(VInputCheckbox, {
16 | propsData: {
17 | checked: true,
18 | value: 'Option 2',
19 | disabled: true
20 | }
21 | })
22 |
23 | const input = wrapper.find('input')
24 | expect(input.attributes().value).toBe('Option 2')
25 | expect(input.attributes().disabled).toBe('disabled')
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputCreditCard/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VInputCreditCard from '.'
4 |
5 | const wrapper = {
6 | components: { VInputCreditCard }
7 | }
8 |
9 | storiesOf('Atom - VInputCreditCard', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
16 |
17 |
18 |
Value is: {{ creditCard }}
19 |
15 |
19 |
20 |
24 |
25 |
29 |
30 |
31 |
32 | Value is : "{{ selectedValue }}"
33 |
34 | `,
35 | data () {
36 | return {
37 | selectedValue: null
38 | }
39 | }
40 | }), { info: true })
41 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputRadio/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VInputRadio from '.'
3 |
4 | describe('Atom - VInputRadio', () => {
5 | test('Two way data binding', () => {
6 | const wrapper = mount(VInputRadio, {
7 | propsData: {
8 | value: 'Option 1'
9 | }
10 | })
11 |
12 | const input = wrapper.find('input')
13 | input.trigger('change', true)
14 | expect(wrapper.emitted().change).toBeTruthy()
15 | expect(wrapper.emitted().change[0][0]).toBe('Option 1')
16 | })
17 |
18 | test('Has correct classes based on passed props', () => {
19 | const wrapper = mount(VInputRadio, {
20 | propsData: {
21 | checked: true,
22 | required: true,
23 | value: 'Option 2',
24 | disabled: true
25 | }
26 | })
27 |
28 | const input = wrapper.find('input')
29 | expect(input.attributes().value).toBe('Option 2')
30 | expect(input.attributes().disabled).toBe('disabled')
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputRadio/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
78 |
79 |
118 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputTel/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VInputTel from '.'
4 |
5 | const wrapper = {
6 | components: { VInputTel }
7 | }
8 |
9 | storiesOf('Atom - VInputTel', module)
10 | .addDecorator(withInfo)
11 | .add('single', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
16 |
17 |
{{ phoneNumber }}
18 |
19 |
3 |
11 |
12 |
13 |
14 |
67 |
68 |
119 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputText/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VInputText from '.'
4 |
5 | const wrapper = {
6 | components: { VInputText }
7 | }
8 |
9 | storiesOf('Atom - VInputText', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
16 |
17 |
18 | Value is: {{ inputValue }}
19 |
20 | `,
21 | data () {
22 | return {
23 | inputValue: 'Default Value'
24 | }
25 | }
26 | }), { info: true })
27 | .add('type', () => ({
28 | ...wrapper,
29 | template: `
30 |
31 |
32 |
33 | `,
34 | data () {
35 | return {
36 | inputValue: ''
37 | }
38 | }
39 | }), { info: true })
40 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VInputText/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VInputText from '.'
3 |
4 | describe('Atom - VInputText', () => {
5 | test('Two way data binding', () => {
6 | const wrapper = mount(VInputText, {
7 | propsData: {
8 | type: 'text'
9 | }
10 | })
11 |
12 | // Trigger input
13 | const input = wrapper.find('input')
14 | input.element.value = 'Hello World'
15 | input.trigger('input')
16 |
17 | // Check emitted event
18 | const emittedInput = wrapper.emitted().input
19 | expect(emittedInput).toBeTruthy()
20 | expect(emittedInput[0][0]).toBe('Hello World')
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLabel/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VLabel from '.'
4 |
5 | const wrapper = {
6 | components: { VLabel }
7 | }
8 |
9 | storiesOf('Atom - VLabel', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 | Choose One of these options:
16 |
17 |
18 |
19 |
20 | Option 1
21 |
22 |
23 |
24 |
25 | Option 2
26 |
27 |
28 |
29 |
30 | Option 3
31 |
32 |
33 | `,
34 | data () {
35 | return {
36 | option: null
37 | }
38 | }
39 | }), { info: true })
40 | .add('htmlFor', () => ({
41 | ...wrapper,
42 | template: `
43 |
44 | Full Name
45 |
46 |
47 | `
48 | }), { info: true })
49 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLabel/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VLabel from '.'
3 |
4 | describe('Atom - VLabel', () => {
5 | test('Renders correctly', () => {
6 | const wrapper = mount(VLabel, {
7 | propsData: {
8 | htmlFor: 'text-input'
9 | },
10 | slots: {
11 | default: 'Full Name'
12 | }
13 | })
14 |
15 | const label = wrapper.find('label')
16 |
17 | expect(label.attributes().for).toBe('text-input')
18 | expect(label.text()).toBe('Full Name')
19 | })
20 |
21 | test('renders a * if the label is required', () => {
22 | const wrapper = mount(VLabel, {
23 | propsData: {
24 | required: true
25 | },
26 | slots: {
27 | default: 'Full Name'
28 | }
29 | })
30 |
31 | expect(wrapper.html()).toContain('* Full Name')
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLabel/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
24 |
25 |
41 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VList/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VList from '.'
4 |
5 | const wrapper = {
6 | components: { VList }
7 | }
8 |
9 | storiesOf('Atom - VList', module)
10 | .addDecorator(withInfo)
11 | .add('unorderd', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 | Item 1
16 | Item 2
17 | Item 3
18 |
19 | `
20 | }), { info: true })
21 | .add('ordered', () => ({
22 | ...wrapper,
23 | template: `
24 |
25 | Item 1
26 | Item 2
27 | Item 3
28 |
29 | `
30 | }), { info: true })
31 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VList/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VList from '.'
3 |
4 | describe('Atom - VList', () => {
5 | test('Renders correct tag', () => {
6 | const wrapper = mount(VList, {
7 | propsData: {
8 | ordered: true
9 | }
10 | })
11 |
12 | expect(wrapper.is('ol')).toBe(true)
13 | })
14 | test('Renders slots', () => {
15 | const wrapper = mount(VList, {
16 | propsData: {
17 | level: 1
18 | },
19 | slots: {
20 | default: `
21 | List Item 1
22 | List Item 2
23 | List Item 3
24 | `
25 | }
26 | })
27 |
28 | const li = wrapper.findAll('li')
29 |
30 | expect(li.length).toBe(3)
31 | expect(li.at(2).text()).toBe('List Item 3')
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VList/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
22 |
23 |
34 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLoader/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VLoader from '.'
4 |
5 | const wrapper = {
6 | components: { VLoader }
7 | }
8 |
9 | storiesOf('Atom - VLoader', module)
10 | .addDecorator(withInfo)
11 | .add('small', () => ({
12 | ...wrapper,
13 | template: ''
14 | }), { info: true })
15 | .add('medium', () => ({
16 | ...wrapper,
17 | template: ''
18 | }), { info: true })
19 | .add('large', () => ({
20 | ...wrapper,
21 | template: ''
22 | }), { info: true })
23 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLoader/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VLoader from '.'
3 |
4 | describe('Atom - VLoader', () => {
5 | test('Should render correctly', () => {
6 | const wrapper = mount(VLoader)
7 |
8 | expect(wrapper.exists()).toBe(true)
9 | expect(wrapper.attributes().class).toContain('loader')
10 | })
11 | })
12 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLoader/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
27 |
28 |
80 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VLogo/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
17 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VNavItem/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VNavItem from '.'
4 |
5 | const wrapper = {
6 | components: { VNavItem }
7 | }
8 |
9 | storiesOf('Atom - VNavItem', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: 'Sample Nav Item'
14 | }), { info: true })
15 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VNavItem/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VNavItem from '.'
3 |
4 | const wrapper = mount(VNavItem, {
5 | stubs: ['router-link']
6 | })
7 |
8 | describe('Atom - VNavItem', () => {
9 | test('renders correctly with the right props', () => {
10 | expect(wrapper.find('.v-a-nav-item').exists()).toBe(true)
11 | })
12 |
13 | test('click', () => {
14 | wrapper.trigger('click')
15 | expect(wrapper.emitted().click).toBeTruthy()
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VNavItem/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
25 |
26 |
45 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/graphics/bullet-list.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/graphics/card.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/graphics/image.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/graphics/text.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/graphics/yosushi-logo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
9 |
13 |
15 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VPlaceholder from '.'
4 |
5 | const wrapper = {
6 | components: { VPlaceholder }
7 | }
8 |
9 | storiesOf('Atom - VPlaceholder', module)
10 | .addDecorator(withInfo)
11 | .add('text', () => ({
12 | ...wrapper,
13 | template: ``
14 | }), { info: true })
15 | .add('line variations', () => ({
16 | ...wrapper,
17 | template: `
18 |
19 |
Heading Placeholder
20 |
21 |
22 |
23 |
Paragraph Placeholder
24 |
25 |
26 |
27 |
Paragraph Placeholder non-rounded corners
28 |
29 |
30 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | `
48 | }), { info: true })
49 | .add('image', () => ({
50 | ...wrapper,
51 | template: `
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | `
60 | }), { info: true })
61 | .add('mixed', () => ({
62 | ...wrapper,
63 | template: `
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | `
78 | }), { info: true })
79 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VPlaceholder/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VPlaceholder from '.'
3 |
4 | describe('Atom - VPlaceholder', () => {
5 | test('calculatas the correct viebox based on type', () => {
6 | const wrapper = mount(VPlaceholder, {
7 | propsData: {
8 | type: 'text',
9 | lines: 3
10 | }
11 | })
12 |
13 | expect(wrapper.find('svg').attributes().viewBox).toBe('0 0 400 60')
14 |
15 | wrapper.setProps({ lines: 4 })
16 |
17 | expect(wrapper.find('svg').attributes().viewBox).toBe('0 0 400 85')
18 | })
19 | })
20 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VSelect/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VSelect from '.'
4 |
5 | const wrapper = {
6 | components: { VSelect }
7 | }
8 |
9 | storiesOf('Atom - VSelect', module)
10 | .addDecorator(withInfo)
11 | .add('single', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
16 |
17 |
18 |
19 |
20 | Value is : "{{ selectedValue }}"
21 |
22 | `,
23 | data () {
24 | return {
25 | selectedValue: 'b',
26 | options: [
27 | {
28 | label: 'Option A',
29 | value: 'a'
30 | },
31 | {
32 | label: 'Option B',
33 | value: 'b'
34 | },
35 | {
36 | label: 'Option C',
37 | value: 'c'
38 | },
39 | {
40 | label: 'Option D',
41 | value: 'd',
42 | disabled: true
43 | }
44 | ]
45 | }
46 | }
47 | }), { info: true })
48 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VSelect/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VSelect from '.'
3 |
4 | describe('Atom - VSelect', () => {
5 | test('Renders the correct options', () => {
6 | const wrapper = mount(VSelect, {
7 | propsData: {
8 | options: [
9 | {
10 | label: 'Option 1',
11 | value: 'option1'
12 | },
13 | {
14 | label: 'Option 2',
15 | value: 'option2'
16 | }
17 | ]
18 | }
19 | })
20 |
21 | const selects = wrapper.findAll('option')
22 | expect(selects.length).toBe(3)
23 | expect(selects.at(1).text()).toBe('Option 1')
24 | expect(selects.at(1).attributes().value).toBe('option1')
25 | })
26 |
27 | test('Emits the change event', () => {
28 | const wrapper = mount(VSelect, {
29 | propsData: {
30 | options: [
31 | {
32 | label: 'Option 1',
33 | value: 'option1'
34 | }
35 | ]
36 | }
37 | })
38 |
39 | wrapper.find('select').trigger('change')
40 |
41 | expect(wrapper.emitted().change).toBeTruthy()
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
20 |
21 |
24 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VText/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VText from '.'
4 |
5 | const wrapper = {
6 | components: { VText }
7 | }
8 |
9 | storiesOf('Atom - VText', module)
10 | .addDecorator(withInfo)
11 | .add('size', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 | Sample text x-large
16 | Sample text large
17 | Sample text medium
18 | Sample text small
19 | Sample text x-small
20 |
21 | `
22 | }), { info: true })
23 | .add('weight', () => ({
24 | ...wrapper,
25 | template: 'Sample bold text'
26 | }), { info: true })
27 | .add('tag', () => ({
28 | ...wrapper,
29 | template: `Sample text with '<span>' tag`
30 | }), { info: true })
31 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VText/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VText from '.'
3 |
4 | describe('Atom - VText', () => {
5 | test('Renders tag and classes based on props passed', () => {
6 | const wrapper = mount(VText)
7 |
8 | // With default props
9 | expect(wrapper.is('p')).toBe(true)
10 |
11 | // With passed props
12 | wrapper.setProps({
13 | tag: 'span'
14 | })
15 |
16 | expect(wrapper.is('span')).toBe(true)
17 | })
18 |
19 | test('Renders slots', () => {
20 | const wrapper = mount(VText, {
21 | slots: {
22 | default: 'Text Sample'
23 | }
24 | })
25 |
26 | expect(wrapper.text()).toBe('Text Sample')
27 | })
28 | })
29 |
--------------------------------------------------------------------------------
/generator/template/src/components/atoms/VText/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
22 |
23 |
37 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/.gitkeep:
--------------------------------------------------------------------------------
1 | /* gitkeep */
2 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VAccordion/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VAccordion from '.'
4 |
5 | const wrapper = {
6 | components: { VAccordion }
7 | }
8 |
9 | const items = [
10 | {
11 | title: 'Title 1',
12 | content: 'Content 1'
13 | },
14 | {
15 | title: 'Title 2',
16 | content: 'Content 2'
17 | },
18 | {
19 | title: 'Title 3',
20 | content: 'Content 3'
21 | },
22 | {
23 | title: 'Title 5',
24 | content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
'
25 | }
26 | ]
27 |
28 | storiesOf('Molecule - VAccordion', module)
29 | .addDecorator(withInfo)
30 | .add('default', () => ({
31 | ...wrapper,
32 | template: ``,
33 | data () {
34 | return {
35 | items
36 | }
37 | }
38 | }), { info: true })
39 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VAccordion/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VAccordion from '.'
3 |
4 | describe('Molecule - VAccordion', () => {
5 | test('render the list correctly', () => {
6 | const wrapper = mount(VAccordion, {
7 | propsData: {
8 | items: [
9 | {
10 | title: 'Title 1',
11 | content: 'Content 1'
12 | },
13 | {
14 | title: 'Title 2',
15 | content: 'Content 2'
16 | },
17 | {
18 | title: 'Title 3',
19 | content: 'Content 3'
20 | },
21 | {
22 | title: 'Title 5',
23 | content: 'Content 3
'
24 | }
25 | ]
26 | }
27 | })
28 |
29 | let panels = wrapper.findAll({ name: 'VAccordionItem' })
30 | expect(panels.length).toBe(4)
31 | expect(panels.at(3).html()).toContain('Title 5')
32 | expect(panels.at(3).html()).toContain('Content 3
')
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VAccordion/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ item.title }}
5 |
6 |
7 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, eveniet!
18 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, eveniet!
19 |
20 |
21 | `
22 | }), { info: true })
23 | .add('isOpen', () => ({
24 | ...wrapper,
25 | template: `
26 |
27 | This is the expansion title
28 |
29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, eveniet!
30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, eveniet!
31 |
32 |
33 | `
34 | }), { info: true })
35 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VAccordionItem/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VAccordionItem from '.'
3 |
4 | describe('Molecule - VAccordionItem', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VAccordionItem, {
9 | slots: {
10 | title: 'Hello World',
11 | content: 'Panel Content
'
12 | }
13 | })
14 | })
15 |
16 | test('render the panel correctly', () => {
17 | expect(wrapper.find('.v-m-accordion-item__header').html()).toContain('Hello World')
18 | expect(wrapper.find('.v-m-accordion-item__content').html()).toContain('Panel Content
')
19 | })
20 |
21 | test('change initial state using the isOpen prop', () => {
22 | wrapper.setProps({ isOpen: true })
23 | expect(wrapper.attributes().class).toContain('is-expanded')
24 | })
25 |
26 | test('toggles the accordion when clicked', () => {
27 | wrapper.find('.v-m-accordion-item__header').trigger('click')
28 | expect(wrapper.attributes().class).toContain('is-expanded')
29 | })
30 | })
31 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VCarousel/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VCarousel from '.'
4 | import VCarouselSlide from '../VCarouselSlide'
5 |
6 | const wrapper = {
7 | components: { VCarousel, VCarouselSlide }
8 | }
9 |
10 | storiesOf('Molecule - VCarousel', module)
11 | .addDecorator(withInfo)
12 | .add('default', () => ({
13 | ...wrapper,
14 | template: `
15 |
16 |
17 | Slide 1
18 |
19 |
20 | Slide 2
21 |
22 |
23 | Slide 3
24 |
25 |
26 | `
27 | }), { info: true })
28 | .add('loop', () => ({
29 | ...wrapper,
30 | template: `
31 |
32 |
33 | Slide 1
34 |
35 |
36 | Slide 2
37 |
38 |
39 | Slide 3
40 |
41 |
42 | `
43 | }), { info: true })
44 | .add('no dotted navigation', () => ({
45 | ...wrapper,
46 | template: `
47 |
48 |
49 | Slide 1
50 |
51 |
52 | Slide 2
53 |
54 |
55 | Slide 3
56 |
57 |
58 | `
59 | }), { info: true })
60 | .add('no arrow navigation', () => ({
61 | ...wrapper,
62 | template: `
63 |
64 |
65 | Slide 1
66 |
67 |
68 | Slide 2
69 |
70 |
71 | Slide 3
72 |
73 |
74 | `
75 | }), { info: true })
76 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VCarousel/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VCarousel from '.'
3 | import VCarouselSlide from '../VCarouselSlide'
4 |
5 | describe('Molecule - VCarousel', () => {
6 | let wrapper
7 |
8 | beforeEach(() => {
9 | wrapper = mount(VCarousel, {
10 | data () {
11 | return {
12 | currentSlide: 0
13 | }
14 | },
15 | slots: {
16 | default: `
17 | Slide 1 Content
18 | Slide 2 Content
19 | Slide 3 Content
20 | `
21 | },
22 | stubs: {
23 | VCarouselSlide,
24 | VIcon: {
25 | template: ''
26 | }
27 | }
28 | })
29 | })
30 |
31 | test('Do not shows previous navigation arrow on the first slide', () => {
32 | expect(wrapper.find('.v-m-carousel__control--prev .icon').exists()).toBe(false)
33 | })
34 |
35 | test('Do not shows next navigation arrow on the last slide', () => {
36 | wrapper.setData({ currentSlide: 2 })
37 | expect(wrapper.find('.v-m-carousel__control--next .icon').exists()).toBe(false)
38 | })
39 |
40 | test('Shows dotted navigation matching the number of slides', () => {
41 | expect(wrapper.find('.v-m-carousel__dotted-nav').exists()).toBe(true)
42 | expect(wrapper.findAll('.v-m-carousel__dot').length).toBe(3)
43 | })
44 |
45 | test('Changes the slide when clicking on dotted navigation', () => {
46 | wrapper.findAll('.v-m-carousel__dot').at(2).trigger('click')
47 | expect(wrapper.vm.currentSlide).toBe(2)
48 | })
49 |
50 | test('Change the slide when clicking on arrow navigation', () => {
51 | wrapper.find('.v-m-carousel__control--next').trigger('click')
52 | expect(wrapper.vm.currentSlide).toBe(1)
53 | wrapper.find('.v-m-carousel__control--prev').trigger('click')
54 | expect(wrapper.vm.currentSlide).toBe(0)
55 | })
56 | })
57 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VCarouselSlide/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VCarouselSlide from '../VCarouselSlide'
4 |
5 | const wrapper = {
6 | components: { VCarouselSlide }
7 | }
8 |
9 | storiesOf('Molecule - VCarouselSlide', module)
10 | .addDecorator(withInfo)
11 | .add('background', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 | Slide Content
16 |
17 | `
18 | }), { info: true })
19 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VCarouselSlide/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VCarouselSlide from '.'
3 |
4 | describe('Molecule - VCarouselSlide', () => {
5 | test('Renders the slots correctly', () => {
6 | const wrapper = mount(VCarouselSlide, {
7 | slots: {
8 | default: 'Slide Content'
9 | }
10 | })
11 |
12 | expect(wrapper.html()).toContain('Slide Content')
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VCarouselSlide/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
13 |
14 |
20 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormCheckbox/index.stories.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormCheckbox from '.'
3 |
4 | describe('Molecule - VFormCheckbox', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormCheckbox, {
9 | propsData: {
10 | value: ''
11 | },
12 | stubs: {
13 | VText: true,
14 | VLabel: {
15 | name: 'VLabel',
16 | template: ''
17 | },
18 | VInputCheckbox: {
19 | name: 'VInputCheckbox',
20 | template: ''
21 | }
22 | }
23 | })
24 | })
25 |
26 | test('Renders the label if passed', () => {
27 | expect(wrapper.find('.v-m-form-checkbox__question').exists()).toBe(false)
28 |
29 | wrapper.setProps({
30 | label: 'Choose your country',
31 | options: [
32 | {
33 | label: 'Option 1',
34 | value: 'option1'
35 | }
36 | ]
37 | })
38 |
39 | expect(wrapper.find('.v-m-form-checkbox__question').text()).toBe('Choose your country')
40 | })
41 |
42 | test('Renders the coreect classes', () => {
43 | wrapper.setProps({ disabled: true, error: true })
44 |
45 | expect(wrapper.attributes().class).toContain('error')
46 | expect(wrapper.attributes().class).toContain('disabled')
47 | })
48 |
49 | test('Renders one checkbox if options is not passed', () => {
50 | const input = wrapper.findAll({ name: 'VInputCheckbox' })
51 |
52 | expect(input.length).toBe(1)
53 | })
54 | })
55 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormCheckbox/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormCheckbox from '.'
3 |
4 | describe('Molecule - VFormCheckbox', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormCheckbox, {
9 | propsData: {
10 | value: ''
11 | },
12 | stubs: {
13 | VText: true,
14 | VLabel: {
15 | name: 'VLabel',
16 | template: ''
17 | },
18 | VInputCheckbox: {
19 | name: 'VInputCheckbox',
20 | template: ''
21 | }
22 | }
23 | })
24 | })
25 |
26 | test('Renders the label if passed', () => {
27 | expect(wrapper.find('.v-m-form-checkbox__question').exists()).toBe(false)
28 |
29 | wrapper.setProps({
30 | label: 'Choose your country',
31 | options: [
32 | {
33 | label: 'Option 1',
34 | value: 'option1'
35 | }
36 | ]
37 | })
38 |
39 | expect(wrapper.find('.v-m-form-checkbox__question').text()).toBe('Choose your country')
40 | })
41 |
42 | test('Renders the coreect classes', () => {
43 | wrapper.setProps({ disabled: true, error: true })
44 |
45 | expect(wrapper.attributes().class).toContain('error')
46 | expect(wrapper.attributes().class).toContain('disabled')
47 | })
48 |
49 | test('Renders one checkbox if options is not passed', () => {
50 | const input = wrapper.findAll({ name: 'VInputCheckbox' })
51 |
52 | expect(input.length).toBe(1)
53 | })
54 |
55 | test('Renders multiple checkbox if options is passed', () => {
56 | wrapper.setProps({
57 | options: [
58 | {
59 | label: 'Option 1',
60 | value: 'option1'
61 | }, {
62 | label: 'Option 2',
63 | value: 'option2'
64 | }
65 | ]
66 | })
67 |
68 | const inputs = wrapper.findAll({ name: 'VInputCheckbox' })
69 | const labels = wrapper.findAll({ name: 'VLabel' })
70 |
71 | expect(inputs.length).toBe(2)
72 | expect(labels.length).toBe(2)
73 | expect(inputs.at(0).attributes().value).toBe('option1')
74 | expect(labels.at(1).text()).toContain('Option 2')
75 | })
76 | })
77 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormCreditCardNumber/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VFormCreditCardNumber from '.'
4 |
5 | const wrapper = {
6 | components: { VFormCreditCardNumber }
7 | }
8 |
9 | storiesOf('Molecule - VFormCreditCardNumber', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
19 |
20 |
21 |
Field value is: {{ creditCard }}
22 |
36 |
42 |
43 |
44 |
45 | Field value is: {{ creditCard }}
46 |
47 | `,
48 | data () {
49 | return {
50 | creditCard: {
51 | number: '332312321312312'
52 | }
53 | }
54 | }
55 | }), { info: true })
56 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormCreditCardNumber/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormCreditCard from '.'
3 |
4 | describe('Molecule - VFormCreditCard', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormCreditCard, {
9 | propsData: {
10 | value: {
11 | number: '5253111111111111'
12 | }
13 | }
14 | })
15 | })
16 |
17 | test('Renders the label if passed', () => {
18 | expect(wrapper.find({ name: 'VLabel' }).exists()).toBe(false)
19 |
20 | wrapper.setProps({
21 | label: 'Credit Card Number'
22 | })
23 |
24 | expect(wrapper.find({ name: 'VLabel' }).text()).toContain('Credit Card Number')
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormExpiryDate/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VFormExpiryDate from '.'
4 |
5 | const wrapper = {
6 | components: { VFormExpiryDate }
7 | }
8 |
9 | storiesOf('Molecule - VFormExpiryDate', module)
10 | .addDecorator(withInfo)
11 | .add('default', () => ({
12 | ...wrapper,
13 | template: `
14 |
15 |
19 |
20 |
21 |
22 | Field value is: {{ expiry }}
23 |
24 | `,
25 | data () {
26 | return {
27 | expiry: '2222'
28 | }
29 | }
30 | }), { info: true })
31 | .add('error', () => ({
32 | ...wrapper,
33 | template: `
34 |
35 |
41 |
42 |
43 |
44 | Field value is: {{ expiry }}
45 |
46 | `,
47 | data () {
48 | return {
49 | expiry: ''
50 | }
51 | }
52 | }), { info: true })
53 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormExpiryDate/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormExpiry from '.'
3 |
4 | describe('Molecule - VFormExpiry', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormExpiry)
9 | })
10 |
11 | test('Renders the label if passed', () => {
12 | expect(wrapper.find({ name: 'VLabel' }).exists()).toBe(false)
13 |
14 | wrapper.setProps({
15 | label: 'Expiry Date'
16 | })
17 |
18 | expect(wrapper.find({ name: 'VLabel' }).text()).toContain('Expiry Date')
19 | })
20 |
21 | test('Shows error message if available', () => {
22 | expect(wrapper.find({ name: 'VValidationMessages' }).text()).toBe('')
23 |
24 | wrapper.setProps({
25 | errorMessages: 'Please enter a valid expiry date',
26 | error: true
27 | })
28 |
29 | expect(wrapper.find({ name: 'VValidationMessages' }).text()).toContain('Please enter a valid expiry date')
30 | })
31 |
32 | test('Renders the coreect classes', () => {
33 | wrapper.setProps({ disabled: true, error: true })
34 |
35 | expect(wrapper.attributes().class).toContain('error')
36 | expect(wrapper.attributes().class).toContain('disabled')
37 | })
38 |
39 | test('Renders the correct date format', () => {
40 | wrapper.setProps({ value: '1218' })
41 | expect(wrapper.find('input').element.value).toBe('12/18')
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormRadio/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VFormRadio from '.'
4 |
5 | const wrapper = {
6 | components: { VFormRadio }
7 | }
8 |
9 | const data = {
10 | selection: '',
11 | options: [
12 | {
13 | label: 'New York City',
14 | value: 'new-york'
15 | },
16 | {
17 | label: 'Paris - Disabled',
18 | value: 'paris',
19 | disabled: true
20 | },
21 | {
22 | label: 'London',
23 | value: 'london',
24 | checked: true
25 | },
26 | {
27 | label: 'Amsterdam',
28 | value: 'amsterdam'
29 | }
30 | ]
31 | }
32 |
33 | storiesOf('Molecule - VFormRadio', module)
34 | .addDecorator(withInfo)
35 | .add('default', () => ({
36 | ...wrapper,
37 | template: `
38 |
39 |
45 |
46 |
47 |
48 | Field value is: {{ selection }}
49 |
50 | `,
51 | data () {
52 | return data
53 | }
54 | }), { info: true })
55 | .add('disabled', () => ({
56 | ...wrapper,
57 | template: `
58 |
59 |
65 |
66 |
67 |
68 | Field value is: {{ selection }}
69 |
70 | `,
71 | data () {
72 | return data
73 | }
74 | }), { info: true })
75 | .add('invalid', () => ({
76 | ...wrapper,
77 | template: `
78 |
79 |
86 |
87 |
88 |
89 | Field value is: {{ selection }}
90 |
91 | `,
92 | data () {
93 | return {
94 | selection: '',
95 | options: [
96 | {
97 | label: 'New York City',
98 | value: 'new-york'
99 | },
100 | {
101 | label: 'Paris',
102 | value: 'paris'
103 | },
104 | {
105 | label: 'London',
106 | value: 'london'
107 | }
108 | ]
109 | }
110 | }
111 | }), { info: true })
112 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormRadio/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormRadio from '.'
3 |
4 | describe('Molecule - VFormRadio', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormRadio, {
9 | propsData: {
10 | value: '',
11 | options: [
12 | {
13 | label: 'Option 1',
14 | value: 'option1'
15 | }, {
16 | label: 'Option 2',
17 | value: 'option2'
18 | }
19 | ]
20 | },
21 | stubs: {
22 | VInputRadio: {
23 | name: 'VInputRadio',
24 | template: ''
25 | },
26 | VLabel: {
27 | name: 'VLabel',
28 | template: ''
29 | }
30 | }
31 | })
32 | })
33 |
34 | test('Renders the label if passed', () => {
35 | expect(wrapper.find('.v-m-form-radio__question').exists()).toBe(false)
36 |
37 | wrapper.setProps({
38 | label: 'Choose your country'
39 | })
40 |
41 | expect(wrapper.find('.v-m-form-radio__question').text()).toContain('Choose your country')
42 | })
43 |
44 | test('Renders the coreect classes', () => {
45 | wrapper.setProps({ disabled: true, error: true })
46 |
47 | expect(wrapper.attributes().class).toContain('error')
48 | expect(wrapper.attributes().class).toContain('disabled')
49 | })
50 | })
51 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormSelect/index.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { withInfo } from 'storybook-addon-vue-info'
3 | import VFormSelect from '.'
4 |
5 | const wrapper = {
6 | components: { VFormSelect }
7 | }
8 |
9 | const options = [
10 | {
11 | label: 'Option A',
12 | value: 'a'
13 | },
14 | {
15 | label: 'Option B',
16 | value: 'b'
17 | },
18 | {
19 | label: 'Option C',
20 | value: 'c'
21 | },
22 | {
23 | label: 'Option D',
24 | value: 'd',
25 | disabled: true
26 | }
27 | ]
28 |
29 | storiesOf('Molecule - VFormSelect', module)
30 | .addDecorator(withInfo)
31 | .add('default', () => ({
32 | ...wrapper,
33 | template: `
34 |
35 |
41 |
42 |
43 |
44 | Field value is: {{ frieldValue }}
45 |
46 | `,
47 | data () {
48 | return {
49 | frieldValue: 'c',
50 | options
51 | }
52 | }
53 | }), { info: true })
54 | .add('invalid', () => ({
55 | ...wrapper,
56 | template: `
57 |
64 | `,
65 | data () {
66 | return {
67 | frieldValue: '',
68 | options
69 | }
70 | }
71 | }), { info: true })
72 | .add('required', () => ({
73 | ...wrapper,
74 | template: `
75 |
81 | `,
82 | data () {
83 | return {
84 | frieldValue: '',
85 | options
86 | }
87 | }
88 | }), { info: true })
89 | .add('disabled', () => ({
90 | ...wrapper,
91 | template: `
92 |
98 | `,
99 | data () {
100 | return {
101 | frieldValue: '',
102 | options
103 | }
104 | }
105 | }), { info: true })
106 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormSelect/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VFormRadio from '.'
3 |
4 | describe('Molecule - VFormRadio', () => {
5 | let wrapper
6 |
7 | beforeEach(() => {
8 | wrapper = mount(VFormRadio, {
9 | propsData: {
10 | value: '',
11 | options: [
12 | {
13 | label: 'Option 1',
14 | value: 'option1'
15 | }, {
16 | label: 'Option 2',
17 | value: 'option2'
18 | }
19 | ]
20 | }
21 | })
22 | })
23 |
24 | test('Shows error message if available', () => {
25 | expect(wrapper.find({ name: 'VValidationMessages' }).text()).toBe('')
26 |
27 | wrapper.setProps({
28 | errorMessages: 'Please enter your name',
29 | error: true
30 | })
31 |
32 | expect(wrapper.find({ name: 'VValidationMessages' }).text()).toContain('Please enter your name')
33 | })
34 |
35 | test('Renders the label if passed', () => {
36 | expect(wrapper.find({ name: 'VLabel' }).exists()).toBe(false)
37 |
38 | wrapper.setProps({
39 | label: 'Choose your country'
40 | })
41 |
42 | expect(wrapper.find({ name: 'VLabel' }).text()).toContain('Choose your country')
43 | })
44 |
45 | test('Renders the coreect classes', () => {
46 | wrapper.setProps({ disabled: true, error: true })
47 |
48 | expect(wrapper.attributes().class).toContain('error')
49 | expect(wrapper.attributes().class).toContain('disabled')
50 | })
51 | })
52 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VFormSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
15 | * {{ label }}
16 |
17 |
18 |
19 |
20 |
32 |
33 |
34 |
35 |
36 |
37 |
15 |
20 |
21 |
22 |
23 |
Field value is: {{ frieldValue }}
24 |
7 |
8 |
12 | * {{ label }}
13 |
14 |
15 |
16 |
17 |
23 |
24 |
25 |
26 |
27 |
28 |
15 |
21 |
22 |
23 |
24 |
Field value is: {{ frieldValue }}
25 |
3 |
4 |
5 |
12 |
23 |
24 |
25 |
3 | {{ item.label }}
10 |
11 |
12 |
13 |
27 |
28 |
42 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VTable/index.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import VTable from '.'
3 |
4 | describe('Molecule - VTable', () => {
5 | test('renders the slots correctly', () => {
6 | const wrapper = mount(VTable, {
7 | slots: {
8 | head: '| Table Head Content |
|---|
',
9 | body: '| Table Body Content |
',
10 | foot: '| Table Foot Content |
'
11 | }
12 | })
13 |
14 | expect(wrapper.find('thead').html()).toContain('| Table Head Content |
|---|
')
15 | expect(wrapper.find('tbody').html()).toContain('| Table Body Content |
')
16 | expect(wrapper.find('tfoot').html()).toContain('tr>Table Foot Content | ')
17 | })
18 |
19 | test('add the correct css classes', () => {
20 | const wrapper = mount(VTable, {
21 | propsData: {
22 | stickyHeader: true
23 | }
24 | })
25 | expect(wrapper.attributes().class).toContain('sticky-header')
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/generator/template/src/components/molecules/VTable/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
26 |
27 |
3 |
4 |
5 | {{ message }}
9 |
10 |
11 |
12 |
17 | {{ message.text }}
18 |
19 |
20 |
21 |
22 |
{{ errorMessages }}
23 |
15 |
20 |
21 |
22 |
Field value is: {{ paymentData }}
23 |