mozilla / payments-ui

**DEPRECATED & UNMAINTAINED** The payments frontend interface
Other
126 stars 26 forks source link

Add helper for mounting redux dependent components in tests #425

Open kumar303 opened 9 years ago

kumar303 commented 9 years ago

We can probably simplify this pattern:

    var store = createReduxStore();
    var container = TestUtils.renderIntoDocument(
      <Provider store={store}>
        {() => {
          return (
            <ProductPay  />
          );
        }}
      </Provider>
    );

    return TestUtils.findRenderedComponentWithType(
      container, ProductPay
    );

to something like:

var { component, store } = helpers.renderWithProvider(ProductPay, (
   <ProductPay  />
));
kumar303 commented 9 years ago

Meh, I dunno. My first attempt at it did not make much of an improvement. It seems that you have to pass in a lambda so as not to instantiate the component via JSX immediately.

diff --git a/tests/helpers.jsx b/tests/helpers.jsx
index d421a6a..850894a 100644
--- a/tests/helpers.jsx
+++ b/tests/helpers.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import TestUtils from 'react/lib/ReactTestUtils';
+import { Provider } from 'react-redux';

+import { createReduxStore } from 'data-store';
 import * as actionTypes from 'constants/action-types';

@@ -209,3 +211,26 @@ export function assertNotificationErrorCode(action, errorCode) {
   assert.equal(action.data.errorCode, errorCode,
                'action.data.errorCode must match errorCode');
 }
+
+
+export function renderWithProvider(Component, createComponent,
+                                   {store} = {}) {
+  if (!store) {
+    store = createReduxStore();
+  }
+
+  var container = TestUtils.renderIntoDocument(
+    <Provider store={store}>
+      {createComponent}
+    </Provider>
+  );
+
+  var component = TestUtils.findRenderedComponentWithType(
+    container, Component
+  );
+
+  return {
+    component: component,
+    store: store,
+  };
+}
diff --git a/tests/views/test.transaction.jsx b/tests/views/test.transaction.jsx
index ae5bb3b..6ae85d1 100644
--- a/tests/views/test.transaction.jsx
+++ b/tests/views/test.transaction.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import TestUtils from 'react/lib/ReactTestUtils';
-import { Provider } from 'react-redux';

 import * as helpers from '../helpers';

 import * as actionTypes from 'constants/action-types';
 import * as transactionActions from 'actions/transaction';
-import { createReduxStore } from 'data-store';
 import { defaultState as defaultUser } from 'reducers/user';

 import { default as Transaction } from 'views/transaction';
@@ -23,33 +21,29 @@ describe('Transaction', function() {
   var store;

   beforeEach(function() {
-    store = createReduxStore();
     fakeUser = Object.assign({}, defaultUser, {
       email: 'f@f.com',
     });
   });

   function mountView({...props} = {}) {
-    var container = TestUtils.renderIntoDocument(
-      <Provider store={store}>
-        {() => {
-          return (
-            <Transaction
-              BraintreeToken={FakeBraintreeToken}
-              CompletePayment={FakeCompletePayment}
-              ProductPay={FakeProductPay}
-              ProductPayChooser={FakeProductPayChooser}
-              productId={productId}
-              {...props}
-            />
-          );
-        }}
-      </Provider>
+    var result = helpers.renderWithProvider(Transaction,
+      () => {
+        return (
+          <Transaction
+            BraintreeToken={FakeBraintreeToken}
+            CompletePayment={FakeCompletePayment}
+            ProductPay={FakeProductPay}
+            ProductPayChooser={FakeProductPayChooser}
+            productId={productId}
+            {...props}
+          />
+        );
+      }
     );

-    return TestUtils.findRenderedComponentWithType(
-      container, Transaction
-    );
+    store = result.store;
+    return result.component;
   }

   function signInUser({payMethods}) {