adding test ids for ppcp payment gateway (#13)

* adding test ids for ppcp payment gateway
bold-commerce · Dec 14, 2023 · 9383cf1 · 9383cf1
1 parent 3943872
commit 9383cf1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "*.{js,jsx,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "dependencies": {
-    "@boldcommerce/checkout-frontend-library": "0.53.0",
+    "@boldcommerce/checkout-frontend-library": "0.53.1",
     "@paypal/paypal-js": "^7.0.1",
     "@types/applepayjs": "^3.0.4",
     "@types/googlepay": "^0.6.4"

diff --git a/src/paypal/ppcp_apple/createPPCPApple.ts b/src/paypal/ppcp_apple/createPPCPApple.ts
@@ -9,11 +9,13 @@ export function createPPCPApple(): void {
         const ppcpAppleDiv = document.createElement('div');
         ppcpAppleDiv.id = 'ppcp-apple-express-payment';
         ppcpAppleDiv.className = 'ppcp-apple-express-payment';
+        ppcpAppleDiv.dataset.testid = 'ppcp-apple-express-payment';
 
         const button = document.createElement('button');
         button.className = 'ppcp-apple-pay-button';
         button.id = 'ppcp-apple-pay-button';
         button.type = 'button';
+        button.dataset.testid = 'ppcp-apple-pay-button';
         button.addEventListener('click', ppcpOnClickApple);
         ppcpAppleDiv.appendChild(button);
 
@@ -25,4 +27,4 @@ export function createPPCPApple(): void {
         container.appendChild(ppcpAppleDiv);
     }
     enableDisableSection( showPaymentMethodTypes.PPCP_APPLE, true);
-}
+}
diff --git a/src/paypal/ppcp_buttons/ppcpOnLoad.ts b/src/paypal/ppcp_buttons/ppcpOnLoad.ts
@@ -15,11 +15,23 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
 
     let enableSection = false;
 
+    const paypalButtonDiv = document.createElement('div');
+    const paypalButtonDivId = 'ppcp-paypal-express-payment-button';
+    paypalButtonDiv.id = paypalButtonDivId;
+    paypalButtonDiv.dataset.testid = paypalButtonDivId;
+
+    const payLaterButtonDiv = document.createElement('div');
+    const payLaterButtonDivId = 'ppcp-paylater-express-payment-button';
+    payLaterButtonDiv.id = payLaterButtonDivId;
+    payLaterButtonDiv.dataset.testid = payLaterButtonDivId;
+
     // creating a paypal payment div inside express payment container
     const paypalDiv = document.createElement('div');
     const paypalDivId = 'ppcp-express-payment';
     paypalDiv.id = paypalDivId;
     paypalDiv.className = `${paypalDivId}`;
+    paypalDiv.appendChild(paypalButtonDiv);
+    paypalDiv.appendChild(payLaterButtonDiv);
     const container = document.getElementById('express-payment-container');
     container?.appendChild(paypalDiv);
 
@@ -48,12 +60,12 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
 
         if(container) {
             if (paypalButton.isEligible()) {
-                await paypalButton.render(`#${paypalDivId}`);
+                await paypalButton.render(`#${paypalButtonDivId}`);
                 enableSection = true;
             }
 
             if (payLaterButton.isEligible()) {
-                await payLaterButton.render(`#${paypalDivId}`);
+                await payLaterButton.render(`#${payLaterButtonDivId}`);
                 enableSection = true;
             }
 

diff --git a/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts b/tests/paypal/ppcp_buttons/ppcpOnLoad.test.ts
@@ -91,7 +91,8 @@ describe('testing ppcpOnload function', () => {
         expect(document.getElementById('ppcp-express-payment')?.style.display).toBe('');
         expect(paypalButtonIsEligibleMock).toHaveBeenCalledTimes(2);
         expect(paypalButtonRenderMock).toHaveBeenCalledTimes(2);
-        expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-express-payment');
+        expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-paypal-express-payment-button');
+        expect(paypalButtonRenderMock).toHaveBeenCalledWith('#ppcp-paylater-express-payment-button');
         expect(enableDisableSectionMock).toHaveBeenCalledTimes(1);
         expect(enableDisableSectionMock).toHaveBeenCalledWith(showPaymentMethodTypes.PPCP, true);
     });

diff --git a/yarn.lock b/yarn.lock
@@ -302,10 +302,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@boldcommerce/checkout-frontend-library@0.53.0":
-  version "0.53.0"
-  resolved "https://registry.yarnpkg.com/@boldcommerce/checkout-frontend-library/-/checkout-frontend-library-0.53.0.tgz#b72c7b32c4bb95eb3c07010b5f0957c26082c929"
-  integrity sha512-bikr6wTgJOnvumNWrBd9JuvLRrpcj9ZqjSJZMsRmvqVp07posPOVA0GElywFLWo1CP+FrwsrkrM8nmPH3aMLZw==
+"@boldcommerce/checkout-frontend-library@0.53.1":
+  version "0.53.1"
+  resolved "https://registry.yarnpkg.com/@boldcommerce/checkout-frontend-library/-/checkout-frontend-library-0.53.1.tgz#44d03ff801d050a70331d88e4a304c66093bf0f9"
+  integrity sha512-PW7klLttjqz9b+sDpr0U2jz/5uuyK87G30b8HsFbjVRgkQZD736OcCoG9DqTZtr9Yq8Bphp1vgYDCFPnO3dIDQ==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"