Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit 41b7c36

Browse files
committed
updated table tests, fixed BTable empty items when using provider without per page
1 parent aa7d9b9 commit 41b7c36

File tree

3 files changed

+77
-74
lines changed

3 files changed

+77
-74
lines changed

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<BTableSimple v-bind="containerAttrs">
3-
<!-- <table :class="classes"> -->
43
<thead>
54
<slot v-if="$slots['thead-top']" name="thead-top" />
65
<tr>
@@ -101,25 +100,28 @@
101100
>
102101
</slot>
103102
</td>
104-
<template v-for="field in computedFields" :key="field.key">
105-
<td v-bind="field.tdAttr" :class="getFieldRowClasses(field, item)">
106-
<label v-if="stacked && labelStackedBoolean" class="b-table-stacked-label">{{
107-
getFieldHeadLabel(field)
108-
}}</label>
109-
<slot
110-
v-if="$slots['cell(' + field.key + ')'] || $slots['cell()']"
111-
:name="$slots['cell(' + field.key + ')'] ? 'cell(' + field.key + ')' : 'cell()'"
112-
:value="item[field.key]"
113-
:index="itemIndex"
114-
:item="item"
115-
:field="field"
116-
:items="items"
117-
:toggle-details="() => toggleRowDetails(item)"
118-
:details-showing="item._showDetails"
119-
/>
120-
<template v-else>{{ renderItem(item, field) }}</template>
121-
</td>
122-
</template>
103+
<td
104+
v-for="field in computedFields"
105+
:key="field.key"
106+
v-bind="field.tdAttr"
107+
:class="getFieldRowClasses(field, item)"
108+
>
109+
<label v-if="stacked && labelStackedBoolean" class="b-table-stacked-label">{{
110+
getFieldHeadLabel(field)
111+
}}</label>
112+
<slot
113+
v-if="$slots['cell(' + field.key + ')'] || $slots['cell()']"
114+
:name="$slots['cell(' + field.key + ')'] ? 'cell(' + field.key + ')' : 'cell()'"
115+
:value="item[field.key]"
116+
:index="itemIndex"
117+
:item="item"
118+
:field="field"
119+
:items="items"
120+
:toggle-details="() => toggleRowDetails(item)"
121+
:details-showing="item._showDetails"
122+
/>
123+
<template v-else>{{ renderItem(item, field) }}</template>
124+
</td>
123125
</tr>
124126

125127
<tr v-if="item._showDetails === true && $slots['row-details']" :class="getRowClasses(item)">
@@ -183,7 +185,6 @@
183185
caption
184186
}}
185187
</caption>
186-
<!-- </table> -->
187188
</BTableSimple>
188189
</template>
189190

packages/bootstrap-vue-next/src/components/BTable/table.spec.ts

+49-49
Original file line numberDiff line numberDiff line change
@@ -549,55 +549,6 @@ describe('table', () => {
549549
expect($firstRow.text()).toBe('hossam')
550550
})
551551

552-
it('has items when using a provider callback', async () => {
553-
const busyRef = ref(false)
554-
const myProvider = async (ctx: any, callback: (items: any) => any) => {
555-
callback(items)
556-
return undefined
557-
}
558-
const wrapper = mount(BTable, {
559-
props: {
560-
fields,
561-
busy: busyRef.value,
562-
provider: myProvider,
563-
},
564-
})
565-
566-
await flushPromises()
567-
568-
const $table = wrapper.get('table')
569-
const $firstRow = $table.get('tbody tr td')
570-
571-
expect($firstRow.text()).toBe('hossam')
572-
})
573-
574-
it('has sorted items when sortBy prop is passed', () => {
575-
const wrapper = mount(BTable, {
576-
props: {
577-
fields,
578-
items,
579-
sortBy: 'age',
580-
},
581-
})
582-
const $table = wrapper.get('table')
583-
expect($table.get('tbody tr td:last-child').text()).toBe('1')
584-
})
585-
586-
it('has desc sorted items when sortDesc prop is true', () => {
587-
const wrapper = mount(BTable, {
588-
props: {
589-
fields: fields.map((field) =>
590-
typeof field === 'string' ? field : {...field, sortable: true}
591-
),
592-
items,
593-
sortBy: 'age',
594-
sortDesc: true,
595-
},
596-
})
597-
const $table = wrapper.get('table')
598-
expect($table.get('tbody tr:first-child td:last-child').text()).toBe('2')
599-
})
600-
601552
it('has busy class & element when busy prop is true', () => {
602553
const wrapper = mount(BTable, {
603554
props: {
@@ -657,4 +608,53 @@ describe('table', () => {
657608
expect($firstCell.text()).toBe('HOSSAM')
658609
expect($secondCell.text()).toBe('1 years')
659610
})
611+
612+
it('has items when using a provider callback', async () => {
613+
const busyRef = ref(false)
614+
const myProvider = async (ctx: any, callback: (items: any) => any) => {
615+
callback(items)
616+
return undefined
617+
}
618+
const wrapper = mount(BTable, {
619+
props: {
620+
fields,
621+
busy: busyRef.value,
622+
provider: myProvider,
623+
},
624+
})
625+
626+
await flushPromises()
627+
628+
const $table = wrapper.get('table')
629+
const $firstRow = $table.get('tbody tr td')
630+
631+
expect($firstRow.text()).toBe('hossam')
632+
})
633+
634+
it('has sorted items when sortBy prop is passed', () => {
635+
const wrapper = mount(BTable, {
636+
props: {
637+
fields,
638+
items,
639+
sortBy: 'age',
640+
},
641+
})
642+
const $table = wrapper.get('table')
643+
expect($table.get('tbody tr td:last-child').text()).toBe('1')
644+
})
645+
646+
it('has desc sorted items when sortDesc prop is true', () => {
647+
const wrapper = mount(BTable, {
648+
props: {
649+
fields: fields.map((field) =>
650+
typeof field === 'string' ? field : {...field, sortable: true}
651+
),
652+
items,
653+
sortBy: 'age',
654+
sortDesc: true,
655+
},
656+
})
657+
const $table = wrapper.get('table')
658+
expect($table.get('tbody tr:first-child td:last-child').text()).toBe('2')
659+
})
660660
})

packages/bootstrap-vue-next/src/components/BTable/tableItems.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export const useTableItems = (
3434
: flags.requireItemsMapping.value
3535
? mapItems(internalItems, tableProps, flags)
3636
: tableProps.items ?? []
37-
3837
if (usesProvider && !flags.noProviderPagingBoolean.value) {
3938
return items
4039
}
@@ -51,9 +50,12 @@ export const useTableItems = (
5150
return items
5251
})
5352

54-
const computedDisplayItems = computed<TableItem[]>(() =>
55-
computedItems.value.slice(displayStartEndIdx.value[0], displayStartEndIdx.value[1])
56-
)
53+
const computedDisplayItems = computed<TableItem[]>(() => {
54+
if (tableProps.perPage === undefined) {
55+
return computedItems.value
56+
}
57+
return computedItems.value.slice(displayStartEndIdx.value[0], displayStartEndIdx.value[1])
58+
})
5759

5860
const updateInternalItems = async (
5961
items: TableItem<Record<string, any>>[]

0 commit comments

Comments
 (0)