root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Applying Layout component in gatsby-browser

Browse Source
This commit is contained in:
Jeff Avallone 2019-01-05 20:16:29 -05:00
parent 837b8d77df
commit 7d7916baf0
14 changed files with 684 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gatsby-browser.js
View File

@ -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>;
};

8
gatsby-ssr.js Normal file
View File

@ -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>;
};

264
src/components/Layout/__snapshots__/test.js.snap
View File

@ -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,

7
src/components/Layout/index.js
View File

@ -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>
<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

9
src/components/Layout/test.js
View File

@ -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();
});
});

171
src/components/Metadata/__snapshots__/test.js.snap Normal file
View File

@ -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,
},
},
},
},
},
}
`;

15
src/components/Metadata/index.js Normal file
View File

@ -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;

20
src/components/Metadata/test.js Normal file
View File

@ -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();
});
});

7
src/pages/404.js
View File

@ -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;

46
src/pages/__snapshots__/404.test.js.snap
View File

@ -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 {

24
src/pages/__snapshots__/index.test.js.snap
View File

@ -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 {

46
src/pages/__snapshots__/privacy.test.js.snap
View File

@ -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 {

7
src/pages/index.js
View File

@ -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;

7
src/pages/privacy.js
View File

@ -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;