feat(admin): E2E content/system mock-сьюты, row testids, IFT smoke. Refs EventHub/EventHubFrontAdmin#33 #37 #38 #39

src/components/data-table/DataTable.tsx

@@ -126,15 +126,19 @@ export function DataTable<TData, TParams extends ServerTableParams>({
                                 </TableRow>
                             ))
                         ) : table.getRowModel().rows.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow key={row.id}>
+                            table.getRowModel().rows.map((row) => {
+                                const original = row.original as { id?: string; word?: string };
+                                const rowKey = original.id ?? original.word;
+                                return (
+                                <TableRow key={row.id} data-testid={rowKey ? `row-${rowKey}` : undefined}>
                                     {row.getVisibleCells().map((cell) => (
                                         <TableCell key={cell.id}>
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
                                 </TableRow>
-                            ))
+                                );
+                            })
                         ) : (
                             <TableRow>
                                 <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">

src/components/explore/DenseRowList.tsx

@@ -60,7 +60,7 @@ export function DenseRowList<TParams extends ServerTableParams>({
                 ) : (
                     <ul className="divide-y">
                         {items.map((item) => (
-                            <li key={item.id}>
+                            <li key={item.id} data-testid={`row-${item.id}`}>
                                 <div
                                     className={cn(
                                         'group flex items-start gap-3 px-4 py-3 transition-colors',
@@ -69,6 +69,7 @@ export function DenseRowList<TParams extends ServerTableParams>({
                                 >
                                     <button
                                         type="button"
+                                        data-testid={`row-activate-${item.id}`}
                                         className={cn(
                                             'min-w-0 flex-1 text-left',
                                             !item.onActivate && 'cursor-default'

src/components/explore/ExploreSearch.tsx

@@ -11,6 +11,7 @@ interface ExploreSearchProps {
     placeholder?: string;
     className?: string;
     children?: React.ReactNode;
+    'data-testid'?: string;
 }
 
 export function ExploreSearch({
@@ -20,10 +21,12 @@ export function ExploreSearch({
     placeholder,
     className,
     children,
+    'data-testid': dataTestId,
 }: ExploreSearchProps) {
     const { t } = useTranslation();
     return (
         <form
+            data-testid={dataTestId}
             className={cn('flex flex-wrap items-center gap-2', className)}
             onSubmit={(e) => {
                 e.preventDefault();
@@ -33,6 +36,7 @@ export function ExploreSearch({
             <div className="relative min-w-[200px] max-w-md flex-1">
                 <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                 <Input
+                    data-testid={dataTestId ? `${dataTestId}-input` : undefined}
                     className="pl-8"
                     placeholder={placeholder ?? t('common.searchPlaceholder')}
                     value={value}