From 80bfc9874e1ab62003ca5d5154e20459fca44da9 Mon Sep 17 00:00:00 2001 From: Ivo Kovachev Date: Mon, 22 Apr 2024 17:15:05 +0300 Subject: [PATCH 1/2] fix: APEX-3038: add ids to login screen inputs and button of PAP --- components/Form/index.js | 1 + components/FormInput/index.js | 4 +++- components/StandardButton/index.js | 3 ++- containers/LoginForm/config.js | 2 ++ containers/LoginForm/index.js | 2 +- 5 files changed, 9 insertions(+), 3 deletions(-) diff --git a/components/Form/index.js b/components/Form/index.js index 41abe7fc..014e7a99 100644 --- a/components/Form/index.js +++ b/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' + id={input.get('id')} hidden={input.get('hidden')} disabled={input.get('disabled')} type={input.get('type')} diff --git a/components/FormInput/index.js b/components/FormInput/index.js index 837af2c9..cbc4c7af 100644 --- a/components/FormInput/index.js +++ b/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, id, 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} + id={id} 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, diff --git a/components/StandardButton/index.js b/components/StandardButton/index.js index a800bc6b..3932ee76 100644 --- a/components/StandardButton/index.js +++ b/components/StandardButton/index.js @@ -13,6 +13,7 @@ const getClassInternal = (className) => { const Button = ({ type, label, + id, icon, onClick, className, @@ -36,7 +37,7 @@ const Button = ({ disabledClass = Array.isArray(disabledClassName) ? disabledClassName.map(getClassInternal) : getClassInternal(disabledClassName); } const button = ( - diff --git a/containers/LoginForm/config.js b/containers/LoginForm/config.js index d257a5f4..05de0a94 100644 --- a/containers/LoginForm/config.js +++ b/containers/LoginForm/config.js @@ -3,6 +3,7 @@ export const inputs = { name: 'username', type: 'text', label: 'Username', + id: 'ut-login-username', value: '', error: '', validateOrder: ['isRequired', 'minLength', 'maxLength'], @@ -16,6 +17,7 @@ export const inputs = { name: 'password', type: 'password', label: 'Password', + id: 'ut-login-password', value: '', error: '', validateOrder: ['isRequired'], diff --git a/containers/LoginForm/index.js b/containers/LoginForm/index.js index 0ae9f780..02ff1205 100644 --- a/containers/LoginForm/index.js +++ b/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={[{id: 'ut-login-submit-button', label: buttonLabel, className: 'standardBtn loginBtn', type: 'submit'}]} onChange={this.onChange} onSubmit={this.validateForm} error={error} From 29595aa41c9407d7bda51362fb4346cd6f61d3c5 Mon Sep 17 00:00:00 2001 From: Ivo Kovachev Date: Tue, 23 Apr 2024 10:13:07 +0300 Subject: [PATCH 2/2] fix: APEX-3038: fix some issues --- components/Form/index.js | 2 +- components/FormInput/index.js | 4 ++-- components/StandardButton/index.js | 4 ++-- containers/LoginForm/config.js | 4 ++-- containers/LoginForm/index.js | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/Form/index.js b/components/Form/index.js index 014e7a99..8b2406b8 100644 --- a/components/Form/index.js +++ b/components/Form/index.js @@ -31,7 +31,7 @@ export default class Form extends Component { key={index} ref={(c) => { this[input.get('name')] = c; }} className='loginInput' - id={input.get('id')} + data-testid={input.get('data-testid')} hidden={input.get('hidden')} disabled={input.get('disabled')} type={input.get('type')} diff --git a/components/FormInput/index.js b/components/FormInput/index.js index cbc4c7af..f5d2b914 100644 --- a/components/FormInput/index.js +++ b/components/FormInput/index.js @@ -15,7 +15,7 @@ export default class FormInput extends Component { } render() { - const { type, label, name, id, 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,7 +25,7 @@ export default class FormInput extends Component { disabled={disabled} name={name} type={type} - id={id} + data-testid={dataTestId} data-hidden={!!hidden} placeholder={placeholder} accept={acceptType} diff --git a/components/StandardButton/index.js b/components/StandardButton/index.js index 3932ee76..740f6d29 100644 --- a/components/StandardButton/index.js +++ b/components/StandardButton/index.js @@ -13,7 +13,7 @@ const getClassInternal = (className) => { const Button = ({ type, label, - id, + 'data-testid': dataTestId, icon, onClick, className, @@ -37,7 +37,7 @@ const Button = ({ disabledClass = Array.isArray(disabledClassName) ? disabledClassName.map(getClassInternal) : getClassInternal(disabledClassName); } const button = ( - diff --git a/containers/LoginForm/config.js b/containers/LoginForm/config.js index 05de0a94..84020a7d 100644 --- a/containers/LoginForm/config.js +++ b/containers/LoginForm/config.js @@ -3,7 +3,7 @@ export const inputs = { name: 'username', type: 'text', label: 'Username', - id: 'ut-login-username', + 'data-testid': 'ut-login-username', value: '', error: '', validateOrder: ['isRequired', 'minLength', 'maxLength'], @@ -17,7 +17,7 @@ export const inputs = { name: 'password', type: 'password', label: 'Password', - id: 'ut-login-password', + 'data-testid': 'ut-login-password', value: '', error: '', validateOrder: ['isRequired'], diff --git a/containers/LoginForm/index.js b/containers/LoginForm/index.js index 02ff1205..0cfdd1e3 100644 --- a/containers/LoginForm/index.js +++ b/containers/LoginForm/index.js @@ -121,7 +121,7 @@ class LoginForm extends Component { className='loginForm' inputs={inputs} title={{className: 'loginTitle' + (error ? ' error' : ''), text: title}} - buttons={[{id: 'ut-login-submit-button', 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}