fix(nav-item): move listeners to link element (bootstrap-vue#2755)

tmorehouse · web-flow · commit 40b19a73492a · 2019-03-03T03:54:02.000-04:00
diff --git a/src/components/nav/nav-item.js b/src/components/nav/nav-item.js
@@ -7,14 +7,40 @@ export const props = linkPropsFactory()
 export default {
   name: 'BNavItem',
   functional: true,
-  props,
-  render(h, { props, data, children }) {
+  props: {
+    ...props,
+    linkAttrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    linkClasses: {
+      type: [String, Object, Array],
+      default: null
+    }
+  },
+  render(h, { props, data, listeners, children }) {
+    // We transfer the listeners to the link
+    delete data.on
     return h(
       'li',
       mergeData(data, {
         staticClass: 'nav-item'
       }),
-      [h(BLink, { staticClass: 'nav-link', props }, children)]
+      [
+        h(
+          BLink,
+          {
+            staticClass: 'nav-link',
+            class: props.linkClasses,
+            attrs: props.linkAttrs,
+            props,
+            on: listeners
+          },
+          children
+        )
+      ]
     )
   }
 }
diff --git a/src/components/nav/nav-item.spec.js b/src/components/nav/nav-item.spec.js
@@ -0,0 +1,98 @@
+import NavItem from './nav-item'
+import Link from '../link/link'
+import { mount } from '@vue/test-utils'
+
+describe('nav-item', async () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(NavItem)
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('nav-item')
+    expect(wrapper.classes().length).toBe(1)
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.is('a')).toBe(true)
+    expect(link.is(Link)).toBe(true)
+    expect(link.classes()).toContain('nav-link')
+    expect(link.classes().length).toBe(1)
+    expect(link.attributes('href')).toBeDefined()
+    expect(link.attributes('href')).toBe('#')
+    expect(link.attributes('role')).not.toBeDefined()
+  })
+
+  it('has attrs on link when link-attrs set', async () => {
+    const wrapper = mount(NavItem, {
+      context: {
+        props: {
+          linkAttrs: { role: 'tab' }
+        }
+      }
+    })
+    expect(wrapper.attributes('role')).not.toBeDefined()
+    const link = wrapper.find(Link)
+    expect(link).toBeDefined()
+    expect(link.attributes('role')).toBeDefined()
+    expect(link.attributes('role')).toBe('tab')
+  })
+
+  it('has custom classes on link when link-classes set', async () => {
+    const wrapper = mount(NavItem, {
+      context: {
+        props: {
+          linkClasses: ['foo', { bar: true }]
+        }
+      }
+    })
+    const link = wrapper.find(Link)
+    expect(link).toBeDefined()
+    expect(link.classes()).toContain('foo')
+    expect(link.classes()).toContain('bar')
+    expect(link.classes()).toContain('nav-link')
+  })
+
+  it('has class "disabled" on link when disabled set', async () => {
+    const wrapper = mount(NavItem, {
+      context: {
+        props: { disabled: true }
+      }
+    })
+    const link = wrapper.find(Link)
+    expect(link).toBeDefined()
+    expect(link.classes()).toContain('disabled')
+  })
+
+  it('emits click event when clicked', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(NavItem, {
+      context: {
+        on: { click: spy }
+      }
+    })
+    expect(spy).not.toHaveBeenCalled()
+    wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find(Link)
+    expect(link).toBeDefined()
+    link.trigger('click')
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('does not emit a click event when clicked and disabled', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(NavItem, {
+      context: {
+        props: { disabled: true },
+        on: { click: spy }
+      }
+    })
+    expect(spy).not.toHaveBeenCalled()
+    wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find(Link)
+    expect(link).toBeDefined()
+    link.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+  })
+})
