Table - testId update

Author: PatrikMatiasko

src/components/Atomic/SimpleStripTable/SimpleStripTable.tsx

@@ -78,7 +78,7 @@ const SimpleStripTable: FC<Props> = (props) => {
                                     lastRowBorder === false && key === rows.length - 1 && styles.noLastRowBorder,
                                     noSidePadding && styles.noLeftPadding,
                                 ]}
-                                data-test-id={getDataTestId(r, 'attribute', key)}
+                                data-test-id={getDataTestId(r, '-attribute', key)}
                             >
                                 {r.attribute}
                                 {r.required && <span css={styles.required}> *</span>}
@@ -94,7 +94,7 @@ const SimpleStripTable: FC<Props> = (props) => {
                                     lastRowBorder === false && key === rows.length - 1 && styles.noLastRowBorder,
                                     noSidePadding && styles.noRightPadding,
                                 ]}
-                                data-test-id={getDataTestId(r, 'value', key)}
+                                data-test-id={getDataTestId(r, '-value', key)}
                             >
                                 {r.value}
                                 {r.copyValue && (

src/components/Atomic/TableNew/Table.tsx

@@ -1,21 +1,22 @@
 // @ts-nocheck
 import React, { ChangeEvent, FC, useEffect, useMemo, useState, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { usePagination, useRowSelect, useSortBy, useTable, useGlobalFilter } from 'react-table'
+import get from 'lodash/get'
+import isEqual from 'lodash/isEqual'
+import isEmpty from 'lodash/isEmpty'
+import classNames from 'classnames'
+
 import { Props, defaultProps } from './Table.types'
 import * as styles from './Table.styles'
-import { usePagination, useRowSelect, useSortBy, useTable, useGlobalFilter } from 'react-table'
 import { compareIgnoreCase } from './Utils'
-import classNames from 'classnames'
 import { IconTableArrowDown, IconTableArrowUp, convertSize } from '../Icon'
 import Checkbox from '../Checkbox'
-import { createPortal } from 'react-dom'
 import Pagination from '../../Layout/Footer/Pagination/Pagination'
-import isEqual from 'lodash/isEqual'
-import isEmpty from 'lodash/isEmpty'
 import TableGlobalFilter from './TableGlobalFilter'
 import { GLOBAL_FILTER_HEIGHT, HEADER_HEIGHT } from './constants'
 import ConditionalWrapper from '../ConditionalWrapper'
 import IconLoader from '../Loader/IconLoader'
-import get from 'lodash/get'
 
 const Table: FC<Props> = (props) => {
     const {

src/components/Atomic/TableNew/TableGlobalFilter/TableGlobalFilter.tsx

@@ -14,7 +14,7 @@ const TableGlobalFilter: FC<Props> = (props) => {
     }, 200)
 
     return (
-        <div css={styles.globalFilter}>
+        <div css={styles.globalFilter} data-test-id={dataTestId}>
             <div css={styles.left}>
                 <IconSearch css={styles.icon} />
                 <input
@@ -30,7 +30,7 @@ const TableGlobalFilter: FC<Props> = (props) => {
             </div>
             {showFilterButton && (
                 <div>
-                    <Button onClick={() => onChange(value)} size='small' variant='filter'>
+                    <Button data-test-id={dataTestId?.concat('-button')} onClick={() => onChange(value)} size='small' variant='filter'>
                         {i18n.search}
                     </Button>
                 </div>