Merge 1020e15 into fd95b4a

src/__mocks__/formHandler.js

@@ -0,0 +1 @@
+export default () => {};

src/components/BaseRoute.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { UnauthenticatedRoutes } from '<core>/routes';

src/components/UI/atoms/InputField/InputField.jsx

@@ -43,6 +43,7 @@ const InputField = ({
   <InputField.Container
     type={type}
     id={id}
+    data-testid={name}
     placeholder={placeholder}
     name={name}
     value={value}

src/components/UI/organisms/AuthForm/AuthForm.jsx

@@ -38,30 +38,33 @@ const AuthForm = ({
           rules={rules}
           inputData={inputData}
         />
-        <CardDivider
-          text= {dividerText}
-          fontSize='title'
-          width='xxl'
-          margin='zero'
-          display='block'/>
-        <Router>
-          <ButtonRow
-            images={ButtonRowItem}
-            width="5.8rem"
-            height="4.515rem"
-            boxShadow="icon"
-            altText="social media button"
-            margin="zero"
-          />
-        </Router>
+        {
+          dividerText
+          && <Fragment>
+            <CardDivider
+              text= {dividerText}
+              fontSize='title'
+              width='xxl'
+              margin='zero'
+              display='block'/>
+            <Router>
+              <ButtonRow
+                images={ButtonRowItem}
+                boxShadow="icon"
+                altText="social media button"
+                margin="zero"
+              />
+            </Router>
+          </Fragment>
+        }
       </FlexContainer>
     </Fragment>
   );
 };
 
 AuthForm.propTypes = {
   title: PropTypes.string.isRequired,
-  dividerText: PropTypes.string.isRequired,
+  dividerText: PropTypes.string,
   callback: PropTypes.func,
   rules: PropTypes.object.isRequired,
   inputData: PropTypes.array.isRequired,

src/components/UI/organisms/WelcomeSection/WelcomeSection.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
+import styled from 'styled-components';
 import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
 import SearchBar from '<molecules>/SearchBar/SearchBar';
 import Image from '<atoms>/Image/Image';
 import Title from '<atoms>/Title/Title';
-import ImageUrl from '<image>/homepage.png';
-import styled from 'styled-components';
+import imageUrl from '<image>/homepage.png';
 
 const WelcomeSection = () => {
-
   return (
     <WelcomeSection.Container>
       <FlexContainer
@@ -16,7 +15,7 @@ const WelcomeSection = () => {
         containerWidth='fullWidth'
       >
         <Image
-          imageUrl={ImageUrl}
+          imageUrl={imageUrl}
           boxShadow='none'
           altText='welcome'
         />

src/components/pages/AuthPages/Login.jsx

@@ -4,24 +4,34 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import PageLayout from '<templates>/PageLayout/PageLayout';
 import AuthForm from '<organisms>/AuthForm/AuthForm';
-import withCheckAuth from '<HOC>/withCheckAuth';
+import formHandler from '<helpers>/formHandler';
 import { loginData, loginRules } from './loginItems';
 import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
 import Image from '<atoms>/Image/Image';
-import ImageUrl from '<image>/home.png';
+import imageUrl from '<image>/home.png';
 import { signin } from './navItems';
 import headerMapper from '<helpers>/headerMapper';
 
 const navItems = headerMapper(signin);
 
 const Login = (props) => {
+  const handleSubmit = (values) => {
+    const data = {
+      method: 'post',
+      path: 'login',
+      redirectTo: '/dashboard',
+    };
+    return formHandler(values, props.history, data)
+    && sessionStorage.setItem('cookies', document.cookie);
+  };
+
   return (
     <PageLayout navItems={navItems}>
       <FlexContainer>
         <FlexContainer flexDirection='row' height='80%'>
           <FlexContainer>
             <Image
-              imageUrl={ImageUrl}
+              imageUrl={imageUrl}
               boxShadow='none'
               altText='welcome'
             />
@@ -32,7 +42,7 @@ const Login = (props) => {
               dividerText="Or Sign In With"
               rules={loginRules}
               inputData={loginData}
-              callback={props.handleSubmit}
+              callback={handleSubmit}
             />
             <ToastContainer />
           </FlexContainer>
@@ -43,6 +53,8 @@ const Login = (props) => {
 };
 
 Login.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
 };
-export default withCheckAuth(Login, 'login');
+
+
+export default Login;

src/components/pages/AuthPages/Login.spec.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { render, cleanup } from '<src>/helpers/testUtils';
+import { render, cleanup, fireEvent } from '<src>/helpers/testUtils';
 import Login from './Login';
-import '@testing-library/jest-dom/extend-expect';
+import formHandler from '<helpers>/formHandler';
 
+jest.mock('<helpers>/formHandler');
 
 afterEach(cleanup);
 
 const setup = () => {
   const utils = render(
     <MemoryRouter>
-      <Login />
+      <Login history={{}} />
     </MemoryRouter>,
   );
 
@@ -31,4 +32,16 @@ describe('Login', () => {
 
     expect(getByText('Sign In')).toBeTruthy();
   });
+
+  it('should call handleSubmit once', () => {
+    const { getByText, getByTestId } = setup();
+
+    fireEvent.change(getByTestId('email'), { target: { value: 'abc@de.com' } });
+    fireEvent.change(
+      getByTestId('password'), { target: { value: 'eazyBee8!' } },
+    );
+    fireEvent.click(getByText('Submit'));
+
+    expect(formHandler).toHaveBeenCalledTimes(1);
+  });
 });

src/components/pages/AuthPages/PasswordEmailVerifier.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import PageLayout from '<templates>/PageLayout/PageLayout';
+import AuthForm from '<organisms>/AuthForm/AuthForm';
+import { emailData, emailRules } from './passwordItems';
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import Image from '<atoms>/Image/Image';
+import imageUrl from '<image>/home.png';
+import { passwordReset } from './navItems';
+import headerMapper from '<helpers>/headerMapper';
+import formHandler from '<helpers>/formHandler';
+
+
+const navItems = headerMapper(passwordReset);
+
+const PasswordReset = (props) => {
+  const handleSubmit = (values) => {
+    const data = {
+      method: 'post',
+      path: 'recoverEmail',
+      redirectTo: '/',
+    };
+
+    formHandler(values, props.history, data);
+  };
+
+  return (
+    <PageLayout navItems={navItems}>
+      <FlexContainer>
+        <FlexContainer flexDirection='row' height='80%'>
+          <FlexContainer>
+            <Image
+              imageUrl={imageUrl}
+              boxShadow='none'
+              altText='welcome'
+            />
+          </FlexContainer>
+          <FlexContainer padding='zero'>
+            <AuthForm
+              title="Password Reset"
+              rules={emailRules}
+              inputData={emailData}
+              callback={handleSubmit}
+            />
+            <ToastContainer />
+          </FlexContainer>
+        </FlexContainer>
+      </FlexContainer>
+    </PageLayout>
+  );
+};
+
+PasswordReset.propTypes = {
+  history: PropTypes.object.isRequired,
+};
+
+export default PasswordReset;

src/components/pages/AuthPages/PasswordEmailVerifier.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, cleanup, fireEvent } from '<src>/helpers/testUtils';
+import PasswordEmailVerifier from './PasswordEmailVerifier';
+import formHandler from '<helpers>/formHandler';
+
+jest.mock('<helpers>/formHandler');
+afterEach(cleanup);
+
+const setup = () => {
+  const utils = render(
+    <MemoryRouter>
+      <PasswordEmailVerifier history={{}} />
+    </MemoryRouter>,
+  );
+
+  return {
+    ...utils,
+  };
+};
+
+describe('PasswordEmailVerifier', () => {
+  it('should render PasswordEmailVerifier page', () => {
+    const { container } = setup();
+
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should render with sign in text', () => {
+    const { getByText } = setup();
+
+    expect(getByText('Sign In')).toBeTruthy();
+  });
+
+  it('should call handleSubmit once', () => {
+    const { getByText, getByTestId } = setup();
+
+    fireEvent.change(getByTestId('email'), { target: { value: 'abc@de.com' } });
+
+    fireEvent.click(getByText('Submit'));
+
+    expect(formHandler).toHaveBeenCalledTimes(1);
+  });
+});