Unit tests for amazon pay express and apple pay express (#1082)

Author: zenit2001

src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen_checkout/__tests__/amazonPayExpressPart2.test.js

@@ -4,7 +4,7 @@
 
 let select;
 let data;
-const saveShopperDetails = require('../../amazonPayExpressPart2');
+const {saveShopperDetails, constructAddress, wrapChangeAddressButton, showAddressDetails} = require('../../amazonPayExpressPart2');
 
 beforeEach(async () => {
   document.body.innerHTML = `
@@ -38,4 +38,68 @@ describe('AmazonPay Express', () => {
         select.innerHTML.includes('EUR002'),
     );
   });
+
+  it('Should construct address correctly', () => {
+    const shopperDetails = {
+      shippingAddress: {
+        name: 'John Doe',
+        street: '123 Main St',
+        city: 'Anytown',
+        country: 'USA'
+      },
+      paymentDescriptor: 'Visa ending in 1234'
+    };
+    const expectedAddress = "John Doe\n123 Main St Anytown USA ";
+    expect(constructAddress(shopperDetails)).toBe(expectedAddress);
+  });
+
+  it('Should wrap change address button', () => {
+    document.body.innerHTML = `
+      <button class="adyen-checkout__button adyen-checkout__button--ghost adyen-checkout__amazonpay__button--changeAddress"></button>
+      <button class="editAddressBtn"></button>
+    `;
+    wrapChangeAddressButton();
+    const changeDetailsBtn = document.querySelector('.adyen-checkout__button.adyen-checkout__button--ghost.adyen-checkout__amazonpay__button--changeAddress');
+    const editAddressBtn = document.querySelector('.editAddressBtn');
+    editAddressBtn.click();
+    expect(changeDetailsBtn.classList.contains('invisible')).toBe(true);
+  });  
+
+  it('Should show address details', () => {
+	document.body.innerHTML = `
+	  <div id="address"></div>
+	  <div id="paymentStr"></div>
+	  <div id="amazon-container"></div>
+	  <select id="shippingMethods">
+		<option> Child #1 </option> 
+		<option> Child #2 </option>  
+	  </select>
+	  <div class="coupons-and-promos"></div>
+	  <button class="adyen-checkout__button adyen-checkout__button--standalone adyen-checkout__button--pay"></button>
+	  <button class="adyen-checkout__button adyen-checkout__button--ghost adyen-checkout__amazonpay__button--changeAddress"></button>
+	  <div id="amazonPayAddressDetails">
+	  	<div> Child #1 </div> 
+	  </div>
+	`;
+  
+	const shopperDetails = {
+	  shippingAddress: {
+		name: 'John Doe',
+		street: '123 Main St',
+		city: 'Anytown',
+		country: 'USA'
+	  },
+	  paymentDescriptor: 'Visa ending in 1234'
+	};
+  
+	showAddressDetails(shopperDetails);
+  
+	const addressElement = document.getElementById('address');
+	const paymentDescriptorElement = document.getElementById('paymentStr');
+	const payBtn = document.querySelector('.adyen-checkout__button.adyen-checkout__button--standalone.adyen-checkout__button--pay');
+  
+	expect(addressElement.innerText).toBe("John Doe\n123 Main St Anytown USA ");
+	expect(paymentDescriptorElement.innerText).toBe('Visa ending in 1234');
+	expect(payBtn.style.background).toBe('rgb(0, 161, 224)');
+  });
 });

src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen_checkout/__tests__/applePayExpress.test.js

@@ -7,8 +7,10 @@ const {
   handleError,
   handleApplePayResponse,
   callPaymentFromComponent,
+  formatCustomerObject,
 } = require('../../applePayExpress');
 
+
 beforeEach(() => {
   jest.clearAllMocks();
 
@@ -97,4 +99,69 @@ describe('Apple Pay Express', () => {
       JSON.stringify(response.fullResponse),
     );
   });
+
+  it('Should format customer and billing data correctly', () => {
+    const customerData = {
+      addressLines: ['123 Main St', 'Apt 2'],
+      locality: 'City',
+      country: 'United States',
+      countryCode: 'US',
+      givenName: 'John',
+      familyName: 'Doe',
+      emailAddress: 'john@example.com',
+      postalCode: '12345',
+      administrativeArea: 'State',
+      phoneNumber: '+1234567890',
+    };
+    const billingData = {
+      addressLines: ['456 Oak St'],
+      locality: 'Town',
+      country: 'United States',
+      countryCode: 'US',
+      givenName: 'Jane',
+      familyName: 'Doe',
+      postalCode: '54321',
+      administrativeArea: 'Province',
+    };
+    const formattedData = formatCustomerObject(customerData, billingData);
+    expect(formattedData).toEqual({
+      addressBook: {
+        addresses: {},
+        preferredAddress: {
+          address1: '123 Main St',
+          address2: 'Apt 2',
+          city: 'City',
+          countryCode: {
+            displayValue: 'United States',
+            value: 'US',
+          },
+          firstName: 'John',
+          lastName: 'Doe',
+          ID: 'john@example.com',
+          postalCode: '12345',
+          stateCode: 'State',
+        },
+      },
+      billingAddressDetails: {
+        address1: '456 Oak St',
+        address2: null,
+        city: 'Town',
+        countryCode: {
+          displayValue: 'United States',
+          value: 'US',
+        },
+        firstName: 'Jane',
+        lastName: 'Doe',
+        postalCode: '54321',
+        stateCode: 'Province',
+      },
+      customer: {},
+      profile: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'john@example.com',
+        phone: '+1234567890',
+      },
+    });
+  });
 });

src/cartridges/app_adyen_SFRA/cartridge/client/default/js/amazonPayExpressPart2.js

@@ -35,10 +35,12 @@ function constructAddress(shopperDetails) {
   return addressStr;
 }
 
-function positionElementBefore(elm) {
-  const addressDetails = document.querySelector('#amazonPayAddressDetails');
-  const containerNode = addressDetails.parentNode.parentNode.parentNode;
-  containerNode.insertBefore(addressDetails, document.querySelector(elm));
+function positionElementBefore(elm, target) {
+  const targetNode = document.querySelector(target);
+  const addressDetails = document.querySelector(elm);
+  if (targetNode && addressDetails) {
+    targetNode.parentNode.insertBefore(addressDetails, targetNode);
+  }
 }
 
 function wrapChangeAddressButton() {
@@ -63,7 +65,7 @@ function showAddressDetails(shopperDetails) {
   addressElement.innerText = addressText;
   paymentDiscriptorElement.innerText = shopperDetails.paymentDescriptor;
 
-  positionElementBefore('.coupons-and-promos');
+  positionElementBefore('#amazonPayAddressDetails', '.coupons-and-promos');
 
   wrapChangeAddressButton();
 
@@ -117,4 +119,10 @@ async function mountAmazonPayComponent() {
 
 mountAmazonPayComponent();
 
-module.exports = saveShopperDetails;
+module.exports = {
+  saveShopperDetails,
+  constructAddress,
+  positionElementBefore,
+  wrapChangeAddressButton,
+  showAddressDetails,
+};

src/cartridges/app_adyen_SFRA/cartridge/client/default/js/applePayExpress.js

@@ -307,4 +307,5 @@ module.exports = {
   handleError,
   handleApplePayResponse,
   callPaymentFromComponent,
+  formatCustomerObject,
 };