bootstrap-vue · tmorehouse · Jan 10, 2019 · Jan 10, 2019 · Jan 10, 2019 · Jan 10, 2019
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
@@ -1,5 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
-
 export const props = {
   active: {
     type: Boolean,
@@ -18,23 +16,30 @@ export const props = {
 // @vue/component
 export default {
   name: 'BDropdownItemButton',
-  functional: true,
+  inject: {
+    dropdown: {
+      from: 'dropdown',
+      default: null
+    }
+  },
   props,
-  render (h, { props, data, parent, children }) {
+  methods: {
+    closeDropdown () {
+      if (this.dropdown) {
+        this.dropdown.hide(true)
+      }
+    }
+  },
+  render (h) {
     return h(
       'button',
-      mergeData(data, {
-        props,
+      {
         staticClass: 'dropdown-item',
-        class: { [props.activeClass]: props.active },
-        attrs: { role: 'menuitem', type: 'button', disabled: props.disabled },
-        on: {
-          click (e) {
-            parent.$root.$emit('clicked::link', e)
-          }
-        }
-      }),
-      children
+        class: { [this.activeClass]: this.active },
+        attrs: { role: 'menuitem', type: 'button', disabled: this.disabled },
+        on: { click: this.closeDropdown }
+      },
+      this.$slots.default
     )
   }
 }
diff --git a/src/components/dropdown/dropdown-item-button.spec.js b/src/components/dropdown/dropdown-item-button.spec.js
@@ -0,0 +1,74 @@
+import DropdownItemBtn from './dropdown-item-button'
+import { mount } from '@vue/test-utils'
+
+describe('dropdown-item-button', async () => {
+  it('renders with tag "button" and type="button" by default', async () => {
+    const wrapper = mount(DropdownItemBtn)
+    expect(wrapper.is('button')).toBe(true)
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('has class "dropdown-item"', async () => {
+    const wrapper = mount(DropdownItemBtn)
+    expect(wrapper.classes()).toContain('dropdown-item')
+    expect(wrapper.classes()).not.toContain('active')
+  })
+
+  it('has class "active" when active=true', async () => {
+    const wrapper = mount(DropdownItemBtn, {
+      propsData: { active: true }
+    })
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('dropdown-item')
+  })
+
+  it('has attribute "disabled" when disabled=true', async () => {
+    const wrapper = mount(DropdownItemBtn, {
+      propsData: { disabled: true }
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+
+  it('calls dropdown hide(true) method when clicked', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(DropdownItemBtn, {
+      provide: {
+        dropdown: {
+          hide (arg) {
+            called = true
+            refocus = arg
+          }
+        }
+      }
+    })
+    const btn = wrapper.find('button')
+    expect(btn).toBeDefined()
+    btn.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(called).toBe(true)
+    expect(refocus).toBe(true)
+  })
+
+  it('does not call dropdown hide(true) method when clicked and disabled', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(DropdownItemBtn, {
+      provide: {
+        dropdown: {
+          hide (arg) {
+            called = true
+            refocus = arg
+          }
+        }
+      },
+      propsData: { disabled: true }
+    })
+    const btn = wrapper.find('button')
+    expect(btn).toBeDefined()
+    btn.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(called).toBe(false)
+    expect(refocus).toBe(null)
+  })
+})
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
@@ -1,22 +1,34 @@
-import { mergeData } from 'vue-functional-data-merge'
 import BLink, { propsFactory as linkPropsFactory } from '../link/link'
 
 export const props = linkPropsFactory()
 
 // @vue/component
 export default {
   name: 'BDropdownItem',
-  functional: true,
+  inject: {
+    dropdown: {
+      from: 'dropdown',
+      default: null
+    }
+  },
   props,
-  render (h, { props, data, children }) {
+  methods: {
+    closeDropdown () {
+      if (this.dropdown) {
+        this.dropdown.hide(true)
+      }
+    }
+  },
+  render (h) {
     return h(
       BLink,
-      mergeData(data, {
-        props,
+      {
+        props: this.$props,
         staticClass: 'dropdown-item',
-        attrs: { role: 'menuitem' }
-      }),
-      children
+        attrs: { role: 'menuitem' },
+        on: { click: this.closeDropdown }
+      },
+      this.$slots.default
     )
   }
 }
diff --git a/src/components/dropdown/dropdown-item.spec.js b/src/components/dropdown/dropdown-item.spec.js
@@ -0,0 +1,59 @@
+import DropdownItem from './dropdown-item'
+import { mount } from '@vue/test-utils'
+
+describe('dropdown-item', async () => {
+  it('renders with tag "a" and href="#" by default', async () => {
+    const wrapper = mount(DropdownItem)
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.attributes('href')).toBe('#')
+  })
+
+  it('has class "dropdown-item"', async () => {
+    const wrapper = mount(DropdownItem)
+    expect(wrapper.classes()).toContain('dropdown-item')
+    expect(wrapper.attributes('href')).toBe('#')
+  })
+
+  it('calls dropdown hide(true) method when clicked', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(DropdownItem, {
+      provide: {
+        dropdown: {
+          hide (arg) {
+            called = true
+            refocus = arg
+          }
+        }
+      }
+    })
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    link.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(called).toBe(true)
+    expect(refocus).toBe(true)
+  })
+
+  it('does not call dropdown hide(true) method when clicked and disabled', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(DropdownItem, {
+      provide: {
+        dropdown: {
+          hide (arg) {
+            called = true
+            refocus = arg
+          }
+        }
+      },
+      propsData: { disabled: true }
+    })
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    link.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(called).toBe(false)
+    expect(refocus).toBe(null)
+  })
+})
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -175,6 +175,7 @@ export default {
         class: this.menuClasses,
         attrs: {
           role: this.role,
+          tabindex: '-1',
           'aria-labelledby': this.safeId(this.split ? '_BV_button_' : '_BV_toggle_')
         },
         on: {
@@ -184,10 +185,10 @@ export default {
       },
       [this.$slots.default]
     )
-    return h('div', { attrs: { id: this.safeId() }, class: this.dropdownClasses }, [
-      split,
-      toggle,
-      menu
-    ])
+    return h(
+      'div',
+      { attrs: { id: this.safeId() }, class: this.dropdownClasses },
+      [split, toggle, menu]
+    )
   }
 }
diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js
@@ -96,20 +96,6 @@ describe('dropdown', async () => {
     expect(Array.from(dd_6.$refs.menu.children).find(node => node.innerHTML === 'button')).toBeElement('button')
   })
 
-  it('dd-item-button should emit click event', async () => {
-    const { app: { $refs } } = window
-    const { dd_6 } = $refs // eslint-disable-line camelcase
-
-    const spy = jest.fn()
-
-    dd_6.$parent.$root.$on('clicked::link', spy)
-
-    const buttonItem = Array.from(dd_6.$refs.menu.children).find(node => node.innerHTML === 'button')
-    buttonItem.click()
-
-    expect(spy).toHaveBeenCalled()
-  })
-
   it('dd-divider should render', async () => {
     const { app: { $refs } } = window
     const { dd_6 } = $refs // eslint-disable-line camelcase

diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js
@@ -86,17 +86,21 @@ export default {
       {
         class: this.menuClasses,
         ref: 'menu',
-        attrs: { 'aria-labelledby': this.safeId('_BV_button_') },
+        attrs: {
+          tabindex: '-1',
+          'aria-labelledby': this.safeId('_BV_button_')
+        },
         on: {
           mouseover: this.onMouseOver,
           keydown: this.onKeydown // tab, up, down, esc
         }
       },
       [this.$slots.default]
     )
-    return h('li', { attrs: { id: this.safeId() }, class: this.dropdownClasses }, [
-      button,
-      menu
-    ])
+    return h(
+      'li',
+      { attrs: { id: this.safeId() }, class: this.dropdownClasses },
+      [button, menu]
+    )
   }
 }