bootstrap-vue · tmorehouse · Mar 20, 2019 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019
diff --git a/src/components/breadcrumb/fixtures/breadcrumb.html b/src/components/breadcrumb/fixtures/breadcrumb.html
@@ -6,6 +6,6 @@
                            v-bind="item"
                            :key="index" />
     </b-breadcrumb>
-    <!-- test when one of hte items has active set to true
-    <b-breadcrumb ref="breadcrumb3" :items="item2"></b-breadcrumb>
+    <!-- test when one of hte items has active set to true -->
+    <b-breadcrumb ref="breadcrumb3" :items="items3"></b-breadcrumb>
 </div>
diff --git a/src/components/breadcrumb/fixtures/breadcrumb.js b/src/components/breadcrumb/fixtures/breadcrumb.js
@@ -35,6 +35,24 @@ window.app = new Vue({
       {
         text: 'Library'
       }
+    ],
+    items3: [
+      {
+        text: 'Home',
+        href: 'https://bootstrap-vue.github.io'
+      },
+      {
+        text: 'Admin',
+        href: '#',
+        active: true
+      },
+      {
+        text: 'Manage',
+        href: '#'
+      },
+      {
+        text: 'Library'
+      }
     ]
   }
 })
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
@@ -22,11 +22,6 @@ export default {
       default: false
     }
   },
-  computed: {
-    classObject() {
-      return ['btn-toolbar', this.justify && !this.vertical ? 'justify-content-between' : '']
-    }
-  },
   mounted() {
     if (this.keyNav) {
       // Pre-set the tabindexes if the markup does not include tabindex="-1" on the toolbar items
@@ -41,62 +36,51 @@ export default {
         this.focusFirst(evt)
       }
     },
+    stop(evt) {
+      evt.preventDefault()
+      evt.stopPropagation()
+    },
     onKeydown(evt) {
       if (!this.keyNav) {
+        /* istanbul ignore next: should never happen */
         return
       }
       const key = evt.keyCode
       const shift = evt.shiftKey
       if (key === KeyCodes.UP || key === KeyCodes.LEFT) {
-        evt.preventDefault()
-        evt.stopPropagation()
-        if (shift) {
-          this.focusFirst(evt)
-        } else {
-          this.focusNext(evt, true)
-        }
+        this.stop(evt)
+        shift ? this.focusFirst(evt) : this.focusPrev(evt)
       } else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT) {
-        evt.preventDefault()
-        evt.stopPropagation()
-        if (shift) {
-          this.focusLast(evt)
-        } else {
-          this.focusNext(evt, false)
-        }
+        this.stop(evt)
+        shift ? this.focusLast(evt) : this.focusNext(evt)
       }
     },
     setItemFocus(item) {
-      this.$nextTick(() => {
-        item.focus()
-      })
+      item && item.focus && item.focus()
     },
-    focusNext(evt, prev) {
+    focusFirst(evt) {
       const items = this.getItems()
-      if (items.length < 1) {
-        return
-      }
-      let index = items.indexOf(evt.target)
-      if (prev && index > 0) {
-        index--
-      } else if (!prev && index < items.length - 1) {
-        index++
-      }
-      if (index < 0) {
-        index = 0
+      this.setItemFocus(items[0])
+    },
+    focusPrev(evt) {
+      let items = this.getItems()
+      const index = items.indexOf(evt.target)
+      if (index > -1) {
+        items = items.slice(0, index).reverse()
+        this.setItemFocus(items[0])
       }
-      this.setItemFocus(items[index])
     },
-    focusFirst(evt) {
-      const items = this.getItems()
-      if (items.length > 0) {
+    focusNext(evt) {
+      let items = this.getItems()
+      const index = items.indexOf(evt.target)
+      if (index > -1) {
+        items = items.slice(index + 1)
         this.setItemFocus(items[0])
       }
     },
     focusLast(evt) {
-      const items = this.getItems()
-      if (items.length > 0) {
-        this.setItemFocus([items.length - 1])
-      }
+      const items = this.getItems().reverse()
+      this.setItemFocus(items[0])
     },
     getItems() {
       let items = selectAll(ITEM_SELECTOR, this.$el)
@@ -111,15 +95,18 @@ export default {
     return h(
       'div',
       {
-        class: this.classObject,
+        staticClass: 'btn-toolbar',
+        class: { 'justify-content-between': this.justify },
         attrs: {
           role: 'toolbar',
           tabindex: this.keyNav ? '0' : null
         },
-        on: {
-          focusin: this.onFocusin,
-          keydown: this.onKeydown
-        }
+        on: this.keyNav
+          ? {
+              focusin: this.onFocusin,
+              keydown: this.onKeydown
+            }
+          : {}
       },
       [this.$slots.default]
     )

diff --git a/src/components/button-toolbar/button-toolbar.spec.js b/src/components/button-toolbar/button-toolbar.spec.js
@@ -1,22 +1,195 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import ButtonToolbar from './button-toolbar'
+import ButtonGroup from '../button-group/button-group'
+import Button from '../button/button'
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
 
 describe('button-toolbar', () => {
-  beforeEach(loadFixture(__dirname, 'button-toolbar'))
-  testVM()
+  it('toolbar root should be "div"', async () => {
+    const wrapper = mount(ButtonToolbar, {})
+    expect(wrapper.is('div')).toBe(true)
+    wrapper.destroy()
+  })
 
   it('toolbar should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
+    const wrapper = mount(ButtonToolbar, {})
+    expect(wrapper.classes()).toContain('btn-toolbar')
+    wrapper.destroy()
+  })
 
-    expect($refs.toolbar).toHaveClass('btn-toolbar')
+  it('toolbar should not have class "justify-content-between"', async () => {
+    const wrapper = mount(ButtonToolbar, {})
+    expect(wrapper.classes()).not.toContain('justify-content-between')
+    wrapper.destroy()
   })
 
   it('toolbar should have role', async () => {
-    const {
-      app: { $refs }
-    } = window
+    const wrapper = mount(ButtonToolbar, {})
+    expect(wrapper.attributes('role')).toBe('toolbar')
+    wrapper.destroy()
+  })
+
+  it('toolbar should not have tabindex by default', async () => {
+    const wrapper = mount(ButtonToolbar, {})
+    expect(wrapper.attributes('tabindex')).not.toBeDefined()
+    wrapper.destroy()
+  })
+
+  it('toolbar should have class "justify-content-between" when justify set', async () => {
+    const wrapper = mount(ButtonToolbar, {
+      propsData: {
+        justify: true
+      }
+    })
+    expect(wrapper.classes()).toContain('justify-content-between')
+    expect(wrapper.classes()).toContain('btn-toolbar')
+    wrapper.destroy()
+  })
+
+  it('toolbar should have tabindex when key-nav set', async () => {
+    const wrapper = mount(ButtonToolbar, {
+      propsData: {
+        keyNav: true
+      }
+    })
+    expect(wrapper.attributes('tabindex')).toBeDefined()
+    expect(wrapper.attributes('tabindex')).toBe('0')
+    expect(wrapper.element.tabIndex).toBe(0)
+    wrapper.destroy()
+  })
+
+  // These tests are wrapped in a new describe to limit the scope of the getBCR Mock
+  describe('keyboard navigation', () => {
+    const origGetBCR = Element.prototype.getBoundingClientRect
+
+    beforeEach(() => {
+      // Mock getBCR so that the isVisible(el) test returns true
+      // In our test below, all pagination buttons would normally be visible
+      Element.prototype.getBoundingClientRect = jest.fn(() => {
+        return {
+          width: 24,
+          height: 24,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0
+        }
+      })
+    })
+
+    afterEach(() => {
+      // Restore prototype
+      Element.prototype.getBoundingClientRect = origGetBCR
+    })
+
+    // Test App for keynav
+    const App = Vue.extend({
+      render(h) {
+        return h(ButtonToolbar, { props: { keyNav: true } }, [
+          h(ButtonGroup, {}, [h(Button, {}, 'a'), h(Button, {}, 'b')]),
+          h(ButtonGroup, {}, [h(Button, { props: { disabled: true } }, 'c'), h(Button, {}, 'd')]),
+          h(ButtonGroup, {}, [h(Button, {}, 'e'), h(Button, {}, 'f')])
+        ])
+      }
+    })
+
+    it('has correct structure', async () => {
+      const wrapper = mount(App, {
+        attachToDocument: true
+      })
+
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.is('div.btn-toolbar')).toBe(true)
+      expect(wrapper.attributes('tabindex')).toBe('0')
+
+      const $groups = wrapper.findAll('.btn-group')
+      expect($groups).toBeDefined()
+      expect($groups.length).toBe(3)
+      expect($groups.is(ButtonGroup)).toBe(true)
+
+      const $btns = wrapper.findAll('button')
+      expect($btns).toBeDefined()
+      expect($btns.length).toBe(6)
+      expect($btns.is(Button)).toBe(true)
+      expect($btns.at(0).is('button[tabindex="-1"')).toBe(true)
+      expect($btns.at(1).is('button[tabindex="-1"')).toBe(true)
+      expect($btns.at(2).is('button[tabindex="-1"')).toBe(false) // disabled button
+      expect($btns.at(3).is('button[tabindex="-1"')).toBe(true)
+      expect($btns.at(4).is('button[tabindex="-1"')).toBe(true)
+      expect($btns.at(5).is('button[tabindex="-1"')).toBe(true)
+
+      wrapper.destroy()
+    })
+
+    it('focuses first button when tabbed into', async () => {
+      const wrapper = mount(App, {
+        attachToDocument: true
+      })
+
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.is('div.btn-toolbar')).toBe(true)
+      expect(wrapper.attributes('tabindex')).toBe('0')
+
+      const $btns = wrapper.findAll('button')
+      expect($btns).toBeDefined()
+      expect($btns.length).toBe(6)
+
+      expect(document.activeElement).not.toBe(wrapper.element)
+      expect(document.activeElement).not.toBe($btns.at(0).element)
+
+      wrapper.trigger('focusin')
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(0).element)
+
+      wrapper.destroy()
+    })
+
+    it('keyboard navigation works', async () => {
+      const wrapper = mount(App, {
+        attachToDocument: true
+      })
+
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.is('div.btn-toolbar')).toBe(true)
+      expect(wrapper.attributes('tabindex')).toBe('0')
+
+      const $btns = wrapper.findAll('button')
+      expect($btns).toBeDefined()
+      expect($btns.length).toBe(6)
+
+      // Focus first button
+      $btns.at(0).element.focus()
+      expect(document.activeElement).toBe($btns.at(0).element)
+
+      // Cursor right
+      $btns.at(0).trigger('keydown.right')
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(1).element)
+
+      // Cursor right (skips disabled button)
+      $btns.at(1).trigger('keydown.right')
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(3).element)
+
+      // Cursor shift-right (focuses last button)
+      $btns.at(1).trigger('keydown.right', { shiftKey: true })
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(5).element)
+
+      // Cursor left
+      $btns.at(5).trigger('keydown.left')
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(4).element)
+
+      // Cursor shift left (focuses first button)
+      $btns.at(5).trigger('keydown.left', { shiftKey: true })
+      await wrapper.vm.$nextTick()
+      expect(document.activeElement).toBe($btns.at(0).element)
 
-    expect($refs.toolbar.$el.getAttribute('role')).toBe('toolbar')
+      wrapper.destroy()
+    })
   })
 })
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.html b/src/components/button-toolbar/fixtures/button-toolbar.html
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.js b/src/components/button-toolbar/fixtures/button-toolbar.js
diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js
@@ -114,6 +114,7 @@ export default {
         on: noDrag
           ? {
               dragstart: e => {
+                /* istanbul ignore next: difficult to test in JSDOM */
                 e.preventDefault()
               }
             }