feat(view-update-profile): implement some testing

src/feature/profile/profile_reducers/__test__/ProfileReducers.test.js

@@ -0,0 +1,75 @@
+import ProfileReducer from '../ProfileReducers';
+import { RETRIEVE_PROFILE_SUCCESS, RETRIEVE_PROFILE_ERROR } from '../../view_profile/ViewProfileConstants';
+import { UPDATE_PROFILE_SUCCESS, UPDATE_PROFILE_ERROR } from '../../update_profile/UpdateProfileConstants';
+
+const initState = { profile: [] };
+
+const expected = {
+  profile: {
+    userName: 'someone',
+    bio: 'someone@someone.com',
+    image: 'someone'
+  }
+};
+
+const profile = {
+  userName: 'someone',
+  bio: 'someone@someone.com',
+  image: 'someone'
+};
+
+const retrieveProfileSuccessAction = {
+  type: RETRIEVE_PROFILE_SUCCESS,
+  payload: {
+    data: {
+      data: profile
+    }
+  }
+};
+
+const retrieveProfileFailureAction = {
+  type: RETRIEVE_PROFILE_ERROR,
+  error: 'username not found'
+};
+
+const updateProfileSuccessAction = {
+  type: UPDATE_PROFILE_SUCCESS,
+  payload: {
+    data: {
+      data: profile
+    }
+  }
+};
+
+const updateProfileFailureAction = {
+  type: UPDATE_PROFILE_ERROR,
+  error: 'invalid image'
+};
+
+// const retrieveProfileError = {
+//   type: RETRIEVE_PROFILE_ERROR
+// };
+
+describe('Profile Reducer Tests', () => {
+  it('should return an empty state', () => {
+    const defaultState = ProfileReducer(undefined, {});
+    expect(defaultState).toEqual({ profile: [] });
+  });
+
+  it('should return a profile from retrieve profile success action', () => {
+    const newState = ProfileReducer(initState, retrieveProfileSuccessAction);
+    expect(newState).toEqual(expected);
+  });
+  it('should return an empty state from retrieve profile failure action', () => {
+    const newState = ProfileReducer(initState, retrieveProfileFailureAction);
+    expect(newState).toEqual(initState);
+  });
+  it('should return an updated profile from update profile success action', () => {
+    const newState = ProfileReducer(initState, updateProfileSuccessAction);
+    expect(newState).toEqual(expected);
+  });
+  it('should return an empty state from update profile failure action', () => {
+    const newState = ProfileReducer(initState, updateProfileFailureAction);
+    expect(newState).toEqual(initState);
+  });
+});

src/feature/profile/update_profile/UpdateProfileAction.js

@@ -37,11 +37,6 @@ export const updateUserProfile = profile => async dispatch => {
     });
   } catch (error) {
     dispatch(sendError(error));
-    if (error.response.status === 409) {
-      return toast.error('Username taken', {
-        position: toast.POSITION.TOP_CENTER
-      });
-    }
     toast.error(error.response.data.error, {
       position: toast.POSITION.TOP_CENTER
     });

src/feature/profile/update_profile/UpdateProfileComponent.js

@@ -78,7 +78,7 @@ class UpdateProfileComponent extends Component {
   }
 }
 
-const mapStateToProps = state => ({
+export const mapStateToProps = state => ({
   authenticated: state.login.user,
   profile: state.profile
 });

src/feature/profile/update_profile/UpdateProfileStyle.scss

@@ -15,8 +15,8 @@
   &__btn {
     margin: 6% 0 0 0;
     padding: 8px;
-    color: #282c34;
-    border-color: #282c34;
+    color: #599bda;
+    border-color: #599bda;
     border-radius: 15px;
     outline: none;
     font-size: 16px;

src/feature/profile/update_profile/__tests__/UpdateProfileAction.test.js

@@ -0,0 +1,64 @@
+/* eslint-disable max-len */
+/* eslint-disable consistent-return */
+import moxios from 'moxios';
+import { makeMockStore } from '../../../../app/common/config/mockStore';
+import { updateUserProfile } from '../UpdateProfileAction';
+import { UPDATE_PROFILE_SUCCESS, UPDATE_PROFILE_ERROR } from '../UpdateProfileConstants';
+
+const store = makeMockStore({ profile: {} });
+const mockSuccess = data => ({ status: 200, response: data });
+const mockError = error => ({ status: 400, response: error });
+
+describe('Update Profile Action', () => {
+  beforeEach(() => moxios.install());
+  afterEach(() => moxios.uninstall());
+
+  it('should dispatch UPDATE_PROFILE_SUCCESS action', async () => {
+    const profile = {
+      user: 'someone',
+      bio: 'someone special',
+      image: 'someone.jpg'
+    };
+
+    try {
+      const expected = {
+        type: UPDATE_PROFILE_SUCCESS,
+        payload: profile
+      };
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith(mockSuccess(profile));
+      });
+      const result = await store.dispatch(updateUserProfile(profile));
+      if (result) {
+        const actionCalled = store.getActions();
+        expect(actionCalled[0]).toEqual(expected);
+      }
+    } catch (err) { return null; }
+  });
+
+  it('should dispatch UPDATE_PROFILE_ERROR action', async () => {  
+    const profileError = { error: 'invalid image' };
+    try {
+      const profile = {
+        user: 'someone',
+        bio: 'someone special',
+        image: 'someone'
+      };
+      const expected = {
+        type: UPDATE_PROFILE_ERROR,
+        error: profileError
+      };
+
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith(mockError(expected));
+      });
+      const result = await store.dispatch(updateUserProfile(profile));
+      if (result) {
+        const actionCalled = store.getActions();
+        expect(actionCalled[1]).toEqual(expected);
+      }
+    } catch (err) { return null; }
+  });
+});

src/feature/profile/update_profile/__tests__/UpdateProfileComponent.test.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-named-as-default */
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import UpdateProfileComponent from '../UpdateProfileComponent';
+import store from '../../../../app/store/index';
+
+const Wrapper = mount(
+  <Provider store={store}>
+    <UpdateProfileComponent />
+  </Provider>
+);
+
+const input = Wrapper.find('input');
+const textarea = Wrapper.find('textarea');
+const button = Wrapper.find('button');
+
+describe('Update Profile Component Tests', () => {
+  it('should render the update profile component', () => {
+    expect(Wrapper.exists()).toBe(true);
+  });
+  it('should find the input field and textarea', () => {
+    expect(input).toHaveLength(1);
+    expect(textarea).toHaveLength(1);
+    expect(button).toHaveLength(1);
+  });
+  it('should type in bio and upload an image and submit update the profile', () => {
+    textarea.simulate('change', {
+      target: { value: 'someone special', id: 'bio' }
+    });
+    input.simulate('change', {
+      target: {
+        files: [
+          'someone.jpg'
+        ]
+      }
+    });
+    button.simulate('click');
+  });
+});

src/feature/profile/view_profile/ViewProfileComponent.js

@@ -38,12 +38,12 @@ const ProfileComponent = props => {
   );
 };
 
-const mapStateToProps = state => ({
+export const mapStateToProps = state => ({
   authenticated: state.login.user,
   profile: state.profile
 });
 
-const mapDispatchToProps = dispatch => ({
+export const mapDispatchToProps = dispatch => ({
   getProfile: user => {
     dispatch(retrieveProfile(user));
   }

src/feature/profile/view_profile/ViewProfileStyle.scss

@@ -43,11 +43,10 @@
 
   &__link {
     text-decoration: none;
-    color: #000000;
+    color: #599bda;
+    border-color: #599bda;
     margin-left: 45.6%;
     padding: 6px 15px 6px 15px;
-    color: #282c34;
-    border-color: #282c34;
     border: 1px solid;
     border-radius: 15px;
     outline: none;

src/feature/profile/view_profile/__tests__/ViewProfileAction.test.js

@@ -0,0 +1,60 @@
+/* eslint-disable max-len */
+/* eslint-disable consistent-return */
+import moxios from 'moxios';
+import { makeMockStore } from '../../../../app/common/config/mockStore';
+import { retrieveProfile } from '../ViewProfileAction';
+import { RETRIEVE_PROFILE_SUCCESS, RETRIEVE_PROFILE_ERROR } from '../ViewProfileConstants';
+
+const store = makeMockStore({ profile: {} });
+const mockSuccess = data => ({ status: 201, response: data });
+const mockError = error => ({ status: 404, response: error });
+
+describe('Retrieve Profile Action', () => {
+  beforeEach(() => moxios.install());
+  afterEach(() => moxios.uninstall());
+
+  it('should dispatch RETRIEVE_PROFILE_SUCCESS action', async () => {
+    const profile = {
+      userName: 'someone',
+      bio: 'someone special',
+      image: 'someone'
+    };
+
+    try {
+      const expected = {
+        type: RETRIEVE_PROFILE_SUCCESS,
+        payload: profile
+      };
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith(mockSuccess(profile));
+      });
+      const result = await store.dispatch(retrieveProfile(profile.userName));
+      if (result) {
+        const actionCalled = store.getActions();
+        expect(actionCalled[0]).toEqual(expected);
+      }
+    } catch (err) { return null; }
+  });
+
+  it('should dispatch RETRIEVE_PROFILE_ERROR action', async () => {  
+    const profileError = { error: 'profile not found' };
+    try {
+      const invalidUser = 'someonelse';
+      const expected = {
+        type: RETRIEVE_PROFILE_ERROR,
+        error: profileError
+      };
+
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith(mockError(expected));
+      });
+      const result = await store.dispatch(retrieveProfile(invalidUser));
+      if (result) {
+        const actionCalled = store.getActions();
+        expect(actionCalled[1]).toEqual(expected);
+      }
+    } catch (err) { return null; }
+  });
+});

src/feature/profile/view_profile/__tests__/ViewProfileComponent.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import ViewProfileComponent from '../ViewProfileComponent';
+import store from '../../../../app/store/index';
+
+const Wrapper = mount(
+  <Provider store={store}>
+    <ViewProfileComponent />
+  </Provider>
+);
+
+describe('View Profile Component Tests', () => {
+  it('should render the view profile component', () => {
+    expect(Wrapper.exists()).toBe(true);
+  });
+});