From bfde5a7b7c459ef9f7a47c2231055570b3a070fb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 21:54:23 -0400 Subject: [PATCH 1/6] fix(list-group-item): set button type to 'button' when button in mode or tag=button (Fixes #2192) --- src/components/list-group/list-group-item.js | 24 ++++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index 8ec09353974..2bcc5473709 100755 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -40,21 +40,31 @@ export default { : !props.href && !props.to ? props.tag : Link const isAction = Boolean( props.href || - props.to || - props.action || - props.button || - arrayIncludes(actionTags, props.tag) + props.to || + props.action || + props.button || + arrayIncludes(actionTags, props.tag) ) + const attrs = {} + let props = {} + if (tag === 'button') { + attrs.type = 'button' + if (props.disabled) { + attrs.disabled = true + } + } else { + props = pluckProps(linkProps, props) + } const componentData = { + attrs, + props, staticClass: 'list-group-item', class: { [`list-group-item-${props.variant}`]: Boolean(props.variant), 'list-group-item-action': isAction, active: props.active, disabled: props.disabled - }, - attrs: tag === 'button' && props.disabled ? { disabled: true } : {}, - props: props.button ? {} : pluckProps(linkProps, props) + } } return h(tag, mergeData(data, componentData), children) From 22bbb6595e080666ad6adf1189d59f17e7b09379 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 22:10:18 -0400 Subject: [PATCH 2/6] Update list-group-item.js --- src/components/list-group/list-group-item.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index 2bcc5473709..0ed1d668421 100755 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -46,18 +46,22 @@ export default { arrayIncludes(actionTags, props.tag) ) const attrs = {} - let props = {} + let itemProps = {} if (tag === 'button') { - attrs.type = 'button' + if (data.attrs && !data.attrs.type) { + // Add a type for button is one not provided in passed attributes + attrs.type = 'button' + } if (props.disabled) { - attrs.disabled = true + // Set disabled attribute if button and disabled + attrs.disabled = props.disabled } } else { - props = pluckProps(linkProps, props) + itemProps = pluckProps(linkProps, props) } const componentData = { attrs, - props, + props: itemProps, staticClass: 'list-group-item', class: { [`list-group-item-${props.variant}`]: Boolean(props.variant), From 95b167ab893ae93212fa20e27345ee200cdc5682 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 22:46:47 -0400 Subject: [PATCH 3/6] Create list-group-item.spec.js --- .../list-group/list-group-item.spec.js | 162 ++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 src/components/list-group/list-group-item.spec.js diff --git a/src/components/list-group/list-group-item.spec.js b/src/components/list-group/list-group-item.spec.js new file mode 100644 index 00000000000..17d4e7ccd5b --- /dev/null +++ b/src/components/list-group/list-group-item.spec.js @@ -0,0 +1,162 @@ +import ListGroupItem from './list-group-item' +import { mount } from '@vue/test-utils' + +describe('list-group-item', async () => { + it('default should have tag div', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.is('div')).toBe(true) + }) + + it('default should contain only single class of list-group-item', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.classes().length).toBe(1) + expect(wrapper.classes()).toContain('list-group-item') + }) + + it('default should not have class list-group-item-action', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.classes()).not.toContain('list-group-item-action') + }) + + it('default should not have class active', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.classes()).not.toContain('active') + }) + + it('default should not have class disabled', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.classes()).not.toContain('disabled') + }) + + it('default should not have type attribute', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.attributes('type')).not.toBeDefined() + }) + + it('default should not have disabled attribute', async () => { + const wrapper = mount(ListGroupItem) + expect(wrapper.attributes('disabled')).not.toBeDefined() + }) + + it('should have disabled class when disabled=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { disabled: true } + } + }) + expect(wrapper.classes()).toContain('disabled') + }) + + it('should have active class when active=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { active: true } + } + }) + expect(wrapper.classes()).toContain('active') + }) + + it('should have variant class and base class when variant set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { variant: 'danger' } + } + }) + expect(wrapper.classes()).toContain('list-group-item') + expect(wrapper.classes()).toContain('list-group-item-danger') + }) + + it('should have tag a when href is set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { href: '/foobar' } + } + }) + expect(wrapper.is('a')).toBe(true) + }) + + it('should have class list-group-item-action when href is set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { href: '/foobar' } + } + }) + expect(wrapper.classes()).toContain('list-group-item-action') + }) + + it('should have href attribute when href is set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { href: '/foobar' } + } + }) + expect(wrapper.attributes('href')).toBe('/foobar') + }) + + it('should have tag button when button=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { button: true } + } + }) + expect(wrapper.is('button')).toBe(true) + }) + + it('should have class list-group-item-action when button=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { button: true } + } + }) + expect(wrapper.classes()).toContain('list-group-item-action') + }) + + it('should have type=button when button=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { button: true } + } + }) + expect(wrapper.attributes('type')).toEqual('button') + }) + + it('should have type=submit when button=true and attr type=submit', async () => { + const wrapper = mount(ListGroupItem,{ + context: { + props: { button: true }, + attrs: { type: 'submit' } + } + }) + expect(wrapper.attributes('type')).toEqual('submit') + }) + + it('should not have attribute disabled when button=true and disabled not set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { button: true } + } + }) + expect(wrapper.attributes('disabled')).not.toBeDefined() + }) + + it('should have attribute disabled when button=true and disabled=true', async () => { + const wrapper = mount(ListGroupItem,{ + context: { + props: { + button: true, + disabled: 'true' + } + } + }) + expect(wrapper.attributes('disabled')).toBeDefined() + }) + + it('should render button when tag=button', async () => { + const wrapper = mount(ListGroupItem,{ + context: { + props: { tag: 'button' } + } + }) + expect(wrapper.attributes('disabled')).toBeDefined() + }) +}) From 555a7dd24a0e32a21fb192265eaf2dd4bba2dc51 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 22:59:34 -0400 Subject: [PATCH 4/6] Update list-group-item.js --- src/components/list-group/list-group-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index 0ed1d668421..6b7ee4c8a53 100755 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -54,7 +54,7 @@ export default { } if (props.disabled) { // Set disabled attribute if button and disabled - attrs.disabled = props.disabled + attrs.disabled = true } } else { itemProps = pluckProps(linkProps, props) From fb0995bda9483f63b9011399ab2becdd5c32d1b7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 23:06:16 -0400 Subject: [PATCH 5/6] Update list-group-item.js --- src/components/list-group/list-group-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js index 6b7ee4c8a53..126fd8ce0b4 100755 --- a/src/components/list-group/list-group-item.js +++ b/src/components/list-group/list-group-item.js @@ -48,7 +48,7 @@ export default { const attrs = {} let itemProps = {} if (tag === 'button') { - if (data.attrs && !data.attrs.type) { + if (!data.attrs || !data.attrs.type) { // Add a type for button is one not provided in passed attributes attrs.type = 'button' } From 3d793428321b40dd69f3d2a73c7e20beb3ea2a59 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 17 Nov 2018 23:34:01 -0400 Subject: [PATCH 6/6] Update list-group-item.spec.js --- .../list-group/list-group-item.spec.js | 76 ++++++++++++++++--- 1 file changed, 64 insertions(+), 12 deletions(-) diff --git a/src/components/list-group/list-group-item.spec.js b/src/components/list-group/list-group-item.spec.js index 17d4e7ccd5b..e950d2b5f08 100644 --- a/src/components/list-group/list-group-item.spec.js +++ b/src/components/list-group/list-group-item.spec.js @@ -84,6 +84,24 @@ describe('list-group-item', async () => { expect(wrapper.classes()).toContain('list-group-item-action') }) + it('should have class list-group-item-action when action=true', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { action: true } + } + }) + expect(wrapper.classes()).toContain('list-group-item-action') + }) + + it('should have class list-group-item-action when tag=a', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { tag: 'a' } + } + }) + expect(wrapper.classes()).toContain('list-group-item-action') + }) + it('should have href attribute when href is set', async () => { const wrapper = mount(ListGroupItem, { context: { @@ -93,6 +111,24 @@ describe('list-group-item', async () => { expect(wrapper.attributes('href')).toBe('/foobar') }) + it('should have tag button when tag=button', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { tag: 'button' } + } + }) + expect(wrapper.is('button')).toBe(true) + }) + + it('should have tag a when tag=a', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { tag: 'a' } + } + }) + expect(wrapper.is('a')).toBe(true) + }) + it('should have tag button when button=true', async () => { const wrapper = mount(ListGroupItem, { context: { @@ -102,6 +138,31 @@ describe('list-group-item', async () => { expect(wrapper.is('button')).toBe(true) }) + it('should have tag button when button=true and tag=foo', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { + button: true, + tag: 'foo' + } + } + }) + expect(wrapper.is('button')).toBe(true) + }) + + it('should not have href when button=true and href set', async () => { + const wrapper = mount(ListGroupItem, { + context: { + props: { + button: true, + href: '/foobar' + } + } + }) + expect(wrapper.is('button')).toBe(true) + expect(wrapper.attributes('href')).not.toBeDefined() + }) + it('should have class list-group-item-action when button=true', async () => { const wrapper = mount(ListGroupItem, { context: { @@ -121,7 +182,7 @@ describe('list-group-item', async () => { }) it('should have type=submit when button=true and attr type=submit', async () => { - const wrapper = mount(ListGroupItem,{ + const wrapper = mount(ListGroupItem, { context: { props: { button: true }, attrs: { type: 'submit' } @@ -140,23 +201,14 @@ describe('list-group-item', async () => { }) it('should have attribute disabled when button=true and disabled=true', async () => { - const wrapper = mount(ListGroupItem,{ + const wrapper = mount(ListGroupItem, { context: { props: { button: true, - disabled: 'true' + disabled: true } } }) expect(wrapper.attributes('disabled')).toBeDefined() }) - - it('should render button when tag=button', async () => { - const wrapper = mount(ListGroupItem,{ - context: { - props: { tag: 'button' } - } - }) - expect(wrapper.attributes('disabled')).toBeDefined() - }) })