bootstrap-vue
diff --git a/‎src/components/button-group/button-group.spec.js
Lines changed: 68 additions & 18 deletions b/‎src/components/button-group/button-group.spec.js
Lines changed: 68 additions & 18 deletions
diff --git a/‎src/components/button-group/fixtures/button-group.html
Lines changed: 0 additions & 27 deletions b/‎src/components/button-group/fixtures/button-group.html
Lines changed: 0 additions & 27 deletions
diff --git a/‎src/components/button-group/fixtures/button-group.js
Lines changed: 0 additions & 3 deletions b/‎src/components/button-group/fixtures/button-group.js
Lines changed: 0 additions & 3 deletions
@@ -1,30 +1,80 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import ButtonGroup from './button-group'
+import { mount } from '@vue/test-utils'
 
 describe('button-group', () => {
-  beforeEach(loadFixture(__dirname, 'button-group'))
-  testVM()
-
-  it('basic should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
+  it('has expected default structure', async () => {
+    const wrapper = mount(ButtonGroup)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('group')
+    expect(wrapper.text()).toBe('')
+  })
 
-    expect($refs.basic).toHaveClass('btn-group')
+  it('should render default slot', async () => {
+    const wrapper = mount(ButtonGroup, {
+      slots: {
+        default: '<span>foobar</span>'
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('group')
+    expect(wrapper.find('span').exists()).toBe(true)
+    expect(wrapper.text()).toBe('foobar')
   })
 
   it('should apply vertical class', async () => {
-    const {
-      app: { $refs }
-    } = window
-
-    expect($refs.vertical).toHaveClass('btn-group-vertical')
+    const wrapper = mount(ButtonGroup, {
+      propsData: {
+        vertical: true
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group-vertical')
+    expect(wrapper.classes()).not.toContain('btn-group')
+    expect(wrapper.classes().length).toBe(1)
   })
 
   it('should apply size class', async () => {
-    const {
-      app: { $refs }
-    } = window
+    const wrapper = mount(ButtonGroup, {
+      propsData: {
+        size: 'sm'
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group')
+    expect(wrapper.classes()).toContain('btn-group-sm')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('should apply size class when vertical', async () => {
+    const wrapper = mount(ButtonGroup, {
+      propsData: {
+        size: 'sm',
+        vertical: true
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group-sm')
+    expect(wrapper.classes()).toContain('btn-group-vertical')
+    expect(wrapper.classes()).not.toContain('btn-group')
+    expect(wrapper.classes().length).toBe(2)
+  })
 
-    expect($refs.size).toHaveClass('btn-group-sm')
+  it('has custom role when aria-role prop set', async () => {
+    const wrapper = mount(ButtonGroup, {
+      propsData: {
+        ariaRole: 'foobar'
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('btn-group')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('foobar')
   })
 })