Support decorating Table actions with testIds.

vectara · Dec 11, 2023 · b1cdb70 · b1cdb70
1 parent 848655a
commit b1cdb70
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/docs/pages/table/Table.tsx b/src/docs/pages/table/Table.tsx
@@ -156,17 +156,20 @@ export const Table = () => {
       label: "Edit",
       onClick: (person: Person) => {
         console.log("Edit", person);
-      }
+      },
+      testId: "editAction"
     },
     {
       label: "Delete",
       onClick: (person: Person) => {
         console.log("Delete", person);
-      }
+      },
+      testId: "deleteAction"
     },
     {
       label: "Search",
-      href: (person: Person) => `https://www.google.com/search?q=${person.name}`
+      href: (person: Person) => `https://www.google.com/search?q=${person.name}`,
+      testId: "searchAction"
     }
   ];
 
@@ -297,6 +300,7 @@ export const Table = () => {
         rows={rows}
         content={content}
         actions={actions}
+        actionsTestIdProvider={(person: Person) => `actions-${person.id}`}
         pagination={pagination}
         selection={selection}
         onSort={(column, direction) => console.log("Sort", column, direction)}

diff --git a/src/lib/components/table/Table.tsx b/src/lib/components/table/Table.tsx
@@ -36,6 +36,7 @@ type Props<T> = {
   columns: Column<T>[];
   rows: T[];
   actions?: TableRowActionsProps<T>["actions"];
+  actionsTestIdProvider?: (row: T) => string;
   pagination?: Pagination | Pager;
   selection?: Selection<T>;
   search?: Search;
@@ -75,6 +76,7 @@ export const VuiTable = <T extends Row>({
   columns,
   rows,
   actions,
+  actionsTestIdProvider,
   pagination,
   selection,
   search,
@@ -195,6 +197,7 @@ export const VuiTable = <T extends Row>({
                     setRowBeingActedUpon(undefined);
                   }
                 }}
+                testId={actionsTestIdProvider?.(row) ?? undefined}
               />
             </td>
           )}

diff --git a/src/lib/components/table/TableRowActions.tsx b/src/lib/components/table/TableRowActions.tsx
@@ -11,22 +11,24 @@ export type Action<T> = {
   isDisabled?: (row: T) => boolean;
   onClick?: (row: T) => void;
   href?: (row: T) => string | undefined;
+  testId?: string;
 };
 
 export type Props<T> = {
   row: any;
   actions: Action<T>[];
   onToggle: (isSelected: boolean) => void;
+  testId?: string;
 };
 
-export const VuiTableRowActions = <T extends Row>({ row, actions, onToggle }: Props<T>) => {
+export const VuiTableRowActions = <T extends Row>({ row, actions, onToggle, testId }: Props<T>) => {
   const [isOpen, setIsOpen] = useState(false);
 
   // Filter out disabled actions.
   const actionOptions = actions.reduce((acc, action) => {
-    const { label, isDisabled, onClick, href } = action;
+    const { label, isDisabled, onClick, href, testId } = action;
     if (!isDisabled?.(row)) {
-      acc.push({ label, onClick, href: href?.(row), value: row });
+      acc.push({ label, onClick, href: href?.(row), value: row, testId });
     }
     return acc;
   }, [] as any);
@@ -51,6 +53,7 @@ export const VuiTableRowActions = <T extends Row>({ row, actions, onToggle }: Pr
               <BiCaretDown />
             </VuiIcon>
           }
+          data-testid={testId}
         />
       }
     >