React unit testing example

.babelrc

@@ -1,4 +1,4 @@
 {
   "plugins": ["lodash"],
-  "presets": ["stage-2"]
+  "presets": ["es2015", "react", "stage-2"]
 }

.circleci/config.yml

@@ -28,25 +28,18 @@ jobs:
             - ~/.meteor
 
       # install app dependencies
-      - restore_cache:
-          name: Restoring node_modules cache
-          key: node_modules
 
       - run: meteor npm install
 
-      - save_cache:
-          name: Saving node_modules to cache
-          key: node_modules
-          paths:
-            - /home/reaction/node_modules
-
       # run tests
       - restore_cache:
           name: Restoring Meteor dev_bundle cache
           key: dev_bundle
 
+      - run: npm test
       - run: reaction test
 
+
       - save_cache:
           name: Saving Meteor dev_bundle to cache
           key: dev_bundle

.eslintrc

@@ -54,6 +54,7 @@
       "args": "after-used"
     }],
     "no-use-before-define": [2, "nofunc"], // http://eslint.org/docs/rules/no-use-before-define
+    "no-implicit-globals": 2, // http://eslint.org/docs/rules/no-implicit-globals
 
     /**
      * Possible errors

client/api/index.js

@@ -1,10 +1,8 @@
 import { Reaction } from "/client/modules/core";
 import { Router } from "/client/modules/router";
 
-// Legacy globals
-// TODO: add deprecation warnings
-ReactionCore = Reaction;
-ReactionRouter = Router;
+window.ReactionCore = Reaction;
+window.ReactionRouter = Router;
 
 export {
   Reaction,

client/modules/accounts/templates/addressBook/form/form.js

@@ -22,7 +22,7 @@ Template.addressBookForm.helpers({
     if ((shop !== null ? shop.locales.countries[selectedCountry].states : void 0) === null) {
       return false;
     }
-    options = [];
+    const options = [];
     const ref = shop !== null ? shop.locales.countries[selectedCountry].states : void 0;
     for (const state in ref) {
       if ({}.hasOwnProperty.call(ref, state)) {

client/modules/accounts/templates/forgot/forgot.js

@@ -2,6 +2,7 @@ import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
 import { i18next } from "/client/api";
 import { LoginFormSharedHelpers } from "/client/modules/accounts/helpers";
+import { LoginFormValidation } from "/lib/api";
 
 Template.loginFormResetPasswordView.events({
 

client/modules/accounts/templates/signIn/signIn.js

@@ -1,6 +1,7 @@
 import { LoginFormSharedHelpers } from "/client/modules/accounts/helpers";
 import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
+import { LoginFormValidation } from "/lib/api";
 
 /**
  * onCreated: Login form sign in view

client/modules/accounts/templates/signUp/signUp.js

@@ -1,5 +1,6 @@
 import { LoginFormSharedHelpers } from "/client/modules/accounts/helpers";
 import { Template } from "meteor/templating";
+import { LoginFormValidation } from "/lib/api";
 
 /**
  * onCreated: Login form sign up view

client/modules/accounts/templates/updatePassword/updatePassword.js

@@ -2,6 +2,7 @@ import { Accounts } from "meteor/accounts-base";
 import { Template } from "meteor/templating";
 import { i18next } from "/client/api";
 import { LoginFormSharedHelpers } from "/client/modules/accounts/helpers";
+import { LoginFormValidation } from "/lib/api";
 
 /**
  * Accounts Event: onResetPasswordLink When a user uses a password reset link

client/modules/i18n/startup.js

@@ -4,6 +4,7 @@ import i18nextLocalStorageCache from "i18next-localstorage-cache";
 import i18nextSprintfPostProcessor from "i18next-sprintf-postprocessor";
 import i18nextJquery from "jquery-i18next";
 import { Meteor } from "meteor/meteor";
+import { $ } from "meteor/jquery";
 import { Tracker } from "meteor/tracker";
 import { Reaction } from "/client/api";
 import { Shops, Translations } from "/lib/collections";
@@ -97,7 +98,7 @@ Meteor.startup(() => {
 
             // global first time init event finds and replaces
             // data-i18n attributes in html/template source.
-            $elements = $("[data-i18n]").localize();
+            $("[data-i18n]").localize();
 
             // apply language direction to html
             if (i18next.dir(language) === "rtl") {
@@ -144,7 +145,7 @@ Meteor.startup(() => {
     this.autorun((function () {
       return function () {
         i18nextDep.depend();
-        $elements = $("[data-i18n]").localize();
+        $("[data-i18n]").localize();
       };
     })(this));
   });

imports/plugins/core/layout/client/templates/layout/alerts/alerts.js

@@ -1,3 +1,6 @@
+import { Meteor } from "meteor/meteor";
+import Alerts from "./inlineAlerts";
+
 /**
  * inlineAlert helpers
  */

imports/plugins/core/layout/client/templates/layout/alerts/inlineAlerts.js

@@ -4,7 +4,7 @@ import { Mongo } from "meteor/mongo";
 /*
  * Forked and modifed from https://github.com/asktomsk/bootstrap-alerts/
  */
-Alerts = {
+const Alerts = {
 
   /*
   Default options. Can be overridden for application
@@ -144,4 +144,5 @@ Alerts = {
   collection_: new Mongo.Collection(null)
 };
 
+window.Alerts = Alerts;
 export default Alerts;

imports/plugins/core/layout/client/templates/layout/alerts/reactionAlerts.js

@@ -1,7 +1,8 @@
 import _ from "lodash";
-import { Meteor } from "meteor/meteor";
 import swal from "sweetalert2";
+import { Meteor } from "meteor/meteor";
 import "sweetalert2/dist/sweetalert2.css";
+import Alerts from "./inlineAlerts";
 
 // Extends Bootstaps alerts and add more alert types
 Meteor.startup(function () {

imports/plugins/core/orders/client/__tests__/components/__snapshots__/orderSummary.spec.js.snap

@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OrderSummary snapshot test 1`] = `
+<div>
+  <div
+    className="order-summary-form-group bg-info"
+    style={
+      Object {
+        "lineHeight": 3,
+        "marginLeft": -15,
+        "marginRight": -15,
+        "marginTop": -15,
+      }
+    }
+  >
+    <strong
+      style={
+        Object {
+          "marginLeft": 15,
+        }
+      }
+    />
+     , 
+    <div
+      className="invoice-details"
+      style={
+        Object {
+          "marginRight": 15,
+        }
+      }
+    >
+      <strong>
+        ID 
+      </strong>
+    </div>
+  </div>
+  <div
+    className="roll-up-invoice-list"
+  >
+    <div
+      className="roll-up-content"
+    >
+      <div
+        style={
+          Object {
+            "marginBottom": 4,
+          }
+        }
+      >
+        <span
+          className="badge badge-undefined"
+        />
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="order.created"
+        >
+          Created
+        </strong>
+        <div
+          className="invoice-details"
+        />
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="order.processor"
+        >
+          Processor
+        </strong>
+        <div
+          className="invoice-details"
+        />
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="order.payment"
+        >
+          Payment
+        </strong>
+        <div
+          className="invoice-details"
+        >
+           (
+          )
+        </div>
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="order.transaction"
+        >
+          Transaction
+        </strong>
+        <div
+          className="invoice-details"
+        />
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="orderShipping.carrier"
+        >
+          Carrier
+        </strong>
+        <div
+          className="invoice-details"
+        >
+           - 
+        </div>
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="orderShipping.tracking"
+        >
+          Tracking
+        </strong>
+        <div
+          className="invoice-details"
+        />
+      </div>
+      <div
+        className="order-summary-form-group"
+      >
+        <strong
+          data-i18n="orderShipping.printLabels"
+        >
+          Labels
+        </strong>
+        <a
+          className="invoice-details"
+          target="_blank"
+        >
+          <span
+            data-i18n="orderShipping.printCustomsLabel"
+          >
+            Print Customs
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <br />
+  <div
+    className="order-summary-form-group"
+  >
+    <strong
+      data-i18n="orderShipping.shipTo"
+    >
+      Ship to
+    </strong>
+    <div
+      className="invoice-details"
+    >
+      <strong>
+        Phone: 
+      </strong>
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "marginTop": 4,
+      }
+    }
+  >
+    <span />
+    <br />
+    <span />
+    <br />
+    <span>
+      , 
+      , 
+
+    </span>
+  </div>
+</div>
+`;

imports/plugins/core/orders/client/__tests__/components/orderSummary.spec.js

@@ -0,0 +1,47 @@
+import React from "react";
+import OrderSummary from "../../components/orderSummary";
+import { shallow } from "enzyme";
+import shallowToJSON from "enzyme-to-json";
+
+/**
+ * Order Summary is a display only component
+ * It receives props and displays them accordingly
+ */
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+/**
+ * Snapshots make sure your UI does not change unexpectedly
+ */
+
+test("OrderSummary snapshot test", () => {
+  // Initializing all the props passed into order summary component
+  const dateFormat = jest.fn();
+  const tracking = jest.fn();
+  const shipmentStatus = jest.fn(()=>({}));
+  const printableLabels = jest.fn(()=>({}));
+  const profileShippingAddress = {};
+  const order = {
+    shipping: [{ shipmentMethod: {} }],
+    billing: [
+      { paymentMethod: {},
+        invoice: {}
+      }
+    ]
+  };
+
+  const component = shallow(
+    <OrderSummary
+      dateFormat={dateFormat}
+      tracking={tracking}
+      profileShippingAddress={profileShippingAddress}
+      shipmentStatus={shipmentStatus}
+      printableLabels={printableLabels}
+      order={order}
+    />
+  );
+  const tree = shallowToJSON(component);
+  expect(tree).toMatchSnapshot();
+});