diff --git a/src/components/table/helpers/mixin-selectable.js b/src/components/table/helpers/mixin-selectable.js index 75092ce0ed3..a17f1619d37 100644 --- a/src/components/table/helpers/mixin-selectable.js +++ b/src/components/table/helpers/mixin-selectable.js @@ -70,16 +70,15 @@ export const selectableMixin = Vue.extend({ } }, selectableTableAttrs() { - return { - // TODO: - // Should this attribute not be included when no-select-on-click is set - // since this attribute implies keyboard navigation? - 'aria-multiselectable': !this.isSelectable - ? null - : this.selectableIsMultiSelect - ? 'true' - : 'false' - } + return this.isSelectable + ? { + role: 'grid', + // TODO: + // Should this attribute not be included when `no-select-on-click` is set + // since this attribute implies keyboard navigation? + 'aria-multiselectable': String(this.selectableIsMultiSelect) + } + : {} } }, watch: { diff --git a/src/components/table/table-selectable.spec.js b/src/components/table/table-selectable.spec.js index e4adeb7f60e..ac07994ddaa 100644 --- a/src/components/table/table-selectable.spec.js +++ b/src/components/table/table-selectable.spec.js @@ -13,8 +13,10 @@ describe('table > row select', () => { items: testItems } }) + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() wrapper.destroy() @@ -27,8 +29,11 @@ describe('table > row select', () => { items: testItems } }) + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('table') expect(wrapper.attributes('aria-multiselectable')).toBeUndefined() expect(wrapper.classes()).not.toContain('b-table-selectable') expect(wrapper.classes()).not.toContain('b-table-selectable-no-click') @@ -36,6 +41,7 @@ describe('table > row select', () => { expect(wrapper.classes()).not.toContain('b-table-select-single') expect(wrapper.classes()).not.toContain('b-table-select-multi') expect(wrapper.classes()).not.toContain('b-table-select-range') + const $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(4) // Doesn't have aria-selected attribute on all TRs @@ -56,8 +62,11 @@ describe('table > row select', () => { 'row-clicked': () => {} } }) + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('table') expect(wrapper.attributes('aria-multiselectable')).toBeUndefined() expect(wrapper.classes()).not.toContain('b-table-selectable') expect(wrapper.classes()).not.toContain('b-table-selectable-no-click') @@ -65,6 +74,7 @@ describe('table > row select', () => { expect(wrapper.classes()).not.toContain('b-table-select-single') expect(wrapper.classes()).not.toContain('b-table-select-multi') expect(wrapper.classes()).not.toContain('b-table-select-range') + const $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(4) // Doesn't have aria-selected attribute on all TRs @@ -88,6 +98,8 @@ describe('table > row select', () => { expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('grid') expect(wrapper.attributes('aria-multiselectable')).toBe('false') expect(wrapper.classes()).toContain('b-table-selectable') expect(wrapper.classes()).toContain('b-table-select-single') @@ -109,10 +121,11 @@ describe('table > row select', () => { selectMode: 'single' } }) - let $rows expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('grid') expect(wrapper.attributes('aria-multiselectable')).toBe('false') expect(wrapper.classes()).toContain('b-table-selectable') expect(wrapper.classes()).toContain('b-table-select-single') @@ -121,7 +134,8 @@ describe('table > row select', () => { expect(wrapper.classes()).not.toContain('b-table-select-multi') expect(wrapper.classes()).not.toContain('b-table-select-range') expect(wrapper.emitted('row-selected')).toBeUndefined() - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(4) expect($rows.wrappers.every(r => r.find('[aria-selected="false"]').exists())).toBe(true) expect($rows.wrappers.every(r => r.find('[aria-selected="false"]').exists())).toBe(true) @@ -132,9 +146,11 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -152,8 +168,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[2]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -171,8 +189,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -197,9 +217,11 @@ describe('table > row select', () => { selectMode: 'multi' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('grid') expect(wrapper.attributes('aria-multiselectable')).toBe('true') expect(wrapper.classes()).toContain('b-table-selectable') expect(wrapper.classes()).toContain('b-table-select-multi') @@ -216,7 +238,8 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') expect($rows.at(1).attributes('aria-selected')).toBe('false') @@ -233,8 +256,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[0], testItems[2]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -252,8 +277,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[0]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -271,8 +298,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(4) expect(wrapper.emitted('row-selected')[3][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -297,9 +326,11 @@ describe('table > row select', () => { selectMode: 'range' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + + expect(wrapper.attributes('role')).toBe('grid') expect(wrapper.attributes('aria-multiselectable')).toBe('true') expect(wrapper.classes()).toContain('b-table-selectable') expect(wrapper.classes()).toContain('b-table-select-range') @@ -307,7 +338,8 @@ describe('table > row select', () => { expect(wrapper.classes()).not.toContain('b-table-select-single') expect(wrapper.classes()).not.toContain('b-table-select-multi') expect(wrapper.emitted('row-selected')).toBeUndefined() - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.wrappers.every(r => r.find('[aria-selected="false"]').exists())).toBe(true) @@ -316,9 +348,11 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -336,12 +370,14 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click', { shiftKey: true }) + expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([ testItems[0], testItems[1], testItems[2] ]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -359,8 +395,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(2) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[2]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -378,8 +416,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(3) .trigger('click') + expect(wrapper.emitted('row-selected').length).toBe(4) expect(wrapper.emitted('row-selected')[3][0]).toEqual([testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -397,8 +437,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(3) .trigger('click') + // No change to selected rows expect(wrapper.emitted('row-selected').length).toBe(4) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(r => r.find('[tabindex="0"]').exists())).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -416,8 +458,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(1) .trigger('click', { ctrlKey: true }) + expect(wrapper.emitted('row-selected').length).toBe(5) expect(wrapper.emitted('row-selected')[4][0]).toEqual([testItems[1], testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -435,8 +479,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(1) .trigger('click', { ctrlKey: true }) + expect(wrapper.emitted('row-selected').length).toBe(6) expect(wrapper.emitted('row-selected')[5][0]).toEqual([testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -454,8 +500,10 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(3) .trigger('click', { ctrlKey: true }) + expect(wrapper.emitted('row-selected').length).toBe(7) expect(wrapper.emitted('row-selected')[6][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -480,20 +528,23 @@ describe('table > row select', () => { selectMode: 'single' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() // Click first row await wrapper .findAll('tbody > tr') .at(0) + .trigger('click') expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') expect($rows.at(1).attributes('aria-selected')).toBe('false') @@ -505,10 +556,12 @@ describe('table > row select', () => { .findAll('thead > tr > th') .at(0) .trigger('click') + expect(wrapper.emitted('sort-changed')).toBeDefined() expect(wrapper.emitted('sort-changed').length).toBe(1) expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.wrappers.every(w => w.element.matches('[aria-selected="false"]'))).toBe(true) @@ -525,11 +578,13 @@ describe('table > row select', () => { selectMode: 'single' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.element.matches('[tabindex="0"]'))).toBe(true) expect($rows.wrappers.every(w => w.element.matches('[aria-selected="false"]'))).toBe(true) @@ -538,9 +593,11 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -550,8 +607,10 @@ describe('table > row select', () => { // Change filter await wrapper.setProps({ filter: '2' }) + expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.wrappers.every(w => w.attributes('aria-selected') === 'false')).toBe(true) @@ -570,12 +629,13 @@ describe('table > row select', () => { currentPage: 1 } }) - let $rows expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(3) expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.wrappers.every(w => w.attributes('aria-selected') === 'false')).toBe(true) @@ -585,9 +645,11 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(3) expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) @@ -598,8 +660,10 @@ describe('table > row select', () => { // Change page await wrapper.setProps({ currentPage: 2 }) + expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.length).toBe(1) expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) @@ -617,20 +681,23 @@ describe('table > row select', () => { selectMode: 'single' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() // Click first row await wrapper .findAll('tbody > tr') .at(0) + .trigger('click') expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') expect($rows.at(1).attributes('aria-selected')).toBe('false') @@ -639,9 +706,11 @@ describe('table > row select', () => { // Change mode await wrapper.setProps({ selectMode: 'range' }) + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.wrappers.every(w => w.attributes('aria-selected') === 'false')).toBe(true) @@ -658,9 +727,10 @@ describe('table > row select', () => { selectMode: 'single' } }) - let $rows + expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() // Click first row @@ -668,10 +738,12 @@ describe('table > row select', () => { .findAll('tbody > tr') .at(0) .trigger('click') + expect(wrapper.emitted('row-selected')).toBeDefined() expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[0]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') expect($rows.at(1).attributes('aria-selected')).toBe('false') @@ -682,8 +754,10 @@ describe('table > row select', () => { // Disabled selectable await wrapper.setProps({ selectable: false }) + // Does not emit a row-selected event expect(wrapper.emitted('row-selected').length).toBe(1) + $rows = wrapper.findAll('tbody > tr') // Should remove tabindex and aria-selected attributes expect($rows.wrappers.every(w => w.attributes('tabindex') === undefined)).toBe(true) @@ -708,7 +782,7 @@ describe('table > row select', () => { await waitNT(wrapper.vm) expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectAllRows() method + // Execute `selectAllRows()` method wrapper.vm.selectAllRows() await waitNT(wrapper.vm) @@ -740,7 +814,7 @@ describe('table > row select', () => { await waitNT(wrapper.vm) expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectAllRows() method + // Execute `selectAllRows()` method wrapper.vm.selectAllRows() await waitNT(wrapper.vm) @@ -770,9 +844,10 @@ describe('table > row select', () => { expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectAllRows() method + // Execute `selectAllRows()` method wrapper.vm.selectAllRows() await waitNT(wrapper.vm) @@ -780,6 +855,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0].length).toBe(4) expect(wrapper.emitted('row-selected')[0][0]).toEqual(testItems) + const $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('true') @@ -800,12 +876,12 @@ describe('table > row select', () => { } }) - let $rows expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectRow() method (second row) + // Execute `selectRow()` method (second row) wrapper.vm.selectRow(1) await waitNT(wrapper.vm) @@ -813,14 +889,15 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0].length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[1]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') expect($rows.at(1).attributes('aria-selected')).toBe('true') expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('false') - // Execute selectRow() method (fourth row) + // Execute `selectRow()` method (fourth row) wrapper.vm.selectRow(3) await waitNT(wrapper.vm) @@ -828,6 +905,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(1) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -835,7 +913,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on non-selected row (should not change anything) + // Execute `unselectRow()` method on non-selected row (should not change anything) wrapper.vm.unselectRow(0) await waitNT(wrapper.vm) @@ -843,6 +921,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(1) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -850,7 +929,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on selected row + // Execute `unselectRow()` method on selected row wrapper.vm.unselectRow(3) await waitNT(wrapper.vm) @@ -858,6 +937,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0].length).toBe(0) expect(wrapper.emitted('row-selected')[2][0]).toEqual([]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -878,12 +958,12 @@ describe('table > row select', () => { } }) - let $rows expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectRow() method (second row) + // Execute `selectRow()` method (second row) wrapper.vm.selectRow(1) await waitNT(wrapper.vm) @@ -891,14 +971,15 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0].length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[1]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') expect($rows.at(1).attributes('aria-selected')).toBe('true') expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('false') - // Execute selectRow() method (fourth row) + // Execute `selectRow()` method (fourth row) wrapper.vm.selectRow(3) await waitNT(wrapper.vm) @@ -906,6 +987,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[1], testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -913,7 +995,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on non-selected row (should not change anything) + // Execute `unselectRow()` method on non-selected row (should not change anything) wrapper.vm.unselectRow(0) await waitNT(wrapper.vm) @@ -921,6 +1003,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[1], testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -928,7 +1011,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on selected row + // Execute `unselectRow()` method on selected row wrapper.vm.unselectRow(3) await waitNT(wrapper.vm) @@ -936,6 +1019,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0].length).toBe(1) expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[1]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -956,12 +1040,12 @@ describe('table > row select', () => { } }) - let $rows expect(wrapper).toBeDefined() await waitNT(wrapper.vm) + expect(wrapper.emitted('row-selected')).toBeUndefined() - // Execute selectRow() method (second row) + // Execute `selectRow()` method (second row) wrapper.vm.selectRow(1) await waitNT(wrapper.vm) @@ -969,14 +1053,15 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(1) expect(wrapper.emitted('row-selected')[0][0].length).toBe(1) expect(wrapper.emitted('row-selected')[0][0]).toEqual([testItems[1]]) - $rows = wrapper.findAll('tbody > tr') + + let $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') expect($rows.at(1).attributes('aria-selected')).toBe('true') expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('false') - // Execute selectRow() method (fourth row) + // Execute `selectRow()` method (fourth row) wrapper.vm.selectRow(3) await waitNT(wrapper.vm) @@ -984,6 +1069,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[1], testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -991,7 +1077,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on non-selected row (should not change anything) + // Execute `unselectRow()` method on non-selected row (should not change anything) wrapper.vm.unselectRow(0) await waitNT(wrapper.vm) @@ -999,6 +1085,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(2) expect(wrapper.emitted('row-selected')[1][0].length).toBe(2) expect(wrapper.emitted('row-selected')[1][0]).toEqual([testItems[1], testItems[3]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false') @@ -1006,7 +1093,7 @@ describe('table > row select', () => { expect($rows.at(2).attributes('aria-selected')).toBe('false') expect($rows.at(3).attributes('aria-selected')).toBe('true') - // Execute unselectRow() method on selected row + // Execute `unselectRow()` method on selected row wrapper.vm.unselectRow(3) await waitNT(wrapper.vm) @@ -1014,6 +1101,7 @@ describe('table > row select', () => { expect(wrapper.emitted('row-selected').length).toBe(3) expect(wrapper.emitted('row-selected')[2][0].length).toBe(1) expect(wrapper.emitted('row-selected')[2][0]).toEqual([testItems[1]]) + $rows = wrapper.findAll('tbody > tr') expect($rows.wrappers.every(w => w.attributes('tabindex') === '0')).toBe(true) expect($rows.at(0).attributes('aria-selected')).toBe('false')