From d2de2140659690c2edf69462b9f8a832f5266d20 Mon Sep 17 00:00:00 2001 From: Anton Lazarev Date: Fri, 22 Mar 2024 10:17:45 +0000 Subject: [PATCH] [CHUX-241] Make table rows clickable using keyboard (#1900) --- package-lock.json | 4 +- package.json | 2 +- .../__snapshots__/ec-smart-table.spec.ts.snap | 27 +++++--- .../__snapshots__/ec-table.spec.ts.snap | 69 ++++++++++++------- src/components/ec-table/ec-table.spec.ts | 28 ++++++++ src/components/ec-table/ec-table.vue | 12 +++- 6 files changed, 105 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index e49347c63..e7d4a5f51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ebury/chameleon-components", - "version": "2.8.0", + "version": "2.8.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ebury/chameleon-components", - "version": "2.8.0", + "version": "2.8.1", "license": "MIT", "dependencies": { "@vueuse/core": "10.9.0", diff --git a/package.json b/package.json index a70dcdc00..fbf399ff3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ebury/chameleon-components", - "version": "2.8.0", + "version": "2.8.1", "main": "src/main.ts", "sideEffects": false, "author": "Ebury Team (http://labs.ebury.rocks/)", diff --git a/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.ts.snap b/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.ts.snap index b55ded61a..d5323dfba 100644 --- a/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.ts.snap +++ b/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.ts.snap @@ -32,8 +32,9 @@ exports[`EcSmartTable > #slots > should only render custom row if "isCustomRowSh #slots > should only render custom row if "isCustomRowSh exports[`EcSmartTable > #slots > should pass ec-table slots 1`] = ` #slots > should render custom row if window width is low #slots > should render resolved data properly with the h should not pass attrs to the ec-table 1`] = ` should pass props to the ec-table 1`] = ` should pass props to the ec-table 1`] = ` exports[`EcSmartTable > should pass row-click event to the ec-table 1`] = ` should render its own title instead of using the one ins should render resolved data properly 1`] = ` should have a column align to center if its type is icon 1`] should have a column align to center if its type is icon 1`] should have a column align to the right if its type is curren should have a column align to the right if its type is curren should only render custom row if "isCustomRowShown" is true 1 should only render custom row if "isCustomRowShown" is true 1 should render as expected if provided with data and columns 1 should render as expected if provided with data and columns 1 should render as expected if provided with data and columns, should render as expected if provided with data and columns, should render as expected if provided with data but no column should render as expected if provided with data but no column should render as expected if provided with data but no column should render as expected if provided with data but no column should render as expected if provided with empty row and no c @@ -779,8 +794,9 @@ exports[`EcTable > should render as expected if provided with rows and columns, should render as expected if provided with rows and columns, should render custom row if window width is lower than 768px should render custom row if window width is lower than 768px should render slots as expected 1`] = ` should render slots as expected 1`] = ` should render the style with the max-width on each cell of th should render the style with the max-width on each cell of th { expect(onRowClick.mock.calls[1]).toEqual([{ data: ['widgets', 'doodads'], rowIndex: 1 }]); }); + it('should emit the row-click event when you press enter on some row', async () => { + const onRowClick = vi.fn(); + const wrapper = mountEcTable({}, { + attrs: { + onRowClick, + }, + }); + + await wrapper.findByDataTest('ec-table__row--0').trigger('keydown.enter'); + expect(onRowClick.mock.calls[0]).toEqual([{ data: ['foo', 'bar'], rowIndex: 0 }]); + await wrapper.findByDataTest('ec-table__row--1').trigger('keydown.enter'); + expect(onRowClick.mock.calls[1]).toEqual([{ data: ['widgets', 'doodads'], rowIndex: 1 }]); + }); + + it('should emit the row-click event when you press space on some row', async () => { + const onRowClick = vi.fn(); + const wrapper = mountEcTable({}, { + attrs: { + onRowClick, + }, + }); + + await wrapper.findByDataTest('ec-table__row--0').trigger('keydown.space'); + expect(onRowClick.mock.calls[0]).toEqual([{ data: ['foo', 'bar'], rowIndex: 0 }]); + await wrapper.findByDataTest('ec-table__row--1').trigger('keydown.space'); + expect(onRowClick.mock.calls[1]).toEqual([{ data: ['widgets', 'doodads'], rowIndex: 1 }]); + }); + it('should render the style with the min-width on each cell of the column that have the prop given', () => { const columns = [ { diff --git a/src/components/ec-table/ec-table.vue b/src/components/ec-table/ec-table.vue index 65e5cc0a6..4d7e8cf13 100644 --- a/src/components/ec-table/ec-table.vue +++ b/src/components/ec-table/ec-table.vue @@ -25,9 +25,12 @@