chore: add reducer in checkout test

src/payment/checkout/Checkout.test.jsx

@@ -6,6 +6,8 @@ import { IntlProvider, configure as configureI18n } from '@edx/frontend-platform
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { Factory } from 'rosie';
 
+import { reducer as formReducer } from 'redux-form';
+import { combineReducers, createStore } from 'redux';
 import Checkout from './Checkout';
 import * as formValidators from './payment-form/utils/form-validators';
 import { submitPayment } from '../data/actions';
@@ -16,10 +18,15 @@ import { getPerformanceProperties } from '../performanceEventing';
 
 const validateRequiredFieldsMock = jest.spyOn(formValidators, 'validateRequiredFields');
 const validateCardDetailsMock = jest.spyOn(formValidators, 'validateCardDetails');
+// const submitPaymentMock = jest.spyOn(actions, 'submitPayment');
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
+// jest.mock('../data/actions', () => ({
+//   ...jest.requireActual('../data/actions'),
+//   submitPayment: jest.fn(),
+// }));
 
 jest.useFakeTimers('modern');
 
@@ -60,6 +67,7 @@ describe('<Checkout />', () => {
   let wrapper;
   let store;
   let state;
+  let component;
 
   describe('with one product', () => {
     beforeEach(() => {
@@ -81,18 +89,26 @@ describe('<Checkout />', () => {
       store = mockStore(state);
       window.microform = { Mockroform: true };
 
-      const component = (
+      const rootReducer = combineReducers({
+        form: formReducer,
+        authentication: (authState = {}) => authState,
+        payment: (paymentState = {}) => paymentState,
+        i18n: (i18nState = {}) => i18nState,
+      });
+
+      store = createStore(
+        rootReducer,
+        state,
+      );
+
+      component = (
         <IntlProvider locale="en">
           <Provider store={store}>
-            <Checkout />
+            <Checkout data-testid="checkout" />
           </Provider>
         </IntlProvider>
       );
       wrapper = render(component);
-      // checkoutComponent = wrapper
-      //   .find('Checkout')
-      //   .first()
-      //   .instance();
     });
 
     it('submits and tracks paypal', async () => {
@@ -128,30 +144,41 @@ describe('<Checkout />', () => {
       });
     });
 
-    it.skip('fires an action when handling a cybersource submission', () => {
-      const testFormValues = {
-        firstName: 'Jean',
-        lastName: 'Doe',
-        address: '',
-        city: '',
-        country: '',
-        cardExpirationMonth: '',
-        cardExpirationYear: '',
+    it.only('fires an action when handling a cybersource submission', () => {
+      const expectedFormData = {
+        cardHolderInfo: {
+          firstName: 'John',
+          lastName: 'Doe',
+          address: undefined,
+          unit: undefined,
+          city: undefined,
+          country: undefined,
+          state: undefined,
+          postalCode: undefined,
+          organization: undefined,
+          purchasedForOrganization: undefined,
+        },
+        cardDetails: {
+          cardExpirationMonth: undefined,
+          cardExpirationYear: undefined,
+        },
       };
+
       validateRequiredFieldsMock.mockReturnValueOnce({});
       validateCardDetailsMock.mockReturnValueOnce({});
-      // const firstNameField = wrapper.container.querySelector('#firstName');
 
-      // console.warn(screen.getByLabelText('First Name (required)'));
-      // fireEvent.change(screen.getByText('First Name (required)'), { target: { value: 'john' } });
-      // console.warn(screen.getByLabelText('First Name (required)').onchange);
+      const firstNameField = wrapper.container.querySelector('#firstName');
+      const lastNameField = wrapper.container.querySelector('#lastName');
+
+      fireEvent.change(firstNameField, { target: { value: 'John' } });
+      fireEvent.change(lastNameField, { target: { value: 'Doe' } });
 
-      fireEvent.click(screen.getByText('Place Order'), { target: { values: testFormValues } });
+      fireEvent.submit(screen.getByTestId('payment-form'));
 
-      const formData = { name: 'test' };
-      checkoutComponent.handleSubmitCybersource(formData);
+      expect(store.getActions().pop()).toEqual(submitPayment({ method: 'cybersource', ...expectedFormData }));
 
-      expect(store.getActions().pop()).toEqual(submitPayment({ method: 'cybersource', ...formData }));
+      // Try mocking submitPayment action instead
+      // expect(submitPayment).toHaveBeenCalledWith({ method: 'cybersource', ...expectedFormData });
     });
   });