Add data-testid support to DataTable

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<DataTableProps>) => (
+    <DataTable
+      rows={rows}
+      data-testid='people-table'
+      rowDataTestId='person'
+      columns={[
+        { name: 'id', header: 'ID', dataTestId: 'person-id', render: (row: Row) => row.id },
+        { name: 'name', header: 'Name', render: (row: Row) => row.name },
+      ]}
+      {...props}
+    />
+  )
+
+  it('should set data-testid on the table', () => {
+    const { container } = render(<DataTableTestIds />)
+    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(<DataTableTestIds />)
+    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(<DataTableTestIds />)
+    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()
+  })
+})

src/components/Table/DataTable/DataTable.tsx

@@ -11,6 +11,7 @@ export interface TableColumnConfig<T = any> {
   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<T = any> 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<DataTableProps<any>>
 
 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 (
     <Table {...rest}>
@@ -111,7 +126,13 @@ export function DataTableDefault(props: DataTableRenderProps) {
           ))}
         </TableRow>
       </TableHead>
-      <TableFilledBody rows={rows} columns={columns} loading={loading} onRowClick={onRowClick} />
+      <TableFilledBody
+        rows={rows}
+        columns={columns}
+        loading={loading}
+        onRowClick={onRowClick}
+        rowDataTestId={rowDataTestId}
+      />
     </Table>
   )
 }

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<DataTableProps, 'columns' | 'rows' | 'loading' | 'onRowClick'> {}
+export interface TableFilledBodyProps
+  extends Pick<DataTableProps, 'columns' | 'rows' | 'loading' | 'onRowClick' | 'rowDataTestId'> {}
 
 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() && <TablePlaceholderRow colSpan={columns.length} />}
 
       {rows.map((row, idx) => (
-        <TableRow key={idx} onClick={onRowClick && handleClick(row)}>
+        <TableRow
+          key={idx}
+          onClick={onRowClick && handleClick(row)}
+          data-testid={rowDataTestId && `${rowDataTestId}-${idx}`}
+        >
           {columns.map((col, colIdx) => (
-            <TableCell key={colIdx} style={css(defaultColumnStyles(col), col.style)}>
+            <TableCell key={colIdx} style={css(defaultColumnStyles(col), col.style)} data-testid={col.dataTestId}>
               {col.render(row)}
             </TableCell>
           ))}