diff --git a/app/javascript/containers/User/NewUser.jsx b/app/javascript/containers/User/NewUser.jsx index 275e24b..c2e53d6 100644 --- a/app/javascript/containers/User/NewUser.jsx +++ b/app/javascript/containers/User/NewUser.jsx @@ -1,19 +1,17 @@ import React from "react" import classes from './NewUser.sass' -import {connect} from "react-redux"; -import {createStructuredSelector} from "reselect"; import UserForm from "../UserForm/UserForm"; import UserSettingsApi from "../../api/userSettingsApi"; -const NewUser = ({user}) => { - const saveUser = () => { - UserSettingsApi.updateUser(userSettingsParam); +const NewUser = () => { + const saveUser = (userData) => { + // TODO: needs a create user + UserSettingsApi.updateUser(userData); } return (
@@ -21,9 +19,4 @@ const NewUser = ({user}) => { ); }; - -const mapStateToProps = createStructuredSelector({ - user: state => state.app.user -}); - -export default connect(mapStateToProps, null)(NewUser); +export default NewUser; diff --git a/app/javascript/containers/User/NewUser.test.js b/app/javascript/containers/User/NewUser.test.js new file mode 100644 index 0000000..3f9976e --- /dev/null +++ b/app/javascript/containers/User/NewUser.test.js @@ -0,0 +1,27 @@ +import React from 'react'; + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import NewUser from "./NewUser"; + +configure({adapter: new Adapter()}); + +describe('', () => { + it('renders components', () => { + const wrapper = mount(); + expect(wrapper.find('input')).toHaveLength(5); + expect(wrapper.find('h1').text()).toEqual('Criar novo usuário'); + }); + + describe('when click on save button', () => { + it('shows error message', () => { + const wrapper = mount(); + wrapper.find('button').simulate('click'); + expect(wrapper.find('TextInputWithLabel').get(0).props.error).toEqual('Este campo é obrigatório') + expect(wrapper.find('TextInputWithLabel').get(1).props.error).toEqual('Este campo é obrigatório') + expect(wrapper.find('TextInputWithLabel').get(2).props.error).toEqual('Este campo é obrigatório') + expect(wrapper.find('TextInputWithLabel').get(3).props.error).toEqual('Este campo é obrigatório') + expect(wrapper.find('TextInputWithLabel').get(4).props.error).toEqual(undefined) + }); + }); +}); diff --git a/app/javascript/containers/UserForm/UserForm.jsx b/app/javascript/containers/UserForm/UserForm.jsx index a080b27..b4e4369 100644 --- a/app/javascript/containers/UserForm/UserForm.jsx +++ b/app/javascript/containers/UserForm/UserForm.jsx @@ -9,21 +9,32 @@ const NO_PASSWORD = 'NO_PASSWORD'; // TODO: use this on UserSettings // TODO: consider changing UserSettings to UpdateUser +const initialUserData = { + id: null, + name: null, + email: null, + phone: null, + password: null, + passwordConfirmation: null, +} + const UserForm = ({user, title, saveUser}) => { - const [userSettings, setUserSettings] = useState({}); + const [userData, setUserData] = useState(initialUserData); const [formErrors, setFormErrors] = useState({}); useEffect(() => { - const userData = { - id: user.id, - name: user.name, - email: user.email, - phone: user.phone, - password: NO_PASSWORD, - passwordConfirmation: NO_PASSWORD, - }; - - setUserSettings(userData) + if (user) { + const initialUserData = { + id: user.id, + name: user.name, + email: user.email, + phone: user.phone, + password: user.password, + passwordConfirmation: user.password, + }; + + setUserData(initialUserData) + } return () => { // cleanup @@ -32,28 +43,28 @@ const UserForm = ({user, title, saveUser}) => { const inputChangedHandler = (event, inputIdentifier) => { - const updatedUserSettings = { - ...userSettings + const updatedUserData = { + ...userData }; - updatedUserSettings[inputIdentifier] = event.target.value; + updatedUserData[inputIdentifier] = event.target.value; - setUserSettings(updatedUserSettings) + setUserData(updatedUserData) console.log({formErrors}) if (Object.keys(formErrors).length > 0) { - validateForm(updatedUserSettings); + validateForm(updatedUserData); } } - const validateForm = (userSettings) => { + const validateForm = (userData) => { let formValidation = new FormValidation(); - formValidation.email(userSettings.email) - formValidation.password(userSettings.password, userSettings.passwordConfirmation) - formValidation.phone(userSettings.phone) - formValidation.requiredFields(['name', 'email', 'phone', 'password'], userSettings) + formValidation.email(userData.email) + formValidation.password(userData.password, userData.passwordConfirmation) + formValidation.phone(userData.phone) + formValidation.requiredFields(['name', 'email', 'phone', 'password'], userData) setFormErrors(formValidation.errors) @@ -61,21 +72,21 @@ const UserForm = ({user, title, saveUser}) => { } const submitHandler = () => { - if (!validateForm(userSettings)) { + if (!validateForm(userData)) { return } - let userSettingsParam = { - id: userSettings.id, - name: userSettings.name, - email: userSettings.email, - phone: userSettings.phone, + let userDataParam = { + id: userData.id, + name: userData.name, + email: userData.email, + phone: userData.phone, }; - if (userSettings.password !== NO_PASSWORD) { - userSettingsParam = { - ...userSettingsParam, - password: userSettings.password + if (userData.password !== NO_PASSWORD) { + userDataParam = { + ...userDataParam, + password: userData.password } } @@ -95,21 +106,21 @@ const UserForm = ({user, title, saveUser}) => { inputChangedHandler(event, 'name')} /> inputChangedHandler(event, 'email')} /> inputChangedHandler(event, 'phone')} /> @@ -120,7 +131,7 @@ const UserForm = ({user, title, saveUser}) => { inputChangedHandler(event, 'password')} @@ -128,7 +139,7 @@ const UserForm = ({user, title, saveUser}) => { inputChangedHandler(event, 'passwordConfirmation')}