Add testing identifier to elements

tdrive/frontend/src/app/components/buttons/button-with-timeout.jsx

@@ -62,6 +62,7 @@ export default class ButtonWithTimeout extends React.Component {
             (this.props.className ? this.props.className : '')
           }
           onClick={this.props.onClick}
+          testClassId={this.props.testClassId}
         >
           {this.props.value}
         </Button>

tdrive/frontend/src/app/components/buttons/button.jsx

@@ -27,7 +27,7 @@ export default class Button extends React.Component {
       <button
         ref={this.props.refButton}
         {...this.props}
-        className={'button no-tw ' + className}
+        className={'button no-tw ' + className + ` testid:${this.props.testClassId}`}
         onClick={evt => {
           evt.target.blur();
           this.props.onClick && this.props.onClick(evt);

tdrive/frontend/src/app/components/inputs/input.jsx

@@ -76,7 +76,7 @@ export default class Input extends Component {
           }
           this.onKeyDown(evt);
         }}
-        className={'input ' + (className || '')}
+        className={'input ' + (className || '') + ` testid:${this.props.testClassId}`}
         onBlur={this.props.onBlur}
         onChange={this.props.onChange}
       />

tdrive/frontend/src/app/components/menus/menu-component.jsx

@@ -57,7 +57,8 @@ export default class MenuComponent extends React.Component {
       <div
         ref={node => (this.original_menu = node)}
         className={
-          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass
+          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass + ' ' +
+          `testid:${this.props.testClassId}`
         }
       >
         {(this.props.menu || [])

tdrive/frontend/src/app/components/menus/menu.jsx

@@ -63,6 +63,8 @@ export default class Menu extends React.Component {
         this.props.menu,
         elementRect,
         this.props.position,
+        {},
+        this.props.testClassId
       );
       this.setState({ isMenuOpen: true }, () => this.open = true);
       this.open = true;

tdrive/frontend/src/app/components/menus/menus-body-layer.jsx

@@ -210,6 +210,7 @@ export default class MenusBodyLayer extends React.Component {
                           : 'skew_in_right_nobounce'
                         : 'fade_in'
                     }
+                    testClassId={item.dataMenuId}
                   />
                 </div>
               </OutsideClickHandler>

tdrive/frontend/src/app/components/menus/menus-manager.jsx

@@ -57,7 +57,7 @@ class MenusManager extends Observable {
 
     this.notify();
   }
-  async openMenu(menu, domRect, positionType, options) {
+  async openMenu(menu, domRect, positionType, options, dataMenuId) {
     this.isOpen = 1;
     if(typeof menu === 'function') {
       menu = await menu();
@@ -85,6 +85,7 @@ class MenusManager extends Observable {
       level: 0,
       id: Number.unid(),
       allowClickOut: options.allowClickOut !== undefined ? options.allowClickOut : true,
+      dataMenuId,
     });
     this.last_opened_id = Number.unid();
     this.notify();

tdrive/frontend/src/app/components/uploads/upload-zone.tsx

@@ -191,7 +191,7 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
       <div
         ref={node => node && (this.node = node)}
         style={this.props.style}
-        className={classNames('upload_drop_zone', this.props.className)}
+        className={classNames('upload_drop_zone', this.props.className, `testid:${this.props.testClassId}`)}
         onClick={() => {
           if (!this.props.disableClick) {
             this.open();