From 0a28aafecedfe32233b379c11d2350ee191edba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 28 Jan 2021 02:08:22 +0100 Subject: [PATCH 1/3] fix(b-table): add missing `role="grid"` when selecatble --- .../table/helpers/mixin-selectable.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) 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: { From 8820bfb0661ee87e69e7940eabc035d002d71386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 28 Jan 2021 02:18:19 +0100 Subject: [PATCH 2/3] Update table-selectable.spec.js --- src/components/table/table-selectable.spec.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/table/table-selectable.spec.js b/src/components/table/table-selectable.spec.js index e4adeb7f60e..1ec6bfc0cfa 100644 --- a/src/components/table/table-selectable.spec.js +++ b/src/components/table/table-selectable.spec.js @@ -29,6 +29,7 @@ describe('table > row select', () => { }) 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') @@ -58,6 +59,7 @@ describe('table > row select', () => { }) 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') @@ -88,6 +90,7 @@ 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') @@ -113,6 +116,7 @@ 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') @@ -200,6 +204,7 @@ describe('table > row select', () => { 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') @@ -300,6 +305,7 @@ describe('table > row select', () => { 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') From 3abae2c2072c86f707950514aab651a5dcaf3eb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 28 Jan 2021 02:30:35 +0100 Subject: [PATCH 3/3] Update table-selectable.spec.js --- src/components/table/table-selectable.spec.js | 156 +++++++++++++----- 1 file changed, 119 insertions(+), 37 deletions(-) diff --git a/src/components/table/table-selectable.spec.js b/src/components/table/table-selectable.spec.js index 1ec6bfc0cfa..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,10 @@ 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') @@ -37,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 @@ -57,8 +62,10 @@ 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') @@ -67,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 @@ -90,6 +98,7 @@ 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') @@ -112,10 +121,10 @@ 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') @@ -125,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) @@ -136,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') @@ -156,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') @@ -175,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') @@ -201,9 +217,10 @@ 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') @@ -221,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') @@ -238,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') @@ -257,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') @@ -276,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') @@ -302,9 +326,10 @@ 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') @@ -313,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) @@ -322,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') @@ -342,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') @@ -365,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') @@ -384,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') @@ -403,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') @@ -422,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') @@ -441,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') @@ -460,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') @@ -486,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') @@ -511,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) @@ -531,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) @@ -544,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') @@ -556,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) @@ -576,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) @@ -591,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) @@ -604,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) @@ -623,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') @@ -645,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) @@ -664,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 @@ -674,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') @@ -688,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) @@ -714,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) @@ -746,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) @@ -776,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) @@ -786,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') @@ -806,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) @@ -819,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) @@ -834,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') @@ -841,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) @@ -849,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') @@ -856,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) @@ -864,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') @@ -884,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) @@ -897,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) @@ -912,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') @@ -919,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) @@ -927,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') @@ -934,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) @@ -942,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') @@ -962,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) @@ -975,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) @@ -990,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') @@ -997,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) @@ -1005,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') @@ -1012,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) @@ -1020,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')