bootstrap-vue · tmorehouse · Mar 27, 2019 · Mar 27, 2019 · Mar 27, 2019 · Mar 27, 2019
diff --git a/src/components/badge/badge.spec.js b/src/components/badge/badge.spec.js
@@ -1,50 +1,117 @@
-import { loadFixture, testVM } from '../../../tests/utils'
-
-const variantList = [
-  'secondary',
-  'primary',
-  'success',
-  'info',
-  'warning',
-  'danger',
-  'dark',
-  'light'
-].map(variant => {
-  return { ref: `badge_${variant}`, variant }
-})
+import Badge from './badge'
+import { mount } from '@vue/test-utils'
 
 describe('badge', () => {
-  beforeEach(loadFixture(__dirname, 'badge'))
-  testVM()
+  it('should have base classes', async () => {
+    const wrapper = mount(Badge)
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).not.toBeDefined()
+  })
 
-  it('should apply variant classes', async () => {
-    const {
-      app: { $refs }
-    } = window
+  it('should have default slot content', async () => {
+    const wrapper = mount(Badge, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.text()).toBe('foobar')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).not.toBeDefined()
+  })
 
-    expect($refs.badge_pill).toHaveAllClasses(['badge', 'badge-pill'])
+  it('should apply variant class', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        variant: 'danger'
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('badge-danger')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
+  })
 
-    variantList.forEach(({ ref, variant }) => {
-      const vm = $refs[ref][0]
-      expect(vm).toHaveAllClasses(['badge', `badge-${variant}`])
+  it('should apply pill class', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        pill: true
+      }
     })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('badge-pill')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
   })
 
-  it('should apply secondary class when not passed variant', async () => {
-    const {
-      app: { $refs }
-    } = window
+  it('should have active class when prop active set', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        active: true
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('disabled')
+  })
 
-    const vm = $refs.no_props
-    expect(vm).toHaveClass('badge-secondary')
+  it('should have disabled class when prop disabled set', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('disabled')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
   })
 
-  it('should not apply pill class when not passed pill boolean prop', async () => {
-    const {
-      app: { $refs }
-    } = window
+  it('renders custom root element', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        tag: 'small'
+      }
+    })
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
+  })
 
-    const vm = $refs.no_props
-    expect(vm).not.toHaveClass('badge-pill')
+  it('renders link when href provided', async () => {
+    const wrapper = mount(Badge, {
+      propsData: {
+        href: '/foo/bar'
+      }
+    })
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.attributes('href')).toBeDefined()
+    expect(wrapper.attributes('href')).toBe('/foo/bar')
+    expect(wrapper.classes()).toContain('badge')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('badge-pill')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes()).not.toContain('disabled')
   })
 })
diff --git a/src/components/badge/fixtures/badge.html b/src/components/badge/fixtures/badge.html
diff --git a/src/components/badge/fixtures/badge.js b/src/components/badge/fixtures/badge.js
diff --git a/src/components/breadcrumb/breadcrumb-item.spec.js b/src/components/breadcrumb/breadcrumb-item.spec.js
@@ -0,0 +1,103 @@
+import BreadcrumbItem from './breadcrumb-item'
+import { mount } from '@vue/test-utils'
+
+describe('breadcrumb-item', () => {
+  it('has default classes and structure', async () => {
+    const wrapper = mount(BreadcrumbItem)
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes()).not.toContain('active')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('has class active when prop active is set', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        active: true
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('has link as child', async () => {
+    const wrapper = mount(BreadcrumbItem)
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.find('a').exists()).toBe(true)
+    expect(wrapper.find('a').attributes('href')).toBe('#')
+  })
+
+  it('has link as child and href', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        href: '/foo/bar'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.find('a').exists()).toBe(true)
+    expect(wrapper.find('a').attributes('href')).toBe('/foo/bar')
+  })
+
+  it('has child span and class active when prop active is set', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        active: true
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.find('span').exists()).toBe(true)
+  })
+
+  it('has child text content from prop text', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        active: true,
+        text: 'foobar'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('has child text content from prop html', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        active: true,
+        html: 'foobar'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('has child text content from default slot', async () => {
+    const wrapper = mount(BreadcrumbItem, {
+      propsData: {
+        active: true
+      },
+      slots: {
+        default: 'foobar'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+    expect(wrapper.classes()).toContain('active')
+    expect(wrapper.classes()).toContain('breadcrumb-item')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('foobar')
+  })
+})
diff --git a/src/components/breadcrumb/breadcrumb-link.spec.js b/src/components/breadcrumb/breadcrumb-link.spec.js
@@ -0,0 +1,93 @@
+import BreadcrumbLink from './breadcrumb-link'
+import { mount } from '@vue/test-utils'
+
+describe('breadcrumb-link', () => {
+  it('has default classes and structure', async () => {
+    const wrapper = mount(BreadcrumbLink)
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.attributes('href')).toBeDefined()
+    expect(wrapper.attributes('href')).toBe('#')
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('aria-current')).not.toBeDefined()
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('has content from default slot', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('has content from text prop', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        text: 'foobar'
+      }
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('has content from html prop', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        html: 'foobar'
+      }
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('has attribute aria-current when active', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        active: true
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.attributes('href')).not.toBeDefined()
+    expect(wrapper.attributes('aria-current')).toBe('location')
+    expect(wrapper.classes().length).toBe(0)
+  })
+
+  it('has attribute aria-current with custom value when active', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        active: true,
+        ariaCurrent: 'foobar'
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.attributes('aria-current')).toBe('foobar')
+    expect(wrapper.attributes('href')).not.toBeDefined()
+    expect(wrapper.classes().length).toBe(0)
+  })
+
+  it('renders link when href is set', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        href: '/foo/bar'
+      }
+    })
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.attributes('href')).toBeDefined()
+    expect(wrapper.attributes('href')).toBe('/foo/bar')
+    expect(wrapper.attributes('aria-current')).not.toBeDefined()
+    expect(wrapper.classes().length).toBe(0)
+  })
+
+  it('does not render a link when href is set and active', async () => {
+    const wrapper = mount(BreadcrumbLink, {
+      propsData: {
+        active: true,
+        href: '/foo/bar'
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.attributes('href')).not.toBeDefined()
+    expect(wrapper.attributes('aria-current')).toBeDefined()
+    expect(wrapper.attributes('aria-current')).toBe('location')
+    expect(wrapper.classes().length).toBe(0)
+  })
+})