fix(BDropdownItem): contains disabled on button

refactor(BDropdownItem): prop variant explicit

test: dropdown-divider.spec.ts

test: dropdown-form.spec.ts

test: dropdown-header.spec.ts

test: dropdown-item.spec.ts

Author: VividLemon

packages/bootstrap-vue-3/src/components/BDropdown/BDropdownItem.vue

@@ -33,7 +33,6 @@ const props = withDefaults(defineProps<BDropdownItemProps>(), {
   active: false,
   disabled: false,
   rel: undefined,
-  variant: undefined,
   target: '_self',
 })
 
@@ -51,14 +50,15 @@ const attrs = useAttrs()
 const classes = computed(() => ({
   active: activeBoolean.value,
   disabled: disabledBoolean.value,
-  [`text-${props.variant}`]: !!props.variant,
+  [`text-${props.variant}`]: props.variant !== undefined,
 }))
 
 const tag = computed<'button' | 'a' | typeof BLink>(() =>
   props.href ? 'a' : attrs.to ? BLink : 'button'
 )
 
 const componentAttrs = computed(() => ({
+  'disabled': disabledBoolean.value,
   'aria-current': activeBoolean.value ? 'true' : null,
   'href': tag.value === 'a' ? props.href : null,
   'rel': props.rel,
@@ -67,6 +67,7 @@ const componentAttrs = computed(() => ({
   ...(attrs.to ? {activeClass: 'active', ...attrs} : {}),
 }))
 
+// Pretty sure this emits if tag is not button and is diabled
 const clicked = (e: MouseEvent): void => emit('click', e)
 </script>
 

packages/bootstrap-vue-3/src/components/BDropdown/dropdown-divider.spec.ts

@@ -0,0 +1,51 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BDropdownDivider from './BDropdownDivider.vue'
+
+describe('dropdown-divider', () => {
+  enableAutoUnmount(afterEach)
+
+  it('is tag li', () => {
+    const wrapper = mount(BDropdownDivider)
+    expect(wrapper.element.tagName).toBe('LI')
+  })
+
+  it('has static attr role to be presentation', () => {
+    const wrapper = mount(BDropdownDivider)
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('has child hr when not prop hr', () => {
+    const wrapper = mount(BDropdownDivider)
+    const $hr = wrapper.find('hr')
+    expect($hr.exists()).toBe(true)
+  })
+
+  it('has child hr is prop tag', () => {
+    const wrapper = mount(BDropdownDivider, {
+      props: {tag: 'h4'},
+    })
+    const $hr = wrapper.find('hr')
+    const $h4 = wrapper.find('h4')
+    expect($hr.exists()).toBe(false)
+    expect($h4.exists()).toBe(true)
+  })
+
+  it('child hr has static class dropdown-divider', () => {
+    const wrapper = mount(BDropdownDivider)
+    const $hr = wrapper.get('hr')
+    expect($hr.classes()).toContain('dropdown-divider')
+  })
+
+  it('child hr has static attr role to be separator', () => {
+    const wrapper = mount(BDropdownDivider)
+    const $hr = wrapper.get('hr')
+    expect($hr.attributes('role')).toBe('separator')
+  })
+
+  it('child hr has static attr aria-orientation to be horizontal', () => {
+    const wrapper = mount(BDropdownDivider)
+    const $hr = wrapper.get('hr')
+    expect($hr.attributes('aria-orientation')).toBe('horizontal')
+  })
+})

packages/bootstrap-vue-3/src/components/BDropdown/dropdown-form.spec.ts

@@ -0,0 +1,43 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BDropdownForm from './BDropdownForm.vue'
+
+describe('dropdown-form', () => {
+  enableAutoUnmount(afterEach)
+
+  it('tag is li', () => {
+    const wrapper = mount(BDropdownForm)
+    expect(wrapper.element.tagName).toBe('LI')
+  })
+
+  it('has static role to be presentation', () => {
+    const wrapper = mount(BDropdownForm)
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('has child form', () => {
+    const wrapper = mount(BDropdownForm)
+    const $form = wrapper.find('form')
+    expect($form.exists()).toBe(true)
+  })
+
+  it('child form has static class px-4', () => {
+    const wrapper = mount(BDropdownForm)
+    const $form = wrapper.get('form')
+    expect($form.classes()).toContain('px-4')
+  })
+
+  it('child form has static class py-3', () => {
+    const wrapper = mount(BDropdownForm)
+    const $form = wrapper.get('form')
+    expect($form.classes()).toContain('py-3')
+  })
+
+  it('child form renders default slot', () => {
+    const wrapper = mount(BDropdownForm, {
+      slots: {default: 'foobar'},
+    })
+    const $form = wrapper.get('form')
+    expect($form.text()).toBe('foobar')
+  })
+})

packages/bootstrap-vue-3/src/components/BDropdown/dropdown-header.spec.ts

@@ -0,0 +1,32 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BDropdownHeader from './BDropdownHeader.vue'
+
+describe('dropdown-header', () => {
+  enableAutoUnmount(afterEach)
+
+  it('tag is li', () => {
+    const wrapper = mount(BDropdownHeader)
+    expect(wrapper.element.tagName).toBe('LI')
+  })
+
+  it('has child h6', () => {
+    const wrapper = mount(BDropdownHeader)
+    const $h6 = wrapper.find('h6')
+    expect($h6.exists()).toBe(true)
+  })
+
+  it('child h6 has static class dropdown-header', () => {
+    const wrapper = mount(BDropdownHeader)
+    const $h6 = wrapper.get('h6')
+    expect($h6.classes()).toContain('dropdown-header')
+  })
+
+  it('child h6 renders default slot', () => {
+    const wrapper = mount(BDropdownHeader, {
+      slots: {default: 'foobar'},
+    })
+    const $h6 = wrapper.get('h6')
+    expect($h6.text()).toBe('foobar')
+  })
+})

packages/bootstrap-vue-3/src/components/BDropdown/dropdown-item.spec.ts

@@ -0,0 +1,198 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BDropdownItem from './BDropdownItem.vue'
+import BLink from '../BLink/BLink.vue'
+
+describe('dropdown-item', () => {
+  enableAutoUnmount(afterEach)
+
+  it('is tag li', () => {
+    const wrapper = mount(BDropdownItem)
+    expect(wrapper.element.tagName).toBe('LI')
+  })
+
+  it('has static attr role to be presentation', () => {
+    const wrapper = mount(BDropdownItem)
+    expect(wrapper.attributes('role')).toBe('presentation')
+  })
+
+  it('has child with dynamic tag of button by default', () => {
+    const wrapper = mount(BDropdownItem)
+    const $button = wrapper.find('button')
+    expect($button.exists()).toBe(true)
+  })
+
+  it('child is tag a when prop href', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {href: '/abc'},
+    })
+    const $button = wrapper.find('button')
+    const $a = wrapper.find('a')
+    expect($button.exists()).toBe(false)
+    expect($a.exists()).toBe(true)
+  })
+
+  it('child is tag BLink when prop to', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {to: '/abc'},
+    })
+    const $button = wrapper.find('button')
+    const $blink = wrapper.findComponent(BLink)
+    expect($button.exists()).toBe(false)
+    expect($blink.exists()).toBe(true)
+  })
+
+  it('child is tag prefers a over blink', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {href: '/abc', to: '/abc'},
+    })
+    const $a = wrapper.find('a')
+    const $blink = wrapper.findComponent(BLink)
+    expect($blink.exists()).toBe(false)
+    expect($a.exists()).toBe(true)
+  })
+
+  it('child is tag prefers Blink over button', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {to: '/abc'},
+    })
+    const $button = wrapper.find('button')
+    const $blink = wrapper.findComponent(BLink)
+    expect($blink.exists()).toBe(true)
+    expect($button.exists()).toBe(false)
+  })
+
+  it('button child contains static class dropdown-item', () => {
+    const wrapper = mount(BDropdownItem)
+    const $button = wrapper.get('button')
+    expect($button.classes()).toContain('dropdown-item')
+  })
+
+  it('button renders default slot', () => {
+    const wrapper = mount(BDropdownItem, {
+      slots: {default: 'foobar'},
+    })
+    const $button = wrapper.get('button')
+    expect($button.text()).toBe('foobar')
+  })
+
+  it('button contains prop link class as class', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {linkClass: ['foo']},
+    })
+    const $button = wrapper.get('button')
+    expect($button.classes()).toContain('foo')
+  })
+
+  it('button has class active when prop active', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {active: true},
+    })
+    const $button = wrapper.get('button')
+    expect($button.classes()).toContain('active')
+    await wrapper.setProps({active: false})
+    expect($button.classes()).not.toContain('active')
+  })
+
+  it('button has class disabled when prop disabled', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {disabled: true},
+    })
+    const $button = wrapper.get('button')
+    expect($button.classes()).toContain('disabled')
+    await wrapper.setProps({disabled: false})
+    expect($button.classes()).not.toContain('disabled')
+  })
+
+  it('button has class text-{type} when prop variant', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {variant: 'danger'},
+    })
+    const $button = wrapper.get('button')
+    expect($button.classes()).toContain('text-danger')
+    await wrapper.setProps({variant: undefined})
+    expect($button.classes()).not.toContain('text-danger')
+  })
+
+  it('emits a click event when clicked', async () => {
+    const wrapper = mount(BDropdownItem)
+    const $button = wrapper.get('button')
+    await $button.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+  })
+
+  it('click event passes value MouseEvent', async () => {
+    const wrapper = mount(BDropdownItem)
+    const $button = wrapper.get('button')
+    await $button.trigger('click')
+    const $emitted = wrapper.emitted('click') ?? []
+    expect($emitted[0][0] instanceof MouseEvent).toBe(true)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {disabled: true},
+    })
+    const $button = wrapper.get('button')
+    await $button.trigger('click')
+    expect(wrapper.emitted()).not.toHaveProperty('click')
+  })
+
+  it('button has disabled attr when prop disabled', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {disabled: true},
+    })
+    const $button = wrapper.get('button')
+    expect($button.attributes('disabled')).toBe('')
+    await wrapper.setProps({disabled: false})
+    expect($button.attributes('disabled')).toBeUndefined()
+  })
+
+  it('button has aria-current attr when prop active', async () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {active: true},
+    })
+    const $button = wrapper.get('button')
+    expect($button.attributes('aria-current')).toBe('true')
+    await wrapper.setProps({active: false})
+    expect($button.attributes('aria-current')).toBeUndefined()
+  })
+
+  it('button has href attr when prop href', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {href: '/abc'},
+    })
+    const $a = wrapper.get('a')
+    expect($a.attributes('href')).toBe('/abc')
+  })
+
+  it('button has rel attr when prop rel', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {rel: 'foobar'},
+    })
+    const $button = wrapper.get('button')
+    expect($button.attributes('rel')).toBe('foobar')
+  })
+
+  it('button has target attr when prop target', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {target: '_parent'},
+    })
+    const $button = wrapper.get('button')
+    expect($button.attributes('target')).toBe('_parent')
+  })
+
+  it('button has type button when tag is button', () => {
+    const wrapper = mount(BDropdownItem)
+    const $button = wrapper.get('button')
+    expect($button.attributes('type')).toBe('button')
+  })
+
+  it('does not have type button when tag is not button', () => {
+    const wrapper = mount(BDropdownItem, {
+      props: {href: '/abc'},
+    })
+    const $a = wrapper.get('a')
+    expect($a.attributes('type')).toBeUndefined()
+  })
+})