Fix e2e tests and components tests

client/src/__tests__/actions/auth.spec.js

@@ -4,7 +4,9 @@ import moxios from 'moxios';
 import jwt from 'jsonwebtoken';
 import thunk from 'redux-thunk';
 import instance from '../../utils/axios';
-import { SET_CURRENT_USER, GET_USER_INFORMATION } from '../../actions/types';
+import {
+  SET_CURRENT_USER, GET_USER_INFORMATION, SIGNUP_REQUEST, GET_USER_REQUEST
+} from '../../actions/types';
 import { signupRequest } from '../../actions/userSignupAction';
 import {
   signinRequest, logout, getUserinfo
@@ -31,9 +33,14 @@ describe('Authentication action', () => {
         });
       });
       const returnedAction = [
+        {
+          type: SIGNUP_REQUEST,
+          isLoading: true
+        },
         {
           type: SET_CURRENT_USER,
-          user: jwt.decode(Response.token)
+          user: jwt.decode(Response.token),
+          isLoading: false
         }
       ];
       const store = mockStore({});
@@ -55,7 +62,8 @@ describe('Authentication action', () => {
       const returnedAction = [
         {
           type: SET_CURRENT_USER,
-          user: jwt.decode(Response.token)
+          user: jwt.decode(Response.token),
+          isLoading: false
         }
       ];
       const store = mockStore({});
@@ -69,7 +77,8 @@ describe('Authentication action', () => {
       const returnedAction = [
         {
           type: SET_CURRENT_USER,
-          user: {}
+          user: {},
+          isLoading: false
         }
       ];
       const store = mockStore({});
@@ -85,12 +94,17 @@ describe('Authentication action', () => {
         request.respondWith({
           status: 200,
           response: mockData.userSigninData
-        })
-      })
+        });
+      });
       const returnedAction = [
+        {
+          type: GET_USER_REQUEST,
+          isLoading: true
+        },
         {
           type: GET_USER_INFORMATION,
-          user: mockData.userSigninData
+          user: mockData.userSigninData,
+          isLoading: false
         }
       ];
       const store = mockStore({});

client/src/__tests__/actions/recipes.spec.js

@@ -41,7 +41,11 @@ import {
   UPVOTE_RECIPE,
   DOWNVOTE_RECIPE,
   ADD_REVIEW,
-  SEARCH_RECIPES
+  SEARCH_RECIPES,
+  ADD_RECIPE_REQUEST,
+  GET_RECIPES_REQUEST,
+  ADD_REVIEW_REQUEST,
+  GET_USER_RECIPES_REQUEST
 } from '../../actions/types';
 
 const mockStore = configureStore([thunk]);
@@ -66,9 +70,14 @@ describe('Recipes actions', () => {
         });
 
         const returnedAction = [
+          {
+            type: ADD_RECIPE_REQUEST,
+            isLoading: true
+          },
           {
             type: ADD_RECIPE,
-            recipe: recipeResponse
+            recipe: recipeResponse,
+            isLoading: false
           }
         ];
 
@@ -142,9 +151,14 @@ describe('Recipes actions', () => {
           });
         });
         const returnedAction = [
+          {
+            type: GET_RECIPES_REQUEST,
+            isLoading: true
+          },
           {
             type: GET_RECIPES,
-            recipes: allRecipes.recipeData
+            recipes: allRecipes.recipeData,
+            isLoading: false
           }
         ];
         const store = mockStore({});
@@ -177,7 +191,7 @@ describe('Recipes actions', () => {
   });
 
   describe("Get user's recipe action", () => {
-    it('Should return the user\'s recipe and' +
+    it('Should return the users recipe and' +
       ' dispatch the GET_USER_RECIPES action', async () => {
         const userRecipes = {
           recipeData: [recipeResponse.recipeData, recipeResponse.recipeData]
@@ -190,9 +204,14 @@ describe('Recipes actions', () => {
           });
         });
         const returnedAction = [
+          {
+            type: GET_USER_RECIPES_REQUEST,
+            isLoading: true
+          },
           {
             type: GET_USER_RECIPES,
-            userRecipe: userRecipes.recipeData
+            userRecipe: userRecipes.recipeData,
+            isLoading: false
           }
         ];
         const store = mockStore({});
@@ -202,7 +221,7 @@ describe('Recipes actions', () => {
   });
 
   describe('Get user favorites action', () => {
-    it('Should get user\'s favorite and' +
+    it('Should get users favorite and' +
       ' dispatch the FETCH_FAVORITE_RECIPES', async () => {
         moxios.wait(() => {
           const request = moxios.requests.mostRecent();
@@ -225,7 +244,7 @@ describe('Recipes actions', () => {
 
   describe('Toggle favorites action', () => {
     it(
-      'Should add/remove from a user\'s favorite list and' +
+      'Should add/remove from a users favorite list and' +
       ' dispatch the TOGGLE_FAVORITE action',
       async () => {
         moxios.wait(() => {
@@ -305,9 +324,14 @@ describe('Recipes actions', () => {
           });
         });
         const returnedAction = [
+          {
+            type: ADD_REVIEW_REQUEST,
+            isLoading: true
+          },
           {
             type: ADD_REVIEW,
-            review: reviews
+            review: reviews,
+            isLoading: false
           }
         ];
         const store = mockStore({});
@@ -342,6 +366,31 @@ describe('Recipes actions', () => {
       }
     );
   });
+  describe('Search recipes catalogue', () => {
+    it('Should search the recipe catlogue and return a set of recipes matching the query', async (done) => {
+      const popularRecipes = {
+        theFoundrecipes: [recipeResponse
+          .recipeData, recipeResponse.recipeData]
+      };
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({
+          status: 200,
+          response: popularRecipes
+        });
+      });
+      const returnedAction = [
+        {
+          type: SEARCH_RECIPES,
+          recipes: popularRecipes,
+        }
+      ];
+      const store = mockStore({});
+      await store.dispatch(SearchRecipesAction('Fried rice', 1));
+      expect(store.getActions()).toEqual(returnedAction);
+      done();
+    });
+  });
   describe('Action errors', () => {
     it('Should handle ADD_RECIPE error', async (done) => {
       moxios.wait(() => {
@@ -356,14 +405,19 @@ describe('Recipes actions', () => {
         });
       });
       const returnedAction = [
+        {
+          type: ADD_RECIPE_REQUEST,
+          isLoading: true
+        },
         {
           type: ADD_RECIPE,
-          recipe: recipeResponse
+          recipe: recipeResponse,
+          isLoading: false
         }
       ];
       const store = mockStore({});
       await store.dispatch(AddRecipeAction({ ...recipeResponse }));
-      expect(store.getActions()).toEqual([]);
+      expect(store.getActions()).toEqual([{ isLoading: true, type: ADD_RECIPE_REQUEST }]);
       done();
     });
     it('Should handle EDIT_RECIPE error', async (done) => {

client/src/__tests__/components/Homepage.spec.js

@@ -2,8 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Homepage, mapStateToProps } from '../../components/Hompage';
 import { RecipeList } from '../../components/RecipesList';
-import recipes, { FavoritesRecipeProps } from '../fixtures/recipes';
+import recipes, {
+  FavoritesRecipeProps, recipesLoading
+} from '../fixtures/recipes';
 import state from '../fixtures/state';
+import Loader from '../../components/Loader';
 
 describe('<Homepage />', () => {
   it('Should render the homepage component correctly', () => {
@@ -48,7 +51,20 @@ describe('<Homepage />', () => {
       target: { name: 'searchQuery', value }
     });
     expect(wrapper.state('searchQuery')).toEqual(value);
-  })
+  });
+
+  it('Should render the loader', () => {
+    const wrapper = shallow(<Homepage
+      isLoading={recipesLoading}
+      recipes={FavoritesRecipeProps}
+      popularRecipes={FavoritesRecipeProps}
+      GetAllRecipesAction={() => Promise.resolve()}
+      GetPopularRecipes={() => Promise.resolve()}
+      SearchRecipesAction={() => Promise.resolve()}
+    >
+      <Loader />
+    </Homepage>);
+  });
 
   it('Should call mapStateToProps', () => {
     mapStateToProps(state);

client/src/__tests__/components/Loader.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Loader from '../../components/Loader';
+
+describe('<Loader />', () => {
+  it('Should mount the loader component', () => {
+    const wrapper = shallow(<Loader />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

client/src/__tests__/components/LoginForm.spec.js

@@ -18,11 +18,13 @@ describe('<LoginForm />', () => {
   });
   it('Should populate the form field and update the state', () => {
     const signinRequest = jest.fn();
-    const wrapper = shallow(<LoginForm signinRequest={() => Promise.resolve()} />);
+    const wrapper = shallow(<LoginForm
+      signinRequest={() => Promise.resolve()} />);
     wrapper.instance().setState({
       email: 'randomemail@gmail.com',
       password: 'qwertyuiop',
-      errors: {}
+      errors: {},
+      isLoading: true
     });
     wrapper.update();
     wrapper.find('form').simulate('submit', {
@@ -31,7 +33,8 @@ describe('<LoginForm />', () => {
     expect(wrapper.instance().state).toEqual({
       email: 'randomemail@gmail.com',
       password: 'qwertyuiop',
-      errors: {}
+      errors: {},
+      isLoading: true
     });
   });
   it('Should render errors on invalid form submission', () => {

client/src/__tests__/components/Navbar.spec.js

@@ -10,6 +10,16 @@ describe('<Navbar />', () => {
     const wrapper = shallow(<Navbar auth={auth} />);
     expect(wrapper).toMatchSnapshot();
   });
+  it('Should render the GuestLinks if signed in', () => {
+    const auth = {
+      isAuthenticated: true
+    };
+    const logout = jest.fn();
+    const wrapper = shallow(<Navbar auth={auth} logout={logout} />);
+    wrapper.find('#userLinkID').simulate('click', {
+      preventDefault: jest.fn()
+    });
+  })
   it('Should call mapStateToProps', () => {
     mapStateToProps(state);
   });

client/src/__tests__/components/RecipeDetails.spec.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { RecipeDetail, mapStateToProps } from '../../components/RecipeDetails';
-import recipes from '../fixtures/recipes';
+import recipes, { singleRecipe, recipesLoading } from '../fixtures/recipes';
 import { auth } from '../fixtures/authUser';
 import ReviewForm from '../../components/ReviewForm';
 import state from '../fixtures/state';
+import Loader from '../../components/Loader';
 
 describe('<RecipeDetails Component', () => {
   const GetOneRecipeAction = jest.fn();
@@ -15,13 +16,15 @@ describe('<RecipeDetails Component', () => {
   };
   it('Should render the recipe details component properly', () => {
     const wrapper = shallow(<RecipeDetail
+      singleRecipe={singleRecipe}
       GetOneRecipeAction={() => Promise.resolve()}
       match={match} recipe={recipes[2]} />);
     expect(wrapper).toMatchSnapshot();
   });
   it('Should call the favorites method handler', () => {
     const AddFavoriteRecipesAction = jest.fn();
     const wrapper = shallow(<RecipeDetail
+      singleRecipe={singleRecipe}
       GetOneRecipeAction={() => Promise.resolve()}
       AddFavoriteRecipesAction={() => Promise.resolve()}
       match={match}
@@ -34,6 +37,7 @@ describe('<RecipeDetails Component', () => {
   it('Should call the down-vote method handler', () => {
     const DownVoteRecipeAction = jest.fn();
     const wrapper = shallow(<RecipeDetail
+      singleRecipe={singleRecipe}
       GetOneRecipeAction={() => Promise.resolve()}
       AddFavoriteRecipesAction={() => Promise.resolve()}
       DownVoteRecipeAction={() => Promise.resolve()}
@@ -47,6 +51,7 @@ describe('<RecipeDetails Component', () => {
   it('Should call the up-vote method handler', () => {
     const UpvoteRecipeAction = jest.fn();
     const wrapper = shallow(<RecipeDetail
+      singleRecipe={singleRecipe}
       GetOneRecipeAction={() => Promise.resolve()}
       AddFavoriteRecipesAction={() => Promise.resolve()}
       DownVoteRecipeAction={() => Promise.resolve()}
@@ -58,6 +63,36 @@ describe('<RecipeDetails Component', () => {
       preventDefault: jest.fn()
     });
   });
+  it('Should render the loader with the right props passed', () => {
+    const wrapper = shallow(<RecipeDetail
+      singleRecipe={!singleRecipe}
+      GetOneRecipeAction={() => Promise.resolve()}
+      AddFavoriteRecipesAction={() => Promise.resolve()}
+      DownVoteRecipeAction={() => Promise.resolve()}
+      match={match}
+      recipe={recipes[2]}
+    >
+      <Loader />
+    </RecipeDetail>);
+  });
+  it('Should render ReviewForm as a child component', () => {
+    const auth = {
+      isAuthenticated: true
+    };
+    const reviewRecipe = jest.fn();
+    const wrapper = shallow(<RecipeDetail
+      singleRecipe={singleRecipe}
+      auth={auth}
+      match={match}
+      recipe={recipes[2]}
+      GetOneRecipeAction={() => Promise.resolve()}
+      AddFavoriteRecipesAction={() => Promise.resolve()}
+    >
+      <ReviewForm
+        reviewRecipe={reviewRecipe}
+      />
+    </RecipeDetail>);
+  });
   it('Should call mapStateToProps', () => {
     mapStateToProps(state);
   });