feat: CRUD2 head 操作支持testid

packages/amis-ui/src/components/icons.tsx

@@ -110,6 +110,7 @@ import ScaleOrigin from '../icons/scale-origin.svg';
 import If from '../icons/if.svg';
 
 import isObject from 'lodash/isObject';
+import type {TestIdBuilder} from 'amis-core';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -284,10 +285,12 @@ export function Icon({
   onTouchMove,
   onTouchEnd,
   onTouchCancel,
-  style
+  style,
+  testIdBuilder
 }: {
   icon: string;
   iconContent?: string;
+  testIdBuilder?: TestIdBuilder;
 } & React.ComponentProps<any>) {
   let cx = iconCx || cxClass;
 
@@ -356,6 +359,7 @@ export function Icon({
         className={cx(iconContent, className, classNameProp)}
         ref={refFn}
         style={style}
+        {...testIdBuilder?.getTestId()}
       ></div>
     );
   }
@@ -370,6 +374,7 @@ export function Icon({
         // @ts-ignore
         icon={icon}
         style={style}
+        {...testIdBuilder?.getTestId()}
       />
     );
   }

packages/amis-ui/src/components/table/Head.tsx

@@ -23,6 +23,7 @@ import Cell from './Cell';
 import HeadCellSort from './HeadCellSort';
 import HeadCellFilter from './HeadCellFilter';
 import HeadCellSelect from './HeadCellSelect';
+import type {TestIdBuilder} from 'amis-core';
 
 export interface Props extends ThemeProps {
   draggable: boolean;
@@ -48,6 +49,7 @@ export interface Props extends ThemeProps {
   onSelectAll: Function;
   onFilter?: Function;
   onResizeMouseDown: Function;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export default class Head extends React.PureComponent<Props> {
@@ -121,7 +123,8 @@ export default class Head extends React.PureComponent<Props> {
       onSort,
       onSelectAll,
       onFilter,
-      onResizeMouseDown
+      onResizeMouseDown,
+      testIdBuilder
     } = this.props;
 
     const {thColumns, tdColumns} = getBuildColumns(columns);
@@ -177,6 +180,7 @@ export default class Head extends React.PureComponent<Props> {
                   col="drag"
                   classnames={cx}
                   classPrefix={classPrefix}
+                  testIdBuilder={testIdBuilder?.getChild(`drag-${index}`)}
                 ></Cell>
               ) : null}
               {!draggable && selectable && index === 0 ? (
@@ -189,6 +193,7 @@ export default class Head extends React.PureComponent<Props> {
                   col="select"
                   classnames={cx}
                   classPrefix={classPrefix}
+                  testIdBuilder={testIdBuilder?.getChild(`select-${index}`)}
                 >
                   {rowSelectionType !== 'radio'
                     ? [
@@ -234,6 +239,9 @@ export default class Head extends React.PureComponent<Props> {
                       onSort={(payload: SortProps) => {
                         onSort && onSort(payload, item);
                       }}
+                      testIdBuilder={testIdBuilder?.getChild(
+                        `sort-${colIndex}`
+                      )}
                     ></HeadCellSort>
                   );
                 }
@@ -247,6 +255,9 @@ export default class Head extends React.PureComponent<Props> {
                       column={item}
                       popOverContainer={popOverContainer}
                       onFilter={onFilter}
+                      testIdBuilder={testIdBuilder?.getChild(
+                        `filter-${colIndex}`
+                      )}
                     ></HeadCellFilter>
                   );
                 }
@@ -301,6 +312,7 @@ export default class Head extends React.PureComponent<Props> {
                     })}
                     depth={item.depth}
                     col={String(colIndex)}
+                    testIdBuilder={testIdBuilder?.getChild(`cell-${colIndex}`)}
                   >
                     {typeof item.title === 'function'
                       ? item.title(children)

packages/amis-ui/src/components/table/HeadCellDropDown.tsx

@@ -16,6 +16,8 @@ import {
   PopOver
 } from 'amis-core';
 
+import type {TestIdBuilder} from 'amis-core';
+
 export interface FilterPayload {
   closeDropdown?: boolean;
 }
@@ -38,6 +40,7 @@ export interface Props extends ThemeProps, LocaleProps {
   setSelectedKeys?: (keys: Array<string | number> | string) => void;
   classnames: ClassNamesFn;
   classPrefix: string;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface State {

packages/amis-ui/src/components/table/HeadCellFilter.tsx

@@ -21,6 +21,7 @@ import HeadCellDropDown, {
 import CheckBox from '../Checkbox';
 import Button from '../Button';
 import {Icon} from '../icons';
+import type {TestIdBuilder} from 'amis-core';
 
 export interface Props extends ThemeProps, LocaleProps {
   column: any;
@@ -30,6 +31,7 @@ export interface Props extends ThemeProps, LocaleProps {
   popOverContainer?: () => HTMLElement;
   classnames: ClassNamesFn;
   classPrefix: string;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface OptionProps {
@@ -92,7 +94,8 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
       column,
       popOverContainer,
       classnames: cx,
-      classPrefix: ns
+      classPrefix: ns,
+      testIdBuilder
     } = this.props;
 
     const filterProps = {
@@ -110,6 +113,7 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
                     onClick={() =>
                       this.handleClick(confirm, setSelectedKeys, [option.value])
                     }
+                    {...testIdBuilder?.getChild(`${index}`).getTestId()}
                   >
                     {option.text}
                   </li>
@@ -126,6 +130,7 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
                         )
                       }
                       checked={option.selected}
+                      testIdBuilder={testIdBuilder?.getChild(`ckbx-${index}`)}
                     >
                       {option.text}
                     </CheckBox>
@@ -140,6 +145,7 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
                   size={'xs'}
                   level={'primary'}
                   onClick={() => this.handleConfirmClick(confirm)}
+                  testIdBuilder={testIdBuilder?.getChild(`btn-confirm`)}
                 >
                   确定
                 </Button>
@@ -148,6 +154,7 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
                   onClick={() =>
                     this.handleCancelClick(confirm, setSelectedKeys)
                   }
+                  testIdBuilder={testIdBuilder?.getChild(`btn-cancel`)}
                 >
                   取消
                 </Button>
@@ -169,6 +176,7 @@ export class HeadCellFilter extends React.PureComponent<Props, State> {
             icon="column-filter"
             className="icon"
             iconContent="table-filter-icon"
+            testIdBuilder={testIdBuilder?.getChild(`icon`)}
           />
         }
         active={

packages/amis-ui/src/components/table/HeadCellSort.tsx

@@ -14,12 +14,14 @@ import {
 } from 'amis-core';
 import {Icon} from '../icons';
 import {ColumnProps} from './index';
+import type {TestIdBuilder} from 'amis-core';
 
 export interface Props extends ThemeProps, LocaleProps {
   column: ColumnProps;
   onSort?: (payload: {orderBy: string; orderDir: string}) => any;
   active?: boolean;
   classnames: ClassNamesFn;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface State {
@@ -50,11 +52,12 @@ export class HeadCellSort extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const {active, column, onSort, classnames: cx} = this.props;
+    const {active, column, onSort, classnames: cx, testIdBuilder} = this.props;
 
     return (
       <span
         className={cx('TableCell-sortBtn', 'aaa')}
+        {...testIdBuilder?.getTestId()}
         onClick={async () => {
           let sortPayload: State = {
             orderBy: '',
@@ -97,6 +100,7 @@ export class HeadCellSort extends React.PureComponent<Props, State> {
             icon="sort-desc"
             className="icon"
             iconContent="table-sort-down"
+            testIdBuilder={testIdBuilder?.getChild('desc')}
           />
         </i>
         <i
@@ -105,7 +109,12 @@ export class HeadCellSort extends React.PureComponent<Props, State> {
             active && this.state.orderDir === 'asc' ? 'is-active' : ''
           )}
         >
-          <Icon icon="sort-asc" className="icon" iconContent="table-sort-up" />
+          <Icon
+            icon="sort-asc"
+            className="icon"
+            iconContent="table-sort-up"
+            testIdBuilder={testIdBuilder?.getChild('asc')}
+          />
         </i>
         <i
           className={cx(
@@ -117,6 +126,7 @@ export class HeadCellSort extends React.PureComponent<Props, State> {
             icon="sort-default"
             className="icon"
             iconContent="table-sort-default"
+            testIdBuilder={testIdBuilder?.getChild('default')}
           />
         </i>
       </span>

packages/amis-ui/src/components/table/index.tsx

@@ -685,9 +685,11 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       dataSource,
       onSort,
       onSelectAll,
-      onFilter
+      onFilter,
+      testIdBuilder
     } = this.props;
 
+    console.log(testIdBuilder);
     const rowSelectionKeyField = this.getRowSelectionKeyField();
     const dataList =
       rowSelection && rowSelection.getCheckboxProps
@@ -754,6 +756,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         }}
         onFilter={onFilter}
         onResizeMouseDown={this.onResizeMouseDown.bind(this)}
+        testIdBuilder={testIdBuilder?.getChild('head')}
       ></Head>
     );
   }

packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx

@@ -46,7 +46,14 @@ export class HeadCellSearchDropDown extends React.Component<
   }
 
   buildSchema() {
-    const {searchable, sortable, name, label, translate: __} = this.props;
+    const {
+      searchable,
+      sortable,
+      name,
+      label,
+      translate: __,
+      testIdBuilder
+    } = this.props;
 
     let schema: any;
 
@@ -58,7 +65,8 @@ export class HeadCellSearchDropDown extends React.Component<
             type: 'text',
             name,
             placeholder: label,
-            clearable: true
+            clearable: true,
+            testid: testIdBuilder?.getChild(name)?.getTestIdValue()
           }
         ]
       };
@@ -81,6 +89,9 @@ export class HeadCellSearchDropDown extends React.Component<
             {
               type: searchable.type || 'text',
               name: searchable.name || name,
+              testid: testIdBuilder
+                ?.getChild(searchable.name || name)
+                ?.getTestIdValue(),
               placeholder: label,
               ...searchable
             }
@@ -132,23 +143,27 @@ export class HeadCellSearchDropDown extends React.Component<
         wrapperComponent: 'div',
         wrapWithPanel: true,
         title: false,
+        testid: testIdBuilder?.getChild('form')?.getTestIdValue(),
         actions: [
           {
             type: 'button',
             label: __('reset'),
-            actionType: 'clear-and-submit'
+            actionType: 'clear-and-submit',
+            testid: testIdBuilder?.getChild('btn-reset')?.getTestIdValue()
           },
 
           {
             type: 'button',
             label: __('cancel'),
-            actionType: 'cancel'
+            actionType: 'cancel',
+            testid: testIdBuilder?.getChild('btn-cancel')?.getTestIdValue()
           },
 
           {
             label: __('search'),
             type: 'submit',
-            primary: true
+            primary: true,
+            testid: testIdBuilder?.getChild('btn-search')?.getTestIdValue()
           }
         ]
       };
@@ -242,7 +257,8 @@ export class HeadCellSearchDropDown extends React.Component<
       orderBy,
       popOverContainer,
       classPrefix: ns,
-      classnames: cx
+      classnames: cx,
+      testIdBuilder
     } = this.props;
 
     const formSchema = this.buildSchema();
@@ -261,6 +277,7 @@ export class HeadCellSearchDropDown extends React.Component<
             icon="search"
             className="icon"
             iconContent="table-search-icon"
+            testIdBuilder={testIdBuilder?.getChild('search-icon')}
           />
         }
         popOverContainer={
@@ -284,6 +301,7 @@ export class HeadCellSearchDropDown extends React.Component<
             }
           }) as JSX.Element;
         }}
+        testIdBuilder={testIdBuilder}
       ></HeadCellDropDown>
     );
   }

packages/amis/src/renderers/Table2/index.tsx

@@ -1054,6 +1054,7 @@ export default class Table2 extends React.Component<Table2Props, object> {
               searchable={column.searchable}
               onSearch={this.handleSearch}
               key={'th-search-' + col}
+              testIdBuilder={testIdBuilder?.getChild(`head-search-${col}`)}
             />
           );
         }