Merge pull request baidu#9700 from allenve/e2e

feat: 日期范围、transfer等组件支持testid
lhtuling · Mar 5, 2024 · 693fbbe · 693fbbe
2 parents c747bf6 + 8e6c7fa
commit 693fbbe
Show file tree

Hide file tree

Showing 21 changed files with 182 additions and 45 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/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx
@@ -38,6 +38,7 @@ import type {
   MutableUnitOfTime,
   ChangeEventViewStatus
 } from './calendar/Calendar';
+import type {TestIdBuilder} from 'amis-core';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -86,6 +87,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   animation?: boolean;
   /** 日期处理函数，通常用于自定义处理绑定日期的值 */
   transform?: string;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface DateRangePickerState {
@@ -1328,14 +1330,21 @@ export class DateRangePicker extends React.Component<
     if (!shortcuts) {
       return null;
     }
-    const {classPrefix: ns, format, valueFormat, data} = this.props;
+    const {
+      classPrefix: ns,
+      format,
+      valueFormat,
+      data,
+      translate: __,
+      testIdBuilder
+    } = this.props;
     let shortcutArr: Array<string | ShortCuts>;
     if (typeof shortcuts === 'string') {
       shortcutArr = shortcuts.split(',');
     } else {
       shortcutArr = shortcuts;
     }
-    const __ = this.props.translate;
+    const TIDBuilder = testIdBuilder?.getChild('shortcut');
 
     return (
       <ul className={`${ns}DateRangePicker-rangers`}>
@@ -1407,7 +1416,9 @@ export class DateRangePicker extends React.Component<
                 onClick={() => this.selectShortcut(shortcut)}
                 key={index}
               >
-                <a>{__(shortcut.label)}</a>
+                <a {...TIDBuilder?.getChild(shortcut.key).getTestId()}>
+                  {__(shortcut.label)}
+                </a>
               </li>
             );
           } else {
@@ -1537,6 +1548,7 @@ export class DateRangePicker extends React.Component<
 
   renderDay(props: any, currentDate: moment.Moment) {
     let {startDate, endDate} = this.state;
+    const {testIdBuilder} = this.props;
 
     if (
       startDate &&
@@ -1567,7 +1579,9 @@ export class DateRangePicker extends React.Component<
 
     return (
       <td {...omit(props, ['todayActiveStyle'])} {...others}>
-        <span>{currentDate.date()}</span>
+        <span {...testIdBuilder?.getChild(props.key)?.getTestId()}>
+          {currentDate.date()}
+        </span>
       </td>
     );
   }
@@ -1576,7 +1590,7 @@ export class DateRangePicker extends React.Component<
     const currentDate = props.viewDate.year(year).month(month);
     const {startDate, endDate} = this.state;
 
-    const {translate: __} = this.props;
+    const {translate: __, testIdBuilder} = this.props;
     const monthStr = currentDate.format(__('MMM'));
     const strLength = 3;
     // Because some months are up to 5 characters long, we want to
@@ -1612,14 +1626,17 @@ export class DateRangePicker extends React.Component<
 
     return (
       <td {...omit(props, 'viewDate')} {...others}>
-        <span>{monthStrFixedLength}</span>
+        <span {...testIdBuilder?.getChild(props.key).getTestId()}>
+          {monthStrFixedLength}
+        </span>
       </td>
     );
   }
 
   renderQuarter(props: any, quarter: number, year: number) {
     const currentDate = moment().year(year).quarter(quarter);
     const {startDate, endDate} = this.state;
+    const {testIdBuilder} = this.props;
 
     if (
       startDate &&
@@ -1650,13 +1667,16 @@ export class DateRangePicker extends React.Component<
 
     return (
       <td {...props} {...others}>
-        <span>Q{quarter}</span>
+        <span {...testIdBuilder?.getChild(props.key).getTestId()}>
+          Q{quarter}
+        </span>
       </td>
     );
   }
   renderYear(props: any, year: number) {
     const currentDate = moment().year(year);
     const {startDate, endDate} = this.state;
+    const {testIdBuilder} = this.props;
 
     if (
       startDate &&
@@ -1687,7 +1707,7 @@ export class DateRangePicker extends React.Component<
 
     return (
       <td {...props} {...others}>
-        <span>{year}</span>
+        <span {...testIdBuilder?.getChild(props.key).getTestId()}>{year}</span>
       </td>
     );
   }
@@ -1705,7 +1725,8 @@ export class DateRangePicker extends React.Component<
       type,
       viewMode = 'days',
       label,
-      mobileUI
+      mobileUI,
+      testIdBuilder
     } = this.props;
     const __ = this.props.translate;
     const {startDate, endDate, editState, curDateFormat, curTimeFormat} =
@@ -1793,6 +1814,7 @@ export class DateRangePicker extends React.Component<
               timeRangeHeader="开始时间"
               embed={embed}
               status="start"
+              testIdBuilder={testIdBuilder?.getChild('calendar-start')}
             />
           )}
           {(!isTimeRange ||
@@ -1826,6 +1848,7 @@ export class DateRangePicker extends React.Component<
               timeRangeHeader="结束时间"
               embed={embed}
               status="end"
+              testIdBuilder={testIdBuilder?.getChild('calendar-end')}
             />
           )}
         </div>
@@ -1964,7 +1987,8 @@ export class DateRangePicker extends React.Component<
       ranges,
       shortcuts,
       label,
-      animation
+      animation,
+      testIdBuilder
     } = this.props;
     const useCalendarMobile =
       mobileUI && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
@@ -2059,6 +2083,7 @@ export class DateRangePicker extends React.Component<
           value={this.state.startInputValue || ''}
           disabled={disabled}
           readOnly={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('start')}
         />
         <span
           className={cx('DateRangePicker-input-separator')}
@@ -2079,6 +2104,7 @@ export class DateRangePicker extends React.Component<
           value={this.state.endInputValue || ''}
           disabled={disabled}
           readOnly={mobileUI}
+          testIdBuilder={testIdBuilder?.getChild('end')}
         />
 
         {/* 指示游标 */}

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>