Refactor and test component

react-context-api/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "dependencies": {
     "firebase": "6.0.2",
-    "node-sass": "4.12.0",
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "7.0.3",
@@ -17,6 +17,10 @@
     "reselect": "4.0.0"
   },
   "devDependencies": {
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "jest-enzyme": "^7.1.1",
+    "moxios": "^0.4.0",
     "react-scripts": "3.0.0"
   },
   "resolutions": {

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

@@ -1,29 +1,29 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import { withRouter } from 'react-router-dom';
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { withRouter } from "react-router-dom";
 
-import CustomButton from '../custom-button/custom-button.component';
-import CartItem from '../cart-item/cart-item.component';
-import { selectCartItems } from '../../redux/cart/cart.selectors';
-import { toggleCartHidden } from '../../redux/cart/cart.actions.js';
+import CustomButton from "../custom-button/custom-button.component";
+import CartItem from "../cart-item/cart-item.component";
+import { selectCartItems } from "../../redux/cart/cart.selectors";
+import { toggleCartHidden } from "../../redux/cart/cart.actions.js";
 
-import './cart-dropdown.styles.scss';
+import "./cart-dropdown.styles.scss";
 
 const CartDropdown = ({ cartItems, history, dispatch }) => (
-  <div className='cart-dropdown'>
-    <div className='cart-items'>
+  <div className="cart-dropdown" data-testid="cart-dropdown">
+    <div className="cart-items">
       {cartItems.length ? (
         cartItems.map(cartItem => (
           <CartItem key={cartItem.id} item={cartItem} />
         ))
       ) : (
-        <span className='empty-message'>Your cart is empty</span>
+        <span className="empty-message">Your cart is empty</span>
       )}
     </div>
     <CustomButton
       onClick={() => {
-        history.push('/checkout');
+        history.push("/checkout");
         dispatch(toggleCartHidden());
       }}
     >

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.jsx

@@ -0,0 +1,29 @@
+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("Cart Item Component", () => {
+  let wrapper;
+  beforeEach(() => {
+    const props = {
+      item: {
+        imageUrl: "https://i.ibb.co/ZYW3VTp/brown-brim.png",
+        price: 33,
+        name: "mir",
+        quantity: 3
+      }
+    };
+    wrapper = setUp(props);
+  });
+
+  it("should render without error", () => {
+    const component = findByDataAttr(wrapper, "cart-item");
+    expect(component.length).toBe(1);
+  });
+});

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,10 +9,11 @@ const CustomButton = ({
   ...otherProps
 }) => (
   <button
-    className={`${inverted ? 'inverted' : ''} ${
-      isGoogleSignIn ? 'google-sign-in' : ''
+    className={`${inverted ? "inverted" : ""} ${
+      isGoogleSignIn ? "google-sign-in" : ""
     } custom-button`}
     {...otherProps}
+    data-testid="custom-button"
   >
     {children}
   </button>

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

@@ -0,0 +1,21 @@
+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("Custom Button Component", () => {
+  let component;
+  beforeEach(() => {
+    component = setUp();
+  });
+
+  it("should render without error", () => {
+    const wrapper = findByDataAttr(component, "custom-button");
+    expect(wrapper.length).toBe(1);
+  });
+});

react-context-api/src/components/main/main.component.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+
+import "./main.css";
+
+import HomePage from "../../pages/homepage/homepage.component";
+import ShopPage from "../../pages/shop/shop.component";
+import SignInAndSignUpPage from "../../pages/sign-in-and-sign-up/sign-in-and-sign-up.component";
+import CheckoutPage from "../../pages/checkout/checkout.component";
+
+import Header from "../header/header.component";
+
+import { auth, createUserProfileDocument } from "../../firebase/firebase.utils";
+
+class MainComponent extends React.Component {
+  unsubscribeFromAuth = null;
+
+  componentDidMount() {
+    const { setCurrentUser } = this.props;
+
+    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
+      if (userAuth) {
+        const userRef = await createUserProfileDocument(userAuth);
+
+        userRef.onSnapshot(snapShot => {
+          setCurrentUser({
+            id: snapShot.id,
+            ...snapShot.data()
+          });
+        });
+      }
+
+      setCurrentUser(userAuth);
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeFromAuth();
+  }
+
+  render() {
+    return (
+      <div data-testid="main-component">
+        <Header />
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <Route path="/shop" component={ShopPage} />
+          <Route exact path="/checkout" component={CheckoutPage} />
+          <Route
+            exact
+            path="/signin"
+            render={() =>
+              this.props.currentUser ? (
+                <Redirect to="/" />
+              ) : (
+                <SignInAndSignUpPage />
+              )
+            }
+          />
+        </Switch>
+      </div>
+    );
+  }
+}
+export default MainComponent;

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

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

react-context-api/src/components/main/main.css

@@ -0,0 +1,13 @@
+body {
+  font-family: "Open Sans Condensed";
+  padding: 20px 40px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+* {
+  box-sizing: border-box;
+}

react-context-api/src/containers/App/App.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+
+import "./App.css";
+
+import { setCurrentUser } from "../../redux/user/user.actions";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import MainComponent from "../../components/main/main.component";
+
+class App extends React.Component {
+  render() {
+    return <MainComponent {...this.props}></MainComponent>;
+  }
+}
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  setCurrentUser: user => dispatch(setCurrentUser(user))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);