Merge pull request #614 from VividLemon/master

fix(BButton): fixes and tests related to prop loading

Author: VividLemon

packages/bootstrap-vue-3/src/components/BButton/BButton.vue

@@ -1,29 +1,33 @@
 <template>
   <component :is="computedTag" class="btn" :class="classes" v-bind="attrs" @click="clicked">
     <div
-      v-if="loading"
+      v-if="loadingBoolean"
       class="btn-loading"
       :class="{'mode-fill': loadingMode === 'fill', 'mode-inline': loadingMode === 'inline'}"
     >
       <slot name="loading">
-        <BSpinner class="btn-spinner" :small="size !== 'lg'"></BSpinner>
+        <b-spinner class="btn-spinner" :small="size !== 'lg'" />
       </slot>
     </div>
-    <div class="btn-content" :class="{'btn-loading-fill': loading && loadingMode == 'fill'}">
+    <div
+      class="btn-content"
+      :class="{'btn-loading-fill': loadingBoolean && loadingMode === 'fill'}"
+    >
       <slot />
     </div>
   </component>
 </template>
 
 <script lang="ts">
 import {computed, defineComponent, PropType, toRef} from 'vue'
+import BSpinner from '../BSpinner.vue'
 import {useBooleanish} from '../../composables'
 import type {Booleanish, ButtonType, ButtonVariant, InputSize, LinkTarget} from '../../types'
 import {isLink} from '../../utils'
 import BLink, {BLINK_PROPS} from '../BLink/BLink.vue'
 
 export default defineComponent({
-  components: {BLink},
+  components: {BLink, BSpinner},
   props: {
     ...BLINK_PROPS,
     active: {type: [Boolean, String] as PropType<Booleanish>, default: false},
@@ -48,6 +52,7 @@ export default defineComponent({
     const pillBoolean = useBooleanish(toRef(props, 'pill'))
     const pressedBoolean = useBooleanish(toRef(props, 'pressed'))
     const squaredBoolean = useBooleanish(toRef(props, 'squared'))
+    const loadingBoolean = useBooleanish(toRef(props, 'loading'))
 
     const isToggle = computed<boolean>(() => pressedBoolean.value === true)
     const isButton = computed<boolean>(
@@ -111,6 +116,7 @@ export default defineComponent({
       attrs,
       computedTag,
       clicked,
+      loadingBoolean,
     }
   },
 })

packages/bootstrap-vue-3/src/components/BButton/button.spec.ts

@@ -1,5 +1,6 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, describe, expect, it} from 'vitest'
+import BSpinner from '../BSpinner.vue'
 import BButton from './BButton.vue'
 import BLink from '../BLink/BLink.vue'
 
@@ -461,4 +462,139 @@ describe('button', () => {
     })
     expect(wrapper.text()).toBe('foobar')
   })
+
+  it('contains div child when prop loading', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true},
+    })
+    const $div = wrapper.find('div')
+    expect($div.exists()).toBe(true)
+  })
+
+  it('first div child has static class btn-loading', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true},
+    })
+    const $div = wrapper.get('div')
+    expect($div.classes()).toContain('btn-loading')
+  })
+
+  it('first div child has class mode-fill when prop loadingMode is fill', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'fill'},
+    })
+    const $div = wrapper.get('div')
+    expect($div.classes()).toContain('mode-fill')
+  })
+
+  it('first div child has class mode-inline when prop loadingMode is inline', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+    })
+    const $div = wrapper.get('div')
+    expect($div.classes()).toContain('mode-inline')
+  })
+
+  it('first div child has nested BSpinner by default', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+    })
+    const $div = wrapper.get('div')
+    const $bspinner = $div.findComponent(BSpinner)
+    expect($bspinner.exists()).toBe(true)
+  })
+
+  it('first div child nested BSpinner has static class btn-spinner', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+    })
+    const $div = wrapper.get('div')
+    const $bspinner = $div.getComponent(BSpinner)
+    expect($bspinner.classes()).toContain('btn-spinner')
+  })
+
+  it('first div child nested BSpinner has prop small true when size is not lg', async () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+    })
+    const $div = wrapper.get('div')
+    const $bspinner = $div.getComponent(BSpinner)
+    expect($bspinner.props('small')).toBe(true)
+    await wrapper.setProps({size: 'lg'})
+    expect($bspinner.props('small')).toBe(false)
+  })
+
+  it('first div child does not have bspinner when slot loading', async () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+      slots: {loading: 'loading...'},
+    })
+    const $div = wrapper.get('div')
+    const $bspinner = $div.findComponent(BSpinner)
+    expect($bspinner.exists()).toBe(false)
+  })
+
+  it('first div child renders slot loading', async () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'inline'},
+      slots: {loading: 'loading...'},
+    })
+    const $div = wrapper.get('div')
+    expect($div.text()).toBe('loading...')
+  })
+
+  it('both child divs exist when prop loading', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true},
+    })
+    const [$first, $second] = wrapper.findAll('div')
+    expect($first.exists()).toBe(true)
+    expect($second.exists()).toBe(true)
+  })
+
+  it('has a second child div when not prop loading', () => {
+    const wrapper = mount(BButton)
+    const $div = wrapper.find('div')
+    expect($div.exists()).toBe(true)
+  })
+
+  it('second child div has static class btn-content', () => {
+    const wrapper = mount(BButton)
+    const $div = wrapper.get('div')
+    expect($div.classes()).toContain('btn-content')
+  })
+
+  it('second child div does not have class btn-loading-fill when prop loading false', () => {
+    const wrapper = mount(BButton)
+    const $div = wrapper.get('div')
+    expect($div.classes()).not.toContain('btn-loading-fill')
+  })
+
+  it('second child div has class btn-loading-fill when prop loading and loadingMode is fill', async () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true, loadingMode: 'fill'},
+    })
+    const [, $div] = wrapper.findAll('div')
+    expect($div.classes()).toContain('btn-loading-fill')
+    await wrapper.setProps({loadingMode: 'inline'})
+    expect($div.classes()).not.toContain('btn-loading-fill')
+  })
+
+  it('second child div renders default slot', () => {
+    const wrapper = mount(BButton, {
+      slots: {default: 'foobar'},
+    })
+    const $div = wrapper.get('div')
+    expect($div.text()).toBe('foobar')
+  })
+
+  it('renders both slots when prop loading in correct order', () => {
+    const wrapper = mount(BButton, {
+      props: {loading: true},
+      slots: {default: 'foobar', loading: 'loading'},
+    })
+    const [$first, $second] = wrapper.findAll('div')
+    expect($first.text()).toBe('loading')
+    expect($second.text()).toBe('foobar')
+  })
 })

packages/bootstrap-vue-3/src/components/BFormSelect/BFormSelectOption.vue

@@ -1,5 +1,5 @@
 <template>
-  <option :value="value ?? ''" :disabled="disabledBoolean">
+  <option :value="value" :disabled="disabledBoolean">
     <slot />
   </option>
 </template>