Merge pull request baidu#9524 from yangwei9012/e2e

feat(amis): 增加搜索框、树组件、下拉选择中的部分testid
lhtuling · Jan 25, 2024 · 0d3563d · 0d3563d
2 parents 193df7c + 7ae21ed
commit 0d3563d
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 42 deletions.
diff --git a/packages/amis-ui/src/components/Input.tsx b/packages/amis-ui/src/components/Input.tsx
@@ -4,11 +4,12 @@
  * 功能很有必要。
  */
 import React from 'react';
-import {autobind} from 'amis-core';
+import {TestIdBuilder, autobind} from 'amis-core';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   forwardedRef: React.Ref<HTMLInputElement>;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface InputState {
@@ -60,7 +61,7 @@ class InputInner extends React.Component<InputProps, InputState> {
   }
 
   render() {
-    const {forwardedRef, ...rest} = this.props;
+    const {forwardedRef, testIdBuilder, ...rest} = this.props;
 
     return (
       <input
@@ -73,6 +74,7 @@ class InputInner extends React.Component<InputProps, InputState> {
         onCompositionStart={this.handleComposition}
         onCompositionUpdate={this.handleComposition}
         onCompositionEnd={this.handleComposition}
+        {...testIdBuilder?.getTestId()}
       />
     );
   }
@@ -81,5 +83,6 @@ class InputInner extends React.Component<InputProps, InputState> {
 export default React.forwardRef<HTMLInputElement>((props, ref) => {
   return <InputInner {...props} forwardedRef={ref} />;
 }) as React.ComponentType<
-  React.InputHTMLAttributes<HTMLInputElement> & {ref?: any}
+  Omit<InputProps, 'forwardedRef'> &
+    React.InputHTMLAttributes<HTMLInputElement> & {ref?: any}
 >;
diff --git a/packages/amis-ui/src/components/Pagination.tsx b/packages/amis-ui/src/components/Pagination.tsx
@@ -5,7 +5,12 @@
  */
 import React from 'react';
 import isInteger from 'lodash/isInteger';
-import {localeable, LocaleProps, resolveEventData} from 'amis-core';
+import {
+  localeable,
+  LocaleProps,
+  resolveEventData,
+  TestIdBuilder
+} from 'amis-core';
 import {themeable, ThemeProps} from 'amis-core';
 import {autobind} from 'amis-core';
 import {Icon} from './icons';
@@ -120,6 +125,7 @@ export interface PaginationProps
     ThemeProps,
     LocaleProps {
   popOverContainer?: any;
+  testIdBuilder?: TestIdBuilder;
 }
 export interface PaginationState {
   pageNum: string;
@@ -189,7 +195,7 @@ export class Pagination extends React.Component<
    * @param page 页码
    */
   renderPageItem(page: number) {
-    const {classnames: cx, activePage} = this.props;
+    const {classnames: cx, activePage, testIdBuilder} = this.props;
     const {perPage} = this.state;
 
     return (
@@ -200,7 +206,12 @@ export class Pagination extends React.Component<
           'is-active': page === activePage
         })}
       >
-        <a role="button">{page}</a>
+        <a
+          role="button"
+          {...testIdBuilder?.getChild(`page-${page}`).getTestId()}
+        >
+          {page}
+        </a>
       </li>
     );
   }
@@ -212,7 +223,12 @@ export class Pagination extends React.Component<
    * @param page 页码
    */
   renderEllipsis(key: string) {
-    const {classnames: cx, activePage, ellipsisPageGap} = this.props;
+    const {
+      classnames: cx,
+      activePage,
+      ellipsisPageGap,
+      testIdBuilder
+    } = this.props;
     const {perPage} = this.state;
     const lastPage = this.getLastPage();
     const gap: number =
@@ -240,6 +256,7 @@ export class Pagination extends React.Component<
             isPrevEllipsis ? 'backward' : 'forward'
           );
         }}
+        {...testIdBuilder?.getChild(key).getTestId()}
       >
         <a role="button">...</a>
         <span className="icon">{jumpContent}</span>
@@ -382,7 +399,8 @@ export class Pagination extends React.Component<
       popOverContainerSelector,
       mobileUI,
       size,
-      translate: __
+      translate: __,
+      testIdBuilder
     } = this.props;
     let maxButtons = this.props.maxButtons;
     const {pageNum, perPage, internalPageNum} = this.state;
@@ -402,6 +420,7 @@ export class Pagination extends React.Component<
             onKeyUp={this.handleSimpleKeyUp}
             onBlur={this.handleSimpleBlur}
             value={internalPageNum}
+            {...testIdBuilder?.getChild('simple-input').getTestId()}
           />
           /
           <span className={cx('Pagination-simplego-right')} key="go-right">
@@ -419,6 +438,7 @@ export class Pagination extends React.Component<
             className
           )}
           style={style}
+          {...testIdBuilder?.getTestId()}
         >
           <ul
             key="pager-items"
@@ -445,7 +465,7 @@ export class Pagination extends React.Component<
               }}
               key="prev"
             >
-              <span>
+              <span {...testIdBuilder?.getChild(`go-prev`).getTestId()}>
                 <Icon icon="left-arrow" className="icon" />
               </span>
             </li>
@@ -466,7 +486,7 @@ export class Pagination extends React.Component<
               }}
               key="next"
             >
-              <span>
+              <span {...testIdBuilder?.getChild(`go-next`).getTestId()}>
                 <Icon icon="right-arrow" className="icon" />
               </span>
             </li>
@@ -557,7 +577,7 @@ export class Pagination extends React.Component<
         }}
         key="prev"
       >
-        <span>
+        <span {...testIdBuilder?.getChild('go-prev').getTestId()}>
           <Icon icon="left-arrow" className="icon" />
         </span>
       </li>
@@ -576,7 +596,7 @@ export class Pagination extends React.Component<
         }}
         key="next"
       >
-        <span>
+        <span {...testIdBuilder?.getChild('go-next').getTestId()}>
           <Icon icon="right-arrow" className="icon" />
         </span>
       </li>
@@ -613,6 +633,7 @@ export class Pagination extends React.Component<
             this.handlePageNumChange(v, perPage);
           }}
           value={pageNum}
+          {...testIdBuilder?.getChild('go-input').getTestId()}
         />
         <span
           className={cx('Pagination-inputGroup-right')}
@@ -624,6 +645,7 @@ export class Pagination extends React.Component<
             this.setState({pageNum: ''});
             this.handlePageNumChange(+pageNum, perPage);
           }}
+          {...testIdBuilder?.getChild('go').getTestId()}
         >
           {__('Pagination.go')}
         </span>
@@ -649,6 +671,7 @@ export class Pagination extends React.Component<
           });
           this.handlePageNumChange(1, p.value);
         }}
+        {...testIdBuilder?.getChild('perpage').getTestId()}
       />
     );
     // total或者lastpage不存在，不渲染总数
@@ -667,6 +690,7 @@ export class Pagination extends React.Component<
           {disabled: disabled},
           className
         )}
+        {...testIdBuilder?.getTestId()}
       >
         {layoutList.map(layoutItem => {
           if (layoutItem === PaginationWidget.Pager) {

diff --git a/packages/amis-ui/src/components/SearchBox.tsx b/packages/amis-ui/src/components/SearchBox.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import isInteger from 'lodash/isInteger';
 import debounce from 'lodash/debounce';
 import moment from 'moment';
-import {ThemeProps, themeable} from 'amis-core';
+import {TestIdBuilder, ThemeProps, themeable} from 'amis-core';
 import {Icon} from './icons';
 import {uncontrollable} from 'amis-core';
 import {autobind} from 'amis-core';
@@ -56,6 +56,7 @@ export interface SearchBoxProps
   history?: SearchHistoryOptions;
   clearAndSubmit?: boolean;
   loading?: boolean;
+  testIdBuilder?: TestIdBuilder;
 }
 
 export interface SearchBoxState {
@@ -297,7 +298,8 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
       mobileUI,
       translate: __,
       loading,
-      loadingConfig
+      loadingConfig,
+      testIdBuilder
     } = this.props;
     const {isFocused, inputValue} = this.state;
     const {enable} = this.getHistoryOptions();
@@ -315,6 +317,7 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
           {'is-mobile': mobileUI}
         )}
         style={style}
+        {...testIdBuilder?.getTestId()}
       >
         <Input
           name={name}
@@ -327,10 +330,15 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
           onBlur={this.handleBlur}
           onChange={this.handleChange}
           onKeyDown={this.handleKeyDown}
+          testIdBuilder={testIdBuilder?.getChild('input')}
         />
 
         {!mini && clearable && inputValue && !disabled ? (
-          <div className={cx('SearchBox-clearable')} onClick={this.handleClear}>
+          <div
+            className={cx('SearchBox-clearable')}
+            onClick={this.handleClear}
+            {...testIdBuilder?.getChild('clear').getTestId()}
+          >
             <Icon icon="input-clear" className="icon" />
           </div>
         ) : null}

diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
@@ -1060,7 +1060,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       }
 
       let label = labelToString(item[labelField]);
-      let optTestIdBudr = testIdBuilder?.getChild('option');
+      let optTestIdBudr = testIdBuilder?.getChild(`option-${index}`);
 
       return (
         <div