Merge d48579d into 511e47e

.travis.yml

@@ -5,5 +5,4 @@ cache:
   directories:
     - node_modules
 script:
-  - npm test
   - npm run coveralls

package.json

@@ -48,6 +48,7 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
+    "axios-mock-adapter": "^1.16.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",

src/actions/index.js

@@ -3,7 +3,14 @@ import { toast } from 'react-toastify';
 
 import axios from '../services/axios';
 import types from './types';
-import { saveToken, getToken, removeToken } from '../utils/localStorage';
+import {
+  saveToken,
+  getToken,
+  removeToken,
+  getCartItems,
+  updateCartItems,
+  clearCartItems,
+} from '../utils/localStorage';
 import jwt from '../utils/jwt';
 
 const errorResponse = ({ response }) => (response ? response.data.message : 'something went wrong');
@@ -90,10 +97,10 @@ export const getMenu = () => async (dispatch) => {
 
 export const addToCart = ({ foodId, foodName, foodPrice }) => {
   const foodDetails = { [foodId]: { foodName, foodPrice } };
-  const cart = JSON.parse(localStorage.getItem('cart')) || {};
+  const cart = getCartItems();
   if (!Object.keys(cart).includes(`${foodId}`)) {
     const updatedCart = { ...cart, ...foodDetails };
-    localStorage.setItem('cart', JSON.stringify(updatedCart));
+    updateCartItems(updatedCart);
     toast.success(`${foodName} added to cart 🚀`);
     return { type: types.ADD_TO_CART, payload: foodDetails };
   }
@@ -102,9 +109,9 @@ export const addToCart = ({ foodId, foodName, foodPrice }) => {
 };
 
 export const removeFromCart = (foodId) => {
-  const cart = JSON.parse(localStorage.getItem('cart')) || {};
+  const cart = getCartItems();
   const updatedCart = omit(cart, foodId);
-  localStorage.setItem('cart', JSON.stringify(updatedCart));
+  updateCartItems(updatedCart);
   return { type: types.REMOVE_FROM_CART, payload: { foodId } };
 };
 
@@ -114,7 +121,7 @@ export const checkout = foodIds => async (dispatch) => {
   dispatch(startFetching());
   try {
     await axios.post('/orders', { foodIds });
-    localStorage.removeItem('cart');
+    clearCartItems();
     dispatch({ type: types.CHECKOUT });
     toast.success('Order placed! 🎉');
     return dispatch(stopFetching());

src/components/Cart.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import CheckOutCard from './CheckOutCard';
 import { removeFromCart, checkout } from '../actions';
 
-export class Cart extends Component {
+class Cart extends Component {
   onCheckoutClick = async () => {
     const { cart, checkout: placeOrder, history } = this.props;
     const foodItems = Object.keys(cart).map(Number);

src/components/OrderCard.jsx

@@ -48,11 +48,11 @@ const OrderCard = ({
             .join('/')}
         </p>
       </div>
-      <div className="order-status">
-        <div className={`order-status-${status}`} />
+      <div>
+        <div className={`order-status order-status-${status}`} />
         <div className="cancel-order">
           <button className="small" type="button" onClick={cancelOrderCallback}>
-            cancel
+            cancel order
           </button>
         </div>
       </div>

src/index.css

@@ -306,6 +306,7 @@ fieldset > div {
   display: table;
   margin: 20px 15px;
   padding: 20px 0;
+  position: relative;
   width: 300px;
 }
 
@@ -314,8 +315,7 @@ fieldset > div {
   margin: 5px auto;
 }
 
-.order-card > *:last-child,
-.order-card > *:nth-last-child(2) {
+.order-card > *:last-child {
   border-bottom: none;
 }
 
@@ -363,6 +363,14 @@ fieldset > div {
   text-align: left;
 }
 
+.order-status {
+  padding: 0 10px;
+  position: absolute;
+  right: 10px;
+  top: -10px;
+  width: auto;
+}
+
 .order-status-new {
   background: #333;
 }

src/tests/actions/cart.test.js

@@ -1,8 +1,11 @@
+import MockAdapter from 'axios-mock-adapter';
 import axios from '../../services/axios';
 import {
   addToCart, getCart, removeFromCart, checkout,
 } from '../../actions';
 
+const axiosMock = new MockAdapter(axios);
+
 describe('addToCart()', () => {
   const foodDetails = { foodId: 1, foodName: 'Kiwi', foodPrice: 320 };
   it('should dispatch action for adding to cart success', () => {
@@ -36,22 +39,28 @@ describe('removeFromCart()', () => {
 });
 
 describe('checkout()', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
+
+  afterAll(() => axiosMock.restore);
+
   const dispatch = jest.fn();
-  const response = { data: { message: 'placed' } };
 
   it('should place order successfully', async () => {
-    jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve({ status: 201 }));
+    axiosMock.onPost().replyOnce(201);
     await checkout([1, 2])(dispatch);
     expect(dispatch).toHaveBeenCalledTimes(3);
     expect(dispatch.mock.calls[1][0]).toEqual({ type: 'CHECKOUT' });
   });
 
   it('should fail to place order', async () => {
-    jest.spyOn(axios, 'post').mockImplementation(() => Promise.reject(response));
+    axiosMock.onPost().replyOnce(400, { message: 'unable to place order' });
     await checkout([1, 2])(dispatch);
     expect(dispatch).toHaveBeenLastCalledWith({
       type: 'STOP_FETCHING',
-      payload: { error: true, message: 'something went wrong' },
+      payload: { error: true, message: 'unable to place order' },
     });
   });
 });

src/tests/actions/getMenu.test.js

@@ -1,13 +1,22 @@
+import MockAdapter from 'axios-mock-adapter';
 import axios from '../../services/axios';
 import { getMenu } from '../../actions';
 
+const axiosMock = new MockAdapter(axios);
+
 describe('Get Food Menu', () => {
-  afterEach(() => jest.resetAllMocks());
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
+
+  afterAll(() => axiosMock.restore);
+
   const dispatch = jest.fn();
-  const response = { data: { menu: [{ foodName: 'Rice?' }] } };
+  const response = { menu: [{ foodName: 'Rice?' }] };
 
   it('should get all food items', async () => {
-    jest.spyOn(axios, 'get').mockImplementation(() => Promise.resolve(response));
+    axiosMock.onGet().replyOnce(200, response);
     await getMenu()(dispatch);
 
     expect(dispatch).toHaveBeenCalledTimes(3);
@@ -18,13 +27,13 @@ describe('Get Food Menu', () => {
   });
 
   it('should fail to get food items', async () => {
-    jest.spyOn(axios, 'get').mockImplementation(() => Promise.reject(response));
+    axiosMock.onGet().replyOnce(400, { message: 'unable to fetch items' });
     await getMenu()(dispatch);
 
     expect(dispatch).toHaveBeenCalledTimes(2);
     expect(dispatch).toHaveBeenLastCalledWith({
       type: 'STOP_FETCHING',
-      payload: { error: true, message: 'something went wrong' },
+      payload: { error: true, message: 'unable to fetch items' },
     });
   });
 });

src/tests/actions/logInUser.test.js

@@ -1,18 +1,26 @@
+import MockAdapter from 'axios-mock-adapter';
 import axios from '../../services/axios';
 import { logInUser } from '../../actions';
 import jwt from '../../utils/jwt';
 
+const axiosMock = new MockAdapter(axios);
+
 describe('logInUser()', () => {
-  afterEach(() => jest.resetAllMocks());
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
+
+  afterAll(() => axiosMock.restore);
 
   const dispatch = jest.fn();
-  const response = { data: { status: 'success', user: { token: 'something' } } };
+  const response = { status: 'success', user: { token: 'something' } };
   jest
     .spyOn(jwt, 'decode')
     .mockImplementation(() => ({ userName: 'jamjum', userStatus: 'customer' }));
 
   it('should login user successfully', async () => {
-    jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve(response));
+    axiosMock.onPost().replyOnce(200, response);
     await logInUser()(dispatch);
     expect(dispatch).toHaveBeenCalledTimes(4);
     expect(dispatch.mock.calls[1][0]).toEqual({
@@ -22,14 +30,12 @@ describe('logInUser()', () => {
   });
 
   it('should fail to login user if errors exist', async () => {
-    jest
-      .spyOn(axios, 'post')
-      .mockImplementation(() => Promise.reject(new Error('something went wrong')));
+    axiosMock.onPost().replyOnce(400, { message: 'nope, not working' });
 
     await logInUser()(dispatch);
     expect(dispatch).toHaveBeenCalledTimes(2);
     expect(dispatch).toHaveBeenLastCalledWith({
-      payload: { error: true, message: 'something went wrong' },
+      payload: { error: true, message: 'nope, not working' },
       type: 'STOP_FETCHING',
     });
   });

src/tests/actions/orders.test.js

@@ -1,18 +1,26 @@
+import MockAdapter from 'axios-mock-adapter';
 import { getUserOrderHistory, cancelOrder } from '../../actions';
 import jwt from '../../utils/jwt';
 import axios from '../../services/axios';
 
+const axiosMock = new MockAdapter(axios);
+
 afterAll(() => jest.restoreAllMocks());
 
 describe('getUserOrderHistory', () => {
   jest.spyOn(jwt, 'decode').mockImplementation(() => ({ userId: 1 }));
   const dispatch = jest.fn();
-  const response = { data: { orders: [] } };
+  const response = { orders: [] };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
 
-  afterEach(() => jest.resetAllMocks());
+  afterAll(() => axiosMock.restore);
 
   it('should dispatch correct action for getUserOrderHistory success', async () => {
-    jest.spyOn(axios, 'get').mockImplementation(() => Promise.resolve(response));
+    axiosMock.onGet().replyOnce(200, response);
     await getUserOrderHistory()(dispatch);
 
     expect(jwt.decode).toHaveBeenCalled();
@@ -24,7 +32,7 @@ describe('getUserOrderHistory', () => {
   });
 
   it('should dispatch correct action for getUserOrderHistory failure', async () => {
-    jest.spyOn(axios, 'get').mockImplementation(() => Promise.reject(response));
+    axiosMock.onGet().replyOnce(400);
     await getUserOrderHistory()(dispatch);
 
     expect(dispatch).toHaveBeenCalledTimes(3);
@@ -40,11 +48,17 @@ describe('getUserOrderHistory', () => {
 
 describe('cancelOrder()', () => {
   const dispatch = jest.fn();
-  const errResponse = { response: { data: { message: 'failed to cancel order' } } };
-  afterEach(() => jest.resetAllMocks());
+  const errResponse = { message: 'failed to cancel order' };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
+
+  afterAll(() => axiosMock.restore);
 
   it('should dispatch correct action to cancel an order', async () => {
-    jest.spyOn(axios, 'delete').mockImplementation(() => Promise.resolve());
+    axiosMock.onDelete().replyOnce(204);
     await cancelOrder(7)(dispatch);
 
     expect(dispatch).toHaveBeenCalledTimes(3);
@@ -59,7 +73,7 @@ describe('cancelOrder()', () => {
   });
 
   it('should dispatch correct action for order cancellation failure', async () => {
-    jest.spyOn(axios, 'delete').mockImplementation(() => Promise.reject(errResponse));
+    axiosMock.onDelete().replyOnce(400, errResponse);
     await cancelOrder(2)(dispatch);
 
     expect(dispatch).toHaveBeenCalledTimes(3);

src/tests/actions/signUpUser.test.js

@@ -1,29 +1,34 @@
+import MockAdapter from 'axios-mock-adapter';
 import axios from '../../services/axios';
 import { signUpUser } from '../../actions';
 import jwt from '../../utils/jwt';
 
+const axiosMock = new MockAdapter(axios);
+
 describe('signUpUser()', () => {
-  afterEach(() => jest.resetAllMocks());
+  afterEach(() => {
+    jest.resetAllMocks();
+    axiosMock.reset();
+  });
+  afterAll(() => axiosMock.restore);
 
   const dispatch = jest.fn();
-  const response = { data: { status: 'success', user: { token: 'something' } } };
+  const response = { status: 'success', user: { token: 'something' } };
   jest.spyOn(jwt, 'decode').mockImplementation(() => ({ userName: 'kay', userStatus: 'admin' }));
 
   it('should sign up user successfully', async () => {
-    jest.spyOn(axios, 'post').mockImplementation(() => Promise.resolve(response));
+    axiosMock.onPost().replyOnce(200, response);
     await signUpUser()(dispatch);
     expect(dispatch).toHaveBeenCalledTimes(3);
   });
 
   it('should fail to sign up user if errors exist', async () => {
-    jest
-      .spyOn(axios, 'post')
-      .mockImplementation(() => Promise.reject(new Error('something went wrong')));
+    axiosMock.onPost().replyOnce(400, { message: 'lol my brother' });
 
     await signUpUser()(dispatch);
     expect(dispatch).toHaveBeenCalledTimes(2);
     expect(dispatch).toHaveBeenLastCalledWith({
-      payload: { error: true, message: 'something went wrong' },
+      payload: { error: true, message: 'lol my brother' },
       type: 'STOP_FETCHING',
     });
   });