From 09a119f78c3bc8d7f86ef460bf017bdfa5e826e1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 14 Apr 2019 16:58:20 +0200
Subject: [PATCH] add some tests

---
 content/meta.yml                            |  5 ++
 jest/__fixtures__/meta.json                 |  7 ++-
 src/components/Layout.jsx                   | 67 ++++++++++++++++-----
 src/components/atoms/HostnameCheck.jsx      | 13 ++--
 src/components/atoms/HostnameCheck.test.jsx | 22 +++++++
 5 files changed, 90 insertions(+), 24 deletions(-)
 create mode 100644 src/components/atoms/HostnameCheck.test.jsx

diff --git a/content/meta.yml b/content/meta.yml
index 697f022..46647ff 100644
--- a/content/meta.yml
+++ b/content/meta.yml
@@ -27,3 +27,8 @@ typekitID: dtg3zui
 # Analytics tools
 matomoUrl: https://analytics.kremalicious.com
 matomoSite: 2
+
+allowedHosts:
+  - matthiaskretschmann.com
+  - beta.matthiaskretschmann.com
+  - localhost
diff --git a/jest/__fixtures__/meta.json b/jest/__fixtures__/meta.json
index 14572db..1ad3618 100644
--- a/jest/__fixtures__/meta.json
+++ b/jest/__fixtures__/meta.json
@@ -35,6 +35,11 @@
     "addressbook": "/matthias-kretschmann.vcf",
     "typekitID": "dtg3zui",
     "matomoUrl": "https://analytics.kremalicious.com",
-    "matomoSite": 2
+    "matomoSite": 2,
+    "allowedHosts": [
+      "matthiaskretschmann.com",
+      "beta.matthiaskretschmann.com",
+      "localhost"
+    ]
   }
 }
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 86f8f3f..17ceda6 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
+import { StaticQuery, graphql } from 'gatsby'
 import { fadeIn } from './atoms/Transitions'
 import Typekit from './atoms/Typekit'
 import HostnameCheck from './atoms/HostnameCheck'
@@ -16,6 +17,41 @@ import styles from './Layout.module.scss'
 const timeout = 250
 const RoutesContainer = posed.div(fadeIn)
 
+const query = graphql`
+  query {
+    contentYaml {
+      allowedHosts
+    }
+  }
+`
+
+const LayoutMarkup = ({ children, isHomepage, allowedHosts }) => (
+  <>
+    <Typekit />
+    <HostnameCheck allowedHosts={allowedHosts} />
+
+    <PoseGroup animateOnMount={true}>
+      <RoutesContainer
+        key={location.pathname}
+        delay={timeout}
+        delayChildren={timeout}
+      >
+        <Header minimal={!isHomepage} />
+        <main className={styles.screen}>{children}</main>
+      </RoutesContainer>
+    </PoseGroup>
+
+    <Footer />
+  </>
+)
+
+LayoutMarkup.propTypes = {
+  children: PropTypes.any.isRequired,
+  isHomepage: PropTypes.bool.isRequired,
+  allowedHosts: PropTypes.array.isRequired,
+  location: PropTypes.object.isRequired
+}
+
 export default class Layout extends PureComponent {
   static propTypes = {
     children: PropTypes.any.isRequired,
@@ -27,23 +63,22 @@ export default class Layout extends PureComponent {
     const isHomepage = location.pathname === '/'
 
     return (
-      <>
-        <Typekit />
-        <HostnameCheck />
+      <StaticQuery
+        query={query}
+        render={data => {
+          const { allowedHosts } = data.contentYaml
 
-        <PoseGroup animateOnMount={true}>
-          <RoutesContainer
-            key={location.pathname}
-            delay={timeout}
-            delayChildren={timeout}
-          >
-            <Header minimal={!isHomepage} />
-            <main className={styles.screen}>{children}</main>
-          </RoutesContainer>
-        </PoseGroup>
-
-        <Footer />
-      </>
+          return (
+            <LayoutMarkup
+              isHomepage={isHomepage}
+              allowedHosts={allowedHosts}
+              location={location}
+            >
+              {children}
+            </LayoutMarkup>
+          )
+        }}
+      />
     )
   }
 }
diff --git a/src/components/atoms/HostnameCheck.jsx b/src/components/atoms/HostnameCheck.jsx
index b98c02a..53ec546 100644
--- a/src/components/atoms/HostnameCheck.jsx
+++ b/src/components/atoms/HostnameCheck.jsx
@@ -1,17 +1,16 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import styles from './HostnameCheck.module.scss'
 
-const allowedHosts = [
-  'matthiaskretschmann.com',
-  'beta.matthiaskretschmann.com',
-  'localhost'
-]
+export default class HostnameCheck extends PureComponent {
+  static propTypes = {
+    allowedHosts: PropTypes.array.isRequired
+  }
 
-export default class HostnameInfo extends PureComponent {
   checkAllowedHost = () => {
     if (typeof window !== 'undefined' && window.location) {
-      return allowedHosts.includes(window.location.hostname)
+      return this.props.allowedHosts.includes(window.location.hostname)
     }
   }
 
diff --git a/src/components/atoms/HostnameCheck.test.jsx b/src/components/atoms/HostnameCheck.test.jsx
new file mode 100644
index 0000000..3b51cba
--- /dev/null
+++ b/src/components/atoms/HostnameCheck.test.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+import HostnameCheck from './HostnameCheck'
+
+describe('HostnameCheck', () => {
+  it('can access window.location', () => {
+    expect(window).not.toBe(undefined)
+    expect(window.location).not.toBe(undefined)
+  })
+
+  it('renders correctly', () => {
+    const allowedHosts = ['hello.com']
+    const { container } = render(<HostnameCheck allowedHosts={allowedHosts} />)
+    expect(container.firstChild).toHaveTextContent('do a remix')
+  })
+
+  it('does not render if on correct hostname', () => {
+    const allowedHosts = ['localhost']
+    const { container } = render(<HostnameCheck allowedHosts={allowedHosts} />)
+    expect(container.firstChild).not.toBeInTheDocument()
+  })
+})