` element with class
-`b-table-busy-slot`, which has one single `` with a `colspan` set to the number of fields.
-
-**Example of `table-busy` slot usage:**
-
-```html
-
-
-
Toggle Busy State
-
-
-
- Loading...
-
-
-
-
-
-
-
-```
-
-Also see the [**Using Items Provider Functions**](#using-items-provider-functions) below for
-additional information on the `busy` state.
-
-**Note:** All click related and hover events, and sort-changed events will **not** be emitted when
-the table is in the `busy` state.
-
## Custom Data Rendering
Custom rendering for each data field in a row is possible using either
@@ -915,8 +915,14 @@ scoped field slot
```
-**Warning:** Be cautious of using this to display user supplied content, **as script tags could be
-injected into your page!**
+
+ Warning: Be cautious of using the v-html method to display user
+ supplied content, as it may make your application vulnerable to
+
+ XSS attacks , if you do not first
+ sanitize the
+ user supplied string.
+
### Formatter callback
@@ -1309,10 +1315,20 @@ pre-specify the column to be sorted, set the `sort-by` prop to the field's key.
direction by setting `sort-desc` to either `true` (for descending) or `false` (for ascending, the
default).
+- **Ascending**: Items are sorted lowest to highest (i.e. `A` to `Z`) and will be displayed with the
+ lowest value in the first row with progressively higher values in the following rows. The header
+ indicator arrow will point in the direction of lowest to highest. (i.e. down for ascending).
+- **Descending**: Items are sorted highest to lowest (i.e. `Z` to `A`) and will be displayed with
+ the highest value in the first row with progressively lower values in the following rows. The
+ header indicator arrow will point in the direction of lowest to highest (i.e. up for descending).
+
The props `sort-by` and `sort-desc` can be turned into _two-way_ (syncable) props by adding the
`.sync` modifier. Your bound variables will then be updated accordingly based on the current sort
criteria. See the [Vue docs](http://vuejs.org/v2/guide/components.html#sync-Modifier) for details on
-the `.sync` prop modifier
+the `.sync` prop modifier.
+
+Setting `sort-by` to a column that is not defined in the fields as `sortable` will result in the
+table not being sorted.
When the prop `foot-clone` is set, the footer headings will also allow sorting by clicking, even if
you have custom formatted footer field headers. To disable the sort icons and sorting via heading
@@ -1427,16 +1443,19 @@ with a single argument containing the context object of ``. See the
[Detection of sorting change](#detection-of-sorting-change) section below for details about the
sort-changed event and the context object.
-### Change sort direction
+### Change initial sort direction
Control the order in which ascending and descending sorting is applied when a sortable column header
is clicked, by using the `sort-direction` prop. The default value `'asc'` applies ascending sort
-first. To reverse the behavior and sort in descending direction first, set it to `'desc'`.
+first (when a column is not currently sorted). To reverse the behavior and sort in descending
+direction first, set it to `'desc'`.
-If you don't want the sorting direction to change at all when clicking another sortable column
-header, set `sort-direction` to `'last'`.
+If you don't want the current sorting direction to change when clicking another sortable column
+header, set `sort-direction` to `'last'`. This will maintain the sorting direction of the previously
+sorted column.
-For individual column sort directions, specify the property `sortDirection` in `fields`. See the
+For individual column initial sort direction (which applies when the column transitions from unsorted
+to sorted), specify the property `sortDirection` in `fields`. See the
[Complete Example](#complete-example) below for an example of using this feature.
## Filtering
diff --git a/src/components/table/fixtures/table.html b/src/components/table/fixtures/table.html
deleted file mode 100644
index e81446a62eb..00000000000
--- a/src/components/table/fixtures/table.html
+++ /dev/null
@@ -1,148 +0,0 @@
-
-
-
Basic table
-
-
- {{ data.value.first }} {{ data.value.last }}
-
-
- {{ data.value ? 'Yes' : 'No' }}
-
-
- Details
-
-
-
-
-
- {{ data.value.first }} {{ data.value.last }}
-
-
-
-
-
-
-
-
-
-
- Table Caption
-
-
-
-
-
-
-
Paginated Table
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ data.value.first }} {{ data.value.last }}
-
-
- Showing {{ visibleRecords.length }} People
-
-
- {{ data.value ? 'Active' : 'Inactive' }}
-
-
- Select
-
-
-
-
- Selected: {{ selectedRecords.length }}
-
-
-
-
Dark Table
-
-
-
- {{ data.value.first }} {{ data.value.last }}
-
-
- {{ data.value ? 'Active' : 'Inactive' }}
-
-
- Details
-
-
-
-
Provider Test Table
-
-
-
-
-
-
- {{ data.value.first }} {{ data.value.last }}
-
-
- {{ data.value ? 'Active' : 'Inactive' }}
-
-
- Details
-
-
-
-
-
button ',
diff --git a/src/components/table/table-thead-events.spec.js b/src/components/table/table-thead-events.spec.js
index bd5c8de46e8..1ed2b0a2bbc 100644
--- a/src/components/table/table-thead-events.spec.js
+++ b/src/components/table/table-thead-events.spec.js
@@ -4,12 +4,38 @@ import { mount } from '@vue/test-utils'
const testItems = [{ a: 1, b: 2, c: 3 }]
const testFields = [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }]
-describe('table thead events', () => {
+describe('table > thead events', () => {
+ it('should not emit head-clicked event when a head cell is clicked and no head-clicked listener', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ fields: testFields,
+ items: testItems
+ },
+ listeners: {}
+ })
+ expect(wrapper).toBeDefined()
+ const $rows = wrapper.findAll('thead > tr')
+ expect($rows.length).toBe(1)
+ const $ths = wrapper.findAll('thead > tr > th')
+ expect($ths.length).toBe(testFields.length)
+ expect(wrapper.emitted('head-clicked')).not.toBeDefined()
+ $ths.at(0).trigger('click')
+ expect(wrapper.emitted('head-clicked')).not.toBeDefined()
+ $ths.at(1).trigger('click')
+ expect(wrapper.emitted('head-clicked')).not.toBeDefined()
+ $ths.at(2).trigger('click')
+ expect(wrapper.emitted('head-clicked')).not.toBeDefined()
+ })
+
it('should emit head-clicked event when a head cell is clicked', async () => {
const wrapper = mount(Table, {
propsData: {
fields: testFields,
items: testItems
+ },
+ listeners: {
+ // head-clicked will only be emitted if there is a registered listener
+ 'head-clicked': () => {}
}
})
expect(wrapper).toBeDefined()
@@ -42,6 +68,10 @@ describe('table thead events', () => {
fields: testFields,
items: testItems,
busy: true
+ },
+ listeners: {
+ // head-clicked will only be emitted if there is a registered listener
+ 'head-clicked': () => {}
}
})
expect(wrapper).toBeDefined()
@@ -59,6 +89,10 @@ describe('table thead events', () => {
propsData: {
fields: testFields,
items: testItems
+ },
+ listeners: {
+ // head-clicked will only be emitted if there is a registered listener
+ 'head-clicked': () => {}
}
})
wrapper.setData({
@@ -80,6 +114,10 @@ describe('table thead events', () => {
fields: testFields,
items: testItems
},
+ listeners: {
+ // head-clicked will only be emitted if there is a registered listener
+ 'head-clicked': () => {}
+ },
slots: {
// in Vue 2.6x, slots get translated into scopedSlots
HEAD_a: 'button ',
diff --git a/src/components/table/table-thead-top.spec.js b/src/components/table/table-thead-top.spec.js
index e8d020c45ac..aca91ddefe4 100644
--- a/src/components/table/table-thead-top.spec.js
+++ b/src/components/table/table-thead-top.spec.js
@@ -5,7 +5,7 @@ import { mount } from '@vue/test-utils'
const testItems = [{ a: 1, b: 2, c: 3 }, { a: 5, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }]
const testFields = ['a', 'b', 'c']
-describe('table thead-top slot', () => {
+describe('table > thead thead-top slot', () => {
it('should not have thead-top row by default', async () => {
const wrapper = mount(Table, {
propsData: {
diff --git a/src/components/table/table.js b/src/components/table/table.js
index 1678a43955e..e4918054d48 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -1,18 +1,15 @@
// Utilities
import looseEqual from '../../utils/loose-equal'
-import stableSort from '../../utils/stable-sort'
-import { arrayIncludes, isArray } from '../../utils/array'
-
-// Table helper functions
-import normalizeFields from './helpers/normalize-fields'
-import stringifyRecordValues from './helpers/stringify-record-values'
-import defaultSortCompare from './helpers/default-sort-compare'
// Mixins
import idMixin from '../../mixins/id'
import normalizeSlotMixin from '../../mixins/normalize-slot'
-// Table helper mixins
+// Table helper Mixins
+import itemsMixin from './helpers/mixin-items'
+import filteringMixin from './helpers/mixin-filtering'
+import sortingMixin from './helpers/mixin-sorting'
+import paginationMixin from './helpers/mixin-pagination'
import captionMixin from './helpers/mixin-caption'
import colgroupMixin from './helpers/mixin-colgroup'
import theadMixin from './helpers/mixin-thead'
@@ -26,9 +23,15 @@ import providerMixin from './helpers/mixin-provider'
// @vue/component
export default {
name: 'BTable',
+ // Order of mixins is important.
+ // They are merged from left to fight, followed by this component.
mixins: [
idMixin,
normalizeSlotMixin,
+ itemsMixin,
+ filteringMixin,
+ sortingMixin,
+ paginationMixin,
busyMixin,
captionMixin,
colgroupMixin,
@@ -41,22 +44,6 @@ export default {
// Don't place ATTRS on root element automatically, as table could be wrapped in responsive div
inheritAttrs: false,
props: {
- items: {
- type: [Array, Function],
- default() /* istanbul ignore next */ {
- return []
- }
- },
- fields: {
- type: [Object, Array],
- default: null
- },
- primaryKey: {
- // Primary key for record.
- // If provided the value in each row must be unique!!!
- type: String,
- default: null
- },
striped: {
type: Boolean,
default: false
@@ -97,59 +84,6 @@ export default {
type: [Boolean, String],
default: false
},
- sortBy: {
- type: String,
- default: null
- },
- sortDesc: {
- type: Boolean,
- default: false
- },
- sortDirection: {
- type: String,
- default: 'asc',
- validator: direction => arrayIncludes(['asc', 'desc', 'last'], direction)
- },
- sortCompare: {
- type: Function,
- default: null
- },
- noSortReset: {
- type: Boolean,
- default: false
- },
- labelSortAsc: {
- type: String,
- default: 'Click to sort Ascending'
- },
- labelSortDesc: {
- type: String,
- default: 'Click to sort Descending'
- },
- perPage: {
- type: [Number, String],
- default: 0
- },
- currentPage: {
- type: [Number, String],
- default: 1
- },
- filter: {
- type: [String, RegExp, Object, Array, Function],
- default: null
- },
- filterFunction: {
- type: Function,
- default: null
- },
- noLocalSorting: {
- type: Boolean,
- default: false
- },
- noFooterSorting: {
- type: Boolean,
- default: false
- },
value: {
// v-model for retrieving the current displayed rows
type: Array,
@@ -159,15 +93,8 @@ export default {
}
},
data() {
- return {
- // Mixins will also add to data
- localSortBy: this.sortBy || '',
- localSortDesc: this.sortDesc || false,
- // Our local copy of the items. Must be an array
- localItems: isArray(this.items) ? this.items.slice() : [],
- // Flag for displaying which empty slot to show, and for some event triggering.
- isFiltered: false
- }
+ // Mixins add to data
+ return {}
},
computed: {
// Layout related computed props
@@ -225,203 +152,26 @@ export default {
...this.selectableTableAttrs
}
},
- // Items related computed props
- localFiltering() {
- return this.hasProvider ? !!this.noProviderFiltering : true
- },
- localSorting() {
- return this.hasProvider ? !!this.noProviderSorting : !this.noLocalSorting
- },
- localPaging() {
- return this.hasProvider ? !!this.noProviderPaging : true
- },
context() {
// Current state of sorting, filtering and pagination props/values
return {
filter: this.localFilter,
sortBy: this.localSortBy,
sortDesc: this.localSortDesc,
- perPage: this.perPage,
- currentPage: this.currentPage,
+ perPage: parseInt(this.perPage, 10) || 0,
+ currentPage: parseInt(this.currentPage, 10) || 1,
apiUrl: this.apiUrl
}
},
- computedFields() {
- // We normalize fields into an array of objects
- // [ { key:..., label:..., ...}, {...}, ..., {..}]
- return normalizeFields(this.fields, this.localItems)
- },
- filteredCheck() {
- // For watching changes to filteredItems vs localItems
- return {
- filteredItems: this.filteredItems,
- localItems: this.localItems,
- localFilter: this.localFilter
- }
- },
- localFilter() {
- // Returns a sanitized/normalized version of filter prop
- if (typeof this.filter === 'function') {
- // this.localFilterFn will contain the correct function ref.
- // Deprecate setting prop filter to a function
- /* istanbul ignore next */
- return ''
- } else if (
- typeof this.filterFunction !== 'function' &&
- !(typeof this.filter === 'string' || this.filter instanceof RegExp)
- ) {
- // Using internal filter function, which only accepts string or regexp at the moment
- return ''
- } else {
- // Could be a string, object or array, as needed by external filter function
- return this.filter
- }
- },
- localFilterFn() {
- let filter = this.filter
- let filterFn = this.filterFunction
- // Sanitized/normalize filter-function prop
- if (typeof filterFn === 'function') {
- return filterFn
- } else if (typeof filter === 'function') {
- // Deprecate setting prop filter to a function
- /* istanbul ignore next */
- return filter
- } else {
- // no filterFunction, so signal to use internal filter function
- return null
- }
- },
- filteredItems() {
- // Returns the records in localItems that match the filter criteria.
- // Returns the original localItems array if not sorting
- let items = this.localItems || []
- const criteria = this.localFilter
- const filterFn =
- this.filterFnFactory(this.localFilterFn, criteria) || this.defaultFilterFnFactory(criteria)
-
- // We only do local filtering if requested, and if the are records to filter and
- // if a filter criteria was specified
- if (this.localFiltering && filterFn && items.length > 0) {
- items = items.filter(filterFn)
- }
- return items
- },
- sortedItems() {
- // Sorts the filtered items and returns a new array of the sorted items
- // or the original items array if not sorted.
- let items = this.filteredItems || []
- const sortBy = this.localSortBy
- const sortDesc = this.localSortDesc
- const sortCompare = this.sortCompare
- const localSorting = this.localSorting
- if (sortBy && localSorting) {
- // stableSort returns a new array, and leaves the original array intact
- return stableSort(items, (a, b) => {
- let result = null
- if (typeof sortCompare === 'function') {
- // Call user provided sortCompare routine
- result = sortCompare(a, b, sortBy, sortDesc)
- }
- if (result === null || result === undefined || result === false) {
- // Fallback to built-in defaultSortCompare if sortCompare
- // is not defined or returns null/false
- result = defaultSortCompare(a, b, sortBy)
- }
- // Negate result if sorting in descending order
- return (result || 0) * (sortDesc ? -1 : 1)
- })
- }
- return items
- },
- paginatedItems() {
- let items = this.sortedItems || []
- const currentPage = Math.max(parseInt(this.currentPage, 10) || 1, 1)
- const perPage = Math.max(parseInt(this.perPage, 10) || 0, 0)
- // Apply local pagination
- if (this.localPaging && !!perPage) {
- // Grab the current page of data (which may be past filtered items limit)
- items = items.slice((currentPage - 1) * perPage, currentPage * perPage)
- }
- // Return the items to display in the table
- return items
- },
computedItems() {
return this.paginatedItems || []
}
},
watch: {
- // Watch props for changes and update local values
- items(newItems) {
- if (this.hasProvider || newItems instanceof Function) {
- this.$nextTick(this._providerUpdate)
- } else if (isArray(newItems)) {
- // Set localItems/filteredItems to a copy of the provided array
- this.localItems = newItems.slice()
- } else {
- /* istanbul ignore next */
- this.localItems = []
- }
- },
- sortDesc(newVal, oldVal) {
- if (newVal === this.localSortDesc) {
- /* istanbul ignore next */
- return
- }
- this.localSortDesc = newVal || false
- },
- sortBy(newVal, oldVal) {
- if (newVal === this.localSortBy) {
- /* istanbul ignore next */
- return
- }
- this.localSortBy = newVal || null
- },
- // Update .sync props
- localSortDesc(newVal, oldVal) {
- // Emit update to sort-desc.sync
- if (newVal !== oldVal) {
- this.$emit('update:sortDesc', newVal)
- }
- },
- localSortBy(newVal, oldVal) {
- if (newVal !== oldVal) {
- this.$emit('update:sortBy', newVal)
- }
- },
// Watch for changes on computedItems and update the v-model
computedItems(newVal, oldVal) {
this.$emit('input', newVal)
},
- // Watch for changes to the filter criteria and filtered items vs localItems).
- // And set visual state and emit events as required
- filteredCheck({ filteredItems, localItems, localFilter }) {
- // Determine if the dataset is filtered or not
- let isFiltered
- if (!localFilter) {
- // If filter criteria is falsey
- isFiltered = false
- } else if (looseEqual(localFilter, []) || looseEqual(localFilter, {})) {
- // If filter criteria is an empty array or object
- isFiltered = false
- } else if (localFilter) {
- // if Filter criteria is truthy
- isFiltered = true
- } else {
- isFiltered = false
- }
- if (isFiltered) {
- this.$emit('filtered', filteredItems, filteredItems.length)
- }
- this.isFiltered = isFiltered
- },
- isFiltered(newVal, oldVal) {
- if (newVal === false && oldVal === true) {
- // We need to emit a filtered event if isFiltered transitions from true to
- // false so that users can update their pagination controls.
- this.$emit('filtered', this.localItems, this.localItems.length)
- }
- },
context(newVal, oldVal) {
// Emit context info for external paging/filtering/sorting handling
if (!looseEqual(newVal, oldVal)) {
@@ -433,73 +183,6 @@ export default {
// Initially update the v-model of displayed items
this.$emit('input', this.computedItems)
},
- methods: {
- // Filter Function factories
- filterFnFactory(filterFn, criteria) {
- // Wrapper factory for external filter functions.
- // Wrap the provided filter-function and return a new function.
- // returns null if no filter-function defined or if criteria is falsey.
- // Rather than directly grabbing this.computedLocalFilterFn or this.filterFunction
- // We have it passed, so that the caller computed prop will be reactive to changes
- // in the original filter-function (as this routine is a method)
- if (!filterFn || !criteria || typeof filterFn !== 'function') {
- return null
- }
-
- // Build the wrapped filter test function, passing the criteria to the provided function
- const fn = item => {
- // Generated function returns true if the criteria matches part
- // of the serialized data, otherwise false
- return filterFn(item, criteria)
- }
-
- // Return the wrapped function
- return fn
- },
- defaultFilterFnFactory(criteria) {
- // Generates the default filter function, using the given filter criteria
- if (!criteria || !(typeof criteria === 'string' || criteria instanceof RegExp)) {
- // Built in filter can only support strings or RegExp criteria (at the moment)
- return null
- }
-
- // Build the regexp needed for filtering
- let regexp = criteria
- if (typeof regexp === 'string') {
- // Escape special RegExp characters in the string and convert contiguous
- // whitespace to \s+ matches
- const pattern = criteria
- .replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
- .replace(/[\s\uFEFF\xA0]+/g, '\\s+')
- // Build the RegExp (no need for global flag, as we only need
- // to find the value once in the string)
- regexp = new RegExp(`.*${pattern}.*`, 'i')
- }
-
- // Generate the wrapped filter test function to use
- const fn = item => {
- // This searches all row values (and sub property values) in the entire (excluding
- // special _ prefixed keys), because we convert the record to a space-separated
- // string containing all the value properties (recursively), even ones that are
- // not visible (not specified in this.fields).
- //
- // TODO: Enable searching on formatted fields and scoped slots
- // TODO: Should we filter only on visible fields (i.e. ones in this.fields) by default?
- // TODO: Allow for searching on specific fields/key, this could be combined with the previous TODO
- // TODO: Give stringifyRecordValues extra options for filtering (i.e. passing the
- // fields definition and a reference to $scopedSlots)
- //
- // Generated function returns true if the criteria matches part of
- // the serialized data, otherwise false
- // We set lastIndex = 0 on regex in case someone uses the /g global flag
- regexp.lastIndex = 0
- return regexp.test(stringifyRecordValues(item))
- }
-
- // Return the generated function
- return fn
- }
- },
render(h) {
// Build the caption (from caption mixin)
const $caption = this.renderCaption()
diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js
index ac4cca5f4f7..e67e06ad135 100644
--- a/src/components/table/table.spec.js
+++ b/src/components/table/table.spec.js
@@ -1,764 +1,643 @@
-import { loadFixture, testVM, setData, nextTick, sleep } from '../../../tests/utils'
+import Table from './table'
+import { mount } from '@vue/test-utils'
+
+const items1 = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
+const fields1 = ['a', 'b', 'c']
describe('table', () => {
- beforeEach(loadFixture(__dirname, 'table'))
- testVM()
-
- it('all example tables should contain class names', async () => {
- const {
- app: { $refs }
- } = window
-
- expect($refs.table_basic).toHaveAllClasses(['table', 'b-table', 'table-striped', 'table-hover'])
-
- expect($refs.table_paginated).toHaveAllClasses([
- 'table',
- 'b-table',
- 'table-sm',
- 'table-striped',
- 'table-bordered',
- 'table-hover'
- ])
-
- expect($refs.table_dark).toHaveAllClasses([
- 'table',
- 'b-table',
- 'table-sm',
- 'table-bordered',
- 'table-dark'
- ])
- })
+ it('has expected default classes', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1
+ }
+ })
- it('table_responsive should be wrapped in a div', async () => {
- const {
- app: { $refs }
- } = window
- const table = $refs.table_responsive
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(2)
- expect(table.$el.tagName).toBe('DIV')
- expect(table).toHaveAllClasses(['table-responsive'])
- expect(table.$el.children.length).toBe(1)
- expect(table.$el.children[0].tagName).toBe('TABLE')
+ wrapper.destroy()
})
- it('should generate fields automatically from the first item', async () => {
- const {
- app: { $refs }
- } = window
- const table = $refs.table_without_fields
- const thead = $refs.table_without_fields.$el.children[0]
- const tr = thead.children[0]
-
- // The row should be equal to the items without any of Bootstrap Vue's
- // utility fields, like _rowVariant, or _cellVariants
- expect(tr.children.length).toBe(Object.keys(table.items[0]).length - 1)
- })
+ it('has class "table-striped" when striped=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ striped: true
+ }
+ })
- it('table_basic should have thead and tbody', async () => {
- const {
- app: { $refs }
- } = window
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-striped')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- const parts = [...$refs.table_basic.$el.children]
+ wrapper.destroy()
+ })
- const thead = parts.find(el => el.tagName && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
+ it('has class "table-bordered" when bordered=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ bordered: true
+ }
+ })
- const tbody = parts.find(el => el.tagName && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-bordered')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- const tfoot = parts.find(el => el.tagName && el.tagName === 'TFOOT')
- expect(tfoot).not.toBeDefined()
+ wrapper.destroy()
})
- it('table_paginated should have thead, tbody and tfoot', async () => {
- const {
- app: { $refs }
- } = window
-
- const parts = [...$refs.table_paginated.$el.children]
-
- const thead = parts.find(el => el.tagName && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
+ it('has class "table-borderless" when borderless=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ borderless: true
+ }
+ })
- const tbody = parts.find(el => el.tagName && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-borderless')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- const tfoot = parts.find(el => el.tagName && el.tagName === 'TFOOT')
- expect(tfoot).toBeDefined()
+ wrapper.destroy()
})
- it('table_dark should have thead and tbody', async () => {
- const {
- app: { $refs }
- } = window
-
- const parts = [...$refs.table_dark.$el.children]
-
- const thead = parts.find(el => el.tagName && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
+ it('has class "table-hover" when hover=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ hover: true
+ }
+ })
- const tbody = parts.find(el => el.tagName && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-hover')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- const tfoot = parts.find(el => el.tagName && el.tagName === 'TFOOT')
- expect(tfoot).not.toBeDefined()
+ wrapper.destroy()
})
- it('table_paginated thead should contain class thead-dark', async () => {
- const {
- app: { $refs }
- } = window
- const thead = [...$refs.table_paginated.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- expect(thead.classList.contains('thead-dark')).toBe(true)
- }
- })
+ it('has class "table-sm" when small=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ small: true
+ }
+ })
- it('table_paginated tfoot should contain class thead-light', async () => {
- const {
- app: { $refs }
- } = window
- const tfoot = [...$refs.table_paginated.$el.children].find(el => el && el.tagName === 'TFOOT')
- expect(tfoot).toBeDefined()
- if (tfoot) {
- expect(tfoot.classList.contains('thead-light')).toBe(true)
- }
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-sm')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
+
+ wrapper.destroy()
})
- it('all examples have correct number of columns', async () => {
- const {
- app: { $refs }
- } = window
-
- const tables = ['table_basic', 'table_paginated', 'table_dark']
-
- tables.forEach((table, idx) => {
- const vm = $refs[table]
- const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children.length).toBe(Object.keys(vm.fields).length)
- }
+ it('has class "table-dark" when dark=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ dark: true
}
})
- })
- it('all examples should show the correct number of visible rows', async () => {
- const {
- app: { $refs }
- } = window
- const app = window.app
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('table-dark')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- const tables = ['table_basic', 'table_paginated', 'table_dark']
+ wrapper.destroy()
+ })
- tables.forEach((table, idx) => {
- const vm = $refs[table]
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- expect(tbody.children.length).toBe(vm.perPage || app.items.length)
+ it('has class "border" when outlined=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ outlined: true
}
})
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('border')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
+
+ wrapper.destroy()
})
- it('all examples have sortable & unsortable headers', async () => {
- const {
- app: { $refs }
- } = window
-
- const tables = ['table_basic', 'table_paginated', 'table_dark']
- // const sortables = [true, true, false, false]
-
- tables.forEach(table => {
- const vm = $refs[table]
- const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- const fieldKeys = Object.keys(vm.fields)
- const ths = [...tr.children]
- expect(ths.length).toBe(fieldKeys.length)
- ths.forEach((th, idx) => {
- expect(th.hasAttribute('aria-sort')).toBe(vm.fields[fieldKeys[idx]].sortable || false)
- })
- }
+ it('has class "b-table-fixed" when fixed=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ fixed: true
}
})
- })
- it('table_paginated has sortable & unsortable footers', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const fieldKeys = Object.keys(vm.fields)
-
- const tfoot = [...vm.$el.children].find(el => el && el.tagName === 'TFOOT')
- expect(tfoot).toBeDefined()
- if (tfoot) {
- const tr = [...tfoot.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- const ths = [...tr.children]
- expect(ths.length).toBe(fieldKeys.length)
- ths.forEach((th, idx) => {
- expect(th.hasAttribute('aria-sort')).toBe(vm.fields[fieldKeys[idx]].sortable || false)
- })
- }
- }
- })
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('b-table-fixed')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- it('all example tables should have attribute aria-busy="false" when busy is false', async () => {
- const { app } = window
+ wrapper.destroy()
+ })
- const tables = ['table_basic', 'table_paginated', 'table_dark']
+ it('has class "b-table-stacked" when stacked=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ stacked: true
+ }
+ })
- await setData(app, 'isBusy', false)
- await nextTick()
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('b-table-stacked')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- tables.forEach(table => {
- expect(app.$refs[table].$el.getAttribute('aria-busy')).toBe('false')
- })
+ wrapper.destroy()
})
- it('table_paginated should have attribute aria-busy="true" when busy is true', async () => {
- const {
- app: { $refs }
- } = window
- const app = window.app
+ it('has class "b-table-stacked-md" when stacked=md', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ stacked: 'md'
+ }
+ })
- await setData(app, 'isBusy', true)
- await nextTick()
- expect($refs.table_paginated.$el.getAttribute('aria-busy')).toBe('true')
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).toContain('b-table-stacked-md')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
- await setData(app, 'isBusy', false)
- await nextTick()
- expect($refs.table_paginated.$el.getAttribute('aria-busy')).toBe('false')
+ wrapper.destroy()
})
- it('sortable columns should have ARIA labels in thead', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const ariaLabel = vm.labelSortDesc
-
- const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].getAttribute('aria-label')).toBe(ariaLabel)
- expect(tr.children[1].getAttribute('aria-label')).toBe(ariaLabel)
- expect(tr.children[2].getAttribute('aria-label')).toBe(null)
- expect(tr.children[3].getAttribute('aria-label')).toBe(null)
+ it('has class "table-responsive" when responsive=true', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ responsive: true
}
- }
- })
+ })
- it('sortable columns should have ARIA labels in tfoot', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const ariaLabel = vm.labelSortDesc
-
- const tfoot = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(tfoot).toBeDefined()
- if (tfoot) {
- const tr = [...tfoot.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].getAttribute('aria-label')).toBe(ariaLabel)
- expect(tr.children[1].getAttribute('aria-label')).toBe(ariaLabel)
- expect(tr.children[2].getAttribute('aria-label')).toBe(null)
- expect(tr.children[3].getAttribute('aria-label')).toBe(null)
- }
- }
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('div')).toBe(true)
+ expect(wrapper.classes()).toContain('table-responsive')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.find('table').classes()).toContain('table')
+ expect(wrapper.find('table').classes()).toContain('b-table')
+ expect(wrapper.find('table').classes().length).toBe(2)
+
+ wrapper.destroy()
})
- it('all examples should have variant "success" on 1st row', async () => {
- const {
- app: { $refs }
- } = window
- const app = window.app
-
- const tables = ['table_basic', 'table_paginated', 'table_dark']
-
- const items = app.items.slice()
- items[0]._rowVariant = 'success'
- await setData(app, 'items', items)
- await nextTick()
-
- tables.forEach((table, idx) => {
- const vm = $refs[table]
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- const tr = tbody.children[0]
- const variant = vm.dark ? 'bg-success' : 'table-success'
- expect(Boolean(tr) && Boolean(tr.classList) && tr.classList.contains(variant)).toBe(true)
+ it('has class "table-responsive-md" when responsive=md', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ responsive: 'md'
}
})
- })
- it('table_basic should contain custom formatted columns', async () => {
- const { app } = window
- const vm = app.$refs.table_basic
-
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- const tr = [...tbody.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].textContent).toContain(
- vm.items[0].name.first + ' ' + vm.items[0].name.last
- )
- expect(tr.children[1].textContent).toContain(String(vm.items[0].age))
- expect(tr.children[3].children[0].tagName).toBe('BUTTON')
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('div')).toBe(true)
+ expect(wrapper.classes()).toContain('table-responsive-md')
+ expect(wrapper.classes().length).toBe(1)
+ expect(wrapper.find('table').classes()).toContain('table')
+ expect(wrapper.find('table').classes()).toContain('b-table')
+ expect(wrapper.find('table').classes().length).toBe(2)
+
+ wrapper.destroy()
+ })
+
+ it('stacked has precedence over responsive', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ stacked: true,
+ responsive: true
}
- }
+ })
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.is(Table)).toBe(true)
+ expect(wrapper.is('table')).toBe(true)
+ expect(wrapper.classes()).not.toContain('table-responsive')
+ expect(wrapper.classes()).toContain('b-table-stacked')
+ expect(wrapper.classes()).toContain('table')
+ expect(wrapper.classes()).toContain('b-table')
+ expect(wrapper.classes().length).toBe(3)
+
+ wrapper.destroy()
})
- it('table_paginated should contain custom formatted columns', async () => {
- const { app } = window
- const vm = app.$refs.table_basic
-
- const tbody = [...app.$refs.table_paginated.$el.children].find(
- el => el && el.tagName === 'TBODY'
- )
- expect(tbody).toBeDefined()
- if (tbody) {
- const tr = [...tbody.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].textContent).toContain(
- vm.items[0].name.first + ' ' + vm.items[0].name.last
- )
- expect(tr.children[1].textContent).toContain(String(vm.items[0].age))
- expect(tr.children[3].children[0].tagName).toBe('INPUT')
+ it('stacked has data-label attribute on all tbody > tr td', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: fields1,
+ stacked: true
}
- }
+ })
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(2)
+ const $trs = wrapper.findAll('tbody > tr').wrappers
+
+ // Labels will have run through startCase
+ expect(
+ $trs[0]
+ .findAll('td')
+ .at(0)
+ .attributes('data-label')
+ ).toBe('A')
+ expect(
+ $trs[1]
+ .findAll('td')
+ .at(0)
+ .attributes('data-label')
+ ).toBe('A')
+
+ expect(
+ $trs[0]
+ .findAll('td')
+ .at(1)
+ .attributes('data-label')
+ ).toBe('B')
+ expect(
+ $trs[1]
+ .findAll('td')
+ .at(1)
+ .attributes('data-label')
+ ).toBe('B')
+
+ expect(
+ $trs[0]
+ .findAll('td')
+ .at(2)
+ .attributes('data-label')
+ ).toBe('C')
+ expect(
+ $trs[1]
+ .findAll('td')
+ .at(2)
+ .attributes('data-label')
+ ).toBe('C')
+
+ wrapper.destroy()
+ })
+
+ it('item _rowVariant works', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, _rowVariant: 'primary' }],
+ fields: ['a'],
+ dark: false
+ }
+ })
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.find('tbody > tr').classes()).toContain('table-primary')
+
+ wrapper.setProps({
+ dark: true
+ })
+
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.find('tbody > tr').classes()).toContain('bg-primary')
+
+ wrapper.destroy()
})
- it('table_paginated should contain custom formatted headers', async () => {
- const {
- app: { $refs }
- } = window
-
- const thead = [...$refs.table_paginated.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].textContent).toContain('Person Full name')
- expect(tr.children[1].textContent).toContain('Person age')
- expect(tr.children[2].textContent).toContain('is Active')
- expect(tr.children[3].textContent).toContain('Select')
+ it('item _cellVariants works', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, _cellVariants: { a: 'info' } }],
+ fields: ['a'],
+ dark: false
}
- }
+ })
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > td').length).toBe(1)
+ expect(wrapper.find('tbody > tr > td').classes()).toContain('table-info')
+
+ wrapper.setProps({
+ dark: true
+ })
+
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > td').length).toBe(1)
+ expect(wrapper.find('tbody > tr > td').classes()).toContain('bg-info')
+
+ wrapper.destroy()
})
- it('table_paginated should contain custom formatted footers', async () => {
- const {
- app: { $refs }
- } = window
-
- await nextTick()
-
- const tfoot = [...$refs.table_paginated.$el.children].find(el => el && el.tagName === 'TFOOT')
- expect(tfoot).toBeDefined()
- if (tfoot) {
- const tr = [...tfoot.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- expect(tr.children[0].textContent).toContain('Showing 5 People')
- expect(tr.children[1].textContent).toContain('Person age')
- expect(tr.children[2].textContent).toContain('is Active')
- expect(tr.children[3].textContent).toContain('Selected: 0')
+ it('changing items array works', async () => {
+ const items1 = [{ a: 1, b: 2 }, { a: 3, b: 4 }]
+ const items2 = [{ a: 3, b: 4 }]
+ const wrapper = mount(Table, {
+ propsData: {
+ items: items1,
+ fields: ['a', 'b']
}
- }
+ })
+ expect(wrapper).toBeDefined()
+
+ expect(wrapper.findAll('tbody > tr').length).toBe(2)
+ wrapper.setProps({
+ items: items2
+ })
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+
+ wrapper.destroy()
})
- it('sortable header th should emit a sort-changed event with context when clicked and sort changed', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const spy = jest.fn()
- const fieldKeys = Object.keys(vm.fields)
-
- vm.$on('sort-changed', spy)
- const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- let sortBy = null
- const ths = [...tr.children]
- expect(ths.length).toBe(fieldKeys.length)
- ths.forEach((th, idx) => {
- th.click()
- if (vm.fields[fieldKeys[idx]].sortable) {
- expect(spy).toHaveBeenCalledWith(vm.context)
- expect(vm.context.sortBy).toBe(fieldKeys[idx])
- sortBy = vm.context.sortBy
- } else {
- if (sortBy) {
- expect(spy).toHaveBeenCalledWith(vm.context)
- expect(vm.context.sortBy).toBe(null)
- sortBy = null
- } else {
- expect(spy).not.toHaveBeenCalled()
- expect(vm.context.sortBy).toBe(null)
- }
- }
- spy.mockClear()
- })
+ it('tbody-tr-class works', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, b: 2 }, { a: 3, b: 4 }],
+ fields: ['a', 'b'],
+ tbodyTrClass: 'foobar'
}
- }
- })
+ })
- it('sortable footer th should emit a sort-changed event with context when clicked and sort changed', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const spy = jest.fn()
- const fieldKeys = Object.keys(vm.fields)
-
- vm.$on('sort-changed', spy)
- const tfoot = [...vm.$el.children].find(el => el && el.tagName === 'TFOOT')
- expect(tfoot).toBeDefined()
- if (tfoot) {
- const tr = [...tfoot.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- let sortBy = null
- const ths = [...tr.children]
- expect(ths.length).toBe(fieldKeys.length)
- ths.forEach((th, idx) => {
- th.click()
- if (vm.fields[fieldKeys[idx]].sortable) {
- expect(spy).toHaveBeenCalledWith(vm.context)
- expect(vm.context.sortBy).toBe(fieldKeys[idx])
- sortBy = vm.context.sortBy
- } else {
- if (sortBy) {
- expect(spy).toHaveBeenCalledWith(vm.context)
- expect(vm.context.sortBy).toBe(null)
- sortBy = null
- } else {
- expect(spy).not.toHaveBeenCalled()
- expect(vm.context.sortBy).toBe(null)
- }
- }
- spy.mockClear()
- })
+ expect(wrapper).toBeDefined()
+
+ // prop as a string
+ expect(wrapper.findAll('tbody > tr').length).toBe(2)
+ let $trs = wrapper.findAll('tbody > tr')
+ expect($trs.at(0).classes()).toContain('foobar')
+ expect($trs.at(1).classes()).toContain('foobar')
+
+ // As a function
+ wrapper.setProps({
+ tbodyTrClass: item => {
+ return item.a === 1 ? 'foo' : 'bar'
}
- }
+ })
+
+ expect(wrapper.findAll('tbody > tr').length).toBe(2)
+ $trs = wrapper.findAll('tbody > tr')
+ expect($trs.at(0).classes()).toContain('foo')
+ expect($trs.at(0).classes()).not.toContain('bar')
+ expect($trs.at(1).classes()).toContain('bar')
+ expect($trs.at(1).classes()).not.toContain('foo')
+
+ wrapper.destroy()
})
- it('non-sortable header th should not emit a sort-changed event when clicked and prop no-sort-reset is set', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_no_sort_reset
- const spy = jest.fn()
- const fieldKeys = Object.keys(vm.fields)
-
- vm.$on('sort-changed', spy)
- const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD')
- expect(thead).toBeDefined()
- if (thead) {
- const tr = [...thead.children].find(el => el && el.tagName === 'TR')
- expect(tr).toBeDefined()
- if (tr) {
- let sortBy = null
- const ths = [...tr.children]
- expect(ths.length).toBe(fieldKeys.length)
- ths.forEach((th, idx) => {
- th.click()
- if (vm.fields[fieldKeys[idx]].sortable) {
- expect(spy).toHaveBeenCalledWith(vm.context)
- expect(vm.context.sortBy).toBe(fieldKeys[idx])
- sortBy = vm.context.sortBy
- } else {
- expect(spy).not.toHaveBeenCalled()
- expect(vm.context.sortBy).toBe(sortBy)
- }
- spy.mockClear()
- })
+ it('thead and tfoot variant and classes work', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, b: 2 }],
+ fields: ['a', 'b'],
+ footClone: true
}
- }
- })
+ })
- it('table_paginated pagination works', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const app = window.app
- const spy = jest.fn()
-
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- // We need between 11 and 14 ites for this test
- expect(app.items.length > 10).toBe(true)
- expect(app.items.length < 15).toBe(true)
-
- vm.$on('input', spy)
-
- // Page size to be less then number of items
- await setData(app, 'currentPage', 1)
- await setData(app, 'perPage', 10)
- await nextTick()
- expect(vm.perPage).toBe(10)
- expect(vm.value.length).toBe(10)
- expect(tbody.children.length).toBe(10)
-
- // Goto page 2, should have length 1
- await setData(app, 'currentPage', 2)
- await nextTick()
- expect(vm.value.length).toBe(app.items.length - 10)
- expect(tbody.children.length).toBe(app.items.length - 10)
-
- expect(spy).toHaveBeenCalled()
- }
- })
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('thead > tr').length).toBe(1)
+ expect(wrapper.findAll('tfoot > tr').length).toBe(1)
- it('table_paginated filtering works', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const app = window.app
- const spyInput = jest.fn()
- const spyFiltered = jest.fn()
-
- expect(vm.showEmpty).toBe(true)
- expect(app.items.length > 10).toBe(true)
- expect(app.items.length < 15).toBe(true)
-
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- expect(app.items.length > 1).toBe(true)
-
- vm.$on('input', spyInput)
-
- // Set page size to max number of items
- await setData(app, 'currentPage', 1)
- await setData(app, 'perPage', 15)
- await nextTick()
- expect(vm.value.length).toBe(app.items.length)
- expect(tbody.children.length).toBe(app.items.length)
-
- // Apply Fiter
- await setData(app, 'filter', String(app.items[0].name.last))
- await nextTick()
- expect(vm.value.length < app.items.length).toBe(true)
- expect(tbody.children.length < app.items.length).toBe(true)
-
- // Empty filter alert
- vm.$on('filtered', spyFiltered)
- await setData(app, 'filter', 'ZZZZZZZZZZZZZZZZZzzzzzzzzzzzzzzzzz........')
- await nextTick()
-
- expect(spyFiltered).toHaveBeenCalled()
-
- expect(vm.value.length).toBe(0)
- expect(tbody.children.length).toBe(1)
- expect(tbody.children[0].children[0].textContent).toContain(vm.emptyFilteredText)
-
- expect(spyInput).toHaveBeenCalled()
- }
- })
+ expect(wrapper.find('thead').classes().length).toBe(0)
+ expect(wrapper.find('tfoot').classes().length).toBe(0)
- it('table_paginated shows empty message when no items', async () => {
- const {
- app: { $refs }
- } = window
- const vm = $refs.table_paginated
- const app = window.app
- const spy = jest.fn()
-
- expect(vm.showEmpty).toBe(true)
-
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- expect(app.items.length > 10).toBe(true)
- expect(app.items.length < 15).toBe(true)
-
- vm.$on('input', spy)
-
- // Set page size to show all items
- await setData(app, 'currentPage', 1)
- await setData(app, 'perPage', 15)
- await nextTick()
- expect(vm.value.length).toBe(app.items.length)
- expect(tbody.children.length).toBe(app.items.length)
-
- // Set items to empty list
- await setData(app, 'items', [])
- await nextTick()
- expect(app.items.length).toBe(0)
- expect(vm.value.length).toBe(0)
- expect(tbody.children.length).toBe(1)
- expect(tbody.textContent).toContain(vm.emptyText)
-
- expect(spy).toHaveBeenCalled()
- }
- })
+ wrapper.setProps({
+ headVariant: 'light'
+ })
- it('table_provider should emit a refreshed event for providerArray', async () => {
- const { app } = window
- const vm = app.$refs.table_provider
- const spy = jest.fn()
+ expect(wrapper.find('thead').classes()).toContain('thead-light')
+ expect(wrapper.find('tfoot').classes()).toContain('thead-light')
- await setData(app, 'providerType', 'array')
- await nextTick()
- await sleep(100)
+ wrapper.setProps({
+ footVariant: 'dark'
+ })
- vm.$on('refreshed', spy)
- vm.refresh()
- await nextTick()
- await sleep(100)
+ expect(wrapper.find('thead').classes()).toContain('thead-light')
+ expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
- expect(spy).toHaveBeenCalled()
- // expect(vm.value.length).toBe(app.items.length)
- })
+ wrapper.setProps({
+ theadClass: 'foo',
+ tfootClass: 'bar'
+ })
- it('table_provider should emit a refreshed event for providerCallback', async () => {
- const { app } = window
- const vm = app.$refs.table_provider
- const spy = jest.fn()
+ expect(wrapper.find('thead').classes()).toContain('thead-light')
+ expect(wrapper.find('thead').classes()).toContain('foo')
+ expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
+ expect(wrapper.find('tfoot').classes()).toContain('bar')
- await setData(app, 'providerType', 'callback')
- await nextTick()
- await sleep(100)
+ wrapper.setProps({
+ theadTrClass: 'willy',
+ tfootTrClass: 'wonka'
+ })
- vm.$on('refreshed', spy)
- vm.refresh()
- await nextTick()
- await sleep(100)
+ expect(wrapper.find('thead > tr').classes()).toContain('willy')
+ expect(wrapper.find('tfoot > tr').classes()).toContain('wonka')
- expect(spy).toHaveBeenCalled()
+ wrapper.destroy()
})
- it('table_provider should emit a refreshed event for providerPromise', async () => {
- const { app } = window
- const vm = app.$refs.table_provider
- const spy = jest.fn()
+ it('item field isRowHeader works', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, b: 2 }],
+ fields: [{ key: 'a', isRowHeader: true }, 'b']
+ }
+ })
- await setData(app, 'providerType', 'promise')
- await nextTick()
- await sleep(100)
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > *').length).toBe(2)
+
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(0)
+ .is('th')
+ ).toBe(true)
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(0)
+ .attributes('role')
+ ).toBe('rowheader')
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(0)
+ .attributes('scope')
+ ).toBe('row')
+
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(1)
+ .is('td')
+ ).toBe(true)
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(1)
+ .attributes('role')
+ ).toBe('cell')
+ expect(
+ wrapper
+ .findAll('tbody > tr > *')
+ .at(1)
+ .attributes('scope')
+ ).not.toBeDefined()
+
+ wrapper.destroy()
+ })
+
+ it('item field tdAttr and tdClass works', async () => {
+ const Parent = {
+ methods: {
+ parentTdAttrs(value, key, item) {
+ return { 'data-parent': 'parent' }
+ }
+ }
+ }
+ const wrapper = mount(Table, {
+ parentComponent: Parent,
+ propsData: {
+ items: [{ a: 1, b: 2, c: 3 }],
+ fields: [
+ { key: 'a', tdAttr: { 'data-foo': 'bar' } },
+ { key: 'b', tdClass: () => 'baz' },
+ { key: 'c', tdAttr: 'parentTdAttrs' }
+ ]
+ }
+ })
- vm.$on('refreshed', spy)
- vm.refresh()
- await nextTick()
- await sleep(100)
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > td').length).toBe(3)
- expect(spy).toHaveBeenCalled()
- })
+ const $tds = wrapper.findAll('tbody > tr > td')
+
+ expect($tds.at(0).attributes('data-foo')).toBe('bar')
+ expect($tds.at(0).attributes('data-parent')).not.toBeDefined()
+ expect($tds.at(0).classes().length).toBe(0)
- it('should render stacked table', async () => {
- const { app } = window
- const vm = app.$refs.table_stacked
+ expect($tds.at(1).classes()).toContain('baz')
+ expect($tds.at(1).attributes('data-foo')).not.toBeDefined()
+ expect($tds.at(1).attributes('data-parent')).not.toBeDefined()
- expect(vm).toHaveAllClasses(['b-table-stacked'])
+ expect($tds.at(2).attributes('data-parent')).toBe('parent')
+ expect($tds.at(2).attributes('data-foo')).not.toBeDefined()
+ expect($tds.at(2).classes().length).toBe(0)
+
+ wrapper.destroy()
})
- it('all example tables should have custom formatted cells', async () => {
- const {
- app: { $refs }
- } = window
-
- const tables = ['table_basic', 'table_paginated', 'table_dark']
- await nextTick()
-
- tables.forEach((table, idx) => {
- const vm = $refs[table]
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- if (tbody) {
- const tr = tbody.children[0]
- expect(tr).toBeDefined()
- expect(
- Boolean(tr.children[0]) &&
- Boolean(tr.children[0].classList) &&
- tr.children[0].classList.contains('bg-primary')
- ).toBe(true)
- expect(
- Boolean(tr.children[1]) &&
- Boolean(tr.children[1].classList) &&
- tr.children[1].classList.contains('bg-primary') &&
- tr.children[1].classList.contains('text-dark')
- ).toBe(true)
- expect(
- Boolean(tr.children[2]) &&
- Boolean(tr.children[2].classList) &&
- tr.children[2].classList.contains('bg-danger')
- ).toBe(true)
- expect(
- Boolean(tr.children[3]) &&
- Boolean(tr.children[3].classList) &&
- tr.children[3].classList.contains('bg-primary') &&
- tr.children[3].classList.contains('text-light')
- ).toBe(true)
- expect(
- Boolean(tr.children[0]) &&
- Boolean(tr.children[0].attributes) &&
- tr.children[0].getAttribute('title') === 'Person Full name'
- ).toBe(true)
- expect(
- Boolean(tr.children[2]) &&
- Boolean(tr.children[2].attributes) &&
- tr.children[2].getAttribute('title') === 'is Active'
- ).toBe(true)
- expect(
- Boolean(tr.children[3]) &&
- Boolean(tr.children[3].attributes) &&
- tr.children[3].getAttribute('title') === 'Actions'
- ).toBe(true)
+ it('item field formatter as function works', async () => {
+ const wrapper = mount(Table, {
+ propsData: {
+ items: [{ a: 1, b: 2 }],
+ fields: [
+ {
+ key: 'a',
+ formatter(value, key, item) {
+ return item.a + item.b
+ }
+ },
+ 'b'
+ ]
}
})
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > td').length).toBe(2)
+ const $tds = wrapper.findAll('tbody > tr > td')
+ expect($tds.at(0).text()).toBe('3')
+ expect($tds.at(1).text()).toBe('2')
+
+ wrapper.destroy()
})
- it('should set row classes', async () => {
- // Classes that children rows must contain
- const classesTest = {
- 'tr-start-with-l': [1, 7],
- 'tr-last-name-macdonald': [0, 6]
- }
- const { app } = window
- const vm = app.$refs.table_style_row
- const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY')
- expect(tbody).toBeDefined()
- for (const className in classesTest) {
- const children = classesTest[className]
- for (let childIndex = 0, len = tbody.children.length - 1; childIndex < len; ++childIndex) {
- const hasClass = children.indexOf(childIndex) >= 0
- expect(
- Boolean(tbody.children[childIndex]) &&
- Boolean(tbody.children[childIndex].classList) &&
- tbody.children[childIndex].classList.contains(className)
- ).toBe(hasClass)
+ it('item field formatter as string works', async () => {
+ const Parent = {
+ methods: {
+ formatter(value, key, item) {
+ return item.a + item.b
+ }
}
}
+ const wrapper = mount(Table, {
+ parentComponent: Parent,
+ propsData: {
+ items: [{ a: 1, b: 2 }],
+ fields: [{ key: 'a', formatter: 'formatter' }, 'b']
+ }
+ })
+
+ expect(wrapper).toBeDefined()
+ expect(wrapper.findAll('tbody > tr').length).toBe(1)
+ expect(wrapper.findAll('tbody > tr > td').length).toBe(2)
+ const $tds = wrapper.findAll('tbody > tr > td')
+ expect($tds.at(0).text()).toBe('3')
+ expect($tds.at(1).text()).toBe('2')
+
+ wrapper.destroy()
})
})
diff --git a/src/utils/startcase.spec.js b/src/utils/startcase.spec.js
new file mode 100644
index 00000000000..0c17bdd78c9
--- /dev/null
+++ b/src/utils/startcase.spec.js
@@ -0,0 +1,11 @@
+import startCase from './startcase'
+
+describe('utils/startcase', () => {
+ it('works', async () => {
+ expect(startCase('foobar')).toBe('Foobar')
+ expect(startCase('Foobar')).toBe('Foobar')
+ expect(startCase('foo_bar')).toBe('Foo Bar')
+ expect(startCase('foo bar')).toBe('Foo Bar')
+ expect(startCase('fooBar')).toBe('Foo Bar')
+ })
+})
diff --git a/tests/utils.js b/tests/utils.js
index bd6a436d641..97114b32258 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -1,3 +1,4 @@
+/* istanbul ignore file */
import { readFileSync } from 'fs'
import { resolve } from 'path'
import BootstrapVue from '../src'
@@ -14,7 +15,7 @@ Vue.config.devtools = false
window.Vue = Vue
Vue.use(BootstrapVue)
-export function loadFixture(dirName, name) {
+export function loadFixture(dirName, name) /* istanbul ignore next */ {
const fixtureBase = resolve(dirName, 'fixtures')
const template = readFileSync(resolve(fixtureBase, name + '.html'), 'UTF-8')
const js = readFileSync(resolve(fixtureBase, name + '.js'), 'UTF-8')
@@ -33,25 +34,31 @@ export function loadFixture(dirName, name) {
}
export async function testVM() {
+ /* istanbul ignore next */
it(`vm mounts`, async () => {
return expect(window.app.$el).toBeDefined()
})
}
export function nextTick() {
+ /* istanbul ignore next */
return new Promise((resolve, reject) => {
Vue.nextTick(resolve)
})
}
export async function setData(app, key, value) {
+ /* istanbul ignore next */
app[key] = value
+ /* istanbul ignore next */
await nextTick()
}
// Usage: await sleep(1000);
export function sleep(ms) {
+ /* istanbul ignore next */
ms = ms || 0
+ /* istanbul ignore next */
return new Promise((resolve, reject) => setTimeout(resolve, ms))
}
@@ -76,13 +83,14 @@ const throwIfNotHTMLElement = el => {
}
}
+/* istanbul ignore next */
const throwIfNotArray = array => {
- /* istanbul ignore next */
if (!Array.isArray(array)) {
throw new TypeError(`The matcher requires an array. Given ${typeof array}`)
}
}
+/* istanbul ignore next */
const vmHasClass = (vm, className) => {
throwIfNotVueInstance(vm)
return vm.$el._prevClass.indexOf(className) !== -1
@@ -93,6 +101,7 @@ const vmHasClass = (vm, className) => {
* @param {string} className
* @return {boolean}
*/
+/* istanbul ignore next */
const elHasClass = (el, className) => {
throwIfNotHTMLElement(el)
return el.classList.contains(className)
@@ -103,14 +112,19 @@ const elHasClass = (el, className) => {
* @param {string} className
* @return {boolean}
*/
+/* istanbul ignore next */
const hasClass = (node, className) =>
isVueInstance(node) ? vmHasClass(node, className) : elHasClass(node, className)
+/* istanbul ignore next */
const getVmTag = vm => vm.$options._componentTag
+/* istanbul ignore next */
const getHTMLTag = el => String(el.tagName).toLowerCase()
+/* istanbul ignore next */
const getTagName = node => (isVueInstance(node) ? getVmTag(node) : getHTMLTag(node))
// Extend Jest marchers
+/* istanbul ignore next */
expect.extend({
toHaveClass(node, className) {
/* istanbul ignore next */