Fixed tests and Userform

TOPOFGR · TOPOFGR · commit 5d657b751c27 · 2020-08-12T14:23:35.000-03:00
diff --git a/src/components/UserForm/UserForm.test.js b/src/components/UserForm/UserForm.test.js
@@ -16,82 +16,73 @@ describe('<UserForm /> rendering', () => {
       file: null,
       id: 'test id',
       logoUrl: 'some logoUrl',
-      createdAt: new Date().toDateString()
+      createdAt: new Date().toDateString(),
     };
   });
 
   it('should render without crashing', () => {
     const user = { ...userData, createdAt: '11/21/2020' };
 
     const { component } = shallowWithProviders(
-      <UserForm userData={user} action={actions.createUser} />
+      <UserForm user={user} action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
     expect(component).toMatchSnapshot();
   });
 
   it('should display user name preview', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
-    expect(
-      component
-        .find('input.input.is-static')
-        .at(1)
-        .props().value
-    ).toEqual('Mateo');
+    expect(component.find('input.input.is-static').at(1).props().value).toEqual(
+      'Mateo'
+    );
   });
 
   it('should display email preview if it is creating a new user', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
     expect(
-      component
-        .find('input.input.is-static')
-        .first()
-        .props().value
+      component.find('input.input.is-static').first().props().value
     ).toEqual('mkrukuy@gmail.com');
   });
 
   it('should display location preview', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} isEditing action={actions.createUser} />
+      <UserForm user={userData} isEditing action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
-    expect(
-      component
-        .find('input.input.is-static')
-        .at(2)
-        .props().value
-    ).toEqual('Montevideo, Uruguay');
+    expect(component.find('input.input.is-static').at(2).props().value).toEqual(
+      'Montevideo, Uruguay'
+    );
   });
 
   it('should display admin preview', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} isEditing action={actions.createUser} />
+      <UserForm user={userData} isEditing action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
     expect(component.exists('.icon')).toBeTruthy();
   });
 
   it('should display created preview', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} isEditing action={actions.createUser} />
+      <UserForm user={userData} isEditing action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
     expect(component.find('p.date')).toBeTruthy();
   });
@@ -115,15 +106,15 @@ describe('<LoginForm /> actions', () => {
       logoUrl: 'some logoUrl',
       isAdmin: false,
       file: null,
-      createdAt: new Date().toDateString()
+      createdAt: new Date().toDateString(),
     };
   });
 
   it('should dispatch createUser action when creating a new user', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} />
     )({
-      users: {}
+      users: {},
     });
 
     component.find('form').simulate('submit');
@@ -133,9 +124,9 @@ describe('<LoginForm /> actions', () => {
 
   it('should dispatch modifyUser action when editing a user', () => {
     const { component } = mountWithProviders(
-      <UserForm userData={userData} isEditing action={actions.modifyUser} />
+      <UserForm user={userData} isEditing action={actions.modifyUser} />
     )({
-      users: {}
+      users: {},
     });
 
     component.find('form').simulate('submit');
diff --git a/src/components/UserForm/__snapshots__/UserForm.test.js.snap b/src/components/UserForm/__snapshots__/UserForm.test.js.snap
@@ -143,7 +143,7 @@ exports[`<UserForm /> rendering should render without crashing 1`] = `
     >
       <UserForm
         action={[Function]}
-        userData={
+        user={
           Object {
             "createdAt": "11/21/2020",
             "email": "mkrukuy@gmail.com",
diff --git a/src/components/UserForm/index.jsx b/src/components/UserForm/index.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -11,10 +11,10 @@ import { validateEmail } from 'utils';
 import './UserForm.scss';
 import DatePicker from '../DatePicker';
 
-const UserForm = ({ isEditing, isProfile, userData, action }) => {
+const UserForm = ({ isEditing, isProfile, user, setUser, action }) => {
   const { loading } = useSelector(
-    state => ({
-      loading: state.users.loading
+    (state) => ({
+      loading: state.users.loading,
     }),
     shallowEqual
   );
@@ -25,16 +25,14 @@ const UserForm = ({ isEditing, isProfile, userData, action }) => {
     return () => dispatch(usersCleanUp());
   }, [dispatch]);
 
-  const [user, setUser] = useState(userData);
-
   const onChangeHandler = useChangeHandler(setUser);
 
-  const onFileChangedHandler = event => {
+  const onFileChangedHandler = (event) => {
     const file = event.target.files[0];
-    setUser(prevState => ({ ...prevState, file, logoUrl: null }));
+    setUser((prevState) => ({ ...prevState, file, logoUrl: null }));
   };
 
-  const onSubmitHandler = event => {
+  const onSubmitHandler = (event) => {
     event.preventDefault();
     dispatch(
       action({ ...user, createdAt: user.createdAt, isEditing, isProfile })
@@ -43,7 +41,7 @@ const UserForm = ({ isEditing, isProfile, userData, action }) => {
 
   let emailInput = {
     modifier: null,
-    message: { modifier: null, content: null }
+    message: { modifier: null, content: null },
   };
 
   const invalidEmail = user.email && !validateEmail(user.email);
@@ -55,8 +53,8 @@ const UserForm = ({ isEditing, isProfile, userData, action }) => {
       modifier: 'is-danger',
       message: {
         modifier: 'is-danger',
-        content: invalidEmailMessage
-      }
+        content: invalidEmailMessage,
+      },
     };
   }
 
@@ -270,8 +268,9 @@ const UserForm = ({ isEditing, isProfile, userData, action }) => {
                         <div className="control">
                           <button
                             type="submit"
-                            className={`button is-primary ${loading &&
-                              'is-loading'}`}
+                            className={`button is-primary ${
+                              loading && 'is-loading'
+                            }`}
                             disabled={!canSubmit}
                           >
                             <span>{useFormatMessage('UserForm.submit')}</span>
@@ -383,7 +382,7 @@ const UserForm = ({ isEditing, isProfile, userData, action }) => {
                       weekday: 'short',
                       year: 'numeric',
                       month: 'short',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </p>
                 </div>
@@ -404,9 +403,9 @@ UserForm.propTypes = {
     name: PropTypes.string.isRequired,
     location: PropTypes.string,
     logoUrl: PropTypes.string,
-    createdAt: PropTypes.string.isRequired
+    createdAt: PropTypes.string.isRequired,
   }),
-  action: PropTypes.func.isRequired
+  action: PropTypes.func.isRequired,
 };
 
 export default UserForm;
diff --git a/src/pages/User/User.test.js b/src/pages/User/User.test.js
@@ -6,19 +6,52 @@ import User from '.';
 
 describe('<User /> rendering', () => {
   it('should render without crashing', () => {
-    const { component } = shallowWithProviders(<User />)({ users: {} });
+    const { component } = shallowWithProviders(<User />)({
+      users: {
+        user: {
+          name: '',
+          email: '',
+          location: '',
+          isAdmin: false,
+          file: null,
+          createdAt: new Date().toDateString(),
+        },
+      },
+    });
 
     expect(component).toMatchSnapshot();
   });
 
   it('should not show the spinner when creating a user', () => {
-    const { component } = mountWithProviders(<User />)({ users: {} });
+    const { component } = mountWithProviders(<User />)({
+      users: {
+        user: {
+          name: '',
+          email: '',
+          location: '',
+          isAdmin: false,
+          file: null,
+          createdAt: new Date().toDateString(),
+        },
+      },
+    });
 
     expect(component.exists(ClipLoader)).toBeFalsy();
   });
 
   it('should render the UserForm component when creating a user', () => {
-    const { component } = mountWithProviders(<User />)({ users: {} });
+    const { component } = mountWithProviders(<User />)({
+      users: {
+        user: {
+          name: '',
+          email: '',
+          location: '',
+          isAdmin: false,
+          file: null,
+          createdAt: new Date().toDateString(),
+        },
+      },
+    });
 
     expect(component.exists(UserForm)).toBeTruthy();
   });
diff --git a/src/pages/User/index.jsx b/src/pages/User/index.jsx
@@ -16,21 +16,23 @@ const User = () => {
       success: state.users.success,
       usersList: state.users.list,
       userData: state.users.user,
-      error: state.users.error
+      error: state.users.error,
     }),
     shallowEqual
   );
 
-  const [user, setUser] = useState(userData);
+  const [user, setUser] = useState(userData || {});
 
   const dispatch = useDispatch();
 
   useEffect(() => {
     if (id) {
-      const userFetched = usersList?.find((fetchedUser) => fetchedUser.id === id);
+      const userFetched = usersList.find(
+        (fetchedUser) => fetchedUser.id === id
+      );
       if (userFetched) {
         setUser(userFetched);
-      } else if(userData.id === id) {
+      } else if (userData.id === id) {
         setUser(userData);
       } else {
         dispatch(fetchUsers(id));
@@ -46,7 +48,8 @@ const User = () => {
     ) : (
       <UserForm
         isEditing={isEditing}
-        userData={user}
+        user={user}
+        setUser={setUser}
         action={isEditing ? modifyUser : createUser}
       />
     );
diff --git a/src/state/actions/users.js b/src/state/actions/users.js
@@ -55,7 +55,7 @@ export const fetchUsers = (userId = '') => {
       return dispatch(
         USERS_FETCH_DATA_SUCCESS({
           list: getState().users.list,
-          user
+          user,
         })
       );
     }
@@ -81,7 +81,7 @@ export const fetchUsers = (userId = '') => {
     return dispatch(
       USERS_FETCH_DATA_SUCCESS({
         list: usersData.filter((user) => user.id !== id),
-        user: getState().users.user
+        user: getState().users.user,
       })
     );
   };
@@ -242,9 +242,8 @@ export const modifyUser = ({
     const { locale } = getState().preferences;
     const { logoUrl } = isProfile
       ? getState().auth.userData
-      : getState()
-          .users.list.filter((user) => user.id === id)
-          .pop();
+      : getState().users.list.find((user) => user.id === id) ||
+        getState().users.user;
 
     let deleteLogoTask;
     let uploadLogoTask;
@@ -292,7 +291,7 @@ export const modifyUser = ({
       toastr.success('', 'User updated successfully');
     }
 
-    return dispatch(USERS_MODIFY_USER_SUCCESS({ user: { ...userData, id } }));
+    return dispatch(USERS_MODIFY_USER_SUCCESS({ user: userData, id }));
   };
 };
 
diff --git a/src/state/reducers/index.js b/src/state/reducers/index.js
@@ -12,7 +12,7 @@ export default combineReducers({
     {
       key: 'auth',
       storage,
-      blacklist: ['error', 'loading']
+      blacklist: ['error', 'loading'],
     },
     authReducer
   ),
@@ -24,9 +24,9 @@ export default combineReducers({
     {
       key: 'users',
       storage,
-      blacklist: ['error', 'loading']
+      blacklist: ['error', 'loading'],
     },
     usersReducer
   ),
-  toastr: toastrReducer
+  toastr: toastrReducer,
 });
diff --git a/src/state/reducers/users/index.js b/src/state/reducers/users/index.js
diff --git a/src/state/reducers/users/users.test.js b/src/state/reducers/users/users.test.js

Original file line number	Diff line number	Diff line change
@@ -143,7 +143,7 @@ exports[`<UserForm /> rendering should render without crashing 1`] = `
`143`	`143`	`>`
`144`	`144`	`<UserForm`
`145`	`145`	`action={[Function]}`
`146`		`- userData={`
	`146`	`+ user={`
`147`	`147`	`Object {`
`148`	`148`	`"createdAt": "11/21/2020",`
`149`	`149`	`"email": "mkrukuy@gmail.com",`