add some tests

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

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"
+    ]
   }
 }

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 (
-      <>
+      <StaticQuery
-        <Typekit />
+        query={query}
-        <HostnameCheck />
+        render={data => {
+          const { allowedHosts } = data.contentYaml
 
-        <PoseGroup animateOnMount={true}>
+          return (
-          <RoutesContainer
+            <LayoutMarkup
-            key={location.pathname}
+              isHomepage={isHomepage}
-            delay={timeout}
+              allowedHosts={allowedHosts}
-            delayChildren={timeout}
+              location={location}
-          >
+            >
-            <Header minimal={!isHomepage} />
+              {children}
-            <main className={styles.screen}>{children}</main>
+            </LayoutMarkup>
-          </RoutesContainer>
+          )
-        </PoseGroup>
+        }}
-
+      />
-        <Footer />
-      </>
     )
   }
 }

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 = [
+export default class HostnameCheck extends PureComponent {
-  'matthiaskretschmann.com',
+  static propTypes = {
-  'beta.matthiaskretschmann.com',
+    allowedHosts: PropTypes.array.isRequired
-  'localhost'
+  }
-]
 
-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)
     }
   }
 

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()
+  })
+})