feat: CRUD2 head 操作支持testid

2024-11-30 02:48:55 +08:00 · 2024-04-24 14:56:20 +08:00 · 2024-04-24 14:56:20 +08:00 · ffe15c5735
commit ffe15c5735
parent 4012e9c08f
8 changed files with 72 additions and 12 deletions
--- a/packages/amis-ui/src/components/icons.tsx
+++ b/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()}
      />
    );
  }
--- a/packages/amis-ui/src/components/table/Head.tsx
+++ b/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)
--- a/packages/amis-ui/src/components/table/HeadCellDropDown.tsx
+++ b/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 {
--- a/packages/amis-ui/src/components/table/HeadCellFilter.tsx
+++ b/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={
--- a/packages/amis-ui/src/components/table/HeadCellSort.tsx
+++ b/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>
--- a/packages/amis-ui/src/components/table/index.tsx
+++ b/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>
    );
  }
--- a/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx
+++ b/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>
    );
  }
--- a/packages/amis/src/renderers/Table2/index.tsx
+++ b/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}`)}
            />
          );
        }