feat: 补充日期范围等组件testid

lhtuling · Feb 27, 2024 · 68dc47a · 68dc47a
1 parent fd040ed
commit 68dc47a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 19 deletions.
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/SearchBox.tsx b/packages/amis-ui/src/components/SearchBox.tsx
@@ -349,6 +349,7 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
               'SearchBox-searchBtn--loading': loading
             })}
             onClick={this.handleSearch}
+            {...testIdBuilder?.getChild('search').getTestId()}
           >
             {loading ? (
               <Spinner

diff --git a/packages/amis/src/renderers/Form/Combo.tsx b/packages/amis/src/renderers/Form/Combo.tsx
@@ -1818,9 +1818,9 @@ export default class ComboControl extends React.Component<ComboProps> {
       updatePristineAfterStoreDataReInit
     } = this.props;
     const finnalItems = Array.isArray(finnalControls)
-      ? finnalControls.map(item => {
+      ? finnalControls.map((item, itemIndex) => {
           const indexKey = index !== undefined && index >= 0 ? `-${index}` : '';
-          const key = `item-${item.testid || item.id}` + indexKey;
+          const key = `item-${item.testid || item.id || itemIndex}` + indexKey;
           return {
             ...item,
             testIdBuilder: testIdBuilder?.getChild(key)

diff --git a/packages/amis/src/renderers/Form/InputDateRange.tsx b/packages/amis/src/renderers/Form/InputDateRange.tsx
@@ -13,7 +13,7 @@ import {ActionObject} from 'amis-core';
 import type {ShortCuts} from 'amis-ui/lib/components/DatePicker';
 import {FormBaseControlSchema} from '../../Schema';
 import {supportStatic} from './StaticHoc';
-
+import type {TestIdBuilder} from 'amis-core';
 /**
  * DateRange 日期范围控件
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/date-range
@@ -134,6 +134,7 @@ export interface DateRangeProps
   format: string;
   valueFormat: string;
   joinValues: boolean;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export default class DateRangeControl extends React.Component<DateRangeProps> {

diff --git a/packages/amis/src/renderers/Form/InputSubForm.tsx b/packages/amis/src/renderers/Form/InputSubForm.tsx
@@ -12,6 +12,7 @@ import {isMobile} from 'amis-core';
 import {PopUp} from 'amis-ui';
 import {autobind} from 'amis-core';
 
+import type {TestIdBuilder} from 'amis-core';
 /**
  * SubForm 子表单
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/subform
@@ -112,6 +113,7 @@ export interface SubFormProps extends FormControlProps {
   minLength?: number;
   maxLength?: number;
   labelField?: string;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface SubFormState {
@@ -414,7 +416,8 @@ export default class SubFormControl extends React.PureComponent<
       addable,
       removable,
       minLength,
-      addButtonText
+      addButtonText,
+      testIdBuilder
     } = this.props;
 
     return (
@@ -431,6 +434,7 @@ export default class SubFormControl extends React.PureComponent<
                   itemClassName
                 )}
                 key={key}
+                {...testIdBuilder?.getChild(`item-${key}`).getTestId()}
               >
                 {draggable && value.length > 1 ? (
                   <a className={cx('SubForm-valueDragBar')}>
@@ -498,6 +502,7 @@ export default class SubFormControl extends React.PureComponent<
                   value.length >= maxLength
                 )
               }
+              {...testIdBuilder?.getChild('add-button').getTestId()}
             >
               <Icon icon="plus" className="icon" />
               <span>{__(addButtonText || 'SubForm.add')}</span>
@@ -526,9 +531,12 @@ export default class SubFormControl extends React.PureComponent<
       btnLabel,
       render,
       data,
-      translate: __
+      translate: __,
+      testIdBuilder
     } = this.props;
 
+    const tIdBuilder = testIdBuilder?.getChild('edit-single');
+
     return (
       <div className={cx('SubForm-values', itemsClassName)} key="values">
         <div
@@ -542,6 +550,7 @@ export default class SubFormControl extends React.PureComponent<
           onClick={this.editSingle}
           data-tooltip={__('SubForm.editDetail')}
           data-position="bottom"
+          {...tIdBuilder?.getTestId()}
         >
           <span className={cx('SubForm-valueLabel')}>
             {btnLabel &&
@@ -562,7 +571,10 @@ export default class SubFormControl extends React.PureComponent<
                 stripTag(value[labelField])) ||
                 __(defaultLabel))}
           </span>
-          <a className={cx('SubForm-valueEdit')}>
+          <a
+            className={cx('SubForm-valueEdit')}
+            {...tIdBuilder?.getChild('icon').getTestId()}
+          >
             <Icon icon="pencil" className="icon" />
           </a>
         </div>

diff --git a/packages/amis/src/renderers/Form/MatrixCheckboxes.tsx b/packages/amis/src/renderers/Form/MatrixCheckboxes.tsx
@@ -17,6 +17,8 @@ import {ApiObject, ActionObject, isMobile} from 'amis-core';
 import {FormBaseControlSchema, SchemaApi} from '../../Schema';
 import {supportStatic} from './StaticHoc';
 
+import type {TestIdBuilder} from 'amis-core';
+
 /**
  * Matrix 选择控件。适合做权限勾选。
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/matrix
@@ -88,6 +90,7 @@ export interface MatrixProps extends FormControlProps, SpinnerExtraProps {
    * 横向选择所有能力
    */
   xCheckAll?: boolean;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface MatrixState {
@@ -405,7 +408,8 @@ export default class MatrixCheckbox extends React.Component<
       multiple,
       textAlign,
       xCheckAll,
-      yCheckAll
+      yCheckAll,
+      testIdBuilder
     } = this.props;
 
     const value = this.props.value || buildDefaultValue(columns, rows);
@@ -453,6 +457,7 @@ export default class MatrixCheckbox extends React.Component<
                         onChange={(checked: boolean) =>
                           this.toggleRowCheckAll(checked, value, y)
                         }
+                        testIdBuilder={testIdBuilder?.getChild(y)}
                       />
                     ) : null}
                     {row.label}
@@ -478,6 +483,7 @@ export default class MatrixCheckbox extends React.Component<
                         onChange={(checked: boolean) =>
                           this.toggleItem(checked, x, y)
                         }
+                        testIdBuilder={testIdBuilder?.getChild(`${x}-${y}`)}
                       />
                     </td>
                   ))}

diff --git a/packages/amis/src/renderers/SearchBox.tsx b/packages/amis/src/renderers/SearchBox.tsx
@@ -15,7 +15,7 @@ import {
 import {BaseSchema, SchemaClassName} from '../Schema';
 import {SearchBox} from 'amis-ui';
 
-import type {ListenerAction} from 'amis-core';
+import {ListenerAction, TestIdBuilder} from 'amis-core';
 import type {SpinnerExtraProps} from 'amis-ui';
 
 /**
@@ -82,6 +82,7 @@ interface SearchBoxProps
   name: string;
   onQuery?: (query: {[propName: string]: string}) => any;
   loading?: boolean;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface SearchBoxState {
@@ -212,7 +213,8 @@ export class SearchBoxRenderer extends React.Component<
       mobileUI,
       loading,
       loadingConfig,
-      onEvent
+      onEvent,
+      testIdBuilder
     } = this.props;
     const value = this.state.value;
     /** 有可能通过Search事件处理 */
@@ -241,6 +243,7 @@ export class SearchBoxRenderer extends React.Component<
         onFocus={() => this.dispatchEvent('focus')}
         onBlur={() => this.dispatchEvent('blur')}
         mobileUI={mobileUI}
+        testIdBuilder={testIdBuilder}
       />
     );
   }