wrote tests for view module component

src/components/ContentList/ContentList.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { arrayOf, object } from 'prop-types';
+import './contentList.scss';
+
+const ContentList = ({ contents }) => contents.map((content) => (
+  <div key={content.id} className="content-item">
+    <a href={content.link}>
+      <p>{content.name}</p>
+    </a>
+  </div>)
+)
+
+ContentList.propTypes = {
+  contents: arrayOf(object),
+};
+
+export default ContentList;

src/components/ContentList/contentList.scss

@@ -0,0 +1,21 @@
+.content-item {
+  margin: 0px 0px 25px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
+
+  &:hover {
+    border: solid #f3994a 2px;
+  }
+  a {
+    text-decoration: none;
+    color: #f3994a;
+    font-size: 18px;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

src/components/ModuleSidebar/ModuleSidebar.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import './moduleSidebar.scss';
 import { Link } from 'react-router-dom';
-import Sidebar from '../Sidebar/Sidebar';
 import sideLogo from '../../assets/images/logo.png';
+import './moduleSidebar.scss';
 
 const ModuleSidebar = () => (
-  <Sidebar>
+  <aside className="m-aside">
     <div className="d-aside">
       <div>
         <span className="d-logo">
@@ -21,7 +19,7 @@ const ModuleSidebar = () => (
         <li><Link to="/aboutus">Help</Link></li>
       </ul>
     </div>
-  </Sidebar>
+  </aside>
 );
 
 export default ModuleSidebar;

src/components/ModuleSidebar/moduleSidebar.scss

@@ -1,15 +1,23 @@
 $sidebar-links-color: #8f5806;
+$dark-brown-color: #523304;
+
+.m-aside {
+  margin-top: 41px;
+  background: #f8f8f8;
+  border: solid #f8f8f8 1px;
+}
 
 .d-aside{
   padding-top: 2rem;
+  min-height: 100vh;
 }
 
  .d-sidebar aside {
   padding: 10px;
 }
 
 .d-links li.module-active {
-  background: #523304;
+  background: $dark-brown-color;
   &:hover {
     border: 0;
   }
@@ -20,7 +28,7 @@ $sidebar-links-color: #8f5806;
 }
 .d-links li a {
   text-decoration: none;
-  color: #523304;
+  color: $dark-brown-color;
 }
 
 ul.d-links {

src/test/actions/__snapshots__/moduleActions.spec.js.snap

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`moduleAction should get a single module 1`] = `
+Array [
+  Object {
+    "type": "INIT_MODULE_REQUEST",
+  },
+  Object {
+    "payload": [Error: Nock: No match for request {
+  "method": "GET",
+  "url": "https://freyja-ah-backend.herokuapp.com/api//modules/1",
+  "headers": {
+    "accept": "application/json, text/plain, */*",
+    "user-agent": "axios/0.19.0"
+  }
+}],
+    "type": "MODULES_ERROR",
+  },
+]
+`;
+
 exports[`moduleAction should get all modules 1`] = `
 Array [
   Object {

src/test/actions/moduleActions.spec.js

@@ -3,7 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import nock from 'nock';
 import 'regenerator-runtime';
-import { getModules } from '../../../store/actions/moduleActions';
+import { getModules, getModule } from '../../../store/actions/moduleActions';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -15,7 +15,6 @@ describe('moduleAction', () => {
     store = mockStore({});
   });
   afterEach(() => {
-    // clear all HTTP mocks after each test
     nock.cleanAll();
   });
 
@@ -30,4 +29,16 @@ describe('moduleAction', () => {
       done();
     });
   });
+
+  it('should get a single module', async done => {
+    nock('https://freyja-ah-backend.herokuapp.com')
+      .get('/api/modules')
+      .reply(200, {
+        module: [],
+      });
+    await store.dispatch(getModule(1)).then(() => {
+      expect(store.getActions()).toMatchSnapshot();
+      done();
+    });
+  });
 });

src/test/components/ModuleSidebar.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import ModuleSidebar from '../../components/ModuleSidebar';
+
+describe('Component: ModuleSidebar', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(<ModuleSidebar />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/test/components/__snapshots__/ModuleSidebar.spec.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component: ModuleSidebar should render correctly 1`] = `
+<aside
+  className="m-aside"
+>
+  <div
+    className="d-aside"
+  >
+    <div>
+      <span
+        className="d-logo"
+      >
+        <img
+          alt="logo"
+          src="test-file-stub"
+        />
+        Community
+      </span>
+    </div>
+    <ul
+      className="d-links"
+    >
+      <li
+        className="module-active"
+      >
+        <Link
+          to="/dashboard"
+        >
+          Modules
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/profile"
+        >
+          Profile
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/payment"
+        >
+          Payment
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/aboutus"
+        >
+          Help
+        </Link>
+      </li>
+    </ul>
+  </div>
+</aside>
+`;

src/test/reducers/moduleReducer.spec.js

@@ -4,14 +4,25 @@ import modules from './modulesMock/modulesMock';
 const initialState = {
   allModules: [],
   errors: {},
+  isLoading: false,
   singleModule: {},
 };
 
 describe('Module reducer', () => {
   it('should set default state', () => {
     const state = modulesReducer(undefined, { type: '@@INIT' });
 
-    expect(state).toEqual({ allModules: [], errors: {}, singleModule: {} });
+    expect(state).toEqual(initialState);
+  });
+
+  it('should initialize get request', () => {
+    const state = modulesReducer(initialState, {
+      type: 'INIT_MODULE_REQUEST',
+    });
+    expect(state).toEqual({
+      ...initialState,
+      isLoading: true,
+    });
   });
 
   it('should get all modules', () => {
@@ -24,6 +35,18 @@ describe('Module reducer', () => {
       allModules: state.allModules,
     });
   });
+
+  it('should get single module', () => {
+    const state = modulesReducer(initialState, {
+      type: 'GET_SINGLE_MODULE',
+      payload: [],
+    });
+    expect(state).toEqual({
+      ...initialState,
+      singleModule: [],
+    });
+  });
+
   it('should return error when there is an error geting modules', () => {
     const state = modulesReducer(initialState, {
       type: 'MODULES_ERROR',

src/test/views/__snapshots__/viewModule.spec.js.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View Module component should render ViewModule correctly 1`] = `
+<Fragment>
+  <Connect(Header) />
+  <Container
+    className="v-container"
+    fluid={true}
+    tag="div"
+  >
+    <Row
+      className="m-row"
+      tag="div"
+    >
+      <Col
+        className="v-sidebar"
+        sm="2"
+        tag="div"
+        widths={
+          Array [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ]
+        }
+      >
+        <ModuleSidebar />
+      </Col>
+      <Col
+        sm="10"
+        tag="div"
+        widths={
+          Array [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ]
+        }
+      >
+        <main
+          className="module-main"
+        >
+          <div
+            className="module-header"
+          >
+            <h2>
+              Getting Started
+            </h2>
+            <p
+              className="module-description"
+            >
+              introduction to customer learning
+            </p>
+          </div>
+          <div
+            className="module-content"
+          >
+            <p
+              className="content-header"
+            >
+              Content
+            </p>
+            <div
+              className="module-content-items"
+            >
+              <ContentList
+                contents={
+                  Array [
+                    Object {
+                      "id": 1,
+                      "link": "http://localhost:3000",
+                      "name": "Introduction",
+                    },
+                  ]
+                }
+              />
+            </div>
+          </div>
+          <Link
+            to="/test/4"
+          >
+            <Button
+              classname="test-button"
+              text="Take Test"
+              type="button"
+            />
+          </Link>
+        </main>
+      </Col>
+    </Row>
+  </Container>
+  <Footer />
+</Fragment>
+`;

src/test/views/login.spec.js

@@ -92,4 +92,21 @@ describe('Login component methods', () => {
     form.simulate('submit', mockedEvent);
     expect(Login.prototype.handleSubmit.calledOnce).toBe(true);
   });
+
+  it('should handle email validation after form is submitted', () => {
+    const { enzymeWrapper } = shallowSetup();
+    enzymeWrapper.setState({
+      email: 'davidchizindumail.com',
+      password: '111111111',
+      validationErrors: {},
+    });
+
+    const form = enzymeWrapper.find('#form');
+    const mockedEvent = {
+      target: {},
+      preventDefault: () => ({}),
+    };
+    form.simulate('submit', mockedEvent);
+    expect(enzymeWrapper.state().validationErrors.email).toEqual('Enter a valid email address');
+  });
 });