AD-200 Add Element IDs for Test Automation Enhancement

adyenv6b2ccheckoutaddonv2/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/common/AddressForm.tsx

@@ -22,34 +22,43 @@ export class AddressForm extends React.Component<Props, any> {
 
     render() {
         return <>
-            <InputDropdown values={this.props.addressConfig.countries} fieldName={"COUNTRY/REGION"}
-                           onChange={this.props.onCountryCodeChange}
+            <InputDropdown testId={"address.country"}
+                           values={this.props.addressConfig.countries} fieldName={"COUNTRY/REGION"}
+                           onChange={(countryCode) => this.props.onCountryCodeChange(countryCode)}
                            selectedValue={this.props.address.countryCode}
                            placeholderText={"Country/Region"} placeholderDisabled={true}/>
-            <InputDropdown values={this.props.addressConfig.titles} fieldName={"Title"}
-                           onChange={this.props.onTitleCodeChange}
+            <InputDropdown testId={"address.title"}
+                           values={this.props.addressConfig.titles} fieldName={"Title"}
+                           onChange={(titleCode) => this.props.onTitleCodeChange(titleCode)}
                            selectedValue={this.props.address.titleCode}
                            placeholderText={"None"}/>
-            <InputText fieldName={"First name"}
-                       onChange={this.props.onFirstNameChange}
+            <InputText testId={"address.firstName"}
+                       fieldName={"First name"}
+                       onChange={(firstName) => this.props.onFirstNameChange(firstName)}
                        value={this.props.address.firstName}/>
-            <InputText fieldName={"Last name"}
-                       onChange={this.props.onLastNameChange}
+            <InputText testId={"address.surname"}
+                       fieldName={"Last name"}
+                       onChange={(lastName) => this.props.onLastNameChange(lastName)}
                        value={this.props.address.lastName}/>
-            <InputText fieldName={"ADDRESS LINE 1"}
-                       onChange={this.props.onLine1Change}
+            <InputText testId={"address.line1"}
+                       fieldName={"ADDRESS LINE 1"}
+                       onChange={(line1) => this.props.onLine1Change(line1)}
                        value={this.props.address.line1}/>
-            <InputText fieldName={"ADDRESS LINE 2 (OPTIONAL)"}
-                       onChange={this.props.onLine2Change}
+            <InputText testId={"address.line2"}
+                       fieldName={"ADDRESS LINE 2 (OPTIONAL)"}
+                       onChange={(line2) => this.props.onLine2Change(line2)}
                        value={this.props.address.line2}/>
-            <InputText fieldName={"CITY"}
-                       onChange={this.props.onCityChange}
+            <InputText testId={"address.townCity"}
+                       fieldName={"CITY"}
+                       onChange={(city) => this.props.onCityChange(city)}
                        value={this.props.address.city}/>
-            <InputText fieldName={"POST CODE"}
-                       onChange={this.props.onPostCodeChange}
+            <InputText testId={"address.postcode"}
+                       fieldName={"POST CODE"}
+                       onChange={(postCode) => this.props.onPostCodeChange(postCode)}
                        value={this.props.address.postalCode}/>
-            <InputText fieldName={"PHONE NUMBER"}
-                       onChange={this.props.onPhoneNumberChange}
+            <InputText testId={"address.phone"}
+                       fieldName={"PHONE NUMBER"}
+                       onChange={(phoneNumber) => this.props.onPhoneNumberChange(phoneNumber)}
                        value={this.props.address.phoneNumber}/>
         </>;
     }

adyenv6b2ccheckoutaddonv2/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputCheckbox.tsx

@@ -1,22 +1,35 @@
 import React from "react";
+import {isNotEmpty} from "../../util/stringUtil";
 
 
 interface InputCheckboxProps {
+    testId?: string
     fieldName: string
     checked?: boolean
     onChange?: (value: boolean) => void
 }
 
 export class InputCheckbox extends React.Component<InputCheckboxProps, null> {
 
+    private renderInput(): React.JSX.Element {
+        if (isNotEmpty(this.props.testId)) {
+            return <input id={this.props.testId}
+                          className={"form-group_checkbox_label_input"} type={"checkbox"}
+                          onChange={(event) => this.props.onChange ? this.props.onChange(event.target.checked) : ""}
+                          checked={this.props.checked}/>
+        }
+        return <input className={"form-group_checkbox_label_input"} type={"checkbox"}
+                      onChange={(event) => this.props.onChange ? this.props.onChange(event.target.checked) : ""}
+                      checked={this.props.checked}/>
+
+    }
+
     render() {
         return (
             <div className={"form-group"}>
                 <div className={"checkbox"}>
                     <label className={"form-group_checkbox_label"}>
-                        <input className={"form-group_checkbox_label_input"} type={"checkbox"}
-                               onChange={(event) => this.props.onChange ? this.props.onChange(event.target.checked) : ""}
-                               checked={this.props.checked}/>
+                        {this.renderInput()}
                         {this.props.fieldName}
                     </label>
                 </div>

adyenv6b2ccheckoutaddonv2/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputDropdown.tsx

@@ -3,6 +3,7 @@ import {CodeValueItem} from "../../reducers/types";
 import {isNotEmpty} from "../../util/stringUtil";
 
 interface InputDropdownProps {
+    testId?: string
     values: CodeValueItem[]
     fieldName?: string
     selectedValue?: string
@@ -13,6 +14,26 @@ interface InputDropdownProps {
 
 export class InputDropdown extends React.Component<InputDropdownProps, null> {
 
+    private renderInput(): React.JSX.Element {
+        if (isNotEmpty(this.props.testId)) {
+            return <select id={this.props.testId}
+                           className={"form-input_input form-control"}
+                           onChange={(event) => this.props.onChange(event.target.value)}
+                           value={this.props.selectedValue}>
+                {
+                    this.renderOptions()
+                }
+            </select>
+        }
+        return <select className={"form-input_input form-control"}
+                       onChange={(event) => this.props.onChange(event.target.value)} value={this.props.selectedValue}>
+            {
+                this.renderOptions()
+            }
+        </select>
+
+    }
+
     private renderOptions(): React.JSX.Element[] {
         let result: React.JSX.Element[] = []
 
@@ -41,12 +62,7 @@ export class InputDropdown extends React.Component<InputDropdownProps, null> {
         return (
             <div className={"form-group"}>
                 {this.renderLabel()}
-                <select className={"form-input_input form-control"}
-                        onChange={(event) => this.props.onChange(event.target.value)} value={this.props.selectedValue}>
-                    {
-                        this.renderOptions()
-                    }
-                </select>
+                {this.renderInput()}
             </div>
         )
     }

adyenv6b2ccheckoutaddonv2/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputText.tsx

@@ -1,20 +1,33 @@
 import React from "react";
+import {isNotEmpty} from "../../util/stringUtil";
 
 
 interface InputTextProps {
+    testId?: string
     fieldName: string
     value?: string
     onChange: (value: string) => void
 }
 
 export class InputText extends React.Component<InputTextProps, null> {
 
+    private renderInput(): React.JSX.Element {
+        if (isNotEmpty(this.props.testId)) {
+            return <input id={this.props.testId}
+                          className={"form-input_input form-control"} type={"text"}
+                          onChange={(event) => this.props.onChange(event.target.value)} value={this.props.value}/>
+        }
+
+        return <input className={"form-input_input form-control"} type={"text"}
+                      onChange={(event) => this.props.onChange(event.target.value)} value={this.props.value}/>
+
+    }
+
     render() {
         return (
             <div className={"form-group"}>
                 <label className={"form-input_name control-label"}>{this.props.fieldName}</label>
-                <input className={"form-input_input form-control"} type={"text"}
-                       onChange={(event) => this.props.onChange(event.target.value)} value={this.props.value} />
+                {this.renderInput()}
             </div>
         )
     }

adyenv6b2ccheckoutaddonv2/acceleratoraddon/web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/shipping-method/ShippingMethod.tsx

@@ -76,15 +76,17 @@ class ShippingMethod extends React.Component<Props, State> {
                         <hr/>
                         <div className={"checkout-indent"}>
                             <div className={"headline"}>Shipment Method</div>
-                            <InputDropdown values={this.getDropdownItems()}
+                            <InputDropdown testId={"delivery_method"}
+                                           values={this.getDropdownItems()}
                                            onChange={(code) => {
-                                               this.onShippingMethodChange(code)
+                                               this.props.setShippingMethod(code)
                                            }}
                                            selectedValue={this.props.selectedShippingMethodCode}/>
                         </div>
                         <p>{HTMLReactParser("Items will ship as soon as they are available. <br> See Order Summary for more information.")}</p>
                     </div>
-                    <button className={"btn btn-primary btn-block checkout-next"}
+                    <button id="deliveryMethodSubmit"
+                            className={"btn btn-primary btn-block checkout-next"}
                             onClick={() => this.handleSubmitButton()}>NEXT
                     </button>
                 </div>