feat(#105): added tests for auth sub path

gasserandreas · Apr 24, 2019 · 81c883d · 81c883d
1 parent e2433aa
commit 81c883d
Show file tree

Hide file tree

Showing 11 changed files with 870 additions and 57 deletions.
diff --git a/src/auth/login/__tests__/Container.test.js b/src/auth/login/__tests__/Container.test.js
@@ -3,12 +3,19 @@ import { logInUser } from '../../../redux/auth';
 
 const { select, mapDispatchToProps } = __testables__;
 
-describe('auth container test suite', () => {
+describe('auth login container test suite', () => {
   it('should return container state', () => {
-    expect(select({})).toEqual({
+    const state = select({});
+
+    expect(state).toEqual({
       isAuthenticated: false,
       loginRequest: undefined,
     });
+
+    expect(Object.keys(state)).toEqual([
+      'isAuthenticated',
+      'loginRequest',
+    ]);
   });
 
   it('should return redux actions', () => {

diff --git a/src/auth/login/__tests__/LoginForm.test.js b/src/auth/login/__tests__/LoginForm.test.js
@@ -1,17 +1,15 @@
 /* global testUtils */
 import React from 'react';
 
-import * as Yup from 'yup';
 import { mount } from 'enzyme';
 
 import { TextInput, CheckBox, Field } from '../../../ui/form/Form';
 import Message from '../../../ui/form/Message';
 import Button from '../../../ui/form/Button';
 
-import EnhancedLoginForm, { __testables__ } from '../LoginForm';
+import { __testables__ } from '../LoginForm';
 const {
   formikConfig,
-  formikEnhancer,
   validationSchema,
   mapPropsToValues,
   handleSubmit,
@@ -76,7 +74,7 @@ describe('Login form test suite', () => {
       expect(checkbox.props().error).toBeTruthy();
     });
 
-    it('should render error if touched already', () => {
+    it('should render error if not yet touched', () => {
       // generate error state
       const props = {
         ...getFormProps(),

diff --git a/src/auth/login/__tests__/LoginView.test.js b/src/auth/login/__tests__/LoginView.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
+
 import 'jest-styled-components';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -9,23 +9,28 @@ import LoginForm from '../LoginForm';
 import { AuthHeader, AuthFooter } from '../../AuthComponents';
 
 describe('LoginView test suite', () => {
-  const initialProps = {
-    isAuthenticated: false,
-    histroy: {
-      push: jest.fn(),
-    },
-    loginRequest: {
-      error: null,
-      loading: false,
-    },
-  };
+  let initialProps;
 
   const getLoginView = (props) => mount(
     <MemoryRouter>
       <LoginView {...props} />
     </MemoryRouter>
   );
 
+  beforeEach(() => {
+    initialProps = {
+      isAuthenticated: false,
+      histroy: {
+        push: jest.fn(),
+      },
+      loginRequest: {
+        error: null,
+        loading: false,
+      },
+      logInUser: jest.fn(),
+    };
+  });
+
   it('should render', () => {
     const wrapper = getLoginView(initialProps);
     expect(wrapper).toBeTruthy();
@@ -55,4 +60,19 @@ describe('LoginView test suite', () => {
     const loginForm = wrapper.find(LoginForm);
     expect(loginForm.props().error).toEqual(message);
   });
+
+  it('should handle onSubmit', () => {
+    const wrapper = getLoginView(initialProps);
+    expect(wrapper.exists()).toBeTruthy();
+
+    const loginForm = wrapper.find(LoginForm);
+    expect(loginForm.exists()).toBeTruthy();
+
+    // fire submit
+    expect(initialProps.logInUser).not.toHaveBeenCalled();
+    loginForm.props().onSubmit();
+
+    // check callback
+    expect(initialProps.logInUser).toHaveBeenCalled();
+  });
 });
diff --git a/src/auth/register/CheckEmailForm.jsx b/src/auth/register/CheckEmailForm.jsx
@@ -15,24 +15,32 @@ import Message from '../../ui/form/Message';
 import ButtonGroup from '../../ui/form/ButtonGroup';
 
 // formik setups
-const formikEnhancer = withFormik({
-  validationSchema: Yup.object().shape({
-    email: Yup.string()
-      .email('Invalid email address')
-      .required('Email is required!'),
-  }),
-  mapPropsToValues: (obj) => {
-    const { user } = obj;
-    return {
-      ...user,
-    }
-  },
-  handleSubmit: (payload, { props }, b, c) => {
-    props.onSubmit(payload);
-  },
-  displayName: 'CheckEmailForm',
+const validationSchema = Yup.object().shape({
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required!'),
 });
 
+const mapPropsToValues = (obj) => {
+  const { user } = obj;
+  return {
+    ...user,
+  }
+};
+
+const handleSubmit = (payload, { props }, b, c) => {
+  props.onSubmit(payload);
+};
+
+const formikConfig = {
+  validationSchema,
+  mapPropsToValues,
+  handleSubmit,
+  displayName: 'CheckEmailForm',
+};
+
+const formikEnhancer = withFormik(formikConfig);
+
 // styled
 const StyledCheckEmailForm = styled.form``;
 
@@ -75,13 +83,15 @@ const CheckEmailForm = (props) => {
           buttonStyle="link"
           onClick={handleReset}
           disabled={!dirty || submitting}
+          testId="jestResetButton"
         >Cancel</Button>
         <Button
           type="submit"
           disabled={submitting}
           buttonStyle="primary"
           style={{ marginLeft: '1rem' }}
           loading={submitting}
+          testId="jestSubmitButton"
         >Check email</Button>
       </ButtonGroup>
     </StyledCheckEmailForm>
@@ -95,13 +105,25 @@ EnhancedCheckEmailForm.propTypes = {
     email: PropTypes.string,
   }),
   validEmail: PropTypes.bool,
+  error: PropTypes.string,
 };
 
 EnhancedCheckEmailForm.defaultProps = {
   user: {
     email: '',
   },
   validEmail: null,
+  error: '',
+};
+
+
+export const __testables__ = {
+  formikConfig,
+  formikEnhancer,
+  validationSchema,
+  mapPropsToValues,
+  handleSubmit,
+  CheckEmailForm,
 };
 
 export default EnhancedCheckEmailForm;
diff --git a/src/auth/register/Container.jsx b/src/auth/register/Container.jsx
@@ -23,4 +23,9 @@ const mapDispatchToProps = ({
   invalidateEmail,
 });
 
+export const __testables__ = {
+  select,
+  mapDispatchToProps,
+};
+
 export default connect(select, mapDispatchToProps)(RegisterView);
diff --git a/src/auth/register/RegisterForm.jsx b/src/auth/register/RegisterForm.jsx
@@ -16,31 +16,40 @@ import Message from '../../ui/form/Message';
 import ButtonGroup from '../../ui/form/ButtonGroup';
 
 // formik setups
-const formikEnhancer = withFormik({
-  validationSchema: Yup.object().shape({
-    password: Yup.string()
-      .required('Password is required!'),
-    firstname: Yup.string()
-      .min(2)
-      .max(30)
-      .required('Firstname is required!'),
-    lastname: Yup.string()
-      .min(2)
-      .max(30)
-      .required('Lastname is required!'),
-  }),
-  mapPropsToValues: (obj) => {
-    const { user } = obj;
-    return {
-      ...user,
-    }
-  },
-  handleSubmit: (payload, { props }, b, c) => {
-    props.onSubmit(payload);
-  },
-  displayName: 'RegisterForm',
+const validationSchema = Yup.object().shape({
+  password: Yup.string()
+    .required('Password is required!'),
+  firstname: Yup.string()
+    .min(2)
+    .max(30)
+    .required('Firstname is required!'),
+  lastname: Yup.string()
+    .min(2)
+    .max(30)
+    .required('Lastname is required!'),
 });
 
+const mapPropsToValues = (obj) => {
+  const { user } = obj;
+  return {
+    ...user,
+  }
+};
+
+const handleSubmit = (payload, { props }, b, c) => {
+  props.onSubmit(payload);
+};
+
+
+const formikConfig = {
+  validationSchema,
+  mapPropsToValues,
+  handleSubmit,
+  displayName: 'RegisterForm',
+};
+
+const formikEnhancer = withFormik(formikConfig);
+
 // styled
 const StyledRegisterForm = styled.form``;
 
@@ -69,6 +78,7 @@ const RegisterForm = ({
       <Field
         id="email"
         label="Email"
+        disabled
       >
         <TextInput
           id="email"
@@ -126,6 +136,7 @@ const RegisterForm = ({
       <Field
         id="remember"
         label="Remember me"
+        error={touched.remember && errors.remember}
       >
         <CheckBox
           id="remember"
@@ -137,20 +148,22 @@ const RegisterForm = ({
           onBlur={handleBlur}
         />
       </Field>
-      {error && <Message appearance="error">{error}</Message>}
+      {error !== null && <Message appearance="error">{error}</Message>}
       <ButtonGroup>
         <Button
           type="button"
           buttonStyle="link"
           onClick={handleOnReset}
           disabled={submitting}
+          testId="jestResetButton"
         >Go back</Button>
         <Button
           type="submit"
           disabled={submitting}
           buttonStyle="primary"
           style={{ marginLeft: '1rem' }}
           loading={submitting}
+          testId="jestSubmitButton"
         >Signup</Button>
       </ButtonGroup>
     </StyledRegisterForm>
@@ -166,7 +179,11 @@ EnhancedRegisterForm.propTypes = {
     password: PropTypes.string,
     remember: PropTypes.bool,
   }),
+  error: PropTypes.string,
   validEmail: PropTypes.bool,
+  submitting: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
 };
 
 EnhancedRegisterForm.defaultProps = {
@@ -176,6 +193,17 @@ EnhancedRegisterForm.defaultProps = {
     password: '',
     remember: false,
   },
+  validEmail: undefined,
+  error: '',
+};
+
+export const __testables__ = {
+  formikConfig,
+  formikEnhancer,
+  validationSchema,
+  mapPropsToValues,
+  handleSubmit,
+  RegisterForm,
 };
 
 export default EnhancedRegisterForm;
diff --git a/src/auth/register/RegisterView.jsx b/src/auth/register/RegisterView.jsx
@@ -92,6 +92,7 @@ const RegisterView = ({
 RegisterView.propTypes = {
   isAuthenticated: PropTypes.bool.isRequired,
   signupRequest: HOCRequestPropTypes.isRequired,
+  checkEmailRequest: HOCRequestPropTypes.isRequired,
   validEmail: PropTypes.bool,
   signupUser: PropTypes.func.isRequired,
   checkEmail: PropTypes.func.isRequired,