Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
) * feat(table): Add table-busy slot for loading status. Fixes #1859 Adds a new slot `table-busy` which allows users to display a loading message when the table is in the busy state. If no `table-busy` slot is present, the current rows are displayed (as was the behaviour before) Closes #1859 * document new slot in package.json * Update README.md * Create table-busy.spec.js Add test suite for b-table busy state
- Loading branch information
1 parent
e0cdca0
commit a654a61
Showing
4 changed files
with
325 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
import Table from './table' | ||
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 } | ||
] | ||
|
||
describe('b-table busy state', async () => { | ||
it('default should have attribute aria-busy=false', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
items: testItems | ||
} | ||
}) | ||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('false') | ||
}) | ||
|
||
it('default should have item rows rendered', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
items: testItems | ||
} | ||
}) | ||
expect(wrapper.find('tbody').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').length).toBe(testItems.length) | ||
}) | ||
|
||
it('should have attribute aria-busy=true when prop busy=true', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
busy: true, | ||
items: testItems | ||
} | ||
}) | ||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('true') | ||
}) | ||
|
||
it('should have attribute aria-busy=true when data localBusy=true', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
items: testItems | ||
} | ||
}) | ||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('false') | ||
|
||
wrapper.setData({ | ||
localBusy: true | ||
}) | ||
|
||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('true') | ||
}) | ||
|
||
it('should emit update:busy event when data localBusy is toggled', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
items: testItems | ||
} | ||
}) | ||
expect(wrapper.emitted('update:busy')).not.toBeDefined() | ||
|
||
wrapper.setData({ | ||
localBusy: true | ||
}) | ||
|
||
expect(wrapper.emitted('update:busy')).toBeDefined() | ||
expect(wrapper.emitted('update:busy')[0][0]).toEqual(true) | ||
}) | ||
|
||
it('should render table-busy slot when prop busy=true and slot provided', async () => { | ||
const wrapper = mount(Table, { | ||
propsData: { | ||
busy: false, | ||
items: testItems | ||
}, | ||
slots: { | ||
// Note slot data needs to be wrapped in an element. | ||
// https://github.com/vue/vue-test-utils/issues:992 | ||
// Will be fixed in v1.0.0-beta.26 | ||
'table-busy': '<span>busy slot content</span>' | ||
} | ||
}) | ||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('false') | ||
expect(wrapper.find('tbody').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').length).toBe(testItems.length) | ||
|
||
wrapper.setProps({ | ||
busy: true | ||
}) | ||
|
||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('true') | ||
expect(wrapper.find('tbody').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').length).toBe(1) | ||
expect(wrapper.find('tbody').text()).toContain('busy slot content') | ||
expect(wrapper.find('tbody').find('tr').classes()).toContain('b-table-busy-slot') | ||
|
||
wrapper.setProps({ | ||
busy: false | ||
}) | ||
|
||
expect(wrapper.attributes('aria-busy')).toBeDefined() | ||
expect(wrapper.attributes('aria-busy')).toEqual('false') | ||
expect(wrapper.find('tbody').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').exists()).toBe(true) | ||
expect(wrapper.find('tbody').findAll('tr').length).toBe(testItems.length) | ||
}) | ||
}) |
Oops, something went wrong.