Adding Jest for testing
This commit is contained in:
Jeff Avallone
@@ -0,0 +1,469 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Footer rendering implementation 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <FooterImpl
|
||||
site={
|
||||
Object {
|
||||
"siteMetadata": Object {
|
||||
"buildId": "abc-123",
|
||||
},
|
||||
}
|
||||
}
|
||||
/>,
|
||||
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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>,
|
||||
<div
|
||||
className="buildId"
|
||||
>
|
||||
abc-123
|
||||
</div>,
|
||||
],
|
||||
"className": "footer",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"Created by ",
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"Created by ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Jeff Avallone",
|
||||
"href": "mailto:jeff.avallone@gmail.com",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Jeff Avallone",
|
||||
"type": "a",
|
||||
},
|
||||
],
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"Generated images licensed: ",
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"Generated images licensed: ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>,
|
||||
"href": "http://creativecommons.org/licenses/by/3.0/",
|
||||
"rel": "license external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"alt": "Creative Commons CC-BY-3.0 License",
|
||||
"src": "https://licensebuttons.net/l/by/3.0/80x15.png",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": "img",
|
||||
},
|
||||
"type": "a",
|
||||
},
|
||||
],
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "abc-123",
|
||||
"className": "buildId",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "abc-123",
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "footer",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>,
|
||||
<div
|
||||
className="buildId"
|
||||
>
|
||||
abc-123
|
||||
</div>,
|
||||
],
|
||||
"className": "footer",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"Created by ",
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"Created by ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Jeff Avallone",
|
||||
"href": "mailto:jeff.avallone@gmail.com",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Jeff Avallone",
|
||||
"type": "a",
|
||||
},
|
||||
],
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"Generated images licensed: ",
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"Generated images licensed: ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>,
|
||||
"href": "http://creativecommons.org/licenses/by/3.0/",
|
||||
"rel": "license external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"alt": "Creative Commons CC-BY-3.0 License",
|
||||
"src": "https://licensebuttons.net/l/by/3.0/80x15.png",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": "img",
|
||||
},
|
||||
"type": "a",
|
||||
},
|
||||
],
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "abc-123",
|
||||
"className": "buildId",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "abc-123",
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "footer",
|
||||
},
|
||||
],
|
||||
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[`Footer rendering with query 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Footer />,
|
||||
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": "function",
|
||||
"props": Object {
|
||||
"query": "
|
||||
query FooterQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
buildId
|
||||
}
|
||||
}
|
||||
}
|
||||
",
|
||||
"render": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [MockFunction],
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"query": "
|
||||
query FooterQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
buildId
|
||||
}
|
||||
}
|
||||
}
|
||||
",
|
||||
"render": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [MockFunction],
|
||||
},
|
||||
],
|
||||
Symbol(enzyme.__options__): Object {
|
||||
"adapter": ReactSixteenAdapter {
|
||||
"options": Object {
|
||||
"enableComponentDidUpdateOnSetState": true,
|
||||
"lifecycles": Object {
|
||||
"componentDidUpdate": Object {
|
||||
"onSetState": true,
|
||||
},
|
||||
"getDerivedStateFromProps": true,
|
||||
"getSnapshotBeforeUpdate": true,
|
||||
"setState": Object {
|
||||
"skipsComponentDidUpdateOnNullish": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { StaticQuery, graphql } from 'gatsby';
|
||||
|
||||
import style from './style.module.css';
|
||||
@@ -13,7 +14,7 @@ const query = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const Footer = () => (
|
||||
export const FooterImpl = ({ site: { siteMetadata } }) => (
|
||||
<footer className={ style.footer }>
|
||||
<ul className={ style.list }>
|
||||
<li>
|
||||
@@ -26,9 +27,21 @@ const Footer = () => (
|
||||
</li>
|
||||
</ul>
|
||||
<div className={ style.buildId }>
|
||||
<StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => siteMetadata.buildId } />
|
||||
{ siteMetadata.buildId }
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
FooterImpl.propTypes = {
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
buildId: PropTypes.string.isRequired
|
||||
}).isRequired
|
||||
}).isRequired
|
||||
};
|
||||
|
||||
const Footer = () => <StaticQuery query={ query } render={ data => (
|
||||
<FooterImpl { ...data } />
|
||||
) } />;
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Footer, { FooterImpl } from 'components/Footer';
|
||||
|
||||
describe('Footer', () => {
|
||||
test('rendering with query', () => {
|
||||
const component = shallow(
|
||||
<Footer />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering implementation', () => {
|
||||
const component = shallow(
|
||||
<FooterImpl site={{ siteMetadata: { buildId: 'abc-123' } }} />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,903 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Header rendering implementation 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <HeaderImpl
|
||||
site={
|
||||
Object {
|
||||
"siteMetadata": Object {
|
||||
"banner": "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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<h1>
|
||||
<mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>
|
||||
</h1>,
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>
|
||||
</ul>,
|
||||
],
|
||||
"className": "header",
|
||||
"data-banner": "testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Regexper",
|
||||
"to": "/",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Regexper",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "h1",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
"Source on GitLab",
|
||||
],
|
||||
"href": "https://gitlab.com/javallone/regexper-static",
|
||||
"rel": "external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
"Source on GitLab",
|
||||
],
|
||||
"type": "a",
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Privacy Policy",
|
||||
"to": "/privacy",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Privacy Policy",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
],
|
||||
"type": "header",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<h1>
|
||||
<mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>
|
||||
</h1>,
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>
|
||||
</ul>,
|
||||
],
|
||||
"className": "header",
|
||||
"data-banner": "testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Regexper",
|
||||
"to": "/",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Regexper",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "h1",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
"Source on GitLab",
|
||||
],
|
||||
"href": "https://gitlab.com/javallone/regexper-static",
|
||||
"rel": "external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
"Source on GitLab",
|
||||
],
|
||||
"type": "a",
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Privacy Policy",
|
||||
"to": "/privacy",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Privacy Policy",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
],
|
||||
"type": "header",
|
||||
},
|
||||
],
|
||||
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[`Header rendering implementation with no banner 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <HeaderImpl
|
||||
site={
|
||||
Object {
|
||||
"siteMetadata": Object {
|
||||
"banner": false,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>,
|
||||
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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<h1>
|
||||
<mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>
|
||||
</h1>,
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>
|
||||
</ul>,
|
||||
],
|
||||
"className": "header",
|
||||
"data-banner": null,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Regexper",
|
||||
"to": "/",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Regexper",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "h1",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
"Source on GitLab",
|
||||
],
|
||||
"href": "https://gitlab.com/javallone/regexper-static",
|
||||
"rel": "external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
"Source on GitLab",
|
||||
],
|
||||
"type": "a",
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Privacy Policy",
|
||||
"to": "/privacy",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Privacy Policy",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
],
|
||||
"type": "header",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<h1>
|
||||
<mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>
|
||||
</h1>,
|
||||
<ul
|
||||
className="list"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>
|
||||
</ul>,
|
||||
],
|
||||
"className": "header",
|
||||
"data-banner": null,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/"
|
||||
>
|
||||
Regexper
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Regexper",
|
||||
"to": "/",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Regexper",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "h1",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<li>
|
||||
<a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>
|
||||
</li>,
|
||||
<li>
|
||||
<mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>
|
||||
</li>,
|
||||
],
|
||||
"className": "list",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <a
|
||||
href="https://gitlab.com/javallone/regexper-static"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Source on GitLab
|
||||
</a>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Gitlab
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
"Source on GitLab",
|
||||
],
|
||||
"href": "https://gitlab.com/javallone/regexper-static",
|
||||
"rel": "external noopener noreferrer",
|
||||
"target": "_blank",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
"Source on GitLab",
|
||||
],
|
||||
"type": "a",
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <mockConstructor
|
||||
to="/privacy"
|
||||
>
|
||||
Privacy Policy
|
||||
</mockConstructor>,
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": "Privacy Policy",
|
||||
"to": "/privacy",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Privacy Policy",
|
||||
"type": [MockFunction],
|
||||
},
|
||||
"type": "li",
|
||||
},
|
||||
],
|
||||
"type": "ul",
|
||||
},
|
||||
],
|
||||
"type": "header",
|
||||
},
|
||||
],
|
||||
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[`Header rendering with query 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Header />,
|
||||
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": "function",
|
||||
"props": Object {
|
||||
"query": "
|
||||
query HeaderQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
banner
|
||||
}
|
||||
}
|
||||
}
|
||||
",
|
||||
"render": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [MockFunction],
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"query": "
|
||||
query HeaderQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
banner
|
||||
}
|
||||
}
|
||||
}
|
||||
",
|
||||
"render": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [MockFunction],
|
||||
},
|
||||
],
|
||||
Symbol(enzyme.__options__): Object {
|
||||
"adapter": ReactSixteenAdapter {
|
||||
"options": Object {
|
||||
"enableComponentDidUpdateOnSetState": true,
|
||||
"lifecycles": Object {
|
||||
"componentDidUpdate": Object {
|
||||
"onSetState": true,
|
||||
},
|
||||
"getDerivedStateFromProps": true,
|
||||
"getSnapshotBeforeUpdate": true,
|
||||
"setState": Object {
|
||||
"skipsComponentDidUpdateOnNullish": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link, StaticQuery, graphql } from 'gatsby';
|
||||
|
||||
import GitlabIcon from 'react-feather/dist/icons/gitlab';
|
||||
@@ -15,7 +16,7 @@ const query = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = () => <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
|
||||
export const HeaderImpl = ({ site: { siteMetadata } }) => (
|
||||
<header className={ style.header } data-banner={ siteMetadata.banner || null }>
|
||||
<h1>
|
||||
<Link to="/">Regexper</Link>
|
||||
@@ -33,6 +34,21 @@ const Header = () => <StaticQuery query={ query } render={ ({ site: { siteMetada
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
);
|
||||
|
||||
HeaderImpl.propTypes = {
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
banner: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.string
|
||||
]).isRequired
|
||||
}).isRequired
|
||||
}).isRequired
|
||||
};
|
||||
|
||||
const Header = () => <StaticQuery query={ query } render={ data => (
|
||||
<HeaderImpl { ...data } />
|
||||
) } />;
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Header, { HeaderImpl } from 'components/Header';
|
||||
|
||||
describe('Header', () => {
|
||||
test('rendering with query', () => {
|
||||
const component = shallow(
|
||||
<Header />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering implementation', () => {
|
||||
const component = shallow(
|
||||
<HeaderImpl site={{ siteMetadata: { banner: 'testing' } }} />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering implementation with no banner', () => {
|
||||
const component = shallow(
|
||||
<HeaderImpl site={{ siteMetadata: { banner: false } }} />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,395 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Layout rendering 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Layout>
|
||||
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
|
||||
</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.__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,
|
||||
"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,
|
||||
"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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Layout from 'components/Layout';
|
||||
|
||||
describe('Layout', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<Layout>
|
||||
Example content
|
||||
</Layout>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with a title', () => {
|
||||
const component = shallow(
|
||||
<Layout title="Testing">
|
||||
Example content
|
||||
</Layout>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,669 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Message rendering 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Message
|
||||
heading="Testing"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</Message>,
|
||||
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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
undefined,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
undefined,
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
undefined,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
undefined,
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
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[`Message rendering with icon 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Message
|
||||
heading="Testing"
|
||||
icon={[Function]}
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</Message>,
|
||||
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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<Icon />
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Icon />,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<Icon />
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<Icon />,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
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[`Message rendering with type 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <Message
|
||||
heading="Testing"
|
||||
type="error"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</Message>,
|
||||
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": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<AlertOctagon
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message error",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<AlertOctagon
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<div
|
||||
className="header"
|
||||
>
|
||||
<AlertOctagon
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
<h2>
|
||||
Testing
|
||||
</h2>
|
||||
</div>,
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<p>
|
||||
Message content
|
||||
</p>
|
||||
</div>,
|
||||
],
|
||||
"className": "message error",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
<AlertOctagon
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>,
|
||||
<h2>
|
||||
Testing
|
||||
</h2>,
|
||||
],
|
||||
"className": "header",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"color": "currentColor",
|
||||
"size": "24",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Testing",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Testing",
|
||||
"type": "h2",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
Message content
|
||||
</p>,
|
||||
"className": "content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "Message content",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "Message content",
|
||||
"type": "p",
|
||||
},
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
"type": "div",
|
||||
},
|
||||
],
|
||||
Symbol(enzyme.__options__): Object {
|
||||
"adapter": ReactSixteenAdapter {
|
||||
"options": Object {
|
||||
"enableComponentDidUpdateOnSetState": true,
|
||||
"lifecycles": Object {
|
||||
"componentDidUpdate": Object {
|
||||
"onSetState": true,
|
||||
},
|
||||
"getDerivedStateFromProps": true,
|
||||
"getSnapshotBeforeUpdate": true,
|
||||
"setState": Object {
|
||||
"skipsComponentDidUpdateOnNullish": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Message from 'components/Message';
|
||||
|
||||
describe('Message', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<Message heading="Testing">
|
||||
<p>Message content</p>
|
||||
</Message>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with icon', () => {
|
||||
const Icon = () => 'Sample icon SVG';
|
||||
const component = shallow(
|
||||
<Message heading="Testing" icon={ Icon }>
|
||||
<p>Message content</p>
|
||||
</Message>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with type', () => {
|
||||
const component = shallow(
|
||||
<Message heading="Testing" type="error">
|
||||
<p>Message content</p>
|
||||
</Message>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SentryBoundary error handling 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <SentryBoundary>
|
||||
<Child />
|
||||
</SentryBoundary>,
|
||||
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": "function",
|
||||
"props": Object {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"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[`SentryBoundary error handling 2`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <SentryBoundary>
|
||||
<Child />
|
||||
</SentryBoundary>,
|
||||
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 {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"type": [Function],
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "class",
|
||||
"props": Object {},
|
||||
"ref": null,
|
||||
"rendered": null,
|
||||
"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[`SentryBoundary rendering 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <SentryBoundary>
|
||||
Example content
|
||||
</SentryBoundary>,
|
||||
Symbol(enzyme.__renderer__): Object {
|
||||
"batchedUpdates": [Function],
|
||||
"getNode": [Function],
|
||||
"render": [Function],
|
||||
"simulateError": [Function],
|
||||
"simulateEvent": [Function],
|
||||
"unmount": [Function],
|
||||
},
|
||||
Symbol(enzyme.__node__): "Example content",
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
"Example content",
|
||||
],
|
||||
Symbol(enzyme.__options__): Object {
|
||||
"adapter": ReactSixteenAdapter {
|
||||
"options": Object {
|
||||
"enableComponentDidUpdateOnSetState": true,
|
||||
"lifecycles": Object {
|
||||
"componentDidUpdate": Object {
|
||||
"onSetState": true,
|
||||
},
|
||||
"getDerivedStateFromProps": true,
|
||||
"getSnapshotBeforeUpdate": true,
|
||||
"setState": Object {
|
||||
"skipsComponentDidUpdateOnNullish": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,35 @@
|
||||
jest.mock('@sentry/browser');
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
|
||||
import SentryBoundary from 'components/SentryBoundary';
|
||||
|
||||
describe('SentryBoundary', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<SentryBoundary>
|
||||
Example content
|
||||
</SentryBoundary>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('error handling', () => {
|
||||
const Child = () => 'Example content';
|
||||
const component = shallow(
|
||||
<SentryBoundary>
|
||||
<Child />
|
||||
</SentryBoundary>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
|
||||
const error = new Error('Example error');
|
||||
component.find('Child').simulateError(error);
|
||||
component.setState({ hasError: true }); // NOTE: Enzyme doesn't call getDerivedStateFromError yet
|
||||
|
||||
expect(Sentry.captureException).toHaveBeenCalledWith(error, expect.anything());
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,149 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SentryError rendering 1`] = `
|
||||
ShallowWrapper {
|
||||
Symbol(enzyme.__root__): [Circular],
|
||||
Symbol(enzyme.__unrendered__): <SentryError />,
|
||||
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": "function",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
This error has been logged. You may also
|
||||
<a
|
||||
href="#error-report"
|
||||
onClick={[Function]}
|
||||
>
|
||||
fill out a report
|
||||
</a>
|
||||
.
|
||||
</p>,
|
||||
"heading": "An error has occurred",
|
||||
"type": "error",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"This error has been logged. You may also ",
|
||||
<a
|
||||
href="#error-report"
|
||||
onClick={[Function]}
|
||||
>
|
||||
fill out a report
|
||||
</a>,
|
||||
".",
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"This error has been logged. You may also ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "fill out a report",
|
||||
"href": "#error-report",
|
||||
"onClick": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "fill out a report",
|
||||
"type": "a",
|
||||
},
|
||||
".",
|
||||
],
|
||||
"type": "p",
|
||||
},
|
||||
"type": [Function],
|
||||
},
|
||||
Symbol(enzyme.__nodes__): Array [
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "function",
|
||||
"props": Object {
|
||||
"children": <p>
|
||||
This error has been logged. You may also
|
||||
<a
|
||||
href="#error-report"
|
||||
onClick={[Function]}
|
||||
>
|
||||
fill out a report
|
||||
</a>
|
||||
.
|
||||
</p>,
|
||||
"heading": "An error has occurred",
|
||||
"type": "error",
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": Array [
|
||||
"This error has been logged. You may also ",
|
||||
<a
|
||||
href="#error-report"
|
||||
onClick={[Function]}
|
||||
>
|
||||
fill out a report
|
||||
</a>,
|
||||
".",
|
||||
],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": Array [
|
||||
"This error has been logged. You may also ",
|
||||
Object {
|
||||
"instance": null,
|
||||
"key": undefined,
|
||||
"nodeType": "host",
|
||||
"props": Object {
|
||||
"children": "fill out a report",
|
||||
"href": "#error-report",
|
||||
"onClick": [Function],
|
||||
},
|
||||
"ref": null,
|
||||
"rendered": "fill out a report",
|
||||
"type": "a",
|
||||
},
|
||||
".",
|
||||
],
|
||||
"type": "p",
|
||||
},
|
||||
"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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,42 @@
|
||||
jest.mock('@sentry/browser');
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
|
||||
import SentryError from 'components/SentryError';
|
||||
|
||||
describe('SentryError', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<SentryError />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('error reporting', () => {
|
||||
test('clicking to fill out a report when an event has been logged', () => {
|
||||
Sentry.lastEventId.mockReturnValue(1);
|
||||
const component = shallow(
|
||||
<SentryError />
|
||||
);
|
||||
const eventObj = { preventDefault: jest.fn() };
|
||||
component.find('a').simulate('click', eventObj);
|
||||
|
||||
expect(eventObj.preventDefault).toHaveBeenCalled();
|
||||
expect(Sentry.showReportDialog).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('clicking to fill out a report when an event has not been logged', () => {
|
||||
Sentry.lastEventId.mockReturnValue(false);
|
||||
const component = shallow(
|
||||
<SentryError />
|
||||
);
|
||||
const eventObj = { preventDefault: jest.fn() };
|
||||
component.find('a').simulate('click', eventObj);
|
||||
|
||||
expect(eventObj.preventDefault).toHaveBeenCalled();
|
||||
expect(Sentry.showReportDialog).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user