feat: action select nav dialog input-text input-file 增加 testid (baidu…

…#9462)
lhtuling · Jan 17, 2024 · 0c59ce4 · 0c59ce4
1 parent 59145cc
commit 0c59ce4
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -144,4 +144,4 @@
       "printBasicPrototype": false
     }
   }
-}
+}
diff --git a/packages/amis-core/src/utils/helper.ts b/packages/amis-core/src/utils/helper.ts
@@ -14,7 +14,7 @@ import {compile} from 'path-to-regexp';
 
 import type {Schema, PlainObject, FunctionPropertyNames} from '../types';
 
-import {evalExpression} from './tpl';
+import {evalExpression, filter} from './tpl';
 import {IIRendererStore} from '../store';
 import {IFormStore} from '../store/form';
 import {autobindMethod} from './autobind';
@@ -2285,3 +2285,21 @@ export function replaceUrlParams(path: string, params: Record<string, any>) {
 
   return path;
 }
+
+const TEST_ID_KEY: 'data-testid' = 'data-testid';
+
+export function buildTestId(testid?: string, data?: PlainObject) {
+  if (!testid) {
+    return {};
+  }
+  return {
+    [TEST_ID_KEY]: filter(testid, data)
+  };
+}
+
+export function getTestId(testid?: string, data?: PlainObject) {
+  if (!testid) {
+    return undefined;
+  }
+  return buildTestId(testid, data)[TEST_ID_KEY];
+}
diff --git a/packages/amis-editor-core/src/component/Panel/RenderersPanel.tsx b/packages/amis-editor-core/src/component/Panel/RenderersPanel.tsx
@@ -1,4 +1,4 @@
-import {Html, render, TooltipWrapper, hasIcon} from 'amis';
+import {Html, render, TooltipWrapper, buildTestId} from 'amis';
 import {observer} from 'mobx-react';
 import React from 'react';
 import cx from 'classnames';
@@ -173,6 +173,7 @@ export default class RenderersPanel extends React.Component<
                     {items.map((item: any) => {
                       const key = `${index}_${item.id}`;
                       const usePluginIcon = isHasPluginIcon(item);
+                      const testid = `editor-renderer-${item.plugin.rendererName}`;
 
                       return (
                         <div
@@ -188,6 +189,7 @@ export default class RenderersPanel extends React.Component<
                           onDragStart={(e: React.DragEvent) =>
                             this.handleDragStart(e, item.name)
                           }
+                          {...buildTestId(testid)}
                         >
                           <div
                             className="icon-box"

diff --git a/packages/amis-ui/src/components/AsideNav.tsx b/packages/amis-ui/src/components/AsideNav.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import {mapTree} from 'amis-core';
-import {ClassNamesFn, themeable} from 'amis-core';
+import {ClassNamesFn, themeable, buildTestId} from 'amis-core';
 
 export type LinkItem = LinkItemProps;
 interface LinkItemProps {
@@ -19,6 +19,7 @@ interface LinkItemProps {
   children?: Array<LinkItem>;
   path?: string;
   icon?: string;
+  testid?: string;
   component?: React.ElementType;
 }
 
@@ -54,7 +55,9 @@ interface AsideNavState {
 
 export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
   static defaultProps = {
-    renderLink: (item: LinkItemProps) => <a>{item.label}</a>,
+    renderLink: (item: LinkItemProps) => (
+      <a {...buildTestId(item.testid, item)}>{item.label}</a>
+    ),
     renderSubLinks: (
       link: LinkItemProps,
       renderLink: Function,

diff --git a/packages/amis-ui/src/components/Button.tsx b/packages/amis-ui/src/components/Button.tsx
@@ -6,14 +6,15 @@
 import React from 'react';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
 import {pickEventsProps} from 'amis-core';
-import {ClassNamesFn, themeable} from 'amis-core';
+import {ClassNamesFn, themeable, buildTestId} from 'amis-core';
 import Spinner, {SpinnerExtraProps} from './Spinner';
 
 export interface ButtonProps
   extends React.DOMAttributes<HTMLButtonElement>,
     SpinnerExtraProps {
   id?: string;
   className?: string;
+  testid?: string;
   style?: any;
   href?: string;
   title?: string;
@@ -77,6 +78,7 @@ export class Button extends React.Component<ButtonProps> {
       loadingClassName,
       overrideClassName,
       loadingConfig,
+      testid,
       ...rest
     } = this.props;
 
@@ -92,6 +94,7 @@ export class Button extends React.Component<ButtonProps> {
         {...pickEventsProps(rest)}
         onClick={rest.onClick && disabled ? () => {} : rest.onClick}
         href={href}
+        {...buildTestId(testid)}
         className={cx(
           overrideClassName
             ? ''

diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
@@ -9,7 +9,8 @@ import {
   getOptionValue,
   getOptionValueBindField,
   labelToString,
-  uncontrollable
+  uncontrollable,
+  buildTestId
 } from 'amis-core';
 import React from 'react';
 import isInteger from 'lodash/isInteger';
@@ -322,6 +323,7 @@ export interface SelectProps
     LocaleProps,
     SpinnerExtraProps {
   className?: string;
+  testid?: string;
   popoverClassName?: string;
   showInvalidMatch?: boolean;
   creatable: boolean;
@@ -1319,6 +1321,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       borderMode,
       mobileUI,
       hasError,
+      testid,
       loadingConfig
     } = this.props;
 
@@ -1350,6 +1353,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               onClick={this.toggle}
               onFocus={this.onFocus}
               onBlur={this.onBlur}
+              {...buildTestId(testid)}
               className={cx(
                 `Select`,
                 {

diff --git a/packages/amis-ui/src/components/menu/MenuItem.tsx b/packages/amis-ui/src/components/menu/MenuItem.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import pick from 'lodash/pick';
 import {Item as RcItem, MenuItemProps as RcMenuItemProps} from 'rc-menu';
-import {ClassNamesFn, themeable, createObject} from 'amis-core';
+import {ClassNamesFn, themeable, createObject, buildTestId} from 'amis-core';
 
 import {Badge} from '../Badge';
 import {getIcon} from '../icons';
@@ -29,6 +29,7 @@ export interface MenuItemProps
   tooltipContainer?: HTMLElement | (() => HTMLElement);
   tooltipTrigger?: Trigger | Array<Trigger>;
   renderLink: Function;
+  testid?: string;
   extra?: React.ReactNode;
 }
 
@@ -90,6 +91,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
       renderLink,
       extra,
       disabled,
+      testid,
       id,
       data: defaultData
     } = this.props;
@@ -166,6 +168,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
             data-id={link?.__id || id}
             data-depth={depth}
             onDragStart={onDragStart?.(link)}
+            {...buildTestId(testid, link)}
           >
             {isCollapsedNode ? (
               <>{iconNode || labelNode}</>

diff --git a/packages/amis-ui/src/components/menu/SubMenu.tsx b/packages/amis-ui/src/components/menu/SubMenu.tsx
@@ -7,7 +7,14 @@
 import React from 'react';
 import pick from 'lodash/pick';
 import {SubMenu as RcSubMenu, SubMenuProps as RcSubMenuProps} from 'rc-menu';
-import {ClassNamesFn, themeable, autobind, createObject} from 'amis-core';
+import {
+  ClassNamesFn,
+  themeable,
+  autobind,
+  createObject,
+  filter,
+  buildTestId
+} from 'amis-core';
 
 import {getIcon, Icon} from '../icons';
 import {Badge} from '../Badge';
@@ -104,6 +111,7 @@ export class SubMenu extends React.Component<SubMenuProps> {
       disabled,
       data: defaultData,
       extra,
+      testid,
       renderLink
     } = this.props;
     const isCollapsedNode = collapsed && depth === 1;
@@ -197,6 +205,7 @@ export class SubMenu extends React.Component<SubMenuProps> {
             data-id={link?.__id || id}
             data-depth={depth}
             onDragStart={onDragStart?.(link)}
+            {...buildTestId(testid, link)}
           >
             {renderContent()}
           </a>

diff --git a/packages/amis-ui/src/components/menu/index.tsx b/packages/amis-ui/src/components/menu/index.tsx
@@ -63,6 +63,8 @@ export interface MenuProps extends Omit<RcMenuProps, 'mode'> {
    */
   navigations: Array<NavigationItem>;
 
+  testid?: string;
+
   /**
    * 导航排列方式 stacked为true垂直 默认为false
    */
@@ -577,7 +579,8 @@ export class Menu extends React.Component<MenuProps, MenuState> {
       collapsed,
       overflowedIndicator,
       overflowMaxCount,
-      popupClassName
+      popupClassName,
+      testid
     } = this.props;
 
     return list.map((item: NavigationItem, index: number) => {
@@ -613,6 +616,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
             badge={badge}
             renderLink={renderLink}
             depth={level || 1}
+            testid={testid}
             popupClassName={popupClassName}
           >
             {this.renderMenuContent(item.children || [], item.depth + 1)}
@@ -634,6 +638,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
           renderLink={renderLink}
           badge={badge}
           data={data}
+          testid={testid}
           depth={level || 1}
           order={index}
           overflowedIndicator={overflowedIndicator}

diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx
@@ -10,7 +10,8 @@ import {
   RendererProps,
   ScopedContext,
   uuid,
-  setThemeClassName
+  setThemeClassName,
+  getTestId
 } from 'amis-core';
 import {filter} from 'amis-core';
 import {BadgeObject, Button, SpinnerExtraProps} from 'amis-ui';
@@ -23,6 +24,8 @@ export interface ButtonSchema extends BaseSchema {
    */
   id?: string;
 
+  testid?: string;
+
   /**
    * 是否为块状展示，默认为内联。
    */
@@ -736,6 +739,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
       wrapperCustomStyle,
       css,
       id,
+      testid,
       env
     } = this.props;
 
@@ -815,6 +819,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
               [activeClassName || 'is-active']: isActive
             }
           )}
+          testid={getTestId(testid, data)}
           style={style}
           size={size}
           level={

diff --git a/packages/amis/src/renderers/Dialog.tsx b/packages/amis/src/renderers/Dialog.tsx
@@ -7,7 +7,8 @@ import {
   resolveVariableAndFilter,
   setVariable,
   setThemeClassName,
-  ValidateError
+  ValidateError,
+  getTestId
 } from 'amis-core';
 import {Renderer, RendererProps} from 'amis-core';
 import {SchemaNode, Schema, ActionObject} from 'amis-core';
@@ -48,6 +49,8 @@ export interface DialogSchema extends BaseSchema {
    */
   actions?: Array<ActionSchema>;
 
+  testid?: string;
+
   /**
    * 内容区域
    */
@@ -231,7 +234,7 @@ export default class Dialog extends React.Component<DialogProps> {
   }
 
   buildActions(): Array<ActionSchema> {
-    const {actions, confirm, translate: __} = this.props;
+    const {actions, confirm, testid, translate: __} = this.props;
 
     if (typeof actions !== 'undefined') {
       return actions;
@@ -240,13 +243,15 @@ export default class Dialog extends React.Component<DialogProps> {
     let ret: Array<ActionSchema> = [];
     ret.push({
       type: 'button',
+      testid: getTestId(testid && `${testid}-cancel`),
       actionType: 'cancel',
       label: __('cancel')
     });
 
     if (confirm) {
       ret.push({
         type: 'button',
+        testid: getTestId(testid && `${testid}-confirm`),
         actionType: 'confirm',
         label: __('confirm'),
         primary: true

diff --git a/packages/amis/src/renderers/Drawer.tsx b/packages/amis/src/renderers/Drawer.tsx
@@ -6,7 +6,8 @@ import {
   isPureVariable,
   resolveVariableAndFilter,
   setThemeClassName,
-  ValidateError
+  ValidateError,
+  getTestId
 } from 'amis-core';
 import {Renderer, RendererProps} from 'amis-core';
 import {SchemaNode, Schema, ActionObject} from 'amis-core';
@@ -142,6 +143,8 @@ export interface DrawerSchema extends BaseSchema {
    * 是否显示错误信息
    */
   showErrorMsg?: boolean;
+
+  testid?: string;
 }
 
 export type DrawerSchemaBase = Omit<DrawerSchema, 'type'>;
@@ -257,7 +260,7 @@ export default class Drawer extends React.Component<DrawerProps> {
   }
 
   buildActions(): Array<ActionSchema> {
-    const {actions, confirm, translate: __} = this.props;
+    const {actions, confirm, testid, translate: __} = this.props;
 
     if (typeof actions !== 'undefined') {
       return actions;
@@ -266,6 +269,7 @@ export default class Drawer extends React.Component<DrawerProps> {
     let ret: Array<ActionSchema> = [];
     ret.push({
       type: 'button',
+      testid: getTestId(testid && `${testid}-cancel`),
       actionType: 'close',
       label: __('cancel')
     });
@@ -274,6 +278,7 @@ export default class Drawer extends React.Component<DrawerProps> {
       ret.push({
         type: 'button',
         actionType: 'confirm',
+        testid: getTestId(testid && `${testid}-confirm`),
         label: __('confirm'),
         primary: true
       });