Skip to content

Commit 9d4060f

Browse files
VividLemonVividLemon
committed
test: breadcrumb.spec.ts renamed properly
test: placeholder-wrapper.spec.ts test: placeholder.spec test for style attr instead of class fix(#714): v-bind={text} causes breaking items to not display text in nested BLink component
1 parent ebccfd7 commit 9d4060f

File tree

4 files changed

+160
-17
lines changed

4 files changed

+160
-17
lines changed

‎packages/bootstrap-vue-3/src/components/BBreadcrumb/BBreadcrumbItem.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@
33
<component
44
:is="computedTag"
55
:aria-current="computedAriaCurrent"
6-
v-bind="$props"
6+
v-bind="computedTag !== 'span' ? pluckedLinkProps : undefined"
77
@click="clicked"
88
>
9-
<slot />
9+
<slot>
10+
{{ text }}
11+
</slot>
1012
</component>
1113
</li>
1214
</template>
1315

1416
<script lang="ts">
15-
import {omit} from '../../utils'
17+
import {omit, pluckProps} from '../../utils'
1618
import {useBooleanish} from '../../composables'
1719
import {computed, defineComponent, PropType, toRef} from 'vue'
1820
import BLink, {BLINK_PROPS} from '../BLink/BLink.vue'
@@ -55,7 +57,13 @@ export default defineComponent({
5557
if (!disabledBoolean.value) emit('click', e)
5658
}
5759
60+
// TODO test and make sure that only the correct props are given to BLINK
61+
// Since the BLink resolved to an <a>, passing "text" prop down caused
62+
// <a> slot text to be overwritten by prop text!
63+
const pluckedLinkProps = computed(() => pluckProps(props, linkProps))
64+
5865
return {
66+
pluckedLinkProps,
5967
liClasses,
6068
computedTag,
6169
computedAriaCurrent,

‎packages/bootstrap-vue-3/src/components/BBreadcrumb/breadcrumb.spec.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import {enableAutoUnmount, mount} from '@vue/test-utils'
2+
import {afterEach, describe, expect, it} from 'vitest'
3+
import BBreadcrumb from './BBreadcrumb.vue'
4+
import BBreadcrumbItem from './BBreadcrumbItem.vue'
5+
import type {BreadcrumbItem} from '../../types'
6+
import {BREADCRUMB_SYMBOL} from '../../composables/useBreadcrumb'
7+
8+
describe('breadcrumb', () => {
9+
enableAutoUnmount(afterEach)
10+
11+
it('contains aria-label breadcrumb', () => {
12+
const wrapper = mount(BBreadcrumb, {
13+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
14+
})
15+
expect(wrapper.attributes('aria-label')).toBe('breadcrumb')
16+
})
17+
18+
it('tag is nav', () => {
19+
const wrapper = mount(BBreadcrumb, {
20+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
21+
})
22+
expect(wrapper.element.tagName).toBe('NAV')
23+
})
24+
25+
it('child tag is ol', () => {
26+
const wrapper = mount(BBreadcrumb, {
27+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
28+
})
29+
// It should be noted, this doesn't determine if it's a child,
30+
// Rather, only that it is deeply nested inside the component
31+
const $ol = wrapper.find('ol')
32+
expect($ol.exists()).toBe(true)
33+
})
34+
35+
it('ol child has static class breadcrumb', () => {
36+
const wrapper = mount(BBreadcrumb, {
37+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
38+
})
39+
// It should be noted, this doesn't determine if it's a child,
40+
// Rather, only that it is deeply nested inside the component
41+
const $ol = wrapper.get('ol')
42+
expect($ol.classes()).toContain('breadcrumb')
43+
})
44+
45+
it('renders default slot', () => {
46+
const wrapper = mount(BBreadcrumb, {
47+
slots: {default: 'foobar'},
48+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
49+
})
50+
expect(wrapper.text()).toBe('foobar')
51+
})
52+
53+
it('renders prepend slot', () => {
54+
const wrapper = mount(BBreadcrumb, {
55+
slots: {prepend: 'foobar'},
56+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
57+
})
58+
expect(wrapper.text()).toBe('foobar')
59+
})
60+
61+
it('renders append slot', () => {
62+
const wrapper = mount(BBreadcrumb, {
63+
slots: {append: 'foobar'},
64+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
65+
})
66+
expect(wrapper.text()).toBe('foobar')
67+
})
68+
69+
it('renders all slots in correct order', () => {
70+
const wrapper = mount(BBreadcrumb, {
71+
slots: {prepend: 'prepend', default: 'default', append: 'append'},
72+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
73+
})
74+
expect(wrapper.text()).toBe('prependdefaultappend')
75+
})
76+
77+
it('has breadcrumbitem', () => {
78+
const wrapper = mount(BBreadcrumb, {
79+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
80+
props: {items: [{text: 'foo'}] as Array<BreadcrumbItem>},
81+
})
82+
const $bbreadcrumbitem = wrapper.findComponent(BBreadcrumbItem)
83+
expect($bbreadcrumbitem.exists()).toBe(true)
84+
})
85+
86+
it('renders bbreadcrumbitem before default slot and after prepend slot', () => {
87+
const wrapper = mount(BBreadcrumb, {
88+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
89+
props: {items: [{text: 'foo'}] as Array<BreadcrumbItem>},
90+
slots: {default: 'default', prepend: 'prepend'},
91+
})
92+
expect(wrapper.text()).toBe('prependfoodefault')
93+
})
94+
95+
it('bbreadcrumbitem contains items as props', () => {
96+
const wrapper = mount(BBreadcrumb, {
97+
global: {provide: {[BREADCRUMB_SYMBOL as unknown as symbol]: {}}},
98+
props: {
99+
items: [
100+
{text: 'foo', active: true, disabled: true, href: 'href', to: 'to'},
101+
] as Array<BreadcrumbItem>,
102+
},
103+
slots: {default: 'default', prepend: 'prepend'},
104+
})
105+
const $bbreadcrumbitem = wrapper.findComponent(BBreadcrumbItem)
106+
expect($bbreadcrumbitem.props('text')).toBe('foo')
107+
expect($bbreadcrumbitem.props('active')).toBe(true)
108+
expect($bbreadcrumbitem.props('disabled')).toBe(true)
109+
expect($bbreadcrumbitem.props('href')).toBe('href')
110+
expect($bbreadcrumbitem.props('to')).toBe('to')
111+
})
112+
})

‎packages/bootstrap-vue-3/src/components/BPlaceholder/placeholder-wrapper.spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {enableAutoUnmount, mount} from '@vue/test-utils'
2+
import {afterEach, describe, expect, it} from 'vitest'
3+
import BPlaceholderWrapper from './BPlaceholderWrapper.vue'
4+
5+
describe('placeholder-wrapper', () => {
6+
enableAutoUnmount(afterEach)
7+
8+
it('renders slot default by default', () => {
9+
const wrapper = mount(BPlaceholderWrapper, {
10+
slots: {default: 'default', loading: 'loading'},
11+
})
12+
expect(wrapper.text()).toBe('default')
13+
})
14+
15+
it('renders slot default when prop loading false', () => {
16+
const wrapper = mount(BPlaceholderWrapper, {
17+
props: {loading: false},
18+
slots: {default: 'default', loading: 'loading'},
19+
})
20+
expect(wrapper.text()).toBe('default')
21+
})
22+
23+
it('renders slot loading when prop loading true', () => {
24+
const wrapper = mount(BPlaceholderWrapper, {
25+
props: {loading: true},
26+
slots: {default: 'default', loading: 'loading'},
27+
})
28+
expect(wrapper.text()).toBe('loading')
29+
})
30+
})

‎packages/bootstrap-vue-3/src/components/BPlaceholder/placeholder.spec.ts

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,34 +38,27 @@ describe('placeholder', () => {
3838
expect(wrapper.classes()).toContain('col-6')
3939
})
4040

41-
it('has class col-{type} when prop cols is string and contains %', () => {
42-
const wrapper = mount(BPlaceholder, {
43-
props: {cols: '%6%'},
44-
})
45-
expect(wrapper.classes()).toContain('col-6')
46-
})
47-
48-
it('has class w-{type} when prop width is number', async () => {
41+
it('has style width: {type}%; when prop width is number', async () => {
4942
const wrapper = mount(BPlaceholder, {
5043
props: {width: 6},
5144
})
52-
expect(wrapper.classes()).toContain('w-6')
45+
expect(wrapper.attributes('style')).toContain('width: 6%;')
5346
await wrapper.setProps({width: undefined})
54-
expect(wrapper.classes()).not.toContain('w-6')
47+
expect(wrapper.attributes('style')).toBeUndefined()
5548
})
5649

57-
it('has class w-{type} when prop width is string', () => {
50+
it('has style width: {type}%; when prop width is string', () => {
5851
const wrapper = mount(BPlaceholder, {
5952
props: {width: '6'},
6053
})
61-
expect(wrapper.classes()).toContain('w-6')
54+
expect(wrapper.attributes('style')).toContain('width: 6%;')
6255
})
6356

64-
it('has class w-{type} when prop width is string and contains %', () => {
57+
it('has style width: {type}%; when prop width is string and contains %', () => {
6558
const wrapper = mount(BPlaceholder, {
6659
props: {width: '%6%'},
6760
})
68-
expect(wrapper.classes()).toContain('w-6')
61+
expect(wrapper.attributes('style')).toContain('width: 6%;')
6962
})
7063

7164
it('has class bg-{type} when prop variant', async () => {

0 commit comments

Comments
 (0)