chore(react-router): setup 404 page

- add 404 page [Finishes #161290958]
andela · Dec 1, 2018 · c38193e · c38193e
1 parent aa66c4f
commit c38193e
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 178 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,15 +12,16 @@
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
-    "jsx": true
+      "jsx": true
     }
   },
   "env": {
     "es6": true,
     "browser": true,
     "node": true,
     "jquery": true,
-    "mocha": true
+    "mocha": true,
+    "jest": true
   },
     "rules": {
       "one-var": 0,
@@ -36,31 +37,16 @@
       "no-console": 1,
       "no-debugger": 1,
       "no-var": 1,
-      "semi": [
-      1,
-      "always"
-      ],
+      "semi": [1, "always"],
       "no-trailing-spaces": 2,
       "eol-last": 2,
       "no-unused-vars": 2,
       "no-underscore-dangle": 0,
       "no-alert": 0,
       "no-lone-blocks": 0,
       "jsx-quotes": 1,
-      "react/display-name": [
-        1,
-        {
-          "ignoreTranspilerName": false
-        }
-      ],
-      "react/forbid-prop-types": [
-        1,
-        {
-          "forbid": [
-            "any"
-          ]
-        }
-      ],
+      "react/display-name": [1, { "ignoreTranspilerName": false }],
+      "react/forbid-prop-types": [1, { "forbid": ["any"] }],
       "react/jsx-boolean-value": 1,
       "react/jsx-closing-bracket-location": 0,
       "react/jsx-curly-spacing": 1,
@@ -92,6 +78,6 @@
       "react/sort-comp": 1,
       "react/wrap-multilines": 0,
       "react/jsx-filename-extension": 0,
-      "react/no-unescaped-entities":["error", {"forbid": []}]
+      "react/no-unescaped-entities":["error", { "forbid": [] }]
     }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,19 @@
 import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import routes from './routes';
+import NotFound from './components/404/NotFound';
 
 const App = () => (
   <Router>
     <div>
-      {
-      // eslint-disable-next-line max-len
-        routes.map(route => (<Route exact path={route.path} key={route.path} component={route.component} />))
-      }
+      <Switch>
+        {
+        // eslint-disable-next-line max-len
+          routes.map(route => (<Route exact path={route.path} key={route.path} component={route.component} />))
+        }
+        <Route component={NotFound} />
+      </Switch>
     </div>
   </Router>
 );

diff --git a/src/components/404/NotFound.js b/src/components/404/NotFound.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Header from '../common/Header';
+
+const NotFound = () => (
+  <div>
+    <Header />
+    <h1>404 Page Not Found!</h1>
+  </div>
+);
+
+export default NotFound;
diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
@@ -2,11 +2,11 @@ import React from 'react';
 
 import Header from '../common/Header';
 
-const Home = () => (
+const HomePage = () => (
   <div>
     <Header />
     <h1>Home page here....</h1>
   </div>
 );
 
-export default Home;
+export default HomePage;
diff --git a/src/components/login/LoginPage.js b/src/components/login/LoginPage.js
@@ -2,11 +2,11 @@ import React from 'react';
 
 import Header from '../common/Header';
 
-const Login = () => (
+const LoginPage = () => (
   <div>
     <Header />
     <h1>Log in page here....</h1>
   </div>
 );
 
-export default Login;
+export default LoginPage;
diff --git a/tests/src/App.test.js b/tests/src/App.test.js
@@ -5,6 +5,5 @@ import App from '../../src/App';
 
 test('App snapshot test', () => {
   const component = shallow(<App />);
-  // eslint-disable-next-line no-undef
   expect(component).toMatchSnapshot();
 });
diff --git a/tests/src/__snapshots__/App.test.js.snap b/tests/src/__snapshots__/App.test.js.snap
@@ -3,18 +3,23 @@
 exports[`App snapshot test 1`] = `
 <BrowserRouter>
   <div>
-    <Route
-      component={[Function]}
-      exact={true}
-      key="/"
-      path="/"
-    />
-    <Route
-      component={[Function]}
-      exact={true}
-      key="/login"
-      path="/login"
-    />
+    <Switch>
+      <Route
+        component={[Function]}
+        exact={true}
+        key="/"
+        path="/"
+      />
+      <Route
+        component={[Function]}
+        exact={true}
+        key="/login"
+        path="/login"
+      />
+      <Route
+        component={[Function]}
+      />
+    </Switch>
   </div>
 </BrowserRouter>
 `;
diff --git a/tests/src/components/404/NotFound.test.js b/tests/src/components/404/NotFound.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import NotFound from '../../../../src/components/404/NotFound';
+
+test('NotFound snapshot test', () => {
+  const component = shallow(<NotFound />);
+  expect(component).toMatchSnapshot();
+});
diff --git a/tests/src/components/404/__snapshots__/NotFound.test.js.snap b/tests/src/components/404/__snapshots__/NotFound.test.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotFound snapshot test 1`] = `
+<div>
+  <Header />
+  <h1>
+    404 Page Not Found!
+  </h1>
+</div>
+`;
diff --git a/tests/src/components/common/Header.test.js b/tests/src/components/common/Header.test.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from 'enzyme';
 
 import Header from '../../../../src/components/common/Header';
 
 test('Header snapshot test', () => {
-  const component = renderer.create(<Router><Header /></Router>);
-  const tree = component.toJSON();
-  // eslint-disable-next-line no-undef
-  expect(tree).toMatchSnapshot();
+  const component = shallow(<Header />);
+  expect(component).toMatchSnapshot();
 });
diff --git a/tests/src/components/common/__snapshots__/Header.test.js.snap b/tests/src/components/common/__snapshots__/Header.test.js.snap
@@ -2,36 +2,6 @@
 
 exports[`Header snapshot test 1`] = `
 <header>
-  <nav
-    className="navbar navbar-expand-lg navbar-light bg-light"
-  >
-    <a
-      className="navbar-brand logo"
-      href="/"
-    >
-      Author's Haven |
-    </a>
-    <a
-      aria-current="page"
-      className="nav-item nav-link active active"
-      href="/"
-      onClick={[Function]}
-      style={
-        Object {
-          "color": "red",
-        }
-      }
-    >
-      Home
-    </a>
-    <a
-      aria-current={null}
-      className="nav-item nav-link"
-      href="/login"
-      onClick={[Function]}
-    >
-      Login
-    </a>
-  </nav>
+  <NavBar />
 </header>
 `;
diff --git a/tests/src/components/home/HomePage.test.js b/tests/src/components/home/HomePage.test.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from 'enzyme';
 
-import Home from '../../../../src/components/home/HomePage';
+import HomePage from '../../../../src/components/home/HomePage';
 
 test('Home snapshot test', () => {
-  const component = renderer.create(<Router><Home /></Router>);
-  const tree = component.toJSON();
-  // eslint-disable-next-line no-undef
-  expect(tree).toMatchSnapshot();
+  const component = shallow(<HomePage />);
+  expect(component).toMatchSnapshot();
 });
diff --git a/tests/src/components/home/__snapshots__/HomePage.test.js.snap b/tests/src/components/home/__snapshots__/HomePage.test.js.snap
@@ -2,39 +2,7 @@
 
 exports[`Home snapshot test 1`] = `
 <div>
-  <header>
-    <nav
-      className="navbar navbar-expand-lg navbar-light bg-light"
-    >
-      <a
-        className="navbar-brand logo"
-        href="/"
-      >
-        Author's Haven |
-      </a>
-      <a
-        aria-current="page"
-        className="nav-item nav-link active active"
-        href="/"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": "red",
-          }
-        }
-      >
-        Home
-      </a>
-      <a
-        aria-current={null}
-        className="nav-item nav-link"
-        href="/login"
-        onClick={[Function]}
-      >
-        Login
-      </a>
-    </nav>
-  </header>
+  <Header />
   <h1>
     Home page here....
   </h1>

diff --git a/tests/src/components/login/LoginPage.test.js b/tests/src/components/login/LoginPage.test.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from 'enzyme';
 
-import Login from '../../../../src/components/login/LoginPage';
+import LoginPage from '../../../../src/components/login/LoginPage';
 
 test('Login snapshot test', () => {
-  const component = renderer.create(<Router><Login /></Router>);
-  const tree = component.toJSON();
-  // eslint-disable-next-line no-undef
-  expect(tree).toMatchSnapshot();
+  const component = shallow(<LoginPage />);
+  expect(component).toMatchSnapshot();
 });
diff --git a/tests/src/components/login/__snapshots__/LoginPage.test.js.snap b/tests/src/components/login/__snapshots__/LoginPage.test.js.snap
@@ -2,39 +2,7 @@
 
 exports[`Login snapshot test 1`] = `
 <div>
-  <header>
-    <nav
-      className="navbar navbar-expand-lg navbar-light bg-light"
-    >
-      <a
-        className="navbar-brand logo"
-        href="/"
-      >
-        Author's Haven |
-      </a>
-      <a
-        aria-current="page"
-        className="nav-item nav-link active active"
-        href="/"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": "red",
-          }
-        }
-      >
-        Home
-      </a>
-      <a
-        aria-current={null}
-        className="nav-item nav-link"
-        href="/login"
-        onClick={[Function]}
-      >
-        Login
-      </a>
-    </nav>
-  </header>
+  <Header />
   <h1>
     Log in page here....
   </h1>

diff --git a/tests/src/components/navigation/NavBar.test.js b/tests/src/components/navigation/NavBar.test.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from 'enzyme';
 
 import NavBar from '../../../../src/components/navigation/NavBar';
 
 test('NavBar snapshot test', () => {
-  const component = renderer.create(<Router><NavBar /></Router>);
-  const tree = component.toJSON();
-  // eslint-disable-next-line no-undef
-  expect(tree).toMatchSnapshot();
+  const component = shallow(<NavBar />);
+  expect(component).toMatchSnapshot();
 });