Merge pull request baidu#9736 from allenve/master

feat: amis 表单项组件支持testid

docs/zh-CN/components/pdf-viewer.md

@@ -14,7 +14,8 @@ order: 24
 {
   "type": "pdf-viewer",
   "id": "pdf-viewer",
-  "src": "/examples/static/simple.pdf"
+  "src": "/examples/static/simple.pdf",
+  "width": 500
 }
 ```
 
@@ -38,7 +39,8 @@ order: 24
     {
       "type": "pdf-viewer",
       "id": "pdf-viewer",
-      "name": "file"
+      "name": "file",
+      "width": 500
     }
   ]
 }
@@ -49,6 +51,6 @@ order: 24
 | 属性名     | 类型   | 默认值 | 说明       |
 | ---------- | ------ | ------ | ---------- |
 | src        | Api    |        | 文档地址   |
-| width      | number | 500    | 宽度       |
+| width      | number |        | 宽度       |
 | height     | number | -      | 高度       |
 | background | string | #fff   | PDF 背景色 |

examples/components/PdfViewer.jsx

@@ -16,7 +16,8 @@ export default {
       {
         type: 'pdf-viewer',
         id: 'pdf-viewer',
-        name: 'file'
+        name: 'file',
+        width: 500
       }
     ]
   }

examples/components/SchemaRender.jsx

@@ -246,6 +246,8 @@ export default function (schema, schemaProps, showCode, envOverrides) {
               };
             });
           },
+          // 是否开启测试 testid
+          // enableTestid: true,
           ...envOverrides
         };
 

packages/amis-core/src/SchemaRenderer.tsx

@@ -16,7 +16,7 @@ import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
 import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
-import {anyChanged, chainEvents, autobind} from './utils/helper';
+import {anyChanged, chainEvents, autobind, TestIdBuilder} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
 import {bindEvent, dispatchEvent, RendererEvent} from './utils/renderer-event';
 import {isAlive} from 'mobx-state-tree';
@@ -476,8 +476,14 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       (props as any).static = isStatic;
     }
 
-    if (rest.env.enableTestid && props.id && !props.testid) {
-      props.testid = props.id;
+    // 优先使用组件自己的testid或者id，这个解决不了table行内的一些子元素
+    // 每一行都会出现这个testid的元素，只在测试工具中直接使用nth拿序号
+    if (rest.env.enableTestid) {
+      if (props.testid || props.id || props.testIdBuilder == null) {
+        if (!(props.testIdBuilder instanceof TestIdBuilder)) {
+          props.testIdBuilder = new TestIdBuilder(props.testid || props.id);
+        }
+      }
     }
 
     // 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层

packages/amis-core/src/factory.tsx

@@ -9,7 +9,8 @@ import {
   qsparse,
   string2regExp,
   parseQuery,
-  isMobile
+  isMobile,
+  TestIdBuilder
 } from './utils/helper';
 import {
   fetcherResult,
@@ -72,6 +73,7 @@ export interface RendererProps
   env: RendererEnv;
   $path: string; // 当前组件所在的层级信息
   $schema: any; // 原始 schema 配置
+  testIdBuilder?: TestIdBuilder;
   store?: IIRendererStore;
   syncSuperStore?: boolean;
   data: {

packages/amis-core/src/renderers/Form.tsx

@@ -49,7 +49,7 @@ import LazyComponent from '../components/LazyComponent';
 import {isAlive} from 'mobx-state-tree';
 
 import type {LabelAlign} from './Item';
-import {buildTestId, injectObjectChain} from '../utils';
+import {injectObjectChain} from '../utils';
 import {reaction} from 'mobx';
 import groupBy from 'lodash/groupBy';
 
@@ -1868,7 +1868,6 @@ export default class Form extends React.Component<FormProps, object> {
         )}
         onSubmit={this.handleFormSubmit}
         noValidate
-        {...buildTestId(testid)}
       >
         {/* 实现回车自动提交 */}
         <input type="submit" style={{display: 'none'}} />

packages/amis-core/src/renderers/Item.tsx

@@ -552,7 +552,6 @@ export interface FormItemProps extends RendererProps {
   // error string
   error?: string;
   showErrorMsg?: boolean;
-  testid?: string;
 }
 
 // 下发下去的属性

packages/amis-core/src/types.ts

@@ -2,6 +2,7 @@
 import type {JSONSchema7} from 'json-schema';
 import {ListenerAction} from './actions/Action';
 import {debounceConfig, trackConfig} from './utils/renderer-event';
+import type {TestIdBuilder} from './utils/helper';
 
 export interface Option {
   /**
@@ -693,6 +694,8 @@ export interface BaseSchemaWithoutType {
    * 可以组件级别用来关闭移动端样式
    */
   useMobileUI?: boolean;
+
+  testIdBuilder?: TestIdBuilder;
 }
 
 export type OperatorType =

packages/amis-core/src/utils/helper.ts

@@ -2282,18 +2282,49 @@ export function replaceUrlParams(path: string, params: Record<string, any>) {
 
 export const TEST_ID_KEY: 'data-testid' = 'data-testid';
 
-export function buildTestId(testid?: string, data?: PlainObject) {
-  if (!testid) {
-    return {};
+export class TestIdBuilder {
+  testId?: string;
+
+  static fast(testId: string) {
+    return {
+      [TEST_ID_KEY]: testId
+    };
   }
-  return {
-    [TEST_ID_KEY]: filter(testid, data)
-  };
-}
 
-export function getTestId(testid?: string, data?: PlainObject) {
-  if (!testid) {
-    return undefined;
+  // 为空就表示没有启用testId，后续一直返回都将是空
+  constructor(testId?: string) {
+    this.testId = testId;
+  }
+
+  // 生成子区域的testid生成器
+  getChild(childPath: string | number, data?: object) {
+    if (this.testId == null) {
+      return new TestIdBuilder();
+    }
+
+    return new TestIdBuilder(
+      data
+        ? filter(`${this.testId}-${childPath}`, data)
+        : `${this.testId}-${childPath}`
+    );
+  }
+
+  // 获取当前组件的testid
+  getTestId(data?: object) {
+    if (this.testId == null) {
+      return undefined;
+    }
+
+    return {
+      [TEST_ID_KEY]: data ? filter(this.testId, data) : this.testId
+    };
+  }
+
+  getTestIdValue(data?: object) {
+    if (this.testId == null) {
+      return undefined;
+    }
+
+    return data ? filter(this.testId, data) : this.testId;
   }
-  return buildTestId(testid, data)[TEST_ID_KEY];
 }

packages/amis-editor-core/src/component/Panel/RenderersPanel.tsx

@@ -1,4 +1,4 @@
-import {Html, render, TooltipWrapper, buildTestId} from 'amis';
+import {Html, render, TestIdBuilder, TooltipWrapper} from 'amis';
 import {observer} from 'mobx-react';
 import React from 'react';
 import cx from 'classnames';
@@ -18,6 +18,7 @@ type PanelProps = {
   };
   searchRendererType: string;
   className?: string;
+  testIdBuilder?: TestIdBuilder;
 };
 
 type PanelStates = {
@@ -98,7 +99,7 @@ export default class RenderersPanel extends React.Component<
   }
 
   render() {
-    const {store, searchRendererType, className} = this.props;
+    const {store, searchRendererType, className, testIdBuilder} = this.props;
     const grouped = this.props.groupedRenderers || {};
     const keys = Object.keys(grouped);
 
@@ -189,7 +190,7 @@ export default class RenderersPanel extends React.Component<
                           onDragStart={(e: React.DragEvent) =>
                             this.handleDragStart(e, item.name)
                           }
-                          {...buildTestId(testid)}
+                          {...testIdBuilder?.getChild(testid).getTestId()}
                         >
                           <div
                             className="icon-box"

packages/amis-ui/scss/components/_pdf_viewer.scss

@@ -1,7 +1,8 @@
 .#{$ns}PdfViewer {
   position: relative;
+  width: 100%;
+  min-width: 300px;
   height: 100%;
-  min-height: 500px;
   display: flex;
   justify-content: center;
   padding: 50px 0;
@@ -14,6 +15,7 @@
   }
 
   &-Loading {
+    width: 100%;
     text-align: center;
   }
 

packages/amis-ui/src/components/AsideNav.tsx

@@ -5,8 +5,8 @@
  */
 
 import React from 'react';
-import {mapTree} from 'amis-core';
-import {ClassNamesFn, themeable, buildTestId} from 'amis-core';
+import {TestIdBuilder, mapTree} from 'amis-core';
+import {ClassNamesFn, themeable} from 'amis-core';
 
 export type LinkItem = LinkItemProps;
 interface LinkItemProps {
@@ -19,8 +19,8 @@ interface LinkItemProps {
   children?: Array<LinkItem>;
   path?: string;
   icon?: string;
-  testid?: string;
   component?: React.ElementType;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface Navigation {
@@ -56,7 +56,7 @@ interface AsideNavState {
 export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
   static defaultProps = {
     renderLink: (item: LinkItemProps) => (
-      <a {...buildTestId(item.testid, item)}>{item.label}</a>
+      <a {...item.testIdBuilder?.getTestId()}>{item.label}</a>
     ),
     renderSubLinks: (
       link: LinkItemProps,

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')}
                 />
               )
             ) : (