Merge pull request #384 from reactioncommerce/fix-aldeed-minor-fixes

Eliminate test warnings and other minor fixes
reactioncommerce · Dec 14, 2018 · 5b1827a · 5b1827a
2 parents b234f72 + afe5293
commit 5b1827a
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "styleguide:build": "styleguidist build",
     "test": "jest package/src",
     "test:watch": "jest --watch package/src",
-    "test:file": "jest --no-cache --watch",
+    "test:file": "jest --no-cache --watch --coverage=false",
     "snyk-protect": "snyk protect"
   },
   "babel": {

diff --git a/package/src/components/AccordionFormList/v1/__snapshots__/AccordionFormList.test.js.snap b/package/src/components/AccordionFormList/v1/__snapshots__/AccordionFormList.test.js.snap
@@ -72,7 +72,9 @@ exports[`basic snapshot 1`] = `
     >
       <span
         className="c2"
-      />
+      >
+        iconPlus
+      </span>
       Add an item
     </div>
   </div>

diff --git a/package/src/components/CatalogGrid/v1/CatalogGrid.test.js b/package/src/components/CatalogGrid/v1/CatalogGrid.test.js
@@ -1,9 +1,13 @@
 import React from "react";
 import renderer from "react-test-renderer";
+import * as ReactContainerQueryExports from "react-container-query";
 import mockComponents from "../../../tests/mockComponents";
 import CatalogGrid from "./CatalogGrid";
 import mockProducts from "./__mocks__/products";
 
+// ContainerQuery component causes errors inside `renderer.create` so we mock it
+ReactContainerQueryExports.ContainerQuery = jest.fn().mockImplementation((props) => props.children({}));
+
 test("CatalogGrid default responsive snapshot", () => {
   const component = renderer.create((
     <CatalogGrid

diff --git a/package/src/components/CheckoutActions/v1/CheckoutActions.test.js b/package/src/components/CheckoutActions/v1/CheckoutActions.test.js
@@ -14,10 +14,11 @@ const mockActions = [
   {
     activeLabel: "mock active action one",
     completeLabel: "mock complete action one",
-    incompleteLabel: "mock inactive action one",
-    status: "incomplete",
     component: mockCheckoutAction,
+    id: "123",
+    incompleteLabel: "mock inactive action one",
     onSubmit: () => true,
+    status: "incomplete",
     props: {
       cartData: {
         data: null

diff --git a/package/src/components/CheckoutActions/v1/__snapshots__/CheckoutActions.test.js.snap b/package/src/components/CheckoutActions/v1/__snapshots__/CheckoutActions.test.js.snap
@@ -34,7 +34,7 @@ exports[`basic snapshot 1`] = `
   <div
     className="c0"
   >
-    CheckoutAction({"status":"incomplete","activeLabel":"mock active action one","completeLabel":"mock complete action one","incompleteLabel":"mock inactive action one","stepNumber":1,"activeStepElement":"[Object]","completeStepElement":"[Object]","incompleteStepElement":"[Object]"})
+    CheckoutAction({"status":"active","activeLabel":"mock active action one","completeLabel":"mock complete action one","incompleteLabel":"mock inactive action one","stepNumber":1,"activeStepElement":"[Object]","completeStepElement":"[Object]","incompleteStepElement":"[Object]"})
   </div>
 </div>
 `;
diff --git a/package/src/components/InPageMenu/v1/InPageMenu.js b/package/src/components/InPageMenu/v1/InPageMenu.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { withComponents } from "@reactioncommerce/components-context";
+import { CustomPropTypes } from "../../../utils";
 
 const InPageMenuContainer = styled.div`
   box-sizing: border-box;
@@ -31,12 +32,17 @@ class InPageMenu extends Component {
        * Pass either the Reaction InPageMenuItem component or your own component that
        * accepts compatible props.
        */
-      InPageMenuItem: PropTypes.node.isRequired
+      InPageMenuItem: CustomPropTypes.component.isRequired
     }).isRequired,
     /**
      * An array that contains objects of label and navigational data for each InPageMenuItem
      */
-    menuItems: PropTypes.arrayOf(PropTypes.object)
+    menuItems: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string,
+      id: PropTypes.string,
+      isSelected: PropTypes.bool,
+      label: PropTypes.string
+    }))
   };
 
   static defaultProps = {
@@ -48,8 +54,13 @@ class InPageMenu extends Component {
 
     return (
       <InPageMenuContainer className={className}>
-        {menuItems.map((menuItem) => (
-          <InPageMenuItem href={menuItem.href} isSelected={menuItem.isSelected} label={menuItem.label} />
+        {menuItems.map((menuItem, index) => (
+          <InPageMenuItem
+            href={menuItem.href}
+            isSelected={menuItem.isSelected}
+            key={menuItem.id || `item-${index}`}
+            label={menuItem.label}
+          />
         ))}
       </InPageMenuContainer>
     );

diff --git a/package/src/components/InPageMenuItem/v1/InPageMenuItem.js b/package/src/components/InPageMenuItem/v1/InPageMenuItem.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { withComponents } from "@reactioncommerce/components-context";
-import { applyTheme, addTypographyStyles, preventAccidentalDoubleClick } from "../../../utils";
+import { applyTheme, addTypographyStyles, CustomPropTypes, preventAccidentalDoubleClick } from "../../../utils";
 
 const InPageMenuItemContainer = styled.div`
   align-items: center;
@@ -64,7 +64,7 @@ class InPageMenuItem extends Component {
        * Pass either the Reaction Link component or your own component that
        * accepts compatible props.
        */
-      Link: PropTypes.node.isRequired
+      Link: CustomPropTypes.component.isRequired
     }).isRequired,
     /**
      * URL to provide to MenuItem

diff --git a/package/src/components/MiniCart/v1/MiniCart.js b/package/src/components/MiniCart/v1/MiniCart.js
@@ -110,12 +110,12 @@ class MiniCart extends Component {
        * Pass either the Reaction Button component or your own component that
        * accepts compatible props.
        */
-      Button: CustomPropTypes.component.isRequired,
+      Button: CustomPropTypes.component,
       /**
        * An element to show as the cart checkout button. If this isn't provided,
        * a button will be rendered using Button component.
        */
-      CartCheckoutButton: PropTypes.any,
+      CartCheckoutButton: CustomPropTypes.component,
       /**
        * Pass either the Reaction CartItems component or your own component that
        * accepts compatible props.

diff --git a/package/src/tests/mockComponents.js b/package/src/tests/mockComponents.js
@@ -43,6 +43,7 @@ function stringifyJSONCircularSafe(obj) {
 [
   "Accordion",
   "AccordionFormList",
+  "Address",
   "AddressBook",
   "AddressCapture",
   "AddressForm",
@@ -64,6 +65,8 @@ function stringifyJSONCircularSafe(obj) {
   "Field",
   "InlineAlert",
   "InPageMenuItem",
+  "ItemAddForm",
+  "ItemEditForm",
   "Link",
   "MiniCartSummary",
   "PhoneNumberInput",
@@ -90,6 +93,7 @@ function stringifyJSONCircularSafe(obj) {
   "iconDismiss",
   "iconError",
   "iconExpand",
+  "iconPlus",
   "iconValid",
   "spinner",
   "iconVisa",
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,9 @@ exports[`basic snapshot 1`] = ` @@
         >
           <span
             className="c2"
-          />
+          >
+            iconPlus
+          </span>
           Add an item
         </div>
       </div>
@@ Expand Down @@