(feat): userLogin

- user should login

Author: Ugizwenayo-Divine

assets/HomePic.jpg

@@ -13,8 +13,7 @@
     "coverage": "codeclimate-test-reporter < ./coverage/lcov.info"
   },
   "engines": {
-    "yarn": "1.x",
-    "node": "14.x"
+    "yarn": "1.x"
   },
   "repository": {
     "type": "git",
@@ -34,11 +33,23 @@
   "homepage": "https://github.com/Stackup-Rwanda/stackup2-barefoot-frontend#readme",
   "dependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@babel/runtime": "^7.10.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.10.0",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -66,6 +77,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.3.0",
+    "regenerator-runtime": "^0.13.5",
     "style-loader": "^1.2.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",

assets/taylor-simpson-GdwGZbU8PgI-unsplash.jpg

@@ -1,18 +1,38 @@
 /* eslint-disable no-undef */
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import 'regenerator-runtime/runtime';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import TextField from '@material-ui/core/TextField';
 import customMessage from '../utils/customMessages';
 import App from '../entry/App';
 import HelloComponent from '../components/HelloComponent';
 import FrontPage from '../views/frontPage';
 import reducer from '../reducers/reducer';
 import firstMessage from '../actions/actions';
+import Login, {
+  UserLogin, mapDispatchToProps,
+  mapStateToProps,
+} from '../components/forms/UserLogin';
+import InputField from '../components/forms/InputField';
+import Lines from '../components/forms/Lines';
+import Links from '../components/forms/Link';
+import SubmitButton from '../components/forms/SubmitButton';
+import SocialLogin from '../components/forms/SocialLogin';
+import userLogin from '../helpers/userLogin';
 
 let component = '';
-
+let loginComponent = '';
+const defaultProps = {
+  email: '',
+  errors: '',
+  password: '',
+  success: false,
+  token: '',
+  classes: '',
+};
 const mockStore = configureStore([]);
 const store = mockStore({
   message: 'Welcome',
@@ -23,6 +43,22 @@ component = renderer.create(
     <HelloComponent />
   </Provider>,
 );
+loginComponent = renderer.create(
+  <Provider store={store}>
+    <Login />
+  </Provider>,
+);
+const initialObj = {
+  errors: '',
+  message: 'Welcome',
+  success: false,
+  token: '',
+};
+const handleLoginChange = jest.fn();
+const props = {
+  name: 'password',
+  handleLoginChange,
+};
 describe('App tests', () => {
   it('Will prove that the app is rendered from App component', () => {
     const appRender = shallow(<App />);
@@ -40,7 +76,7 @@ describe('App tests', () => {
   });
 
   it('should return welcome when no action provided', () => {
-    expect(reducer(undefined, {})).toEqual({ message: 'Welcome' });
+    expect(reducer(undefined, {})).toEqual(initialObj);
   });
   it('should return Redux when action is provided with value', () => {
     expect(reducer(undefined, { ...firstMessage, value: 'Redux' })).toEqual({ message: 'Redux' });
@@ -51,4 +87,88 @@ describe('App tests', () => {
     });
     expect(store.dispatch).toHaveBeenCalledTimes(1);
   });
+  it('rendering the user login component', () => {
+    const login = shallow(<loginComponent />);
+    expect(login.contains(<InputField />, <SubmitButton />, <Links />, <Lines />, <SocialLogin />));
+  });
+  it('password should hold what a user entered', () => {
+    const wrapper = shallow(<InputField {...props} />);
+    wrapper
+      .find(TextField)
+      .simulate('change', { target: { value: 'Example@2020' } });
+    expect(handleLoginChange).toBeCalledTimes(1);
+  });
+  it('email should hold what a user entered', () => {
+    const props = {
+      name: 'email',
+      handleLoginChange,
+    };
+    const wrapper = shallow(<InputField {...props} />);
+    wrapper
+      .find(TextField)
+      .simulate('change', { target: { value: '[email protected]' } });
+    expect(handleLoginChange).toBeCalledTimes(1);
+  });
+  it('email should hold what a user entered', () => {
+    const mockFn = jest.fn();
+    const highWrapper = mount(<Provider store={store}><Login /></Provider>);
+    const wrapper = highWrapper.find(TextField);
+    console.log('hh', wrapper);
+    wrapper
+      .at(0)
+      .props()
+      .handleLoginChange = mockFn;
+    wrapper
+      .at(0)
+      .props()
+      .handleLoginChange();
+    expect(mockFn).toBeCalledTimes(1);
+  });
+  it('rendering the user login component', () => {
+    const login = mount(<Provider store={store}><Login /></Provider>);
+    expect(login.contains(<InputField />, <SubmitButton />, <Links />, <Lines />, <SocialLogin />));
+  });
+  it('login', () => {
+    const handleLoginChange = jest.fn();
+    const dispatch = jest.fn();
+    mapDispatchToProps(dispatch).login();
+    mapStateToProps({ defaultProps });
+    const wrapper = mount(<Provider store={store}><Login /></Provider>);
+
+    wrapper
+      .find(TextField)
+      .at(0)
+      .simulate('change', { target: { value: '[email protected]' } });
+    wrapper
+      .find(TextField)
+      .at(1)
+      .simulate('change', { target: { value: 'Example@2020' } });
+    wrapper
+      .find(SubmitButton)
+      .simulate('click');
+
+    expect(dispatch).toBeCalledTimes(1);
+  });
+  it('login functionality success', async () => {
+    const credentials = {
+      email: '[email protected]',
+      password: 'TravelAdmin2@',
+    };
+    global.fetch = jest.fn(() => Promise.resolve({
+      json: () => Promise.resolve({}),
+    }));
+    const result = await userLogin(credentials);
+    console.log(result);
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+  it('login functionality fail', async () => {
+    const credentials = {
+      email: '[email protected]',
+      password: 'TravelAdmin2@',
+    };
+    global.fetch = jest.fn(() => Promise.reject());
+    const result = await userLogin(credentials);
+    console.log(result);
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
 });

package.json

@@ -0,0 +1,24 @@
+import {
+  LOGIN_HANDLE,
+} from './loginTypes';
+import login from '../helpers/userLogin';
+
+const loginError = (data) => ({ type: LOGIN_HANDLE, payload: data });
+
+const handleLogin = (credentials) => async (dispatch) => {
+  let output = '';
+  console.log('credentials', credentials);
+  const { email } = credentials;
+  if (email.length === 0 || !(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email))) {
+    dispatch(loginError({ error: 'Invalid email' }));
+    return;
+  }
+  const result = await login(credentials);
+  const { error, token } = result;
+  output = token
+    ? { success: true, error: '', token }
+    : { error };
+  dispatch(loginError(output));
+};
+
+export default handleLogin;

src/__tests__/App.test.js

@@ -0,0 +1,2 @@
+export const LOGIN_PROCESS = 'LOGIN_PROCESS';
+export const LOGIN_HANDLE = 'LOGIN_HANDLE';

src/actions/loginActions.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles({
+  textField: {
+    marginBottom: '7%',
+    marginTop: '1%',
+    '& div': {
+      borderRadius: 18,
+    },
+  },
+  input: {
+    color: 'black',
+    backgroundColor: 'white',
+  },
+});
+
+const InputField = (props) => {
+  const classes = useStyles();
+  const { handleLoginChange, name } = props;
+  return (
+    <TextField
+      variant="outlined"
+      required
+      fullWidth
+      id={name}
+      label={name}
+      name={name}
+      type={name}
+      className={classes.textField}
+      InputProps={{
+        className: classes.input,
+      }}
+      size="small"
+      onChange={handleLoginChange}
+    />
+  );
+};
+InputField.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleLoginChange: PropTypes.func.isRequired,
+};
+export default InputField;

src/actions/loginTypes.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  divider: {
+    marginTop: '7%',
+    backgroundColor: 'white',
+  },
+});
+const Lines = () => {
+  const classes = useStyles();
+  return (
+    <Grid container>
+      <Grid item xs={5}>
+        <Divider variant="middle" className={classes.divider} light />
+      </Grid>
+      <Grid item>
+        OR
+      </Grid>
+      <Grid item xs={5}>
+        <Divider variant="middle" className={classes.divider} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Lines;

src/components/forms/InputField.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles({
+  link: {
+    textAlign: 'center',
+    margin: '5%',
+  },
+});
+const Links = (props) => {
+  const classes = useStyles();
+  const { children } = props;
+  return (
+    <div className={classes.link}>
+      <Link href="/" variant="body2" style={{ color: 'white', fontSize: '14px' }}>
+        {children}
+      </Link>
+    </div>
+  );
+};
+Links.propTypes = {
+  children: PropTypes.string.isRequired,
+};
+export default Links;

src/components/forms/Lines.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import Button from '@material-ui/core/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { makeStyles } from '@material-ui/core/styles';
+import Aux from '../../hoc/Auxiliary/Auxiliary';
+
+const useStyles = makeStyles({
+  textField: {
+    marginBottom: '7%',
+    marginTop: '1%',
+    textTransform: 'none',
+    borderRadius: 15,
+  },
+});
+const element = <FontAwesomeIcon icon={faGoogle} />;
+const SocialLogin = () => {
+  const classes = useStyles();
+  return (
+    <Aux>
+      <Button
+        variant="contained"
+        color="primary"
+        className={classes.textField}
+        startIcon={<FacebookIcon />}
+        type="button"
+        fullWidth
+      >
+        Login With Facebook
+      </Button>
+      <Button
+        variant="contained"
+        className={classes.textField}
+        startIcon={element}
+        type="button"
+        style={{ backgroundColor: 'white' }}
+        fullWidth
+      >
+        Login With Google
+      </Button>
+    </Aux>
+  );
+};
+
+export default SocialLogin;