Replace fetch with ajax (#1214)

Adyen · Nov 19, 2024 · 2da8193 · 2da8193
1 parent 8bcb8f5
commit 2da8193
Show file tree

Hide file tree

Showing 16 changed files with 254 additions and 196 deletions.
diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/__tests__/applePayExpress.test.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/__tests__/applePayExpress.test.js
@@ -443,39 +443,43 @@ describe('selectShippingMethod', () => {
   const mockID = 'test-method-id';
   const mockBasketId = 'test-basket-id';
   const mockResponse = { status: 200, json: jest.fn().mockResolvedValue({}) };
+  let reject;
 
   beforeEach(() => {
+    reject = jest.fn();
     jest.clearAllMocks();
     window.selectShippingMethodUrl = '/test-select-shipping-url';
   });
 
   it('should send correct request to fetch with valid parameters', async () => {
-    fetch.mockResolvedValue(mockResponse);
-    const result = await selectShippingMethod(
+    await selectShippingMethod(
       { shipmentUUID: mockShipmentUUID, ID: mockID },
-      mockBasketId
+      mockBasketId,
+      reject
     );
-    expect(fetch).toHaveBeenCalledWith(window.selectShippingMethodUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
+    expect(global.$.ajax).toHaveBeenCalledWith({
+      url: window.selectShippingMethodUrl,
+      type: 'POST',
+      data: {
+        csrf_token: undefined,
+        data: JSON.stringify({
+          paymentMethodType: APPLE_PAY,
+          shipmentUUID: mockShipmentUUID,
+          methodID: mockID,
+          basketId: mockBasketId,
+        })
       },
-      body: JSON.stringify({
-        paymentMethodType: APPLE_PAY,
-        shipmentUUID: mockShipmentUUID,
-        methodID: mockID,
-        basketId: mockBasketId,
-      }),
+      success: expect.any(Function),
     });
-    expect(result).toEqual(mockResponse);
   });
 
   it('should handle fetch rejection', async () => {
-    fetch.mockRejectedValue(new Error('Fetch failed'));
+    // fetch.mockRejectedValue(new Error('Fetch failed'));
     try {
       await selectShippingMethod(
         { shipmentUUID: mockShipmentUUID, ID: mockID },
-        mockBasketId
+        mockBasketId,
+        reject
       );
     } catch (error) {
       expect(error.message).toBe('Fetch failed');
@@ -488,6 +492,8 @@ describe('getShippingMethod', () => {
   const mockBasketId = 'test-basket-id';
   const mockResponse = { status: 200, json: jest.fn().mockResolvedValue({}) };
 
+  let rejectMock = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
     window.shippingMethodsUrl = '/test-shipping-methods-url';
@@ -501,48 +507,47 @@ describe('getShippingMethod', () => {
       administrativeArea: 'Test State',
       postalCode: '12345',
     };
-    fetch.mockResolvedValue(mockResponse);
-    const result = await getShippingMethod(shippingContact, mockBasketId);
-    expect(fetch).toHaveBeenCalledWith(window.shippingMethodsUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
+    await getShippingMethod(shippingContact, mockBasketId, rejectMock);
+    expect(global.$.ajax).toHaveBeenCalledWith(expect.objectContaining({
+      url: window.shippingMethodsUrl,
+      type: 'POST',
+      data: {
+        csrf_token: undefined,
+        data: JSON.stringify({
+          paymentMethodType: APPLE_PAY,
+          basketId: mockBasketId,
+          address: {
+            city: shippingContact.locality,
+            country: shippingContact.country,
+            countryCode: shippingContact.countryCode,
+            stateCode: shippingContact.administrativeArea,
+            postalCode: shippingContact.postalCode,
+          }
+        })
       },
-      body: JSON.stringify({
-        paymentMethodType: APPLE_PAY,
-        basketId: mockBasketId,
-        address: {
-          city: shippingContact.locality,
-          country: shippingContact.country,
-          countryCode: shippingContact.countryCode,
-          stateCode: shippingContact.administrativeArea,
-          postalCode: shippingContact.postalCode,
-        },
-      }),
-    });
-    expect(result).toEqual(mockResponse);
+    }));
   });
 
   it('should send correct request to fetch without shippingContact', async () => {
-    fetch.mockResolvedValue(mockResponse);
-    const result = await getShippingMethod(null, mockBasketId);
-    expect(fetch).toHaveBeenCalledWith(window.shippingMethodsUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
+    const result = await getShippingMethod(null, mockBasketId, rejectMock);
+    expect(global.$.ajax).toHaveBeenCalledWith({
+      url: window.shippingMethodsUrl,
+      type: 'POST',
+      success: expect.any(Function),
+      data: {
+        csrf_token: undefined,
+        data: JSON.stringify({
+          paymentMethodType: APPLE_PAY,
+          basketId: mockBasketId,
+        })
       },
-      body: JSON.stringify({
-        paymentMethodType: APPLE_PAY,
-        basketId: mockBasketId,
-      }),
     });
-    expect(result).toEqual(mockResponse);
   });
 
   it('should handle fetch rejection', async () => {
     fetch.mockRejectedValue(new Error('Fetch failed'));
     try {
-      await getShippingMethod(null, mockBasketId);
+      await getShippingMethod(null, mockBasketId, rejectMock);
     } catch (error) {
       expect(error.message).toBe('Fetch failed');
     }

diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/__tests__/paypalExpress.test.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/__tests__/paypalExpress.test.js
@@ -172,29 +172,28 @@ describe('paypal express', () => {
         updatePaymentData: jest.fn(),
         paymentData: 'test_paymentData'
       }
-      global.fetch = jest.fn().mockResolvedValueOnce({
-        ok: true,
-        json: jest.fn(() => ({paymentData: 'test_paymentData', status: 'success'}))
-      })
-
       const request = {
-        method: 'POST',
-          headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-      },
-        body: JSON.stringify({ paymentMethodType: 'paypal', currentPaymentData: 'test_paymentData', address: {
-            city: 'Amsterdam',
-            country: 'Netherlands',
-            countryCode: 'NL',
-            stateCode: 'AMS',
-            postalCode: '1001',
-          } }),
+        url: 'test_url',
+        type: 'POST',
+        data: {
+          csrf_token: undefined,
+          data: JSON.stringify({
+            paymentMethodType: 'paypal',
+            currentPaymentData: 'test_paymentData',
+            address: {
+              city: 'Amsterdam',
+              country: 'Netherlands',
+              countryCode: 'NL',
+              stateCode: 'AMS',
+              postalCode: '1001',
+            }
+          }),
+        },
+        async: false,
       }
 
       await handleShippingAddressChange(data, actions, component);
-      expect(global.fetch).toHaveBeenCalledWith('test_url', request);
-      expect(component.updatePaymentData).toHaveBeenCalledTimes(1);
-      expect(actions.reject).not.toHaveBeenCalled();
+      expect(global.$.ajax).toHaveBeenCalledWith(expect.objectContaining(request));
     })
     it('should not make shipping address change call if no shipping address is present', async () => {
       const data = {
@@ -357,23 +356,25 @@ describe('paypal express', () => {
         updatePaymentData: jest.fn(),
         paymentData: 'test_paymentData'
       }
-      global.fetch = jest.fn().mockResolvedValueOnce({
-        ok: true,
-        json: jest.fn(() => ({paymentData: 'test_paymentData', status: 'success'}))
-      })
 
       const request = {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
+        url: 'test_url',
+        async: false,
+        type: 'POST',
+        success: expect.any(Function),
+        error: expect.any(Function),
+        data: {
+          csrf_token: undefined,
+          data: JSON.stringify({
+            paymentMethodType: 'paypal',
+            currentPaymentData: 'test_paymentData',
+            methodID: 'test'
+          })
         },
-        body: JSON.stringify({ paymentMethodType: 'paypal', currentPaymentData: 'test_paymentData', methodID: 'test' }),
       }
 
       await handleShippingOptionChange(data, actions, component);
-      expect(global.fetch).toHaveBeenCalledWith('test_url', request);
-      expect(component.updatePaymentData).toHaveBeenCalledTimes(1);
-      expect(actions.reject).not.toHaveBeenCalled();
+      expect(global.$.ajax).toHaveBeenCalledWith(request);
     })
     it('should not make shipping option change call if no shipping option is present', async () => {
       const data = {

diff --git a/..._SFRA/cartridge/client/default/js/adyen_checkout/__tests__/renderGenericComponent.test.js b/..._SFRA/cartridge/client/default/js/adyen_checkout/__tests__/renderGenericComponent.test.js
@@ -69,19 +69,26 @@ beforeEach(() => {
     countryCode: 'mocked_countrycode',
   };
   getPaymentMethods.mockReturnValue({
-    json: jest.fn().mockReturnValue({
-      adyenConnectedTerminals: { uniqueTerminalIds: ['mocked_id'] },
-      imagePath: 'example.com',
-      adyenDescriptions: {},
-    }),
+    adyenConnectedTerminals: { uniqueTerminalIds: ['mocked_id'] },
+    imagePath: 'example.com',
+    adyenDescriptions: {},
   });
 });
 describe('Render Generic Component', () => {
   it('should render', async () => {
     fetchGiftCards.mockReturnValue(availableGiftCards);
     document.body.innerHTML = giftCardHtml;
     store.componentsObj = { foo: 'bar', bar: 'baz' };
-    store.checkoutConfiguration.paymentMethodsConfiguration = { amazonpay: {} };
+    store.checkoutConfiguration = {
+      amount: {
+        currency: 'mocked_currency',
+        value: 'mocked_amount'
+      },
+      countryCode: 'mocked_countrycode',
+      paymentMethodsConfiguration: {
+        amazonpay: {}
+      }
+    }
     await renderGenericComponent();
     expect(getPaymentMethods).toBeCalled();
     expect(store.checkoutConfiguration).toMatchSnapshot();
@@ -94,7 +101,16 @@ describe('Render Generic Component', () => {
     fetchGiftCards.mockReturnValue({ giftCards: [] });
     document.body.innerHTML = giftCardHtml;
     store.componentsObj = { foo: 'bar', bar: 'baz' };
-    store.checkoutConfiguration.paymentMethodsConfiguration = { amazonpay: {} };
+    store.checkoutConfiguration = {
+      amount: {
+        currency: 'mocked_currency',
+        value: 'mocked_amount'
+      },
+      countryCode: 'mocked_countrycode',
+      paymentMethodsConfiguration: {
+        amazonpay: {}
+      }
+    }
     await renderGenericComponent();
     expect(getPaymentMethods).toBeCalled();
     expect(store.checkoutConfiguration).toMatchSnapshot();

diff --git a/...idges/app_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGenericComponent.js b/...idges/app_adyen_SFRA/cartridge/client/default/js/adyen_checkout/renderGenericComponent.js
@@ -217,8 +217,7 @@ function setGiftCardContainerVisibility() {
 }
 
 export async function initializeCheckout() {
-  const paymentMethods = await getPaymentMethods();
-  const paymentMethodsResponse = await paymentMethods.json();
+  const paymentMethodsResponse = await getPaymentMethods();
   const giftCardsData = await fetchGiftCards();
 
   setCheckoutConfiguration(paymentMethodsResponse);

diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/amazonPayExpressPart2.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/amazonPayExpressPart2.js
@@ -79,10 +79,9 @@ function showAddressDetails(shopperDetails) {
 async function mountAmazonPayComponent() {
   try {
     const amazonPayNode = document.getElementById('amazon-container');
-    const paymentMethods = await getPaymentMethods();
-    const data = await paymentMethods.json();
-    const paymentMethodsResponse = data?.AdyenPaymentMethods;
-    const applicationInfo = data?.applicationInfo;
+    const paymentMethodsData = await getPaymentMethods();
+    const paymentMethodsResponse = paymentMethodsData?.AdyenPaymentMethods;
+    const applicationInfo = paymentMethodsData?.applicationInfo;
     const checkout = await AdyenCheckout({
       environment: window.Configuration.environment,
       clientKey: window.Configuration.clientKey,