diff --git a/src/components/Table/DataTable/DataTable.test.tsx b/src/components/Table/DataTable/DataTable.test.tsx index 4d80fc39a..5fe36675b 100644 --- a/src/components/Table/DataTable/DataTable.test.tsx +++ b/src/components/Table/DataTable/DataTable.test.tsx @@ -129,3 +129,37 @@ describe('getHeaderProps', () => { expect(() => getHeaderProps('foo')).toThrowError() }) }) + +describe('data-testid props', () => { + const DataTableTestIds = (props: Partial) => ( + row.id }, + { name: 'name', header: 'Name', render: (row: Row) => row.name }, + ]} + {...props} + /> + ) + + it('should set data-testid on the table', () => { + const { container } = render() + expect(container.querySelector('table').getAttribute('data-testid')).toEqual('people-table') + }) + + it('should set data-testid with the row index as suffix on each row', () => { + const { container } = render() + const trs = container.querySelectorAll('tbody tr') + expect(trs[0].getAttribute('data-testid')).toEqual('person-0') + expect(trs[1].getAttribute('data-testid')).toEqual('person-1') + }) + + it('should set the column data-testid on its body cells, leaving columns without it untouched', () => { + const { container } = render() + const firstRowCells = container.querySelectorAll('tbody tr:first-child td') + expect(firstRowCells[0].getAttribute('data-testid')).toEqual('person-id') + expect(firstRowCells[1].getAttribute('data-testid')).toBeNull() + }) +}) diff --git a/src/components/Table/DataTable/DataTable.tsx b/src/components/Table/DataTable/DataTable.tsx index 3ea107ee6..fd75570b2 100644 --- a/src/components/Table/DataTable/DataTable.tsx +++ b/src/components/Table/DataTable/DataTable.tsx @@ -11,6 +11,7 @@ export interface TableColumnConfig { header?: React.ReactNode sortable?: boolean style?: ExternalStyles + dataTestId?: string align?: 'left' | 'center' | 'right' render(row: T): React.ReactNode } @@ -23,6 +24,8 @@ export interface DataTableProps extends TableProps { onSortChange?(sort: string[]): void render?(renderProps: DataTableRenderProps): React.ReactNode onRowClick?(row: T): any + 'data-testid'?: string + rowDataTestId?: string } export interface DataTableRenderProps extends DataTableProps { @@ -98,7 +101,19 @@ DataTable.defaultProps = { } as Partial> export function DataTableDefault(props: DataTableRenderProps) { - const { columns, rows, loading, onSortChange, sort, getHeaderProps, getColumn, render, onRowClick, ...rest } = props + const { + columns, + rows, + loading, + onSortChange, + sort, + getHeaderProps, + getColumn, + render, + onRowClick, + rowDataTestId, + ...rest + } = props return ( @@ -111,7 +126,13 @@ export function DataTableDefault(props: DataTableRenderProps) { ))} - +
) } diff --git a/src/components/Table/DataTable/TableFilledBody.tsx b/src/components/Table/DataTable/TableFilledBody.tsx index 9a9b777a6..29903693e 100644 --- a/src/components/Table/DataTable/TableFilledBody.tsx +++ b/src/components/Table/DataTable/TableFilledBody.tsx @@ -7,13 +7,14 @@ import { DataTableProps, defaultColumnStyles } from './DataTable' import { TableLoadingRow } from './TableLoadingRow' import { TablePlaceholderRow } from './TablePlaceholderRow' -export interface TableFilledBodyProps extends Pick {} +export interface TableFilledBodyProps + extends Pick {} export function TableFilledBody(props: TableFilledBodyProps) { - const { columns, rows, loading, onRowClick } = props + const { columns, rows, loading, onRowClick, rowDataTestId } = props const { css } = useCss() - const handleClick = row => e => onRowClick(row) + const handleClick = (row) => (e) => onRowClick(row) const isEmpty = () => !rows || rows.length === 0 @@ -24,9 +25,13 @@ export function TableFilledBody(props: TableFilledBodyProps) { {!loading && isEmpty() && } {rows.map((row, idx) => ( - + {columns.map((col, colIdx) => ( - + {col.render(row)} ))}