From 63766e84e93b913ece8580eeac2243aa56708448 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 11 Feb 2018 15:58:59 -0500
Subject: [PATCH] Breaking Header and Footer out into components

For forthcoming i18n setup
---
 src/components/App.js                         |  12 +-
 src/components/Footer.js                      |  20 +++
 src/components/Footer.test.js                 |  13 ++
 src/components/Header.js                      |  19 +++
 src/components/Header.test.js                 |  26 ++++
 src/components/PageTemplate.js                |  36 +-----
 src/components/PageTemplate.test.js           |   1 -
 .../__snapshots__/Footer.test.js.snap         |  30 +++++
 .../__snapshots__/Header.test.js.snap         |  28 ++++
 .../__snapshots__/PageTemplate.test.js.snap   | 120 +++---------------
 src/pages/index/template.js                   |   2 -
 11 files changed, 168 insertions(+), 139 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/Footer.test.js
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/Header.test.js
 create mode 100644 src/components/__snapshots__/Footer.test.js.snap
 create mode 100644 src/components/__snapshots__/Header.test.js.snap

diff --git a/src/components/App.js b/src/components/App.js
index 88a7054..5efe890 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,15 @@
 import React from 'react';
 
+import Header from './Header';
+import Footer from './Footer';
 import Message from './Message';
 
-const App = () => <Message heading="React App">
-  <p>Placeholder app content</p>
-</Message>;
+const App = () => <React.Fragment>
+  <Header/>
+  <Message heading="React App">
+    <p>Placeholder app content</p>
+  </Message>
+  <Footer/>
+</React.Fragment>;
 
 export default App;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..df542b9
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Footer = () => (
+  <footer>
+    <ul className="inline with-separator">
+      <li>
+        Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
+      </li>
+      <li>
+        Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
+          <img
+            alt="Creative Commons CC-BY-3.0 License"
+            src="https://licensebuttons.net/l/by/3.0/80x15.png" />
+        </a>
+      </li>
+    </ul>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/Footer.test.js b/src/components/Footer.test.js
new file mode 100644
index 0000000..f7947b0
--- /dev/null
+++ b/src/components/Footer.test.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Footer from './Footer';
+
+test('Footer rendering', () => {
+  const component = shallow(
+    <Footer>
+      <p>Content</p>
+    </Footer>
+  );
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..0ca4ec4
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import GithubIcon from 'feather-icons/dist/icons/github.svg';
+
+const Header = () => (
+  <header id="main" data-banner={ process.env.BANNER }>
+    <h1>
+      <a href="/">Regexper</a>
+    </h1>
+
+    <ul className="inline">
+      <li><a href="https://github.com/javallone/regexper-static">
+        <GithubIcon/>Source on GitHub
+      </a></li>
+    </ul>
+  </header>
+);
+
+export default Header;
diff --git a/src/components/Header.test.js b/src/components/Header.test.js
new file mode 100644
index 0000000..fbf279e
--- /dev/null
+++ b/src/components/Header.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Header from './Header';
+
+const env = { ...process.env };
+
+afterEach(() => {
+  process.env = env;
+});
+
+beforeEach(() => {
+  process.env = {
+    ...process.env,
+    BANNER: 'testing'
+  };
+});
+
+test('Header rendering', () => {
+  const component = shallow(
+    <Header>
+      <p>Content</p>
+    </Header>
+  );
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/components/PageTemplate.js b/src/components/PageTemplate.js
index 6ab9fab..0ab2763 100644
--- a/src/components/PageTemplate.js
+++ b/src/components/PageTemplate.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 
 import pkg from '../../package.json';
 
-import GithubIcon from 'feather-icons/dist/icons/github.svg';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
 
 const PageTemplate = ({ title, children }) => (
   <html>
@@ -18,34 +19,11 @@ const PageTemplate = ({ title, children }) => (
       <title>Regexper{ title && (' - ' + title) }</title>
     </head>
     <body data-build-id={ process.env.BUILD_ID }>
-      <header id="main" data-banner={ process.env.BANNER }>
-        <h1>
-          <a href="/">Regexper</a>
-        </h1>
-
-        <ul className="inline">
-          <li><a href="https://github.com/javallone/regexper-static">
-            <GithubIcon/>Source on GitHub
-          </a></li>
-        </ul>
-      </header>
-
-      { children }
-
-      <footer>
-        <ul className="inline with-separator">
-          <li>
-            Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
-          </li>
-          <li>
-            Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
-              <img
-                alt="Creative Commons CC-BY-3.0 License"
-                src="https://licensebuttons.net/l/by/3.0/80x15.png" />
-            </a>
-          </li>
-        </ul>
-      </footer>
+      <div id="root">
+        <Header/>
+        { children }
+        <Footer/>
+      </div>
     </body>
   </html>
 );
diff --git a/src/components/PageTemplate.test.js b/src/components/PageTemplate.test.js
index 2aca047..fa2e104 100644
--- a/src/components/PageTemplate.test.js
+++ b/src/components/PageTemplate.test.js
@@ -12,7 +12,6 @@ afterEach(() => {
 beforeEach(() => {
   process.env = {
     ...process.env,
-    BANNER: 'testing',
     BUILD_ID: 'test-id'
   };
 });
diff --git a/src/components/__snapshots__/Footer.test.js.snap b/src/components/__snapshots__/Footer.test.js.snap
new file mode 100644
index 0000000..ca2b0b6
--- /dev/null
+++ b/src/components/__snapshots__/Footer.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer rendering 1`] = `
+<footer>
+  <ul
+    className="inline with-separator"
+  >
+    <li>
+      Created by 
+      <a
+        href="mailto:jeff.avallone@gmail.com"
+      >
+        Jeff Avallone
+      </a>
+    </li>
+    <li>
+      Generated images licensed: 
+      <a
+        href="http://creativecommons.org/licenses/by/3.0/"
+        rel="license"
+      >
+        <img
+          alt="Creative Commons CC-BY-3.0 License"
+          src="https://licensebuttons.net/l/by/3.0/80x15.png"
+        />
+      </a>
+    </li>
+  </ul>
+</footer>
+`;
diff --git a/src/components/__snapshots__/Header.test.js.snap b/src/components/__snapshots__/Header.test.js.snap
new file mode 100644
index 0000000..b7f3c15
--- /dev/null
+++ b/src/components/__snapshots__/Header.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header rendering 1`] = `
+<header
+  data-banner="testing"
+  id="main"
+>
+  <h1>
+    <a
+      href="/"
+    >
+      Regexper
+    </a>
+  </h1>
+  <ul
+    className="inline"
+  >
+    <li>
+      <a
+        href="https://github.com/javallone/regexper-static"
+      >
+        <Component />
+        Source on GitHub
+      </a>
+    </li>
+  </ul>
+</header>
+`;
diff --git a/src/components/__snapshots__/PageTemplate.test.js.snap b/src/components/__snapshots__/PageTemplate.test.js.snap
index 4fb19b9..aa190c7 100644
--- a/src/components/__snapshots__/PageTemplate.test.js.snap
+++ b/src/components/__snapshots__/PageTemplate.test.js.snap
@@ -25,59 +25,15 @@ exports[`PageTemplate rendering 1`] = `
   <body
     data-build-id="test-id"
   >
-    <header
-      data-banner="testing"
-      id="main"
+    <div
+      id="root"
     >
-      <h1>
-        <a
-          href="/"
-        >
-          Regexper
-        </a>
-      </h1>
-      <ul
-        className="inline"
-      >
-        <li>
-          <a
-            href="https://github.com/javallone/regexper-static"
-          >
-            <Component />
-            Source on GitHub
-          </a>
-        </li>
-      </ul>
-    </header>
-    <p>
-      Content
-    </p>
-    <footer>
-      <ul
-        className="inline with-separator"
-      >
-        <li>
-          Created by 
-          <a
-            href="mailto:jeff.avallone@gmail.com"
-          >
-            Jeff Avallone
-          </a>
-        </li>
-        <li>
-          Generated images licensed: 
-          <a
-            href="http://creativecommons.org/licenses/by/3.0/"
-            rel="license"
-          >
-            <img
-              alt="Creative Commons CC-BY-3.0 License"
-              src="https://licensebuttons.net/l/by/3.0/80x15.png"
-            />
-          </a>
-        </li>
-      </ul>
-    </footer>
+      <Header />
+      <p>
+        Content
+      </p>
+      <Footer />
+    </div>
   </body>
 </html>
 `;
@@ -108,59 +64,15 @@ exports[`PageTemplate rendering with title 1`] = `
   <body
     data-build-id="test-id"
   >
-    <header
-      data-banner="testing"
-      id="main"
+    <div
+      id="root"
     >
-      <h1>
-        <a
-          href="/"
-        >
-          Regexper
-        </a>
-      </h1>
-      <ul
-        className="inline"
-      >
-        <li>
-          <a
-            href="https://github.com/javallone/regexper-static"
-          >
-            <Component />
-            Source on GitHub
-          </a>
-        </li>
-      </ul>
-    </header>
-    <p>
-      Content
-    </p>
-    <footer>
-      <ul
-        className="inline with-separator"
-      >
-        <li>
-          Created by 
-          <a
-            href="mailto:jeff.avallone@gmail.com"
-          >
-            Jeff Avallone
-          </a>
-        </li>
-        <li>
-          Generated images licensed: 
-          <a
-            href="http://creativecommons.org/licenses/by/3.0/"
-            rel="license"
-          >
-            <img
-              alt="Creative Commons CC-BY-3.0 License"
-              src="https://licensebuttons.net/l/by/3.0/80x15.png"
-            />
-          </a>
-        </li>
-      </ul>
-    </footer>
+      <Header />
+      <p>
+        Content
+      </p>
+      <Footer />
+    </div>
   </body>
 </html>
 `;
diff --git a/src/pages/index/template.js b/src/pages/index/template.js
index d84e12d..dc993fe 100644
--- a/src/pages/index/template.js
+++ b/src/pages/index/template.js
@@ -18,7 +18,5 @@ export default renderToString(
         <p>Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p>
       </Message>
     </noscript>
-
-    <div id="root"></div>
   </PageTemplate>
 );