feat(footer):

write tests for components
create footer component
style footer component
[delivers #167129867]

.eslintignore

@@ -0,0 +1,2 @@
+jest.config.js
+server.js

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "airbnb"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "allowImportExportEverywhere": true,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "esversion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/require-default-props": 0,
+    "function-paren-newline": ["error", "multiline"],
+    "jsx-a11y/anchor-is-valid": 0,
+    "object-curly-newline": ["error", { "consistent": true }]
+  }
+}

.hound.yml

@@ -1,3 +1,4 @@
 eslint:
   enabled: true
   config_file: .eslintrc
+  ignore_file: .eslintignore

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

mocks/fileMock.js

@@ -0,0 +1 @@
+export default '';

package.json

@@ -4,8 +4,7 @@
   "description": "freyja-ah-frontend",
   "main": "index.js",
   "scripts": {
-    "start": "node server.js",
-    "heroku-postbuild": "webpack -p --config webpack.prod.js",
+    "build": "NODE_ENV=production webpack --config webpack.prod.js",
     "start:dev": "NODE_ENV=development webpack-dev-server --open --config webpack.dev.js",
     "test": "jest",
     "coveralls": "jest --config=jest.config.js --coverage -u && cat ./coverage/lcov.info | coveralls"
@@ -22,18 +21,20 @@
   },
   "homepage": "https://github.com/andela/freyja-ah-frontend#readme",
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "clean-webpack-plugin": "^3.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
-    "express": "^4.17.1",
     "history": "^4.9.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.7.0",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-router-redux": "^4.0.8",
+    "reactstrap": "^8.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "uglifyjs-webpack-plugin": "^2.1.3",
@@ -45,6 +46,7 @@
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "coveralls": "^3.0.4",
     "css-loader": "^3.0.0",
@@ -55,8 +57,8 @@
     "eslint-plugin-react": "^7.14.2",
     "jest": "^24.5.0",
     "jest-static-stubs": "0.0.1",
-    "nyc": "^14.1.1",
     "node-sass": "^4.12.0",
+    "nyc": "^14.1.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "uglifyjs-webpack-plugin": "^2.1.3",

src/components/Footer/Footer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './footer.scss';
+
+const Footer = () => (
+  <footer className="footer-container">
+    <nav>
+      <ul className="footer-links">
+        <Link className="flink" to="/about">
+            About
+        </Link>
+        <span>|</span>
+        <Link className="flink" to="how-it-work">
+            How it works
+        </Link>
+        <span>|</span>
+        <Link className="flink" to="contacts">
+           Contact us
+        </Link>
+      </ul>
+      <p className="rights">© CSLC 2019. All rights Reserved.</p>
+    </nav>
+  </footer>
+);
+
+export default Footer;

src/components/Footer/Footer.scss

@@ -0,0 +1,34 @@
+$base-white: #fff;
+$off-white: rgba(255, 255, 255, 0.90);
+$base-background: #5F3518;
+
+.footer-container {
+  background: $base-background;
+  color: $base-white;
+  height: 100px;
+  padding: 20px;
+  position: relative;
+  width: 100%;
+}
+
+.footer-links .flink {
+  color: $base-white;
+  padding: 5px 10px;
+}
+
+.footer-links .flink:hover {
+  color: $off-white;
+  text-decoration: none;
+}
+
+.footer-div {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+}
+
+.rights {
+  position: relative;
+  text-align: center;
+}

src/test/Footer/Footer.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Footer from '../../components/Footer/Footer';
+
+describe('Footer component should be rendered', () => {
+  const footerComponent = shallow(<Footer />);
+
+  it('should contain a footer element', () => {
+    expect(footerComponent.find('footer').exists()).toBe(true);
+  });
+  it('should contain a footer-container div', () => {
+    expect(footerComponent.find('footer.footer-container').exists()).toBe(true);
+  });
+
+  it('should contain a p child element', () => {
+    expect(footerComponent.find('footer > nav').exists()).toBe(true);
+    expect(footerComponent.find('nav').length).toBe(1);
+  });
+});

src/test/Login/Login.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Login from '../../views/login';
+
+describe('test Login Page component', () => {
+  it('should render Logincomponent correctly', (done) => {
+    shallow(<Login />);
+    done();
+  });
+});

src/test/NotFound/NotFound.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import NotFound from '../../views/NotFound';
+
+describe('test Not Found Page component', () => {
+  it('should render NotFound component correctly', (done) => {
+    shallow(<NotFound />);
+    done();
+  });
+});

src/test/Route/Route.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Routes from '../../routes/routes';
+
+describe('test Route component', () => {
+  it('should render Route component correctly', (done) => {
+    shallow(<Routes />);
+    done();
+  });
+});

src/views/home.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Footer from '../components/Footer/Footer';
 
 const Home = () => (
   <div>
     <h2> This is the home</h2>
     <Link to="/login"> Go to Login Page </Link>
+    <div className="footer-div">
+      <Footer />
+    </div>
   </div>
 );