bootstrap-vue · jacobmllr95 · Apr 12, 2019 · Apr 11, 2019 · Apr 12, 2019 · Apr 12, 2019
diff --git a/src/components/dropdown/dropdown-divider.js b/src/components/dropdown/dropdown-divider.js
@@ -4,7 +4,7 @@ import { mergeData } from 'vue-functional-data-merge'
 export const props = {
   tag: {
     type: String,
-    default: 'div'
+    default: 'hr'
   }
 }
 
@@ -14,12 +14,15 @@ export default Vue.extend({
   functional: true,
   props,
   render(h, { props, data }) {
-    return h(
-      props.tag,
-      mergeData(data, {
-        staticClass: 'dropdown-divider',
-        attrs: { role: 'separator' }
-      })
-    )
+    return h('li', [
+      h(
+        props.tag,
+        mergeData(data, {
+          staticClass: 'dropdown-divider',
+          attrs: { role: 'separator' },
+          ref: 'divider'
+        })
+      )
+    ])
   }
 })
diff --git a/src/components/dropdown/dropdown-divider.spec.js b/src/components/dropdown/dropdown-divider.spec.js
@@ -4,42 +4,46 @@ import { mount } from '@vue/test-utils'
 describe('dropdown > dropdown-divider', () => {
   it('works', async () => {
     const wrapper = mount(BDropdownDivider)
+    expect(wrapper.is('li')).toBe(true)
 
-    expect(wrapper.is('div')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-divider')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toEqual('separator')
-    expect(wrapper.text()).toEqual('')
+    const divider = wrapper.find('hr')
+    expect(divider.is('hr')).toBe(true)
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
   })
 
   it('renders custom root element when prop tag set', async () => {
     const wrapper = mount(BDropdownDivider, {
-      propsData: {
-        tag: 'span'
+      context: {
+        props: { tag: 'span' }
       }
     })
+    expect(wrapper.is('li')).toBe(true)
 
-    expect(wrapper.is('span')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-divider')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toEqual('separator')
-    expect(wrapper.text()).toEqual('')
+    const divider = wrapper.find('span')
+    expect(divider.is('span')).toBe(true)
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
   })
 
   it('does not render default slot content', async () => {
     const wrapper = mount(BDropdownDivider, {
-      slots: {
-        default: 'foobar'
-      }
+      slots: { default: 'foobar' }
     })
+    expect(wrapper.is('li')).toBe(true)
 
-    expect(wrapper.is('div')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-divider')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toEqual('separator')
-    expect(wrapper.text()).toEqual('')
+    const divider = wrapper.find('hr')
+    expect(divider.is('hr')).toBe(true)
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
   })
 })
diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js
@@ -7,6 +7,16 @@ export default Vue.extend({
   functional: true,
   props: { ...formProps },
   render(h, { props, data, children }) {
-    return h(BForm, mergeData(data, { props, staticClass: 'b-dropdown-form' }), children)
+    return h('li', [
+      h(
+        BForm,
+        mergeData(data, {
+          staticClass: 'b-dropdown-form',
+          props,
+          ref: 'form'
+        }),
+        children
+      )
+    ])
   }
 })
diff --git a/src/components/dropdown/dropdown-form.spec.js b/src/components/dropdown/dropdown-form.spec.js
@@ -4,13 +4,19 @@ import { mount } from '@vue/test-utils'
 describe('dropdown-form', () => {
   it('renders with tag "form"', async () => {
     const wrapper = mount(BDropdownForm)
-    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.is('form')).toBe(true)
   })
 
   it('has custom class "b-dropdown-form"', async () => {
     const wrapper = mount(BDropdownForm)
-    expect(wrapper.classes()).toContain('b-dropdown-form')
-    expect(wrapper.classes()).not.toContain('was-validated')
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.classes()).toContain('b-dropdown-form')
+    expect(form.classes()).not.toContain('was-validated')
   })
 
   it('has class "was-validated" when validated=true', async () => {
@@ -19,13 +25,19 @@ describe('dropdown-form', () => {
         props: { validated: true }
       }
     })
-    expect(wrapper.classes()).toContain('was-validated')
-    expect(wrapper.classes()).toContain('b-dropdown-form')
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.classes()).toContain('was-validated')
+    expect(form.classes()).toContain('b-dropdown-form')
   })
 
   it('does not have attribute novalidate by default', async () => {
     const wrapper = mount(BDropdownForm)
-    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.attributes('novalidate')).not.toBeDefined()
   })
 
   it('has attribute novalidate when novalidate=true', async () => {
@@ -34,6 +46,9 @@ describe('dropdown-form', () => {
         props: { novalidate: true }
       }
     })
-    expect(wrapper.attributes('novalidate')).toBeDefined()
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.attributes('novalidate')).toBeDefined()
   })
 })
diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js
@@ -18,13 +18,16 @@ export default Vue.extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
-    return h(
-      props.tag,
-      mergeData(data, {
-        staticClass: 'dropdown-header',
-        attrs: { id: props.id || null }
-      }),
-      children
-    )
+    return h('li', [
+      h(
+        props.tag,
+        mergeData(data, {
+          staticClass: 'dropdown-header',
+          attrs: { id: props.id || null },
+          ref: 'header'
+        }),
+        children
+      )
+    ])
   }
 })
diff --git a/src/components/dropdown/dropdown-header.spec.js b/src/components/dropdown/dropdown-header.spec.js
@@ -4,52 +4,58 @@ import { mount } from '@vue/test-utils'
 describe('dropdown > dropdown-header', () => {
   it('works', async () => {
     const wrapper = mount(BDropdownHeader)
-
-    expect(wrapper.is('h6')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-header')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('id')).not.toBeDefined()
-    expect(wrapper.text()).toEqual('')
+    expect(wrapper.is('li')).toBe(true)
+
+    const header = wrapper.find('h6')
+    expect(header.is('h6')).toBe(true)
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).not.toBeDefined()
+    expect(header.text()).toEqual('')
   })
 
   it('renders custom root element when prop tag set', async () => {
     const wrapper = mount(BDropdownHeader, {
-      propsData: {
-        tag: 'h2'
+      context: {
+        props: { tag: 'h2' }
       }
     })
-
-    expect(wrapper.is('h2')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-header')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('id')).not.toBeDefined()
-    expect(wrapper.text()).toEqual('')
+    expect(wrapper.is('li')).toBe(true)
+
+    const header = wrapper.find('h2')
+    expect(header.is('h2')).toBe(true)
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).not.toBeDefined()
+    expect(header.text()).toEqual('')
   })
 
   it('user supplied id when prop id set', async () => {
     const wrapper = mount(BDropdownHeader, {
-      propsData: {
-        id: 'foo'
+      context: {
+        props: { id: 'foo' }
       }
     })
-
-    expect(wrapper.is('h6')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-header')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('id')).toBeDefined()
-    expect(wrapper.attributes('id')).toEqual('foo')
+    expect(wrapper.is('li')).toBe(true)
+
+    const header = wrapper.find('h6')
+    expect(header.is('h6')).toBe(true)
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).toBeDefined()
+    expect(header.attributes('id')).toEqual('foo')
   })
 
   it('renders default slot content', async () => {
     const wrapper = mount(BDropdownHeader, {
-      slots: {
-        default: 'foobar'
-      }
+      slots: { default: 'foobar' }
     })
+    expect(wrapper.is('li')).toBe(true)
 
-    expect(wrapper.is('h6')).toBe(true)
-    expect(wrapper.classes()).toContain('dropdown-header')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.text()).toEqual('foobar')
+    const header = wrapper.find('h6')
+    expect(header.is('h6')).toBe(true)
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.text()).toEqual('foobar')
   })
 })
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
@@ -36,15 +36,22 @@ export default Vue.extend({
     }
   },
   render(h) {
-    return h(
-      'button',
-      {
-        staticClass: 'dropdown-item',
-        class: { [this.activeClass]: this.active },
-        attrs: { role: 'menuitem', type: 'button', disabled: this.disabled },
-        on: { click: this.onClick }
-      },
-      this.$slots.default
-    )
+    return h('li', [
+      h(
+        'button',
+        {
+          staticClass: 'dropdown-item',
+          class: { [this.activeClass]: this.active },
+          attrs: {
+            role: 'menuitem',
+            type: 'button',
+            disabled: this.disabled
+          },
+          on: { click: this.onClick },
+          ref: 'button'
+        },
+        this.$slots.default
+      )
+    ])
   }
 })