test: Added Stripe payment form tests (#703)

[REV-3039](https://2u-internal.atlassian.net/browse/REV-3039)
openedx-unsupported · Jan 31, 2023 · 6d4fef2 · 6d4fef2
1 parent 40c96bd
commit 6d4fef2
Show file tree

Hide file tree

Showing 5 changed files with 396 additions and 88 deletions.
diff --git a/src/payment/checkout/Checkout.test.jsx b/src/payment/checkout/Checkout.test.jsx
@@ -11,11 +11,14 @@ import { submitPayment } from '../data/actions';
 import '../__factories__/basket.factory';
 import '../__factories__/userAccount.factory';
 import { transformResults } from '../data/service';
+import { getPerformanceProperties } from '../performanceEventing';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
+jest.useFakeTimers('modern');
+
 configureI18n({
   config: {
     ENVIRONMENT: process.env.ENVIRONMENT,
@@ -106,19 +109,24 @@ describe('<Checkout />', () => {
 
     // Apple Pay temporarily disabled per REV-927 - https://github.com/openedx/frontend-app-payment/pull/256
 
-    // TODO: Disabling for now update once we can swap between stripe and cybersource
-    // it('submits and tracks the payment form', () => {
-    //   const formSubmitButton = wrapper.find('form button[type="submit"]').hostNodes();
-    //   formSubmitButton.simulate('click');
-
-    //   expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.basket.payment_selected', {
-    //     type: 'click',
-    //     category: 'checkout',
-    //     paymentMethod: 'Credit Card',
-    //     checkoutType: 'client_side',
-    //     flexMicroformEnabled: true,
-    //   });
-    // });
+    it('submits and tracks the payment form', () => {
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.payment_mfe.payment_form_rendered', {
+        ...getPerformanceProperties(),
+        paymentProcessor: 'Cybersource',
+      });
+      const formSubmitButton = wrapper.find('form button[type="submit"]').hostNodes();
+      formSubmitButton.simulate('click');
+
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.basket.payment_selected', {
+        type: 'click',
+        category: 'checkout',
+        paymentMethod: 'Credit Card',
+        checkoutType: 'client_side',
+        flexMicroformEnabled: true,
+        stripeEnabled: false,
+
+      });
+    });
 
     it('fires an action when handling a cybersource submission', () => {
       const formData = { name: 'test' };

diff --git a/src/payment/checkout/payment-form/CardHolderInformation.test.jsx b/src/payment/checkout/payment-form/CardHolderInformation.test.jsx
@@ -1,21 +1,20 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
-// import React from 'react';
-// import { Provider } from 'react-redux';
-// import { mount } from 'enzyme';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
 import {
-  // IntlProvider,
+  IntlProvider,
   configure as configureI18n,
 } from '@edx/frontend-platform/i18n';
-// import { AppContext } from '@edx/frontend-platform/react';
-// import { Factory } from 'rosie';
-// import { createStore } from 'redux';
+import { AppContext } from '@edx/frontend-platform/react';
+import { Factory } from 'rosie';
+import { createStore } from 'redux';
 
-// import CardHolderInformation, { CardHolderInformationComponent } from './CardHolderInformation';
-// import PaymentForm from './PaymentForm';
-// import createRootReducer from '../../../data/reducers';
+import CardHolderInformation, { CardHolderInformationComponent } from './CardHolderInformation';
+import PaymentForm from './PaymentForm';
+import createRootReducer from '../../../data/reducers';
 
 import '../../__factories__/userAccount.factory';
-// import { iteratee } from 'lodash';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
@@ -47,70 +46,66 @@ configureI18n({
   },
 });
 
-it('is using stripe', () => {
-  expect(null).toEqual(null);
-});
-// TODO: Disabling for now update once we can swap between stripe and cybersource
-// describe('<CardHolderInformation />', () => {
-//   let store;
+describe('<CardHolderInformation />', () => {
+  let store;
 
-//   describe('handleSelectCountry', () => {
-//     it('updates state with selected country', () => {
-//       const authenticatedUser = Factory.build('userAccount');
+  describe('handleSelectCountry', () => {
+    it('updates state with selected country', () => {
+      const authenticatedUser = Factory.build('userAccount');
 
-//       store = createStore(createRootReducer(), {});
-//       const component = (
-//         <IntlProvider locale="en">
-//           <AppContext.Provider value={{ authenticatedUser }}>
-//             <Provider store={store}>
-//               <PaymentForm onSubmitPayment={() => {}} onSubmitButtonClick={() => {}}>
-//                 <CardHolderInformation />
-//               </PaymentForm>
-//             </Provider>
-//           </AppContext.Provider>
-//         </IntlProvider>
-//       );
-//       const wrapper = mount(component);
-//       const cardHolderInformation = wrapper
-//         .find(CardHolderInformationComponent)
-//         .first()
-//         .instance();
-//       const eventMock = jest.fn();
+      store = createStore(createRootReducer(), {});
+      const component = (
+        <IntlProvider locale="en">
+          <AppContext.Provider value={{ authenticatedUser }}>
+            <Provider store={store}>
+              <PaymentForm onSubmitPayment={() => {}} onSubmitButtonClick={() => {}}>
+                <CardHolderInformation />
+              </PaymentForm>
+            </Provider>
+          </AppContext.Provider>
+        </IntlProvider>
+      );
+      const wrapper = mount(component);
+      const cardHolderInformation = wrapper
+        .find(CardHolderInformationComponent)
+        .first()
+        .instance();
+      const eventMock = jest.fn();
 
-//       cardHolderInformation.handleSelectCountry(eventMock, 'US');
+      cardHolderInformation.handleSelectCountry(eventMock, 'US');
 
-//       expect(cardHolderInformation.state).toEqual({ selectedCountry: 'US' });
-//     });
-//   });
-//   describe('purchasedForOrganization field', () => {
-//     it('renders for bulk purchase', () => {
-//       const wrapper = mount((
-//         <IntlProvider locale="en">
-//           <Provider store={store}>
-//             <PaymentForm
-//               isBulkOrder
-//               handleSubmit={() => {}}
-//               onSubmitPayment={() => {}}
-//               onSubmitButtonClick={() => {}}
-//             />
-//           </Provider>
-//         </IntlProvider>
-//       ));
-//       expect(wrapper.exists('#purchasedForOrganization')).toEqual(true);
-//     });
-//     it('does not render if not bulk purchase', () => {
-//       const wrapper = mount((
-//         <IntlProvider locale="en">
-//           <Provider store={store}>
-//             <PaymentForm
-//               handleSubmit={() => {}}
-//               onSubmitPayment={() => {}}
-//               onSubmitButtonClick={() => {}}
-//             />
-//           </Provider>
-//         </IntlProvider>
-//       ));
-//       expect(wrapper.exists('#purchasedForOrganization')).toEqual(false);
-//     });
-//   });
-// });
+      expect(cardHolderInformation.state).toEqual({ selectedCountry: 'US' });
+    });
+  });
+  describe('purchasedForOrganization field', () => {
+    it('renders for bulk purchase', () => {
+      const wrapper = mount((
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <PaymentForm
+              isBulkOrder
+              handleSubmit={() => {}}
+              onSubmitPayment={() => {}}
+              onSubmitButtonClick={() => {}}
+            />
+          </Provider>
+        </IntlProvider>
+      ));
+      expect(wrapper.exists('#purchasedForOrganization')).toEqual(true);
+    });
+    it('does not render if not bulk purchase', () => {
+      const wrapper = mount((
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <PaymentForm
+              handleSubmit={() => {}}
+              onSubmitPayment={() => {}}
+              onSubmitButtonClick={() => {}}
+            />
+          </Provider>
+        </IntlProvider>
+      ));
+      expect(wrapper.exists('#purchasedForOrganization')).toEqual(false);
+    });
+  });
+});
diff --git a/src/payment/checkout/payment-form/PaymentForm.test.jsx b/src/payment/checkout/payment-form/PaymentForm.test.jsx
@@ -82,7 +82,7 @@ describe('<PaymentForm />', () => {
           lastName: '',
           address: '',
           city: '',
-          country: 'UK',
+          country: 'GB',
           cardExpirationMonth: '',
           cardExpirationYear: '',
           optionalField: '',