Commit 7d7916ba authored by Jeff Avallone's avatar Jeff Avallone

Applying Layout component in gatsby-browser

parent 837b8d77
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>;
};
import React from 'react';
import Layout from 'components/Layout';
// eslint-disable-next-line react/prop-types
export const wrapPageElement = ({ element }) => {
return <Layout>{ element }</Layout>;
};
......@@ -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,229 +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,
"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
</title>
</HelmetWrapper>,
<Header />,
<SentryBoundary>
Example content
</SentryBoundary>,
<Footer />,
],
},
"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,
......@@ -299,14 +68,6 @@ ShallowWrapper {
"nodeType": "class",
"props": Object {
"children": Array [
<HelmetWrapper
defer={true}
encodeSpecialCharacters={true}
>
<title>
Regexper - Testing
</title>
</HelmetWrapper>,
<Header />,
<SentryBoundary>
Example content
......@@ -316,31 +77,6 @@ ShallowWrapper {
},
"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,
......
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>
<Helmet>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
</Helmet>
const Layout = ({ children }) => <SentryBoundary>
<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
......
......@@ -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();
});
});
// 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,
},
},
},
},
},
}
`;
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;
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();
});
});
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;
......@@ -17,51 +17,11 @@ ShallowWrapper {
"key": undefined,
"nodeType": "function",
"props": Object {
"children": <Message
heading="404 Page Not Found"
type="error"
>
<p>
The page you have requrested could not be found.
</p>
</Message>,
"title": "Page Not Found",
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": <p>
The page you have requrested could not be found.
</p>,
"heading": "404 Page Not Found",
"type": "error",
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "The page you have requrested could not be found.",
},
"ref": null,
"rendered": "The page you have requrested could not be found.",
"type": "p",
},
"type": [Function],
},
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"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 +29,22 @@ ShallowWrapper {
The page you have requrested could not be found.
</p>
</Message>,
"title": "Page Not Found",
],
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "Page Not Found",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"ref": null,
"rendered": Object {
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
......@@ -97,7 +69,69 @@ ShallowWrapper {
},
"type": [Function],
},
"type": [Function],
],
"type": Symbol(react.fragment),
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Metadata
title="Page Not Found"
/>,
<Message
heading="404 Page Not Found"
type="error"
>
<p>
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": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": <p>
The page you have requrested could not be found.
</p>,
"heading": "404 Page Not Found",
"type": "error",
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "host",
"props": Object {
"children": "The page you have requrested could not be found.",
},
"ref": null,
"rendered": "The page you have requrested could not be found.",
"type": "p",
},
"type": [Function],
},
],
"type": Symbol(react.fragment),
},
],
Symbol(enzyme.__options__): Object {
......
......@@ -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,