fix(list-group-item): set button type to 'button' when button in mode or tag=button (Fixes #2192) (#2194)

tmorehouse · web-flow · commit 4322ccb800ac · 2018-11-17T23:40:11.000-04:00
* fix(list-group-item): set button type to 'button' when button in mode or tag=button (Fixes #2192) * Create list-group-item.spec.js
diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js
@@ -40,21 +40,35 @@ 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 itemProps = {}
+    if (tag === '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) {
+        // Set disabled attribute if button and disabled
+        attrs.disabled = true
+      }
+    } else {
+      itemProps = pluckProps(linkProps, props)
+    }
     const componentData = {
+      attrs,
+      props: itemProps,
       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)
diff --git a/src/components/list-group/list-group-item.spec.js b/src/components/list-group/list-group-item.spec.js
@@ -0,0 +1,214 @@
+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 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: {
+        props: { href: '/foobar' }
+      }
+    })
+    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: {
+        props: { button: true }
+      }
+    })
+    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: {
+        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()
+  })
+})
