Applying Layout component in gatsby-browser

gatsby-browser.js

@@ -1,8 +1,16 @@
+import React from 'react';
 import * as Sentry from '@sentry/browser';
 
+import Layout from 'components/Layout';
+
 import 'site.css';
 
 export const onClientEntry = () => {
   Sentry.getCurrentHub().getClient().getOptions().enabled =
     (navigator.doNotTrack !== '1' && window.doNotTrack !== '1');
 };
+
+// eslint-disable-next-line react/prop-types
+export const wrapPageElement = ({ element }) => {
+  return <Layout>{ element }</Layout>;
+};

gatsby-ssr.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import Layout from 'components/Layout';
+
+// eslint-disable-next-line react/prop-types
+export const wrapPageElement = ({ element }) => {
+  return <Layout>{ element }</Layout>;
+};

src/components/Layout/__snapshots__/test.js.snap

@@ -20,14 +20,6 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper
-          </title>
-        </HelmetWrapper>,
         <Header />,
         <SentryBoundary>
           Example content
@@ -37,31 +29,6 @@ ShallowWrapper {
     },
     "ref": null,
     "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper",
-          },
-          "ref": null,
-          "rendered": "Regexper",
-          "type": "title",
-        },
-        "type": [Function],
-      },
       Object {
         "instance": null,
         "key": undefined,
@@ -101,14 +68,6 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper
-            </title>
-          </HelmetWrapper>,
           <Header />,
           <SentryBoundary>
             Example content
@@ -118,229 +77,6 @@ ShallowWrapper {
       },
       "ref": null,
       "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper",
-            },
-            "ref": null,
-            "rendered": "Regexper",
-            "type": "title",
-          },
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": "Example content",
-          },
-          "ref": null,
-          "rendered": "Example content",
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-      ],
-      "type": [Function],
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`Layout rendering with a title 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Layout
-    title="Testing"
-  >
-    Example content
-  </Layout>,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "class",
-    "props": Object {
-      "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper - Testing
-          </title>
-        </HelmetWrapper>,
-        <Header />,
-        <SentryBoundary>
-          Example content
-        </SentryBoundary>,
-        <Footer />,
-      ],
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper - Testing
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper - Testing",
-          },
-          "ref": null,
-          "rendered": "Regexper - Testing",
-          "type": "title",
-        },
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": "Example content",
-        },
-        "ref": null,
-        "rendered": "Example content",
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-    ],
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "class",
-      "props": Object {
-        "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper - Testing
-            </title>
-          </HelmetWrapper>,
-          <Header />,
-          <SentryBoundary>
-            Example content
-          </SentryBoundary>,
-          <Footer />,
-        ],
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper - Testing
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper - Testing",
-            },
-            "ref": null,
-            "rendered": "Regexper - Testing",
-            "type": "title",
-          },
-          "type": [Function],
-        },
         Object {
           "instance": null,
           "key": undefined,

src/components/Layout/index.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
 
 import SentryBoundary from 'components/SentryBoundary';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 
-const Layout = ({ title, children }) => <SentryBoundary>
+const Layout = ({ children }) => <SentryBoundary>
-  <Helmet>
-    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
-  </Helmet>
   <Header />
   <SentryBoundary>
     { children }
@@ -18,7 +14,6 @@ const Layout = ({ title, children }) => <SentryBoundary>
 </SentryBoundary>;
 
 Layout.propTypes = {
-  title: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node

src/components/Layout/test.js

@@ -12,13 +12,4 @@ describe('Layout', () => {
     );
     expect(component).toMatchSnapshot();
   });
-
-  test('rendering with a title', () => {
-    const component = shallow(
-      <Layout title="Testing">
-        Example content
-      </Layout>
-    );
-    expect(component).toMatchSnapshot();
-  });
 });

src/components/Metadata/__snapshots__/test.js.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metadata rendering 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper",
+      },
+      "ref": null,
+      "rendered": "Regexper",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper",
+        },
+        "ref": null,
+        "rendered": "Regexper",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`Metadata rendering with a title 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata
+    title="Testing"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper - Testing
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper - Testing",
+      },
+      "ref": null,
+      "rendered": "Regexper - Testing",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper - Testing
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper - Testing",
+        },
+        "ref": null,
+        "rendered": "Regexper - Testing",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;

src/components/Metadata/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const Metadata = ({ title }) => (
+  <Helmet>
+    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
+  </Helmet>
+);
+
+Metadata.propTypes = {
+  title: PropTypes.string
+};
+
+export default Metadata;

src/components/Metadata/test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Metadata from 'components/Metadata';
+
+describe('Metadata', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <Metadata />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a title', () => {
+    const component = shallow(
+      <Metadata title="Testing" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/pages/404.js

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const ErrorPage = () => <Layout title="Page Not Found">
+const ErrorPage = () => <>
+  <Metadata title="Page Not Found" />
   <Message type="error" heading="404 Page Not Found">
     <p>The page you have requrested could not be found.</p>
   </Message>
-</Layout>;
+</>;
 
 export default ErrorPage;

src/pages/__snapshots__/404.test.js.snap

@@ -17,7 +17,11 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "function",
     "props": Object {
-      "children": <Message
+      "children": Array [
+        <Metadata
+          title="Page Not Found"
+        />,
+        <Message
           heading="404 Page Not Found"
           type="error"
         >
@@ -25,10 +29,22 @@ ShallowWrapper {
             The page you have requrested could not be found.
           </p>
         </Message>,
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {
           "title": "Page Not Found",
         },
         "ref": null,
-    "rendered": Object {
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
         "instance": null,
         "key": undefined,
         "nodeType": "function",
@@ -53,7 +69,8 @@ ShallowWrapper {
         },
         "type": [Function],
       },
-    "type": [Function],
+    ],
+    "type": Symbol(react.fragment),
   },
   Symbol(enzyme.__nodes__): Array [
     Object {
@@ -61,7 +78,11 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "function",
       "props": Object {
-        "children": <Message
+        "children": Array [
+          <Metadata
+            title="Page Not Found"
+          />,
+          <Message
             heading="404 Page Not Found"
             type="error"
           >
@@ -69,10 +90,22 @@ ShallowWrapper {
               The page you have requrested could not be found.
             </p>
           </Message>,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
             "title": "Page Not Found",
           },
           "ref": null,
-      "rendered": Object {
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
           "instance": null,
           "key": undefined,
           "nodeType": "function",
@@ -97,7 +130,8 @@ ShallowWrapper {
           },
           "type": [Function],
         },
-      "type": [Function],
+      ],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {

src/pages/__snapshots__/index.test.js.snap

@@ -18,6 +18,7 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": Array [
+        <Metadata />,
         <noscript>
           <Message
             heading="JavaScript Required"
@@ -44,6 +45,15 @@ ShallowWrapper {
     },
     "ref": null,
     "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {},
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
       Object {
         "instance": null,
         "key": undefined,
@@ -154,7 +164,7 @@ ShallowWrapper {
         "type": "div",
       },
     ],
-    "type": [Function],
+    "type": Symbol(react.fragment),
   },
   Symbol(enzyme.__nodes__): Array [
     Object {
@@ -163,6 +173,7 @@ ShallowWrapper {
       "nodeType": "function",
       "props": Object {
         "children": Array [
+          <Metadata />,
           <noscript>
             <Message
               heading="JavaScript Required"
@@ -189,6 +200,15 @@ ShallowWrapper {
       },
       "ref": null,
       "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {},
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
         Object {
           "instance": null,
           "key": undefined,
@@ -299,7 +319,7 @@ ShallowWrapper {
           "type": "div",
         },
       ],
-      "type": [Function],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {

src/pages/__snapshots__/privacy.test.js.snap

@@ -17,7 +17,11 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "function",
     "props": Object {
-      "children": <Message
+      "children": Array [
+        <Metadata
+          title="Privacy Policy"
+        />,
+        <Message
           heading="Privacy Policy"
           type="info"
         >
@@ -64,10 +68,22 @@ ShallowWrapper {
             Regexper is not supported by ad revenue or sales of any kind.
           </p>
         </Message>,
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {
           "title": "Privacy Policy",
         },
         "ref": null,
-    "rendered": Object {
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
         "instance": null,
         "key": undefined,
         "nodeType": "function",
@@ -314,7 +330,8 @@ ShallowWrapper {
         ],
         "type": [Function],
       },
-    "type": [Function],
+    ],
+    "type": Symbol(react.fragment),
   },
   Symbol(enzyme.__nodes__): Array [
     Object {
@@ -322,7 +339,11 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "function",
       "props": Object {
-        "children": <Message
+        "children": Array [
+          <Metadata
+            title="Privacy Policy"
+          />,
+          <Message
             heading="Privacy Policy"
             type="info"
           >
@@ -369,10 +390,22 @@ ShallowWrapper {
               Regexper is not supported by ad revenue or sales of any kind.
             </p>
           </Message>,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
             "title": "Privacy Policy",
           },
           "ref": null,
-      "rendered": Object {
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
           "instance": null,
           "key": undefined,
           "nodeType": "function",
@@ -619,7 +652,8 @@ ShallowWrapper {
           ],
           "type": [Function],
         },
-      "type": [Function],
+      ],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {

src/pages/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const IndexPage = () => <Layout>
+const IndexPage = () => <>
+  <Metadata/>
   <noscript>
     <Message type="error" heading="JavaScript Required">
       <p>You need JavaScript to use Regexper.</p>
@@ -13,6 +14,6 @@ const IndexPage = () => <Layout>
     </Message>
   </noscript>
   <div>Hello world</div>
-</Layout>;
+</>;
 
 export default IndexPage;

src/pages/privacy.js

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const PrivacyPage = () => <Layout title="Privacy Policy">
+const PrivacyPage = () => <>
+  <Metadata title="Privacy Policy" />
   <Message type="info" heading="Privacy Policy">
     <p>
       Regexper and the tools used to create it are all open source. If you are
@@ -41,6 +42,6 @@ const PrivacyPage = () => <Layout title="Privacy Policy">
       Regexper is not supported by ad revenue or sales of any kind.
     </p>
   </Message>
-</Layout>;
+</>;
 
 export default PrivacyPage;