unit tests

react-context-api/src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -6,7 +6,7 @@ import CartItem from "../cart-item/cart-item.component";
 import "./cart-dropdown.styles.scss";
 
 const CartDropdown = ({ cartItems, history, toggleCartHidden }) => (
-  <div className="cart-dropdown">
+  <div className="cart-dropdown" data-testid="cart-dropdown-component">
     <div className="cart-items">
       {cartItems && cartItems.length ? (
         cartItems.map(cartItem => (

react-context-api/src/components/cart-dropdown/cart-dropdown.component.test.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CartDropdownComponent from "./cart-dropdown.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(
+    <CartDropdownComponent {...props}></CartDropdownComponent>
+  );
+  return component;
+};
+
+describe("CartDropdown Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      history: {},
+      cartItems: [],
+      toggleCartHidden: jest.fn()
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "cart-dropdown-component");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/cart-icon/cart-icon.component.jsx

@@ -5,7 +5,7 @@ import { ReactComponent as ShoppingIcon } from "../../assets/shopping-bag.svg";
 import "./cart-icon.styles.scss";
 
 const CartIcon = ({ toggleCartHidden, itemCount }) => (
-  <div className="cart-icon" onClick={toggleCartHidden}>
+  <div className="cart-icon" onClick={toggleCartHidden} data-testid="cart-icon">
     <ShoppingIcon className="shopping-icon" />
     <span className="item-count">{itemCount}</span>
   </div>

react-context-api/src/components/cart-icon/cart-icon.component.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CartIcon from "./cart-icon.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CartIcon {...props}></CartIcon>);
+  return component;
+};
+
+describe("CartIcon Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      itemCount: 0,
+      toggleCartHidden: jest.fn()
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "cart-icon");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/cart-item/cart-item.component.jsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 
-import './cart-item.styles.scss';
+import "./cart-item.styles.scss";
 
 const CartItem = ({ item: { imageUrl, price, name, quantity } }) => (
-  <div className='cart-item'>
-    <img src={imageUrl} alt='item' />
-    <div className='item-details'>
-      <span className='name'>{name}</span>
-      <span className='price'>
+  <div className="cart-item" data-testid="cart-item">
+    <img src={imageUrl} alt="item" />
+    <div className="item-details">
+      <span className="name">{name}</span>
+      <span className="price">
         {quantity} x ${price}
       </span>
     </div>

react-context-api/src/components/cart-item/cart-item.component.test.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CartItem from "./cart-item.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CartItem {...props}></CartItem>);
+  return component;
+};
+
+describe("CartItem Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      item: { imageUrl: "", price: 0, name: "", quantity: 1 }
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "cart-item");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/checkout-item/checkout-item.component.jsx

@@ -5,7 +5,7 @@ import "./checkout-item.styles.scss";
 const CheckoutItem = ({ cartItem, clearItem, addItem, removeItem }) => {
   const { name, imageUrl, price, quantity } = cartItem;
   return (
-    <div className="checkout-item">
+    <div className="checkout-item" data-testid="checkout-item">
       <div className="image-container">
         <img src={imageUrl} alt="item" />
       </div>

react-context-api/src/components/checkout-item/chekout-item.component.test.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CheckoutItem from "./checkout-item.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CheckoutItem {...props}></CheckoutItem>);
+  return component;
+};
+
+describe("CheckoutItem Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      cartItem: { name: "", imageUrl: "", price: 12, quantity: 0 },
+      clearItem: jest.fn(),
+      addItem: jest.fn(),
+      removeItem: jest.fn()
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "checkout-item");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/collection-item/collection-item.component.jsx

@@ -8,7 +8,7 @@ const CollectionItem = ({ item, addItem }) => {
   const { name, price, imageUrl } = item;
 
   return (
-    <div className="collection-item">
+    <div className="collection-item" data-testid="collection-item">
       <div
         className="image"
         style={{

react-context-api/src/components/collection-item/collection-item.component.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CollectionItem from "./collection-item.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CollectionItem {...props}></CollectionItem>);
+  return component;
+};
+
+describe("CollectionItem Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      item: { name: "", price: 1, imageUrl: "" },
+      addItem: jest.fn()
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "collection-item");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/collection-preview/collection-preview.component.jsx

@@ -5,7 +5,7 @@ import CollectionItemContainer from "../../containers/CollectionItemContainer/Co
 import "./collection-preview.styles.scss";
 
 const CollectionPreview = ({ title, items }) => (
-  <div className="collection-preview">
+  <div className="collection-preview" data-testid="collection-preview">
     <h1 className="title">{title.toUpperCase()}</h1>
     <div className="preview">
       {items

react-context-api/src/components/collection-preview/collection-preview.component.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CollectionPreview from "./collection-preview.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CollectionPreview {...props}></CollectionPreview>);
+  return component;
+};
+
+describe("CollectionPreview Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      title: "",
+      items: []
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "collection-preview");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/collections-overview/collection-overview.component.test.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CollectionOverview from "./collections-overview.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(
+    <CollectionOverview {...props}></CollectionOverview>
+  );
+  return component;
+};
+
+describe("CartDropdown Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      collections: []
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "collections-overview");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/collections-overview/collections-overview.component.jsx

@@ -5,7 +5,7 @@ import CollectionPreview from "../collection-preview/collection-preview.componen
 import "./collections-overview.styles.scss";
 
 const CollectionsOverview = ({ collections }) => (
-  <div className="collections-overview">
+  <div className="collections-overview" data-testid="collections-overview">
     {collections &&
       collections.map(({ id, ...otherCollectionProps }) => (
         <CollectionPreview key={id} {...otherCollectionProps} />

react-context-api/src/components/custom-button/custom-button.component.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-import './custom-buttom.styles.scss';
+import "./custom-buttom.styles.scss";
 
 const CustomButton = ({
   children,
@@ -9,8 +9,9 @@ const CustomButton = ({
   ...otherProps
 }) => (
   <button
-    className={`${inverted ? 'inverted' : ''} ${
-      isGoogleSignIn ? 'google-sign-in' : ''
+    data-testid="custom-button"
+    className={`${inverted ? "inverted" : ""} ${
+      isGoogleSignIn ? "google-sign-in" : ""
     } custom-button`}
     {...otherProps}
   >

react-context-api/src/components/custom-button/custom-button.component.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CustomButton from "./custom-button.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<CustomButton {...props}></CustomButton>);
+  return component;
+};
+
+describe("CustomButton Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {};
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "custom-button");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/directory/directory.component.jsx

@@ -5,7 +5,7 @@ import MenuItem from "../menu-item/menu-item.component";
 import "./directory.styles.scss";
 
 const Directory = ({ sections }) => (
-  <div className="directory-menu">
+  <div className="directory-menu" data-testid="directory-menu">
     {sections &&
       sections.map(({ id, ...otherSectionProps }) => (
         <MenuItem key={id} {...otherSectionProps} />

react-context-api/src/components/directory/directory.component.test.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Directory from "./directory.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<Directory {...props}></Directory>);
+  return component;
+};
+
+describe("Directory Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      sections: []
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "directory-menu");
+    expect(component.length).toBe(1);
+  });
+});

react-context-api/src/components/form-input/form-input.component.jsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
 
-import './form-input.styles.scss';
+import "./form-input.styles.scss";
 
 const FormInput = ({ handleChange, label, ...otherProps }) => (
-  <div className='group'>
-    <input className='form-input' onChange={handleChange} {...otherProps} />
+  <div className="group" data-testid="form-input">
+    <input className="form-input" onChange={handleChange} {...otherProps} />
     {label ? (
       <label
         className={`${
-          otherProps.value.length ? 'shrink' : ''
+          otherProps.value.length ? "shrink" : ""
         } form-input-label`}
       >
         {label}

react-context-api/src/components/form-input/form-item.component.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { shallow } from "enzyme";
+import FormInput from "./form-input.component";
+import { findByDataAttr } from "../../utils/utils";
+
+const setUp = (props = {}) => {
+  const component = shallow(<FormInput {...props}></FormInput>);
+  return component;
+};
+
+describe("CartDropdown Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      label: "",
+      handleChange: jest.fn()
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "form-input");
+    expect(component.length).toBe(1);
+  });
+});