feat(Table): test id for table row and loading state (#2389)

* feat: support test id for table row * feat: add test id for table loading state * Create clever-pigs-grow.md * refactor: rename to table spinner Co-authored-by: Anurag Hazra <[email protected]> * chore: update test snapshot --------- Co-authored-by: Anurag Hazra <[email protected]>
razorpay · Oct 25, 2024 · eef992b · eef992b
1 parent 1d0dae7
commit eef992b
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/clever-pigs-grow.md b/.changeset/clever-pigs-grow.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(blade): support test id for table row
diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
@@ -461,7 +461,7 @@ const _Table = <Item,>({
           {...getStyledProps(styledProps)}
           {...metaAttribute({ name: MetaConstants.Table })}
         >
-          <Spinner accessibilityLabel="Loading Table" size="large" />
+          <Spinner accessibilityLabel="Loading Table" size="large" testID="table-spinner" />
         </BaseBox>
       ) : (
         <BaseBox

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -310,6 +310,7 @@ const _TableRow = <Item,>({
   isDisabled,
   onHover,
   onClick,
+  testID,
 }: TableRowProps<Item>): React.ReactElement => {
   const {
     selectionType,
@@ -338,7 +339,7 @@ const _TableRow = <Item,>({
       onMouseEnter={() => onHover?.({ item })}
       onClick={() => onClick?.({ item })}
       {...makeAccessible({ selected: isSelected })}
-      {...metaAttribute({ name: MetaConstants.TableRow })}
+      {...metaAttribute({ name: MetaConstants.TableRow, testID })}
     >
       {isMultiSelect && (
         <TableCheckboxCell

diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -4571,6 +4571,7 @@ exports[`<Table /> should render table with isLoading 1`] = `
     <div
       class=""
       data-blade-component="spinner"
+      data-testid="table-spinner"
     >
       <div
         aria-label="Loading Table"

diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
@@ -4,6 +4,7 @@ import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { DropdownProps } from '~components/Dropdown';
 import type { BaseInputProps } from '~components/Input/BaseInput';
 import type { DotNotationToken } from '~utils/lodashButBetter/get';
+import type { TestID } from '~utils/types';
 
 type TableNode<Item> = Item & {
   id: Identifier;
@@ -241,7 +242,7 @@ type TableRowProps<Item> = {
    * Callback triggered when the row is clicked. It is called with the current row item prop.
    */
   onClick?: ({ item }: { item: TableNode<Item> }) => void;
-};
+} & TestID;
 
 type TableCellProps = {
   /**