Commit bf35f26d authored by Jeff Avallone's avatar Jeff Avallone

Reworking internal component naming for clarity

parent 618b21bb
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Footer rendering implementation 1`] = ` exports[`Footer rendering 1`] = `
ShallowWrapper { ShallowWrapper {
Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <FooterImpl Symbol(enzyme.__unrendered__): <Footer
site={ site={
Object { Object {
"siteMetadata": Object { "siteMetadata": Object {
...@@ -488,77 +488,3 @@ ShallowWrapper { ...@@ -488,77 +488,3 @@ ShallowWrapper {
}, },
} }
`; `;
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,
},
},
},
},
},
}
`;
...@@ -15,7 +15,7 @@ const query = graphql` ...@@ -15,7 +15,7 @@ const query = graphql`
} }
`; `;
export const FooterImpl = ({ t, site: { siteMetadata } }) => ( export const Footer = ({ t, site: { siteMetadata } }) => (
<footer className={ style.footer }> <footer className={ style.footer }>
<ul className={ style.list }> <ul className={ style.list }>
<li> <li>
...@@ -38,7 +38,7 @@ export const FooterImpl = ({ t, site: { siteMetadata } }) => ( ...@@ -38,7 +38,7 @@ export const FooterImpl = ({ t, site: { siteMetadata } }) => (
</footer> </footer>
); );
FooterImpl.propTypes = { Footer.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
site: PropTypes.shape({ site: PropTypes.shape({
siteMetadata: PropTypes.shape({ siteMetadata: PropTypes.shape({
...@@ -47,9 +47,8 @@ FooterImpl.propTypes = { ...@@ -47,9 +47,8 @@ FooterImpl.propTypes = {
}).isRequired }).isRequired
}; };
const TranslatedFooter = withNamespaces()(FooterImpl); export default withNamespaces()(props => (
const Footer = () => <StaticQuery query={ query } render={ data => ( <StaticQuery query={ query } render={ data => (
<TranslatedFooter { ...data } /> <Footer { ...props } { ...data } />
) } />; ) } />
));
export default Footer;
...@@ -2,19 +2,12 @@ import React from 'react'; ...@@ -2,19 +2,12 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { mockT } from 'i18n'; import { mockT } from 'i18n';
import Footer, { FooterImpl } from 'components/Footer'; import { Footer } from 'components/Footer';
describe('Footer', () => { describe('Footer', () => {
test('rendering with query', () => { test('rendering', () => {
const component = shallow( const component = shallow(
<Footer /> <Footer site={{ siteMetadata: { buildId: 'abc-123' } }} t={ mockT } />
);
expect(component).toMatchSnapshot();
});
test('rendering implementation', () => {
const component = shallow(
<FooterImpl site={{ siteMetadata: { buildId: 'abc-123' } }} t={ mockT } />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header rendering implementation 1`] = ` exports[`Header rendering 1`] = `
ShallowWrapper { ShallowWrapper {
Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <HeaderImpl Symbol(enzyme.__unrendered__): <Header
site={ site={
Object { Object {
"siteMetadata": Object { "siteMetadata": Object {
...@@ -61,7 +61,7 @@ ShallowWrapper { ...@@ -61,7 +61,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li> </li>
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li> </li>
</ul>, </ul>,
], ],
...@@ -127,7 +127,7 @@ ShallowWrapper { ...@@ -127,7 +127,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li>, </li>,
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li>, </li>,
], ],
"className": "list", "className": "list",
...@@ -247,7 +247,7 @@ ShallowWrapper { ...@@ -247,7 +247,7 @@ ShallowWrapper {
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <LoadNamespace(LocaleSwitcherImpl) />, "children": <LoadNamespace(LocaleSwitcher) />,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Object {
...@@ -309,7 +309,7 @@ ShallowWrapper { ...@@ -309,7 +309,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li> </li>
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li> </li>
</ul>, </ul>,
], ],
...@@ -375,7 +375,7 @@ ShallowWrapper { ...@@ -375,7 +375,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li>, </li>,
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li>, </li>,
], ],
"className": "list", "className": "list",
...@@ -495,7 +495,7 @@ ShallowWrapper { ...@@ -495,7 +495,7 @@ ShallowWrapper {
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <LoadNamespace(LocaleSwitcherImpl) />, "children": <LoadNamespace(LocaleSwitcher) />,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Object {
...@@ -536,10 +536,10 @@ ShallowWrapper { ...@@ -536,10 +536,10 @@ ShallowWrapper {
} }
`; `;
exports[`Header rendering implementation with no banner 1`] = ` exports[`Header rendering with no banner 1`] = `
ShallowWrapper { ShallowWrapper {
Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <HeaderImpl Symbol(enzyme.__unrendered__): <Header
site={ site={
Object { Object {
"siteMetadata": Object { "siteMetadata": Object {
...@@ -597,7 +597,7 @@ ShallowWrapper { ...@@ -597,7 +597,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li> </li>
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li> </li>
</ul>, </ul>,
], ],
...@@ -663,7 +663,7 @@ ShallowWrapper { ...@@ -663,7 +663,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li>, </li>,
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li>, </li>,
], ],
"className": "list", "className": "list",
...@@ -783,7 +783,7 @@ ShallowWrapper { ...@@ -783,7 +783,7 @@ ShallowWrapper {
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <LoadNamespace(LocaleSwitcherImpl) />, "children": <LoadNamespace(LocaleSwitcher) />,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Object {
...@@ -845,7 +845,7 @@ ShallowWrapper { ...@@ -845,7 +845,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li> </li>
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li> </li>
</ul>, </ul>,
], ],
...@@ -911,7 +911,7 @@ ShallowWrapper { ...@@ -911,7 +911,7 @@ ShallowWrapper {
</mockConstructor> </mockConstructor>
</li>, </li>,
<li> <li>
<LoadNamespace(LocaleSwitcherImpl) /> <LoadNamespace(LocaleSwitcher) />
</li>, </li>,
], ],
"className": "list", "className": "list",
...@@ -1031,7 +1031,7 @@ ShallowWrapper { ...@@ -1031,7 +1031,7 @@ ShallowWrapper {
"key": undefined, "key": undefined,
"nodeType": "host", "nodeType": "host",
"props": Object { "props": Object {
"children": <LoadNamespace(LocaleSwitcherImpl) />, "children": <LoadNamespace(LocaleSwitcher) />,
}, },
"ref": null, "ref": null,
"rendered": Object { "rendered": Object {
...@@ -1071,77 +1071,3 @@ ShallowWrapper { ...@@ -1071,77 +1071,3 @@ ShallowWrapper {
}, },
} }
`; `;
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,
},
},
},
},
},
}
`;
...@@ -19,7 +19,7 @@ const query = graphql` ...@@ -19,7 +19,7 @@ const query = graphql`
} }
`; `;
export const HeaderImpl = ({ site: { siteMetadata } }) => ( export const Header = ({ site: { siteMetadata } }) => (
<header <header
className={ style.header } className={ style.header }
data-banner={ siteMetadata.banner || null }> data-banner={ siteMetadata.banner || null }>
...@@ -48,7 +48,7 @@ export const HeaderImpl = ({ site: { siteMetadata } }) => ( ...@@ -48,7 +48,7 @@ export const HeaderImpl = ({ site: { siteMetadata } }) => (
</header> </header>
); );
HeaderImpl.propTypes = { Header.propTypes = {
site: PropTypes.shape({ site: PropTypes.shape({
siteMetadata: PropTypes.shape({ siteMetadata: PropTypes.shape({
banner: PropTypes.oneOfType([ banner: PropTypes.oneOfType([
...@@ -59,9 +59,8 @@ HeaderImpl.propTypes = { ...@@ -59,9 +59,8 @@ HeaderImpl.propTypes = {
}).isRequired }).isRequired
}; };
const TranslatedHeader = withNamespaces()(HeaderImpl); export default withNamespaces()(props => (
const Header = () => <StaticQuery query={ query } render={ data => ( <StaticQuery query={ query } render={ data => (
<TranslatedHeader { ...data } /> <Header { ...props } { ...data } />
) } />; ) } />
));
export default Header;
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import Header, { HeaderImpl } from 'components/Header'; import { Header } from 'components/Header';
describe('Header', () => { describe('Header', () => {
test('rendering with query', () => { test('rendering', () => {
const component = shallow( const component = shallow(
<Header /> <Header site={{ siteMetadata: { banner: 'testing' } }} />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });
test('rendering implementation', () => { test('rendering with no banner', () => {
const component = shallow( const component = shallow(
<HeaderImpl site={{ siteMetadata: { banner: 'testing' } }} /> <Header site={{ siteMetadata: { banner: false } }} />
);
expect(component).toMatchSnapshot();
});
test('rendering implementation with no banner', () => {
const component = shallow(
<HeaderImpl site={{ siteMetadata: { banner: false } }} />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });
......
...@@ -20,11 +20,11 @@ ShallowWrapper { ...@@ -20,11 +20,11 @@ ShallowWrapper {
"nodeType": "class", "nodeType": "class",
"props": Object { "props": Object {
"children": Array [ "children": Array [
<Header />, <LoadNamespace(Component) />,
<SentryBoundary> <SentryBoundary>
Example content Example content
</SentryBoundary>, </SentryBoundary>,
<Footer />, <LoadNamespace(Component) />,
], ],
}, },
"ref": null, "ref": null,
...@@ -32,7 +32,7 @@ ShallowWrapper { ...@@ -32,7 +32,7 @@ ShallowWrapper {
Object { Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "class",
"props": Object {}, "props": Object {},
"ref": null, "ref": null,
"rendered": null, "rendered": null,
...@@ -52,7 +52,7 @@ ShallowWrapper { ...@@ -52,7 +52,7 @@ ShallowWrapper {
Object { Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "class",
"props": Object {}, "props": Object {},
"ref": null, "ref": null,
"rendered": null, "rendered": null,
...@@ -68,11 +68,11 @@ ShallowWrapper { ...@@ -68,11 +68,11 @@ ShallowWrapper {
"nodeType": "class", "nodeType": "class",
"props": Object { "props": Object {
"children": Array [ "children": Array [
<Header />, <LoadNamespace(Component) />,
<SentryBoundary> <SentryBoundary>
Example content Example content
</SentryBoundary>, </SentryBoundary>,
<Footer />, <LoadNamespace(Component) />,
], ],
}, },
"ref": null, "ref": null,
...@@ -80,7 +80,7 @@ ShallowWrapper { ...@@ -80,7 +80,7 @@ ShallowWrapper {
Object { Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "class",
"props": Object {}, "props": Object {},
"ref": null, "ref": null,
"rendered": null, "rendered": null,
...@@ -100,7 +100,7 @@ ShallowWrapper { ...@@ -100,7 +100,7 @@ ShallowWrapper {
Object { Object {
"instance": null, "instance": null,
"key": undefined, "key": undefined,
"nodeType": "function", "nodeType": "class",
"props": Object {}, "props": Object {},
"ref": null, "ref": null,
"rendered": null, "rendered": null,
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
exports[`LocaleSwitcher rendering 1`] = ` exports[`LocaleSwitcher rendering 1`] = `
ShallowWrapper { ShallowWrapper {
Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <LocaleSwitcherImpl />, Symbol(enzyme.__unrendered__): <LocaleSwitcher />,
Symbol(enzyme.__renderer__): Object { Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function], "batchedUpdates": [Function],
"getNode": [Function], "getNode": [Function],
......
...@@ -21,7 +21,7 @@ const localeToAvailable = (locale, available, defaultLocale) => { ...@@ -21,7 +21,7 @@ const localeToAvailable = (locale, available, defaultLocale) => {
return defaultLocale; return defaultLocale;
}; };
export class LocaleSwitcherImpl extends React.PureComponent { export class LocaleSwitcher extends React.PureComponent {
state = { state = {
current: localeToAvailable( current: localeToAvailable(
i18n.language || '', i18n.language || '',
...@@ -64,4 +64,4 @@ export class LocaleSwitcherImpl extends React.PureComponent { ...@@ -64,4 +64,4 @@ export class LocaleSwitcherImpl extends React.PureComponent {
} }
} }
export default withNamespaces()(LocaleSwitcherImpl); export default withNamespaces()(LocaleSwitcher);
...@@ -2,12 +2,12 @@ import React from 'react'; ...@@ -2,12 +2,12 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import i18n from 'i18n'; import i18n from 'i18n';
import { LocaleSwitcherImpl } from 'components/LocaleSwitcher'; import { LocaleSwitcher } from 'components/LocaleSwitcher';
describe('LocaleSwitcher', () => { describe('LocaleSwitcher', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const component = shallow(
<LocaleSwitcherImpl /> <LocaleSwitcher />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });
...@@ -16,7 +16,7 @@ describe('LocaleSwitcher', () => { ...@@ -16,7 +16,7 @@ describe('LocaleSwitcher', () => {
jest.spyOn(i18n, 'changeLanguage'); jest.spyOn(i18n, 'changeLanguage');
const component = shallow( const component = shallow(
<LocaleSwitcherImpl /> <LocaleSwitcher />
); );
const selectInput = component.find('select'); const selectInput = component.find('select');
selectInput.value = 'other'; selectInput.value = 'other';
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
exports[`SentryError rendering 1`] = ` exports[`SentryError rendering 1`] = `
ShallowWrapper { ShallowWrapper {
Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <SentryErrorImpl Symbol(enzyme.__unrendered__): <SentryError
t={[Function]} t={[Function]}
/>, />,
Symbol(enzyme.__renderer__): Object { Symbol(enzyme.__renderer__): Object {
......
...@@ -5,7 +5,7 @@ import { withNamespaces, Trans } from 'react-i18next'; ...@@ -5,7 +5,7 @@ import { withNamespaces, Trans } from 'react-i18next';
import Message from 'components/Message'; import Message from 'components/Message';
export class SentryErrorImpl extends React.Component { export class SentryError extends React.Component {
reportError = event => { reportError = event => {
event.preventDefault(); event.preventDefault();
...@@ -26,8 +26,8 @@ export class SentryErrorImpl extends React.Component { ...@@ -26,8 +26,8 @@ export class SentryErrorImpl extends React.Component {
} }
} }
SentryErrorImpl.propTypes = { SentryError.propTypes = {
t: PropTypes.func.isRequired t: PropTypes.func.isRequired
}; };
export default withNamespaces()(SentryErrorImpl); export default withNamespaces()(SentryError);
...@@ -5,12 +5,12 @@ import { shallow } from 'enzyme'; ...@@ -5,12 +5,12 @@ import { shallow } from 'enzyme';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { mockT } from 'i18n';