ft(create headers):create navbar and fouter

 - created navbar component
 - created footer component

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.1.3",
     "eslint-config-airbnb": "^17.1.0",
-    "node-sass": "^4.10.0",
     "jest": "^23.6.0",
+    "jquery": "^3.3.1",
+    "node-sass": "^4.10.0",
+    "popper.js": "^1.14.6",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-redux": "^5.1.1",

src/components/HomePage/__tests__/App.test.js

@@ -3,7 +3,5 @@ import ReactDOM from 'react-dom';
 import App from '../App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  ReactDOM.render(<App />, document.createElement('div'));
 });

src/components/NavBar/App.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.scss';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+export const Bar = () => (
+  <nav className="navbar navbar-expand-lg navbar-light bg-light">
+    <button className="navbar-brand" href="#">Authors Haven</button>
+    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span className="navbar-toggler-icon" />
+    </button>
+  </nav>
+
+);
+
+export const Foot = () => (
+  <div className="navbar-light footer">
+    <span>© 2018 Author Haven.</span>
+  </div>);

src/components/NavBar/App.scss

@@ -0,0 +1,17 @@
+.navbutton {
+  border-radius: 10px;
+}
+
+$color-primary: #f5f5f5;
+$color-font: #424242;
+
+.footer {
+  background-color: $color-primary;
+  bottom: 0;
+  color: $color-font;
+  font-size: 1vw;
+  left: 0;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+}

src/components/NavBar/_tests_/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Bar } from '../App';
+
+it('footer render without crashing', () => {
+  const div = document.createElement('nav');
+  ReactDOM.render(<Bar />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/index.js

@@ -3,12 +3,12 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { store } from './store';
 import './assets/styles/index.css';
-import Route from './routes/Routes';
+import { Routes } from './routes/Routes';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <Provider store={store}>
-    <Route />
+    <Routes />
   </Provider>,
   document.getElementById('root'),
 );

src/routes/Routes.js

@@ -1,32 +1,20 @@
 import React from 'react';
-import { HomePage, LoginPage } from '../views/HomePage';
-import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
+import { HomePage, LoginPage, Header, Footer } from '../views/HomePage';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
-const Main = () => (
+export const Main = () => (
   <Switch>
     <Route exact path="/" component={HomePage} />
     <Route path="/login/" component={LoginPage} />
   </Switch>
 );
 
-const Header = () => (
-  <ul>
-    <li>
-      <button ><Link to="/">Home</Link></button>
-    </li>
-    <li >
-      <button><Link to="/login">Login</Link></button>
-    </li>
-  </ul>
-);
-
-const Routes = () => (
+export const Routes = () => (
   <BrowserRouter>
     <div>
       <Header />
       <Main />
+      <Footer />
     </div>
   </BrowserRouter>
 );
-
-export default Routes;

src/routes/Routes.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+import { HomePage, LoginPage } from '../views/HomePage';
+import { Main } from './Routes';
+
+test('test if home page link return homepage component', () => {
+  const url = ['/',
+      ];
+  const wrapper = mount(
+    <MemoryRouter initialEntries={url}>
+      <Main />
+    </MemoryRouter>
+  );
+  expect(wrapper.find(HomePage)).toHaveLength(1);
+  expect(wrapper.find(LoginPage)).toHaveLength(0);
+});
+
+test('test if home page link return homepage component', () => {
+  const Login = Main;
+  const url = ['/login',
+    ];
+  const wrapper = mount(
+    <MemoryRouter initialEntries={url}>
+      <Login />
+    </MemoryRouter>
+  );
+  expect(wrapper.find(LoginPage)).toHaveLength(1);
+  expect(wrapper.find(HomePage)).toHaveLength(0);
+});

src/views/HomePage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Home from '../components/HomePage/App';
 import Login from '../components/LoginPage/App';
+import { Bar, Foot } from '../components/NavBar/App';
 
 
 export const HomePage = () => (
@@ -10,3 +11,11 @@ export const HomePage = () => (
 export const LoginPage = () => (
   <Login />
 );
+
+export const Header = () => (
+  <Bar />
+);
+
+export const Footer = () => (
+  <Foot />
+);