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,20 +17,18 @@ import styles from './Layout.module.scss'
 const timeout = 250
 const RoutesContainer = posed.div(fadeIn)
 
-export default class Layout extends PureComponent {
+const query = graphql`
-  static propTypes = {
+  query {
-    children: PropTypes.any.isRequired,
+    contentYaml {
-    location: PropTypes.object.isRequired
+      allowedHosts
     }
+  }
+`
 
-  render() {
+const LayoutMarkup = ({ children, isHomepage, allowedHosts }) => (
-    const { children, location } = this.props
-    const isHomepage = location.pathname === '/'
-
-    return (
   <>
     <Typekit />
-        <HostnameCheck />
+    <HostnameCheck allowedHosts={allowedHosts} />
 
     <PoseGroup animateOnMount={true}>
       <RoutesContainer
@@ -45,5 +44,41 @@ export default class Layout extends PureComponent {
     <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,
+    location: PropTypes.object.isRequired
+  }
+
+  render() {
+    const { children, location } = this.props
+    const isHomepage = location.pathname === '/'
+
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const { allowedHosts } = data.contentYaml
+
+          return (
+            <LayoutMarkup
+              isHomepage={isHomepage}
+              allowedHosts={allowedHosts}
+              location={location}
+            >
+              {children}
+            </LayoutMarkup>
+          )
+        }}
+      />
+    )
   }
 }

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