From d23ddd0e0b8f6fa1fcbd0dd2e0479ccfd45c3632 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 3 Mar 2019 11:02:29 +0100
Subject: [PATCH] Created NotFound component

---
 src/App.js                   |  2 ++
 src/common/NotFound.js       | 15 +++++++++++++++
 test/App.test.js             | 15 ++++++++++-----
 test/common/NotFound.test.js | 30 ++++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 src/common/NotFound.js
 create mode 100644 test/common/NotFound.test.js

diff --git a/src/App.js b/src/App.js
index b351422c..ba40b7e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import './App.scss';
+import NotFound from './common/NotFound';
 
 const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
   <div className="container-fluid app-container">
@@ -11,6 +12,7 @@ const App = (MainHeader, Home, MenuLayout, CreateServer) => () => (
         <Route exact path="/server/create" component={CreateServer} />
         <Route exact path="/" component={Home} />
         <Route path="/server/:serverId" component={MenuLayout} />
+        <Route component={NotFound} />
       </Switch>
     </div>
   </div>
diff --git a/src/common/NotFound.js b/src/common/NotFound.js
new file mode 100644
index 00000000..1a68e2c0
--- /dev/null
+++ b/src/common/NotFound.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound = () => (
+  <div className="home">
+    <h2>Oops! We could not find requested route.</h2>
+    <p>
+      Use your browser{'\''}s back button to navigate to the page you have previously come from, or just press this button.
+    </p>
+    <br />
+    <Link to="/" className="btn btn-outline-primary btn-lg">Home</Link>
+  </div>
+);
+
+export default NotFound;
diff --git a/test/App.test.js b/test/App.test.js
index 1a112ae7..c9df2d9c 100644
--- a/test/App.test.js
+++ b/test/App.test.js
@@ -19,12 +19,17 @@ describe('<App />', () => {
 
   it('renders app main routes', () => {
     const routes = wrapper.find(Route);
-    const expectedRoutesCount = 3;
-    const second = 2;
+    const expectedRoutesCount = 4;
+    const expectedPaths = [
+      '/server/create',
+      '/',
+      '/server/:serverId',
+    ];
 
+    expect.assertions(expectedPaths.length + 1);
     expect(routes).toHaveLength(expectedRoutesCount);
-    expect(routes.at(0).prop('path')).toEqual('/server/create');
-    expect(routes.at(1).prop('path')).toEqual('/');
-    expect(routes.at(second).prop('path')).toEqual('/server/:serverId');
+    expectedPaths.forEach((path, index) => {
+      expect(routes.at(index).prop('path')).toEqual(path);
+    });
   });
 });
diff --git a/test/common/NotFound.test.js b/test/common/NotFound.test.js
new file mode 100644
index 00000000..dc3c7f33
--- /dev/null
+++ b/test/common/NotFound.test.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
+import NotFound from '../../src/common/NotFound';
+
+describe('<NotFound />', () => {
+  let wrapper;
+  let content;
+
+  beforeEach(() => {
+    wrapper = shallow(<NotFound />);
+    content = wrapper.text();
+  });
+
+  afterEach(() => wrapper.unmount());
+
+  it('shows expected error title', () => expect(content).toContain('Oops! We could not find requested route.'));
+
+  it('shows expected error message', () =>
+    expect(content).toContain(
+      'Use your browser\'s back button to navigate to the page you have previously come from, or just press this button.'
+    ));
+
+  it('shows a link to the home', () => {
+    const link = wrapper.find(Link);
+
+    expect(link.prop('to')).toEqual('/');
+    expect(link.prop('className')).toEqual('btn btn-outline-primary btn-lg');
+  });
+});