Fix/apexg 3038

components/Form/index.js

@@ -31,6 +31,7 @@ export default class Form extends Component {
                 key={index}
                 ref={(c) => { this[input.get('name')] = c; }}
                 className='loginInput'
+                data-testid={input.get('data-testid')}
                 hidden={input.get('hidden')}
                 disabled={input.get('disabled')}
                 type={input.get('type')}

components/FormInput/index.js

@@ -15,7 +15,7 @@ export default class FormInput extends Component {
     }
 
     render() {
-        const { type, label, name, value, placeholder, disabled, className, error, tabIndex, hidden, acceptType } = this.props;
+        const { type, label, name, 'data-testid': dataTestId, value, placeholder, disabled, className, error, tabIndex, hidden, acceptType } = this.props;
         const { onBlur, onChange } = this.props;
         const inputClassName = className + (disabled ? ' disabled' : '') + (value ? ' hasValue' : '') + (error ? ' hasError' : '') + (hidden ? ' hidden' : '');
 
@@ -25,6 +25,7 @@ export default class FormInput extends Component {
                     disabled={disabled}
                     name={name}
                     type={type}
+                    data-testid={dataTestId}
                     data-hidden={!!hidden}
                     placeholder={placeholder}
                     accept={acceptType}
@@ -49,6 +50,7 @@ FormInput.propTypes = {
     value: PropTypes.string,
     name: PropTypes.string,
     label: PropTypes.string,
+    id: PropTypes.string,
     disabled: PropTypes.bool,
     hidden: PropTypes.bool,
     placeholder: PropTypes.string,

components/StandardButton/index.js

@@ -13,6 +13,7 @@ const getClassInternal = (className) => {
 const Button = ({
     type,
     label,
+    'data-testid': dataTestId,
     icon,
     onClick,
     className,
@@ -36,7 +37,7 @@ const Button = ({
         disabledClass = Array.isArray(disabledClassName) ? disabledClassName.map(getClassInternal) : getClassInternal(disabledClassName);
     }
     const button = (
-        <button disabled={disabled} type={type} className={classNames(cssClass, disabledClass)} onClick={onClick}>
+        <button data-testid ={dataTestId} disabled={disabled} type={type} className={classNames(cssClass, disabledClass)} onClick={onClick}>
             {icon && <span className={icon} />}
             <Text>{label}</Text>
         </button>

containers/LoginForm/config.js

@@ -3,6 +3,7 @@ export const inputs = {
         name: 'username',
         type: 'text',
         label: 'Username',
+        'data-testid': 'ut-login-username',
         value: '',
         error: '',
         validateOrder: ['isRequired', 'minLength', 'maxLength'],
@@ -16,6 +17,7 @@ export const inputs = {
         name: 'password',
         type: 'password',
         label: 'Password',
+        'data-testid': 'ut-login-password',
         value: '',
         error: '',
         validateOrder: ['isRequired'],

containers/LoginForm/index.js

@@ -121,7 +121,7 @@ class LoginForm extends Component {
                 className='loginForm'
                 inputs={inputs}
                 title={{className: 'loginTitle' + (error ? ' error' : ''), text: title}}
-                buttons={[{label: buttonLabel, className: 'standardBtn loginBtn', type: 'submit'}]}
+                buttons={[{'data-testid': 'ut-login-submit-button', label: buttonLabel, className: 'standardBtn loginBtn', type: 'submit'}]}
                 onChange={this.onChange}
                 onSubmit={this.validateForm}
                 error={error}