Skip to content

Commit 91c8320

Browse files
tmorehousetmorehouse
authored
Update table-selectable.spec.js
1 parent f8af66e commit 91c8320

File tree

1 file changed

+128
-0
lines changed

1 file changed

+128
-0
lines changed

‎src/components/table/table-selectable.spec.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,23 @@ describe('table row select', () => {
1717
expect(wrapper.emitted('row-selected')).not.toBeDefined()
1818
})
1919

20+
it('should not have aria-selected/tabindex attribute when not selctable and no row-clicked listener', async () => {
21+
const wrapper = mount(Table, {
22+
propsData: {
23+
fields: testFields,
24+
items: testItems
25+
}
26+
})
27+
expect(wrapper).toBeDefined()
28+
await wrapper.vm.$nextTick()
29+
const $rows = wrapper.findAll('tbody > tr')
30+
expect($rows.length).toBe(4)
31+
// Doesn't have aria-selected attribute on all TRs
32+
expect($rows.wrapper.is('tr[aria-selected]')).toBe(false)
33+
// Doesn't have tabindex attribute on all TRs
34+
expect($rows.wrapper.is('tr[tabindex]')).toBe(false)
35+
})
36+
2037
it('select mode single works', async () => {
2138
const wrapper = mount(Table, {
2239
propsData: {
@@ -29,6 +46,9 @@ describe('table row select', () => {
2946
expect(wrapper).toBeDefined()
3047
await wrapper.vm.$nextTick()
3148
expect(wrapper.emitted('row-selected')).not.toBeDefined()
49+
expect(wrapper.findAll('tbody > tr').length).toBe(4)
50+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
51+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
3252

3353
// Click first row
3454
wrapper
@@ -39,6 +59,11 @@ describe('table row select', () => {
3959
expect(wrapper.emitted('row-selected')).toBeDefined()
4060
expect(wrapper.emitted('row-selected').length).toBe(1)
4161
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
62+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
63+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
64+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
65+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
66+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
4267

4368
// Click third row
4469
wrapper
@@ -48,6 +73,11 @@ describe('table row select', () => {
4873
await wrapper.vm.$nextTick()
4974
expect(wrapper.emitted('row-selected').length).toBe(2)
5075
expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[2]])
76+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
77+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
78+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="true"]')).toBe(true)
79+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
80+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
5181

5282
// Click third row again
5383
wrapper
@@ -57,6 +87,11 @@ describe('table row select', () => {
5787
await wrapper.vm.$nextTick()
5888
expect(wrapper.emitted('row-selected').length).toBe(3)
5989
expect(wrapper.emitted('row-selected')[2][0]).toEqual([])
90+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
91+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
92+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
93+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
94+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
6095
})
6196

6297
it('select mode multi works', async () => {
@@ -81,6 +116,11 @@ describe('table row select', () => {
81116
expect(wrapper.emitted('row-selected')).toBeDefined()
82117
expect(wrapper.emitted('row-selected').length).toBe(1)
83118
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
119+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
120+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
121+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
122+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
123+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
84124

85125
// Click third row
86126
wrapper
@@ -90,6 +130,11 @@ describe('table row select', () => {
90130
await wrapper.vm.$nextTick()
91131
expect(wrapper.emitted('row-selected').length).toBe(2)
92132
expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[0], testItems[2]])
133+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
134+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
135+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
136+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="true"]')).toBe(true)
137+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
93138

94139
// Click third row again
95140
wrapper
@@ -99,6 +144,11 @@ describe('table row select', () => {
99144
await wrapper.vm.$nextTick()
100145
expect(wrapper.emitted('row-selected').length).toBe(3)
101146
expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[0]])
147+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
148+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
149+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
150+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
151+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
102152

103153
// Click first row again
104154
wrapper
@@ -108,6 +158,11 @@ describe('table row select', () => {
108158
await wrapper.vm.$nextTick()
109159
expect(wrapper.emitted('row-selected').length).toBe(4)
110160
expect(wrapper.emitted('row-selected')[3][0]).toEqual([])
161+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
162+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
163+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
164+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
165+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
111166
})
112167

113168
it('select mode range works', async () => {
@@ -122,6 +177,8 @@ describe('table row select', () => {
122177
expect(wrapper).toBeDefined()
123178
await wrapper.vm.$nextTick()
124179
expect(wrapper.emitted('row-selected')).not.toBeDefined()
180+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
181+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
125182

126183
// Click first row
127184
wrapper
@@ -132,6 +189,11 @@ describe('table row select', () => {
132189
expect(wrapper.emitted('row-selected')).toBeDefined()
133190
expect(wrapper.emitted('row-selected').length).toBe(1)
134191
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
192+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
193+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
194+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
195+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
196+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
135197

136198
// Shift-Click third row
137199
wrapper
@@ -145,6 +207,11 @@ describe('table row select', () => {
145207
testItems[1],
146208
testItems[2]
147209
])
210+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
211+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
212+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="true"]')).toBe(true)
213+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="true"]')).toBe(true)
214+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
148215

149216
// Click third row again
150217
wrapper
@@ -154,6 +221,11 @@ describe('table row select', () => {
154221
await wrapper.vm.$nextTick()
155222
expect(wrapper.emitted('row-selected').length).toBe(3)
156223
expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[2]])
224+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
225+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
226+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
227+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="true"]')).toBe(true)
228+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
157229

158230
// Click fourth row
159231
wrapper
@@ -163,6 +235,11 @@ describe('table row select', () => {
163235
await wrapper.vm.$nextTick()
164236
expect(wrapper.emitted('row-selected').length).toBe(4)
165237
expect(wrapper.emitted('row-selected')[3][0]).toEqual([testItems[3]])
238+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
239+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
240+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
241+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
242+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="true"]')).toBe(true)
166243

167244
// Click fourth row again
168245
wrapper
@@ -172,6 +249,11 @@ describe('table row select', () => {
172249
await wrapper.vm.$nextTick()
173250
// No change to selected rows
174251
expect(wrapper.emitted('row-selected').length).toBe(4)
252+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
253+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
254+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
255+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
256+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="true"]')).toBe(true)
175257

176258
// Ctrl-Click second row
177259
wrapper
@@ -181,6 +263,11 @@ describe('table row select', () => {
181263
await wrapper.vm.$nextTick()
182264
expect(wrapper.emitted('row-selected').length).toBe(5)
183265
expect(wrapper.emitted('row-selected')[4][0]).toEqual([testItems[1], testItems[3]])
266+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
267+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
268+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="true"]')).toBe(true)
269+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
270+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="true"]')).toBe(true)
184271

185272
// Ctrl-Click second row
186273
wrapper
@@ -190,6 +277,11 @@ describe('table row select', () => {
190277
await wrapper.vm.$nextTick()
191278
expect(wrapper.emitted('row-selected').length).toBe(6)
192279
expect(wrapper.emitted('row-selected')[5][0]).toEqual([testItems[3]])
280+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
281+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
282+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
283+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
284+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="true"]')).toBe(true)
193285

194286
// Ctrl-Click fourth row
195287
wrapper
@@ -199,6 +291,11 @@ describe('table row select', () => {
199291
await wrapper.vm.$nextTick()
200292
expect(wrapper.emitted('row-selected').length).toBe(7)
201293
expect(wrapper.emitted('row-selected')[6][0]).toEqual([])
294+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
295+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
296+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
297+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
298+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
202299
})
203300

204301
it('sort change clears selection', async () => {
@@ -223,6 +320,11 @@ describe('table row select', () => {
223320
expect(wrapper.emitted('row-selected')).toBeDefined()
224321
expect(wrapper.emitted('row-selected').length).toBe(1)
225322
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
323+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
324+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
325+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
326+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
327+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
226328

227329
// Click row header
228330
wrapper
@@ -234,6 +336,11 @@ describe('table row select', () => {
234336
expect(wrapper.emitted('sort-changed').length).toBe(1)
235337
expect(wrapper.emitted('row-selected').length).toBe(2)
236338
expect(wrapper.emitted('row-selected')[1][0]).toEqual([])
339+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
340+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="false"]')).toBe(true)
341+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
342+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
343+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
237344
})
238345

239346
it('filter change clears selection', async () => {
@@ -248,6 +355,8 @@ describe('table row select', () => {
248355
expect(wrapper).toBeDefined()
249356
await wrapper.vm.$nextTick()
250357
expect(wrapper.emitted('row-selected')).not.toBeDefined()
358+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
359+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
251360

252361
// Click first row
253362
wrapper
@@ -258,6 +367,11 @@ describe('table row select', () => {
258367
expect(wrapper.emitted('row-selected')).toBeDefined()
259368
expect(wrapper.emitted('row-selected').length).toBe(1)
260369
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
370+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
371+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
372+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
373+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
374+
expect(wrapper.findAll('tbody > tr').at(3).is('[aria-selected="false"]')).toBe(true)
261375

262376
// Change filter
263377
wrapper.setProps({
@@ -266,6 +380,8 @@ describe('table row select', () => {
266380
await wrapper.vm.$nextTick()
267381
expect(wrapper.emitted('row-selected').length).toBe(2)
268382
expect(wrapper.emitted('row-selected')[1][0]).toEqual([])
383+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
384+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
269385
})
270386

271387
it('pagination change clears selection', async () => {
@@ -282,6 +398,9 @@ describe('table row select', () => {
282398
expect(wrapper).toBeDefined()
283399
await wrapper.vm.$nextTick()
284400
expect(wrapper.emitted('row-selected')).not.toBeDefined()
401+
expect(wrapper.findAll('tbody > tr').length).toBe(3)
402+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
403+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
285404

286405
// Click first row
287406
wrapper
@@ -292,6 +411,12 @@ describe('table row select', () => {
292411
expect(wrapper.emitted('row-selected')).toBeDefined()
293412
expect(wrapper.emitted('row-selected').length).toBe(1)
294413
expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]])
414+
expect(wrapper.findAll('tbody > tr').length).toBe(3)
415+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
416+
// We only have 3 rows max per page
417+
expect(wrapper.findAll('tbody > tr').at(0).is('[aria-selected="true"]')).toBe(true)
418+
expect(wrapper.findAll('tbody > tr').at(1).is('[aria-selected="false"]')).toBe(true)
419+
expect(wrapper.findAll('tbody > tr').at(2).is('[aria-selected="false"]')).toBe(true)
295420

296421
// Change page
297422
wrapper.setProps({
@@ -300,5 +425,8 @@ describe('table row select', () => {
300425
await wrapper.vm.$nextTick()
301426
expect(wrapper.emitted('row-selected').length).toBe(2)
302427
expect(wrapper.emitted('row-selected')[1][0]).toEqual([])
428+
expect(wrapper.findAll('tbody > tr').length).toBe(1)
429+
expect(wrapper.findAll('tbody > tr').is('[tabindex="0"]')).toBe(true)
430+
expect(wrapper.findAll('tbody > tr').is('[aria-selected="false"]')).toBe(true)
303431
})
304432
})

0 commit comments

Comments
 (0)