AD-200 Added testId props for React elements. Added names of ids.

Adyen · Feb 20, 2024 · 7261a94 · 7261a94
1 parent 22255fb
commit 7261a94
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 24 deletions.
diff --git a/...webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputCheckbox.tsx b/...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>

diff --git a/...webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputDropdown.tsx b/...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>
         )
     }

diff --git a/...web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputText.tsx b/...web/webroot/_ui/responsive/common/js/adyen-checkout/src/components/controls/InputText.tsx
@@ -1,21 +1,34 @@
 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} />
-            </div>
+                {this.renderInput()}
+             </div>
         )
     }
 }
diff --git a/...i/responsive/common/js/adyen-checkout/src/components/shipping-address/ShippingAddress.tsx b/...i/responsive/common/js/adyen-checkout/src/components/shipping-address/ShippingAddress.tsx
@@ -118,39 +118,49 @@ class ShippingAddress extends React.Component<ShippingAddressProps, ShippingAddr
                             <div className={"shippingAddress_form_header headline"}>Shipping Address</div>
                             {this.renderAddressBookButton()}
                             <br/>
-                            <InputDropdown values={this.props.addressConfig.countries} fieldName={"COUNTRY/REGION"}
+                            <InputDropdown testId={"address.country"}
+                                           values={this.props.addressConfig.countries} fieldName={"COUNTRY/REGION"}
                                            onChange={(countryCode) => this.props.setCountryCode(countryCode)}
                                            selectedValue={this.props.shippingAddress.countryCode}
                                            placeholderText={"Country/Region"} placeholderDisabled={true}/>
-                            <InputDropdown values={this.props.addressConfig.titles} fieldName={"Title"}
+                            <InputDropdown testId={"address.title"}
+                                           values={this.props.addressConfig.titles} fieldName={"Title"}
                                            onChange={(titleCode) => this.props.setTitleCode(titleCode)}
                                            selectedValue={this.props.shippingAddress.titleCode}
                                            placeholderText={"None"}/>
-                            <InputText fieldName={"First name"}
+                            <InputText testId={"address.firstName"}
+                                       fieldName={"First name"}
                                        onChange={(firstName) => this.props.setFirstName(firstName)}
                                        value={this.props.shippingAddress.firstName}/>
-                            <InputText fieldName={"Last name"}
+                            <InputText testId={"address.surname"}
+                                       fieldName={"Last name"}
                                        onChange={(lastName) => this.props.setLastName(lastName)}
                                        value={this.props.shippingAddress.lastName}/>
-                            <InputText fieldName={"ADDRESS LINE 1"}
+                            <InputText testId={"address.line1"}
+                                       fieldName={"ADDRESS LINE 1"}
                                        onChange={(line1) => this.props.setLine1(line1)}
                                        value={this.props.shippingAddress.line1}/>
-                            <InputText fieldName={"ADDRESS LINE 2 (OPTIONAL)"}
+                            <InputText testId={"address.line2"}
+                                       fieldName={"ADDRESS LINE 2 (OPTIONAL)"}
                                        onChange={(line2) => this.props.setLine2(line2)}
                                        value={this.props.shippingAddress.line2}/>
-                            <InputText fieldName={"CITY"}
+                            <InputText testId={"address.townCity"}
+                                       fieldName={"CITY"}
                                        onChange={(city) => this.props.setCity(city)}
                                        value={this.props.shippingAddress.city}/>
-                            <InputText fieldName={"POST CODE"}
+                            <InputText testId={"address.postcode"}
+                                       fieldName={"POST CODE"}
                                        onChange={(postCode) => this.props.setPostCode(postCode)}
                                        value={this.props.shippingAddress.postalCode}/>
-                            <InputText fieldName={"PHONE NUMBER"}
+                            <InputText testId={"address.phone"}
+                                       fieldName={"PHONE NUMBER"}
                                        onChange={(phoneNumber) => this.props.setPhoneNumber(phoneNumber)}
                                        value={this.props.shippingAddress.phoneNumber}/>
                             {this.renderSaveAddressCheckbox()}
                         </div>
                     </div>
-                    <button className={"btn btn-primary btn-block checkout-next"}
+                    <button id="addressSubmit"
+                            className={"btn btn-primary btn-block checkout-next"}
                             onClick={() => this.handleSubmitButton()}>NEXT
                     </button>
                 </div>

diff --git a/..._ui/responsive/common/js/adyen-checkout/src/components/shipping-method/ShippingMethod.tsx b/..._ui/responsive/common/js/adyen-checkout/src/components/shipping-method/ShippingMethod.tsx
@@ -75,15 +75,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.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>