tests: updates (bootstrap-vue#1453)

tmorehouse · web-flow · commit 117e68fd5315 · 2017-12-12T00:11:52.000-04:00
diff --git a/src/components/button-toolbar/button-toolbar.spec.js b/src/components/button-toolbar/button-toolbar.spec.js
@@ -0,0 +1,18 @@
+import { loadFixture, testVM } from '../../../tests/utils'
+
+describe('button-toolbar', async () => {
+  beforeEach(loadFixture(__dirname, 'button-toolbar'))
+  testVM()
+
+  it('toolbar should contain base class', async () => {
+    const { app: { $refs } } = window
+
+    expect($refs.toolbar).toHaveClass('btn-toolbar')
+  })
+
+  it('toolbar should have role', async () => {
+    const { app: { $refs } } = window
+
+    expect($refs.toolbar.$el.getAttribute('role')).toBe('toolbar')
+  })
+})
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.html b/src/components/button-toolbar/fixtures/button-toolbar.html
@@ -0,0 +1,17 @@
+<div id="app">
+  <b-button-toolbar ref="toolbar" key-nav aria-label="Toolbar with button groups">
+    <b-button-group class="mx-1">
+      <b-btn>&laquo;</b-btn>
+      <b-btn>&lsaquo;</b-btn>
+    </b-button-group>
+    <b-button-group class="mx-1">
+      <b-btn>Edit</b-btn>
+      <b-btn>Undo</b-btn>
+      <b-btn>Redo</b-btn>
+    </b-button-group>
+    <b-button-group class="mx-1">
+      <b-btn>&rsaquo;</b-btn>
+      <b-btn>&raquo;</b-btn>
+    </b-button-group>
+  </b-button-toolbar>
+</div>
diff --git a/src/components/button-toolbar/fixtures/button-toolbar.js b/src/components/button-toolbar/fixtures/button-toolbar.js
@@ -0,0 +1,3 @@
+window.app = new Vue({
+  el: '#app'
+})
diff --git a/src/components/button/button-close.spec.js b/src/components/button/button-close.spec.js
@@ -0,0 +1,65 @@
+import { loadFixture, testVM } from '../../../tests/utils'
+
+describe('button-close', async () => {
+  beforeEach(loadFixture(__dirname, 'button-close'))
+  testVM()
+
+  it('default should have class close', async () => {
+    const { app: { $refs } } = window
+    expect($refs.default).toHaveClass('close')
+  })
+
+  it('slot should have class close', async () => {
+    const { app: { $refs } } = window
+    expect($refs.slot).toHaveClass('close')
+  })
+
+  it('disabled should have class close', async () => {
+    const { app: { $refs } } = window
+    expect($refs.disabled).toHaveClass('close')
+  })
+
+  it('variant should have classes close and text-primary', async () => {
+    const { app: { $refs } } = window
+    expect($refs.variant).toHaveAllClasses(['close', 'text-primary'])
+  })
+
+  it('slot should have custom content', async () => {
+    const { app: { $refs } } = window
+    expect($refs.slot.innerHTML).toContain('close')
+  })
+
+  it('default should emit "click" event when clicked', async () => {
+    const { app: { $refs } } = window
+    const btn = $refs.default
+    const spy = jest.fn()
+
+    btn.addEventListener('click', spy)
+    btn.click()
+
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it('default should emit "click" event with native event object', async () => {
+    const { app: { $refs } } = window
+    const btn = $refs.default
+    let event = null
+
+    btn.addEventListener('click', e => (event = e))
+    btn.click()
+
+    expect(event).toBeInstanceOf(MouseEvent)
+  })
+
+  it('disabled should be disabled and not emit click event with `disabled` prop true', async () => {
+    const { app: { $refs } } = window
+    const btn = $refs.disabled
+    const spy = jest.fn()
+
+    btn.addEventListener('click', spy)
+    btn.click()
+
+    expect(btn.disabled).toBe(true)
+    expect(spy).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
@@ -126,6 +126,25 @@ describe('button', async () => {
     expect(vm.getAttribute('aria-pressed')).toBe('true')
   })
 
+  /*
+   * I have no clue why this test fails.
+  it('pressed should have `.focus` class when focused', async () => {
+    const { app } = window
+    const btn = app.$refs.btn_pressed
+
+    await setData(app, 'btnToggle', false)
+    await nextTick()
+
+    btn.focus()
+    await nextTick()
+    expect(btn).toHaveClass('focus')
+
+    btn.blur()
+    await nextTick()
+    expect(btn).not.toHaveClass('focus')
+  })
+  */
+
   it('should update the parent sync value on click and when pressed is not null', async () => {
     const { app } = window
     const vm = app.$refs.btn_pressed
diff --git a/src/components/button/fixtures/button-close.html b/src/components/button/fixtures/button-close.html
@@ -0,0 +1,6 @@
+<div id="app">
+  <b-button-close ref="default"></b-button-close>
+  <b-button-close ref="slot">close</b-button-close>
+  <b-button-close ref="disabled" disabled></b-button-close>
+  <b-button-close ref="variant" text-variant="primary"></b-button-close>
+</div>
diff --git a/src/components/button/fixtures/button-close.js b/src/components/button/fixtures/button-close.js
@@ -0,0 +1,3 @@
+window.app = new Vue({
+  el: '#app'
+})
diff --git a/src/utils/dom.js b/src/utils/dom.js
@@ -58,6 +58,7 @@ export const matches = (el, selector) => {
         proto.msMatchesSelector ||
         proto.oMatchesSelector ||
         proto.webkitMatchesSelector ||
+        /* istanbul ignore next */
         function (sel) {
           const element = this
           const m = selectAll(sel, element.document || element.ownerDocument)
@@ -79,20 +80,22 @@ export const closest = (selector, root) => {
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
   // Since we dont support IE < 10, we can use the "Matches" version of the polyfill for speed
   // Prefer native implementation over polyfill function
-  const Closest = Element.prototype.closest || function (sel) {
-    let element = this
-    if (!document.documentElement.contains(element)) {
-      return null
-    }
-    do {
-      // Use our "patched" matches function
-      if (matches(element, sel)) {
-        return element
-      }
-      element = element.parentElement
-    } while (element !== null)
-    return null
-  }
+  const Closest = Element.prototype.closest ||
+                  /* istanbul ignore next */
+                  function (sel) {
+                    let element = this
+                    if (!document.documentElement.contains(element)) {
+                      return null
+                    }
+                    do {
+                      // Use our "patched" matches function
+                      if (matches(element, sel)) {
+                        return element
+                      }
+                      element = element.parentElement
+                    } while (element !== null)
+                    return null
+                  }
 
   const el = Closest.call(root, selector)
   // Emulate jQuery closest and return null if match is the passed in element (root)

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+window.app = new Vue({`
	`2`	`+ el: '#app'`
	`3`	`+})`