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

2024-12-04 21:08:55 +08:00 · 2024-02-27 16:37:04 +08:00 · 2024-02-27 16:37:04 +08:00 · 68dc47a7fe
commit 68dc47a7fe
parent fd040ed1fa
7 changed files with 68 additions and 19 deletions
--- 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,7 +1626,9 @@ export class DateRangePicker extends React.Component<

    return (
      <td {...omit(props, 'viewDate')} {...others}>
-        <span>{monthStrFixedLength}</span>
+        <span {...testIdBuilder?.getChild(props.key).getTestId()}>
+          {monthStrFixedLength}
+        </span>
      </td>
    );
  }
@ -1620,6 +1636,7 @@ export class DateRangePicker extends React.Component<
  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')}
        />

        {/* 指示游标 */}
--- 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
--- 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)
--- 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> {
--- 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>
--- 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>
                  ))}
--- 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}
      />
    );
  }