feat: 日期范围、transfer等组件支持testid

lhtuling · Mar 1, 2024 · c8f42c5 · c8f42c5
1 parent 68dc47a
commit c8f42c5
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 26 deletions.
diff --git a/packages/amis-ui/src/components/AssociatedSelection.tsx b/packages/amis-ui/src/components/AssociatedSelection.tsx
@@ -128,7 +128,8 @@ export class AssociatedSelection extends BaseSelection<
       loadingConfig,
       checkAll,
       checkAllLabel,
-      deferField = 'defer'
+      deferField = 'defer',
+      testIdBuilder
     } = this.props;
 
     const selectdOption = BaseSelection.resolveSelected(
@@ -152,6 +153,7 @@ export class AssociatedSelection extends BaseSelection<
               virtualThreshold={virtualThreshold}
               itemHeight={itemHeight}
               loadingConfig={loadingConfig}
+              testIdBuilder={testIdBuilder?.getChild('left-selection')}
             />
           ) : (
             <GroupedSelection
@@ -164,6 +166,7 @@ export class AssociatedSelection extends BaseSelection<
               clearable={false}
               virtualThreshold={virtualThreshold}
               itemHeight={itemHeight}
+              testIdBuilder={testIdBuilder?.getChild('left-selection')}
             />
           )}
         </div>
@@ -204,6 +207,7 @@ export class AssociatedSelection extends BaseSelection<
                   multiple={multiple}
                   virtualThreshold={virtualThreshold}
                   itemHeight={itemHeight}
+                  testIdBuilder={testIdBuilder?.getChild('right-selection')}
                 />
               ) : rightMode === 'tree' ? (
                 <Tree
@@ -218,6 +222,7 @@ export class AssociatedSelection extends BaseSelection<
                   loadingConfig={loadingConfig}
                   checkAllLabel={checkAllLabel}
                   checkAll={checkAll}
+                  testIdBuilder={testIdBuilder?.getChild('right-selection')}
                 />
               ) : rightMode === 'chained' ? (
                 <ChainedSelection
@@ -234,6 +239,7 @@ export class AssociatedSelection extends BaseSelection<
                   loadingConfig={loadingConfig}
                   checkAllLabel={checkAllLabel}
                   checkAll={checkAll}
+                  testIdBuilder={testIdBuilder?.getChild('right-selection')}
                 />
               ) : (
                 <GroupedSelection
@@ -249,6 +255,7 @@ export class AssociatedSelection extends BaseSelection<
                   itemHeight={itemHeight}
                   checkAllLabel={checkAllLabel}
                   checkAll={checkAll}
+                  testIdBuilder={testIdBuilder?.getChild('right-selection')}
                 />
               )
             ) : (

diff --git a/packages/amis-ui/src/components/ChainedSelection.tsx b/packages/amis-ui/src/components/ChainedSelection.tsx
@@ -72,9 +72,11 @@ export class ChainedSelection extends BaseSelection<
       itemClassName,
       itemRender,
       multiple,
-      labelField
+      labelField,
+      testIdBuilder
     } = this.props;
     const valueArray = this.valueArray;
+    const itemTIB = testIdBuilder?.getChild(`item-${option.value || index}`);
 
     return (
       <div
@@ -96,6 +98,7 @@ export class ChainedSelection extends BaseSelection<
             disabled={disabled || option.disabled}
             labelClassName={labelClassName}
             description={option.description}
+            testIdBuilder={itemTIB}
           />
         ) : null}
 
@@ -130,9 +133,11 @@ export class ChainedSelection extends BaseSelection<
       multiple,
       labelField,
       deferField = 'defer',
-      loadingConfig
+      loadingConfig,
+      testIdBuilder
     } = this.props;
     const valueArray = this.valueArray;
+    const itemTIB = testIdBuilder?.getChild(`item-${option.value || index}`);
 
     if (Array.isArray(option.children) || option[deferField]) {
       return (
@@ -147,6 +152,7 @@ export class ChainedSelection extends BaseSelection<
             ~this.state.selected.indexOf(id) ? 'is-active' : ''
           )}
           onClick={() => this.selectOption(option, depth, id)}
+          {...itemTIB?.getTestId()}
         >
           <div className={cx('ChainedSelection-itemLabel')}>
             {itemRender(option, {
@@ -230,7 +236,8 @@ export class ChainedSelection extends BaseSelection<
       translate: __,
       virtualThreshold = 1000,
       itemHeight = 32,
-      virtualListHeight
+      virtualListHeight,
+      testIdBuilder
     } = this.props;
 
     this.valueArray = BaseSelection.value2array(value, options, option2value);

diff --git a/packages/amis-ui/src/components/GroupedSelection.tsx b/packages/amis-ui/src/components/GroupedSelection.tsx
@@ -129,10 +129,12 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
       itemClassName,
       itemRender,
       multiple,
-      labelField
+      labelField,
+      testIdBuilder
     } = this.props;
 
     const valueArray = this.valueArray;
+    const itemTIB = testIdBuilder?.getChild(`item-${option.value || index}`);
 
     return (
       <div
@@ -146,6 +148,7 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
           !!~valueArray.indexOf(option) ? 'is-active' : ''
         )}
         onClick={() => this.toggleOption(option)}
+        {...itemTIB?.getTestId()}
       >
         {multiple ? (
           <Checkbox
@@ -154,6 +157,7 @@ export class GroupedSelection extends BaseSelection<BaseSelectionProps> {
             disabled={disabled || option.disabled}
             labelClassName={labelClassName}
             description={option.description}
+            testIdBuilder={itemTIB?.getChild('checkbox')}
           />
         ) : null}
         <div className={cx('GroupedSelection-itemLabel')}>

diff --git a/packages/amis-ui/src/components/ResultList.tsx b/packages/amis-ui/src/components/ResultList.tsx
@@ -15,6 +15,8 @@ import {LocaleProps, localeable, ClassNamesFn} from 'amis-core';
 import TransferSearch from './TransferSearch';
 import VirtualList, {AutoSizer} from './virtual-list';
 
+import type {TestIdBuilder} from 'amis-core';
+
 export interface ResultListProps extends ThemeProps, LocaleProps {
   className?: string;
   value?: Array<Option>;
@@ -33,6 +35,7 @@ export interface ResultListProps extends ThemeProps, LocaleProps {
   itemHeight?: number; // 每个选项的高度，主要用于虚拟渲染
   virtualThreshold?: number; // 数据量多大的时候开启虚拟渲染
   showInvalidMatch?: boolean;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface ItemRenderStates {
@@ -275,9 +278,10 @@ export class ResultList extends React.Component<
       sortable,
       labelField,
       translate: __,
-      showInvalidMatch
+      showInvalidMatch,
+      testIdBuilder
     } = this.props;
-
+    const itemTIB = testIdBuilder?.getChild(`item-${option.value || index}`);
     return (
       <div
         style={styles}
@@ -309,6 +313,7 @@ export class ResultList extends React.Component<
             onClick={(e: React.MouseEvent<HTMLElement>) =>
               this.handleCloseItem(e, option)
             }
+            {...itemTIB?.getChild('close').getTestId()}
           >
             <Icon icon="close" className="icon" />
           </a>

diff --git a/packages/amis-ui/src/components/ResultTableList.tsx b/packages/amis-ui/src/components/ResultTableList.tsx
@@ -178,7 +178,8 @@ export class BaseResultTableSelection extends BaseSelection<
       translate: __,
       placeholder,
       virtualThreshold,
-      itemHeight
+      itemHeight,
+      testIdBuilder
     } = this.props;
 
     const {searching, tableOptions, searchTableOptions} = this.state;
@@ -208,6 +209,10 @@ export class BaseResultTableSelection extends BaseSelection<
               rowIndex: number
             ) => {
               const raw = cellRender(column, option, colIndex, rowIndex);
+              const itemTIB = testIdBuilder?.getChild(
+                `item-${option.value || rowIndex}`
+              );
+
               if (colIndex === columns.length - 1) {
                 return (
                   <>
@@ -219,6 +224,7 @@ export class BaseResultTableSelection extends BaseSelection<
                           e.stopPropagation();
                           this.handleCloseItem(option);
                         }}
+                        {...itemTIB?.getChild(`close`).getTestId()}
                       >
                         <CloseIcon />
                       </span>

diff --git a/packages/amis-ui/src/components/ResultTreeList.tsx b/packages/amis-ui/src/components/ResultTreeList.tsx
@@ -288,7 +288,8 @@ export class BaseResultTreeList extends React.Component<
       placeholder,
       virtualThreshold,
       itemHeight,
-      loadingConfig
+      loadingConfig,
+      testIdBuilder
     } = this.props;
 
     const {treeOptions, searching, searchTreeOptions} = this.state;
@@ -309,6 +310,7 @@ export class BaseResultTreeList extends React.Component<
             onDelete={(option: Option) => this.deleteTreeChecked(option)}
             virtualThreshold={virtualThreshold}
             itemHeight={itemHeight}
+            testIdBuilder={testIdBuilder}
           />
         ) : (
           <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>

diff --git a/packages/amis-ui/src/components/Selection.tsx b/packages/amis-ui/src/components/Selection.tsx
@@ -23,6 +23,8 @@ import {
 import Checkbox from './Checkbox';
 import {Option, Options} from './Select';
 
+import type {TestIdBuilder} from 'amis-core';
+
 export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   options: Options;
   className?: string;
@@ -49,6 +51,7 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   placeholderRender?: (props: any) => JSX.Element | null;
   checkAll?: boolean;
   checkAllLabel?: string;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface ItemRenderStates {

diff --git a/packages/amis-ui/src/components/TableSelection.tsx b/packages/amis-ui/src/components/TableSelection.tsx
@@ -77,7 +77,8 @@ export class TableSelection extends BaseSelection<TableSelectionProps, any> {
       value,
       disabled,
       option2value,
-      multiple
+      multiple,
+      testIdBuilder
     } = this.props;
     let columns = this.getColumns();
     let valueArray = BaseSelection.value2array(value, options, option2value);
@@ -108,6 +109,7 @@ export class TableSelection extends BaseSelection<TableSelectionProps, any> {
                   onChange={this.toggleAll}
                   checked={partialChecked}
                   partial={partialChecked && !allChecked}
+                  testIdBuilder={testIdBuilder?.getChild('check-all')}
                 />
               </th>
             ) : null}
@@ -140,10 +142,12 @@ export class TableSelection extends BaseSelection<TableSelectionProps, any> {
       multiple,
       translate: __,
       itemClassName,
-      resultMode
+      resultMode,
+      testIdBuilder
     } = this.props;
 
     const checked = valueArray.indexOf(option) !== -1;
+    const itemTIB = testIdBuilder?.getChild(`item-${option.value || rowIndex}`);
 
     return (
       <tr
@@ -171,7 +175,12 @@ export class TableSelection extends BaseSelection<TableSelectionProps, any> {
               this.toggleOption(option);
             }}
           >
-            <Checkbox size="sm" checked={checked} disabled={disabled} />
+            <Checkbox
+              size="sm"
+              checked={checked}
+              disabled={disabled}
+              testIdBuilder={itemTIB}
+            />
           </td>
         ) : null}
         {columns.map((column, colIndex) => (