Merge pull request #42 from Easybuoy/feature/164954218/create-edit-pr…

…oduct-component

#164954218 Create edit product component

.babelrc

@@ -5,7 +5,7 @@
           "@babel/plugin-proposal-class-properties",
           {
             "loose": true
-          }
+          },
         ]
       ]
 

client/__tests__/__mocks__/mock.js

@@ -1,7 +1,8 @@
 export default {
     getErrorsMock: { email: 'Wrong email', password: 'Wrong password' },
-    setCurrentUserMock: { },
+    setCurrentUserMock: { token: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNlMjZmNDExLTQ1ZjQtNDBiOC04MDE4LTA5OWM5OWE4OWFhMSIsInVzZXJJbWFnZSI6ImFzc2V0cy91cGxvYWRzL3VzZXJzL2RlZmF1bHQtYXZhdGFyLnBuZyIsInR5cGUiOjEsImlhdCI6MTU1Mzg5NTc3NCwiZXhwIjoxNTUzODk5Mzc0fQ.rwxUYQcuR7VfTPNzeRp43u_61Vo-HMOHQrcvuTi_i5M' },
     getProductsMock: [{ name: 'Samsung', quantity: 1234, price: 1000 }],
+    getProductByIdMock: { name: 'Samsung', quantity: 1234, price: 1000 },
     deleteProductMock: { message: 'Product deleted successfully' },
     deleteAttendantMock: { message: 'Attendant deleted successfully' },
     createAttendantMock: { message: 'Attendant created successfully' },

client/__tests__/actions/authActions.test.js

@@ -22,29 +22,29 @@ describe('authActions', () => {
         expect(response.payload).toEqual(data);
     });
 
-    // it(`dispatches SET_ERRORS and SET_CURRENT_USER when request is successful`, (done) => {
-    //   moxios.wait(() => {
-    //     const request = moxios.requests.mostRecent();
-    //     request.respondWith({
-    //       status: 200,
-    //       // response: {data: mock.setCurrentUserMock},
-    //     });
-    //   });
-    //   const expectedActions = [
-    //     {
-    //       type: SET_ERRORS,
-    //     },
-    //     {
-    //       type: SET_CURRENT_USER,
-    //       payload: mock.setCurrentUserMock
-    //     }
-    //   ];
-    //   const store = mockStore({});
-    //   return store.dispatch(signIn({email: '', password: '1234'})).then(() => {
-    //     expect(store.getActions()).toEqual(expectedActions);
-    //     done();
-    //   });
-    // });
+    it(`dispatches SET_ERRORS and SET_CURRENT_USER when request is successful`, (done) => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({
+          status: 200,
+          response: {data: mock.setCurrentUserMock},
+        });
+      });
+      const expectedActions = [
+        {
+          type: SET_ERRORS,
+        },
+        {
+          type: SET_CURRENT_USER,
+          payload: {"exp": 1553899374, "iat": 1553895774, "id": "3e26f411-45f4-40b8-8018-099c99a89aa1", "type": 1, "userImage": "assets/uploads/users/default-avatar.png"}
+        }
+      ];
+      const store = mockStore({});
+      return store.dispatch(signIn({email: '', password: '1234'})).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+        done();
+      });
+    });
 
     it(`dispatches GET_ERRORS when request fails`, (done) => {
     moxios.wait(() => {
@@ -59,6 +59,9 @@ describe('authActions', () => {
         type: GET_ERRORS,
         payload:  mock.getErrorsMock
       },
+      {
+        type: SET_ERRORS,
+      }
     ];
     const store = mockStore({});
     return store.dispatch(signIn()).then(() => {

client/__tests__/actions/productActions.test.js

@@ -2,8 +2,8 @@ import configureStore from 'redux-mock-store';
 import moxios from 'moxios';
 import thunk from 'redux-thunk';
 
-import { setProductsLoading, setProducts, getProducts, createProduct, deleteProduct } from '../../src/actions/productActions';
-import { SET_PRODUCT_LOADING, SET_PRODUCTS, GET_ERRORS, SET_ERRORS, CREATE_PRODUCT, DELETE_PRODUCT } from '../../src/actions/types';
+import { setProductsLoading, setProducts, getProducts, createProduct, deleteProduct, getProductById, editProduct, setProduct } from '../../src/actions/productActions';
+import { SET_PRODUCT_LOADING, SET_PRODUCTS, GET_ERRORS, SET_ERRORS, CREATE_PRODUCT, DELETE_PRODUCT, EDIT_PRODUCT, SET_PRODUCT } from '../../src/actions/types';
 import mock from '../__mocks__/mock';
 
 describe('productActions', () => {
@@ -20,13 +20,20 @@ describe('productActions', () => {
         expect(response.type).toEqual(SET_PRODUCT_LOADING);
     });
 
-    it('should set products loading', () => {
+    it('should set products', () => {
         const data = [{ name: 'Samsung', quantity: 1234, price: 1000 }];
         const response = setProducts(data);
         expect(response.type).toEqual(SET_PRODUCTS);
         expect(response.payload).toEqual(data);
     });
 
+    it('should set product', () => {
+      const data = { name: 'Samsung', quantity: 1234, price: 1000 };
+      const response = setProduct(data);
+      expect(response.type).toEqual(SET_PRODUCT);
+      expect(response.payload).toEqual(data);
+  });
+
     it(`dispatches SET_PRODUCTS_LOADING and SET_PRODUCTS when request is successful`, (done) => {
     moxios.wait(() => {
       const request = moxios.requests.mostRecent();
@@ -189,4 +196,132 @@ describe('productActions', () => {
       done();
     });
   });
+
+  it(`dispatches SET_PRODUCTS_LOADING, SET_PRODUCTS, and SET_PRODUCTS when request is successful`, (done) => {
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        response: {data: mock.getProductByIdMock},
+      });
+    });
+    const expectedActions = [
+      {
+        type: SET_PRODUCT_LOADING,
+      },
+      {
+          type: SET_PRODUCT,
+          payload: mock.getProductByIdMock
+      },
+      // {
+      //   type: SET_PRODUCTS,
+      //   payload: []
+      // },
+    ];
+    const store = mockStore({});
+    return store.dispatch(getProductById(1)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+      done();
+    });
+  });
+
+  it(`dispatches SET_PRODUCTS_LOADING, GET_ERRORS when request fails`, (done) => {
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 400,
+        response: {data: mock.getErrorsMock},
+      });
+    });
+    const expectedActions = [
+        {
+            type: SET_PRODUCT_LOADING
+        },
+      {
+        type: GET_ERRORS,
+        payload: mock.getErrorsMock
+      },
+    ];
+    const store = mockStore({});
+    return store.dispatch(getProductById(1)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+      done();
+    });
+  });
+
+  it(`dispatches SET_PRODUCTS_LOADING, SET_ERRORS, and EDIT_PRODUCT and SET_PRODUCTS when request is successful`, (done) => {
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        // response: {data: mock.},
+      });
+    });
+    const expectedActions = [
+      {
+        type: SET_PRODUCT_LOADING,
+      },
+      {
+        type: SET_ERRORS
+      },
+      {
+          type: EDIT_PRODUCT,
+      },
+      {
+        type: SET_PRODUCTS,
+        payload: []
+      },
+    ];
+    const productData = {
+      name: 'Jago',
+      description: 'Milk',
+      price: 200,
+      quantity: 15,
+      productimage: '/ap'
+  } 
+    const store = mockStore({});
+    return store.dispatch(editProduct(1, productData)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+      done();
+    });
+  });
+
+  it(`dispatches SET_PRODUCTS_LOADING, SET_PRODUCTS, GET_ERRORS and SET_ERRORS when request fails`, (done) => {
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 400,
+        response: {data: mock.getErrorsMock},
+      });
+    });
+    const expectedActions = [
+        {
+            type: SET_PRODUCT_LOADING
+        },
+        {
+          type: SET_PRODUCTS,
+          payload: []
+        },
+      {
+        type: GET_ERRORS,
+        payload: {message: undefined}
+      },
+      {
+        type: SET_ERRORS,
+      },
+    ];
+    const productData = {
+      name: 'Jago',
+      description: 'Milk',
+      price: 200,
+      quantity: 15,
+      productimage: '/ap'
+  } 
+    const store = mockStore({});
+    return store.dispatch(editProduct(1, productData )).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+      done();
+    });
+  });
+
 });

client/__tests__/components/EditProduct.test.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+
+import { EditProduct } from '../../src/components/Products/EditProduct';
+
+describe('<EditProduct />', () => {
+    const props = {
+        getProductById: jest.fn(),
+        editProduct: jest.fn(),
+        product: jest.mock(),
+        errors: jest.mock(),
+        match: {params: jest.mock()},
+        history: {push: jest.fn()}
+      };
+
+      it('renders the EditProduct component correctly', () => {
+        const wrapper = shallow(<EditProduct {...props}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+            it('should call the mock onSubmit function', () => {
+                const wrapper = shallow(<EditProduct {...props} />)
+                const instance = wrapper.instance();
+
+                instance.refs = {
+                    productname: {
+                        value: jest.mock()
+                    },
+                    productdescription: {
+                        value: jest.mock()
+                    },
+                    productprice: {
+                        value: jest.mock()
+                    },
+                    productquantity: {
+                        value: jest.mock()
+                    },
+                    productimage: {
+                        files: jest.mock()
+                    }
+                }
+                const event = Object.assign(jest.fn(), { preventDefault: () => {} });
+
+                 sinon.spy(wrapper.instance(), 'onSubmit');
+                 wrapper.instance().onSubmit(event);
+                 expect(wrapper.instance().onSubmit.calledOnce)
+                   .toEqual(true);
+                   expect(wrapper.instance().onSubmit.calledWith(event));
+                });
+
+                it('should render Loading component if loading props is true', () => {
+                  const wrapper = shallow(<EditProduct {...props} />)
+
+                  expect(props.getProductById).toBeCalled();
+                   expect(props.getProductById).toHaveReturned();
+                  });
+
+                  it('should show error message(s) if product is not created', () => {
+                    props.errors = { message: 'Email field is required'}
+                    const wrapper = shallow(<EditProduct {...props} />)
+
+                    expect(props.getProductById).toBeCalled();
+                     expect(props.getProductById).toHaveReturned();
+                    // expect(wrapper).toMatchSnapshot();
+
+                    });
+
+                    it('should show toast message(s) if product is edited successfully', () => {
+                      props.product.isProductEdited = true;
+                      const wrapper = shallow(<EditProduct {...props} />)
+
+                      expect(props.getProductById).toBeCalled();
+                      expect(props.getProductById).toHaveReturned();
+                     });
+
+                     it('should render markup if product exist', () => {
+                        props.product.product = {name: 'Milo'};
+                        const wrapper = shallow(<EditProduct {...props} />)
+
+                        expect(props.getProductById).toBeCalled();
+                        expect(props.getProductById).toHaveReturned();
+                       });
+});

client/__tests__/components/Login.test.js

@@ -9,6 +9,7 @@ describe('<Login />', () => {
         signIn: jest.fn(),
         auth: jest.mock(),
         errors: jest.mock(),
+        history: {push: jest.fn()}
       };
 
     it('renders the Login component correctly', () => {
@@ -52,4 +53,21 @@ describe('<Login />', () => {
                expect(wrapper.instance().onSubmit.calledWith(event));
             });
 
+            it('should show error message(s) if login error occurs', () => {
+              props.errors = { message: 'Network Error', email: 'Email field is required', password: 'Password field is required'}
+              const wrapper = shallow(<Login {...props} />)
+
+              expect(props.signIn).toBeCalled();
+               expect(props.signIn).toHaveReturned();
+
+              });
+
+              it('should redirrect if user is signed in', () => {
+                props.auth.isSignedIn = true;
+                const wrapper = shallow(<Login {...props} />)
+
+                expect(props.signIn).toBeCalled();
+                 expect(props.signIn).toHaveReturned();
+
+                });
 });