table-busy.spec.js
3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { mount } from '@vue/test-utils'
import { BTable } from './table'
const testItems = [{ a: 1, b: 2, c: 3 }, { a: 5, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }]
describe('table > busy state', () => {
it('default should have attribute aria-busy=false', async () => {
const wrapper = mount(BTable, {
propsData: {
items: testItems
}
})
expect(wrapper.attributes('aria-busy')).toBeDefined()
expect(wrapper.attributes('aria-busy')).toEqual('false')
wrapper.destroy()
})
it('default should have item rows rendered', async () => {
const wrapper = mount(BTable, {
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)
wrapper.destroy()
})
it('should have attribute aria-busy=true when prop busy=true', async () => {
const wrapper = mount(BTable, {
propsData: {
busy: true,
items: testItems
}
})
expect(wrapper.attributes('aria-busy')).toBeDefined()
expect(wrapper.attributes('aria-busy')).toEqual('true')
wrapper.destroy()
})
it('should have attribute aria-busy=true when data localBusy=true', async () => {
const wrapper = mount(BTable, {
propsData: {
items: testItems
}
})
expect(wrapper.attributes('aria-busy')).toBeDefined()
expect(wrapper.attributes('aria-busy')).toEqual('false')
await wrapper.setData({
localBusy: true
})
expect(wrapper.attributes('aria-busy')).toBeDefined()
expect(wrapper.attributes('aria-busy')).toEqual('true')
wrapper.destroy()
})
it('should emit update:busy event when data localBusy is toggled', async () => {
const wrapper = mount(BTable, {
propsData: {
items: testItems
}
})
expect(wrapper.emitted('update:busy')).toBeUndefined()
await wrapper.setData({
localBusy: true
})
expect(wrapper.emitted('update:busy')).toBeDefined()
expect(wrapper.emitted('update:busy')[0][0]).toEqual(true)
wrapper.destroy()
})
it('should render table-busy slot when prop busy=true and slot provided', async () => {
const wrapper = mount(BTable, {
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)
await 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')
await 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)
wrapper.destroy()
})
})