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

Merge branch 'gatsby-hooks' into 'gatsby'

Browse Source 
Gatsby hooks

See merge request javallone/regexper-static!43
This commit is contained in:
Jeff Avallone 2019-07-12 07:17:42 +00:00
commit 5ffeb90616
37 changed files with 406 additions and 815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/__mocks__/react-i18next.js vendored
View File

@ -1,6 +1,8 @@
const reactI18next = jest.requireActual('react-i18next');
const i18n = require('i18n');
module.exports = {
...reactI18next,
Trans: require('__mocks__/component-mock').buildMock(reactI18next.Trans)
Trans: require('__mocks__/component-mock').buildMock(reactI18next.Trans),
useTranslation: () => ({ i18n, t: i18n.mockT })
};

26
src/components/App/__snapshots__/test.js.snap
View File

@ -3,7 +3,7 @@
exports[`App removing rendered expression 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
@ -20,7 +20,7 @@ exports[`App removing rendered expression 1`] = `
}"
>
<span
data-component="withI18nextTranslation(FormActions)"
data-component="FormActions"
data-props="{}"
/>
</span>
@ -36,7 +36,7 @@ exports[`App removing rendered expression 1`] = `
exports[`App removing rendered expression 2`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
@ -58,7 +58,7 @@ exports[`App removing rendered expression 2`] = `
exports[`App rendering 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
@ -80,7 +80,7 @@ exports[`App rendering 1`] = `
exports[`App rendering an expression 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"\\",
@ -102,7 +102,7 @@ exports[`App rendering an expression 1`] = `
exports[`App rendering an expression 2`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
@ -119,7 +119,7 @@ exports[`App rendering an expression 2`] = `
}"
/>
<span
data-component="withI18nextTranslation(Loader)"
data-component="Loader"
data-props="{}"
/>
</DocumentFragment>
@ -128,7 +128,7 @@ exports[`App rendering an expression 2`] = `
exports[`App rendering an expression 3`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"js\\",
\\"expr\\": \\"test expression\\",
@ -145,7 +145,7 @@ exports[`App rendering an expression 3`] = `
}"
>
<span
data-component="withI18nextTranslation(FormActions)"
data-component="FormActions"
data-props="{}"
/>
</span>
@ -161,7 +161,7 @@ exports[`App rendering an expression 3`] = `
exports[`App rendering with an invalid syntax 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"\\",
@ -183,7 +183,7 @@ exports[`App rendering with an invalid syntax 1`] = `
exports[`App rendering with an invalid syntax 2`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"test expression\\",
@ -200,7 +200,7 @@ exports[`App rendering with an invalid syntax 2`] = `
}"
/>
<span
data-component="withI18nextTranslation(Loader)"
data-component="Loader"
data-props="{}"
/>
</DocumentFragment>
@ -209,7 +209,7 @@ exports[`App rendering with an invalid syntax 2`] = `
exports[`App rendering with an invalid syntax 3`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Form)"
data-component="Form"
data-props="{
\\"syntax\\": \\"invalid\\",
\\"expr\\": \\"test expression\\",

15
src/components/Footer/index.js
View File

@ -1,13 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import ccLogo from './cc-by.svg';
import style from './style.module.css';
export const Footer = ({ t, buildId }) => (
<footer className={ style.footer }>
export const Footer = ({ buildId }) => {
const { t } = useTranslation();
return <footer className={ style.footer }>
<ul className={ style.list }>
<li>
<Trans>Created by <a
@ -26,12 +28,11 @@ export const Footer = ({ t, buildId }) => (
<div className={ style.buildId }>
{ buildId }
</div>
</footer>
);
</footer>;
};
Footer.propTypes = {
t: PropTypes.func.isRequired,
buildId: PropTypes.string.isRequired
};
export default withTranslation()(Footer);
export default Footer;

5
src/components/Footer/test.js
View File

@ -1,13 +1,12 @@
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { Footer } from 'components/Footer';
import Footer from 'components/Footer';
describe('Footer', () => {
test('rendering', () => {
const { asFragment } = render(
<Footer buildId="abc-123" t={ mockT } />
<Footer buildId="abc-123" />
);
expect(asFragment()).toMatchSnapshot();
});

131
src/components/Form/index.js
View File

@ -1,86 +1,73 @@
import React from 'react';
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
import style from './style.module.css';
class Form extends React.PureComponent {
static propTypes = {
expr: PropTypes.string,
syntax: PropTypes.string,
syntaxList: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
label: PropTypes.string
})),
onSubmit: PropTypes.func.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
t: PropTypes.func.isRequired
}
const Form = ({ syntaxList, children, onSubmit, ...props }) => {
const { t } = useTranslation();
const [ expr, exprUpdate ] = useState(props.expr);
const [ syntax, syntaxUpdate ] = useState(props.syntax);
state = {
expr: this.props.expr,
syntax: this.props.syntax
}
handleSubmit = event => {
const handleExprChange = useCallback(event => {
exprUpdate(event.target.value);
}, [exprUpdate]);
const handleSyntaxChange = useCallback(event => {
syntaxUpdate(event.target.value);
}, [syntaxUpdate]);
const handleSubmit = useCallback(event => {
event.preventDefault();
const { expr, syntax } = this.state;
this.props.onSubmit({ expr, syntax });
}
handleKeyPress = event => {
onSubmit({ expr, syntax });
}, [expr, syntax, onSubmit]);
const handleKeyPress = useCallback(event => {
if (event.charCode === 13 && event.shiftKey) {
this.handleSubmit(event);
handleSubmit(event);
}
}
}, [handleSubmit]);
handleChange = event => this.setState({
[event.target.name]: event.target.value
})
return <div className={ style.form } data-requires-js>
<form data-testid="form" onSubmit={ handleSubmit }>
<textarea
data-testid="expr-input"
name="expr"
value={ expr }
onKeyPress={ handleKeyPress }
onChange={ handleExprChange }
autoFocus
placeholder={ t('Enter regular expression to display') }></textarea>
<button type="submit"><Trans>Display</Trans></button>
<div className={ style.select }>
<select
data-testid="syntax-select"
name="syntax"
value={ syntax }
onChange={ handleSyntaxChange } >
{ syntaxList.map(({ id, label }) => (
<option value={ id } key={ id }>{ t(label) }</option>
)) }
</select>
<ExpandIcon />
</div>
{ children }
</form>
</div>;
};
render() {
const {
syntaxList,
children,
t
} = this.props;
const { expr, syntax } = this.state;
Form.propTypes = {
expr: PropTypes.string,
syntax: PropTypes.string,
syntaxList: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
label: PropTypes.string
})),
onSubmit: PropTypes.func.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
};
return <div className={ style.form } data-requires-js>
<form data-testid="form" onSubmit={ this.handleSubmit }>
<textarea
data-testid="expr-input"
name="expr"
value={ expr }
onKeyPress={ this.handleKeyPress }
onChange={ this.handleChange }
autoFocus
placeholder={ t('Enter regular expression to display') }></textarea>
<button type="submit"><Trans>Display</Trans></button>
<div className={ style.select }>
<select
data-testid="syntax-select"
name="syntax"
value={ syntax }
onChange={ this.handleChange } >
{ syntaxList.map(({ id, label }) => (
<option value={ id } key={ id }>{ t(label) }</option>
)) }
</select>
<ExpandIcon />
</div>
{ children }
</form>
</div>;
}
}
export { Form };
export default withTranslation()(Form);
export default Form;

5
src/components/Form/test.js
View File

@ -5,14 +5,13 @@ jest.mock('react-feather/dist/icons/chevrons-down', () =>
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import { mockT } from 'i18n';
import { Form } from 'components/Form';
import Form from 'components/Form';
const syntaxList = [
{ id: 'testJS', label: 'Testing JS' },
{ id: 'other', label: 'Other' }
];
const commonProps = { syntaxList, t: mockT };
const commonProps = { syntaxList };
describe('Form', () => {
test('rendering', () => {

162
src/components/FormActions/__snapshots__/test.js.snap
View File

@ -8,168 +8,6 @@ exports[`FormActions rendering 1`] = `
</DocumentFragment>
`;
exports[`FormActions rendering download links 1`] = `
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering download links with data after mounting 1`] = `
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering download links with data after mounting 2`] = `
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering download links with data after mounting 3`] = `
<DocumentFragment>
<ul
class="actions"
>
<li>
<a
download="image.png"
href="http://example.com/image.png"
type="image/png"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example PNG Link)
</a>
</li>
<li>
<a
download="image.svg"
href="http://example.com/image.svg"
type="image/svg+xml"
>
<span
data-component="Download"
data-props="{}"
/>
TRANSLATE(Example SVG Link)
</a>
</li>
<li>
<a
href="http://example.com"
>
<span
data-component="Link"
data-props="{}"
/>
<span
data-component="Trans"
data-props="{}"
>
Permalink
</span>
</a>
</li>
</ul>
</DocumentFragment>
`;
exports[`FormActions rendering with a permalink 1`] = `
<DocumentFragment>
<ul

123
src/components/FormActions/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import DownloadIcon from 'react-feather/dist/icons/download';
import LinkIcon from 'react-feather/dist/icons/link';
@ -9,89 +9,52 @@ import style from './style.module.css';
import { createPngLink, createSvgLink } from './links';
class FormActions extends React.PureComponent {
static propTypes = {
permalinkUrl: PropTypes.string,
imageDetails: PropTypes.shape({
svg: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number
}),
t: PropTypes.func.isRequired
}
const downloadLink = (link, t) => {
const { url, filename, type, label } = link;
return <li>
<a href={ url } download={ filename } type={ type }>
<DownloadIcon />{ t(label) }
</a>
</li>;
};
state = {
svgLink: null,
pngLink: null
}
const FormActions = ({
permalinkUrl,
imageDetails
}) => {
const { t } = useTranslation();
const [svgLink, setSvgLink] = useState(null);
const [pngLink, setPngLink] = useState(null);
componentDidMount() {
const { imageDetails } = this.props;
const generateDownloadLinks = useCallback(async () => {
const { svg, width, height } = imageDetails;
setSvgLink(await createSvgLink({ svg }));
setPngLink(await createPngLink({ svg, width, height }));
}, [setSvgLink, setPngLink, imageDetails]);
useEffect(() => {
if (imageDetails && imageDetails.svg) {
this.generateDownloadLinks();
generateDownloadLinks();
}
}
}, [imageDetails]);
componentDidUpdate(prevProps) {
const { imageDetails } = this.props;
const { imageDetails: prevImageDetails } = prevProps;
return <ul className={ style.actions }>
{ pngLink && downloadLink(pngLink, t) }
{ svgLink && downloadLink(svgLink, t) }
{ permalinkUrl && <li>
<a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
</li> }
</ul>;
};
if (!imageDetails) {
this.setState({ svgLink: null, pngLink: null });
return;
}
FormActions.propTypes = {
permalinkUrl: PropTypes.string,
imageDetails: PropTypes.shape({
svg: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number
})
};
if (!prevImageDetails) {
this.generateDownloadLinks();
return;
}
if (imageDetails.svg !== prevImageDetails.svg
|| imageDetails.width !== prevImageDetails.width
|| imageDetails.height !== prevImageDetails.height) {
this.generateDownloadLinks();
return;
}
}
async generateDownloadLinks() {
const { imageDetails: { svg, width, height } } = this.props;
this.setState({
svgLink: await createSvgLink({ svg }),
pngLink: await createPngLink({ svg, width, height })
});
}
downloadLink({ url, filename, type, label }) {
const { t } = this.props;
return <li>
<a href={ url } download={ filename } type={ type }>
<DownloadIcon />{ t(label) }
</a>
</li>;
}
render() {
const {
permalinkUrl
} = this.props;
const {
svgLink,
pngLink
} = this.state;
return <ul className={ style.actions }>
{ pngLink && this.downloadLink(pngLink) }
{ svgLink && this.downloadLink(svgLink) }
{ permalinkUrl && <li>
<a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
</li> }
</ul>;
}
}
export { FormActions };
export default withTranslation()(FormActions);
export default FormActions;

60
src/components/FormActions/test.js
View File

@ -9,8 +9,7 @@ jest.mock('react-feather/dist/icons/link', () =>
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { FormActions } from 'components/FormActions';
import FormActions from 'components/FormActions';
import { createPngLink, createSvgLink } from './links';
createPngLink.mockResolvedValue({
@ -29,68 +28,15 @@ createSvgLink.mockResolvedValue({
describe('FormActions', () => {
test('rendering', () => {
const { asFragment } = render(
<FormActions t={ mockT } />
<FormActions/>
);
expect(asFragment()).toMatchSnapshot();
});
test('rendering with a permalink', () => {
const { asFragment } = render(
<FormActions permalinkUrl="http://example.com" t={ mockT } />
<FormActions permalinkUrl="http://example.com" />
);
expect(asFragment()).toMatchSnapshot();
});
test('rendering download links', async () => {
const imageDetails = {
svg: 'test image',
width: 10,
height: 20
};
const { asFragment } = render(
<FormActions imageDetails={ imageDetails } t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(asFragment()).toMatchSnapshot();
});
test('rendering download links with data after mounting', async () => {
const { asFragment, rerender } = render(
<FormActions t={ mockT } />
);
rerender(
<FormActions permalinkUrl="http://example.com" t={ mockT } />
);
expect(asFragment()).toMatchSnapshot();
rerender(
<FormActions
permalinkUrl="http://example.com"
imageDetails={ { svg: 'test-image' } }
t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(asFragment()).toMatchSnapshot();
rerender(
<FormActions
permalinkUrl="http://example.com"
imageDetails={ { svg: 'test-image', width: 10, height: 20 } }
t={ mockT } />
);
// Give a beat for mocked promises to resolve
await new Promise(resolve => setTimeout(resolve));
expect(asFragment()).toMatchSnapshot();
});
});

42
src/components/Header/__snapshots__/test.js.snap
View File

@ -9,7 +9,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -59,7 +59,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -67,7 +67,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -85,7 +85,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -135,7 +135,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -143,7 +143,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -161,7 +161,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -211,7 +211,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -219,7 +219,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -237,7 +237,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -287,7 +287,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -295,7 +295,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -313,7 +313,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -363,7 +363,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -371,7 +371,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -389,7 +389,7 @@ exports[`Header rendering 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -440,7 +440,7 @@ exports[`Header rendering 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -448,7 +448,7 @@ exports[`Header rendering 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>
@ -466,7 +466,7 @@ exports[`Header rendering with no banner 1`] = `
}"
>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</span>
@ -516,7 +516,7 @@ exports[`Header rendering with no banner 1`] = `
</li>
<li>
<span
data-component="withI18nextTranslation(InstallPrompt)"
data-component="InstallPrompt"
data-props="{}"
/>
</li>
@ -524,7 +524,7 @@ exports[`Header rendering with no banner 1`] = `
data-requires-js="true"
>
<span
data-component="withI18nextTranslation(LocaleSwitcher)"
data-component="LocaleSwitcher"
data-props="{}"
/>
</li>

122
src/components/Header/index.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';
import { Link } from 'gatsby';
import { withTranslation, Trans } from 'react-i18next';
import { Trans } from 'react-i18next';
import GitlabIcon from 'react-feather/dist/icons/gitlab';
@ -12,76 +12,66 @@ import PrivacyPolicy from 'components/PrivacyPolicy';
import style from './style.module.css';
class Header extends React.PureComponent {
state = {
showModal: false
}
static propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired
}
handleOpen = event => {
const Header = ({ banner }) => {
const [ showModal, updateShowModal] = useState(false);
const handleClose = useCallback(() => {
updateShowModal(false);
}, [updateShowModal]);
const handleOpen = useCallback(event => {
if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
return;
}
event.preventDefault();
this.setState({ showModal: true });
}
updateShowModal(true);
}, [updateShowModal]);
handleClose = () => {
this.setState({ showModal: false });
}
return <>
<Modal
isOpen={ showModal }
onRequestClose={ handleClose }>
<PrivacyPolicy onClose={ handleClose } />
</Modal>
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
render() {
const { banner } = this.props;
const { showModal } = this.state;
<ul className={ style.list }>
<li>
<a href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank">
<GitlabIcon />
<Trans>Source on GitLab</Trans>
</a>
</li>
<li>
<Link to="/privacy"
data-testid="privacy-link"
onClick={ handleOpen }
>
<Trans>Privacy Policy</Trans>
</Link>
</li>
<li>
<InstallPrompt />
</li>
<li data-requires-js>
<LocaleSwitcher />
</li>
</ul>
</header>
</>;
};
return <>
<Modal
isOpen={ showModal }
onRequestClose={ this.handleClose }>
<PrivacyPolicy onClose={ this.handleClose } />
</Modal>
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
Header.propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired
};
<ul className={ style.list }>
<li>
<a href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank">
<GitlabIcon />
<Trans>Source on GitLab</Trans>
</a>
</li>
<li>
<Link to="/privacy"
data-testid="privacy-link"
onClick={ this.handleOpen }
>
<Trans>Privacy Policy</Trans>
</Link>
</li>
<li>
<InstallPrompt />
</li>
<li data-requires-js>
<LocaleSwitcher />
</li>
</ul>
</header>
</>;
}
}
export { Header };
export default withTranslation()(Header);
export default Header;

2
src/components/Header/test.js
View File

@ -12,7 +12,7 @@ jest.mock('components/PrivacyPolicy', () =>
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import { Header } from 'components/Header';
import Header from 'components/Header';
describe('Header', () => {
test('rendering', () => {

36
src/components/InstallPrompt/__snapshots__/test.js.snap
View File

@ -1,41 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`InstallPrompt accepting install prompt 1`] = `
<DocumentFragment>
<a
data-testid="install"
href="#install"
>
<span
data-component="Trans"
data-props="{}"
>
Add to Home Screen
</span>
</a>
</DocumentFragment>
`;
exports[`InstallPrompt accepting install prompt 2`] = `<DocumentFragment />`;
exports[`InstallPrompt rejecting install prompt 1`] = `
<DocumentFragment>
<a
data-testid="install"
href="#install"
>
<span
data-component="Trans"
data-props="{}"
>
Add to Home Screen
</span>
</a>
</DocumentFragment>
`;
exports[`InstallPrompt rejecting install prompt 2`] = `<DocumentFragment />`;
exports[`InstallPrompt rendering 1`] = `<DocumentFragment />`;
exports[`InstallPrompt rendering after an install prompt has been requested 1`] = `<DocumentFragment />`;

67
src/components/InstallPrompt/index.js
View File

@ -1,30 +1,12 @@
import React from 'react';
import { withTranslation, Trans } from 'react-i18next';
import React, { useState, useEffect, useCallback } from 'react';
import { Trans } from 'react-i18next';
class InstallPrompt extends React.PureComponent {
state = {
installPrompt: null
}
const InstallPrompt = () => {
const [ installPrompt, updateInstallPrompt ] = useState(null);
componentDidMount() {
window.addEventListener('beforeinstallprompt', this.handleInstallPrompt);
}
componentWillUnmount() {
window.removeEventListener('beforeinstallprompt', this.handleInstallPrompt);
}
handleInstallPrompt = event => {
this.setState({
installPrompt: event
});
}
handleInstall = async event => {
const handleInstall = useCallback(async event => {
event.preventDefault();
const { installPrompt } = this.state;
try {
installPrompt.prompt();
await installPrompt.userChoice;
@ -33,24 +15,27 @@ class InstallPrompt extends React.PureComponent {
// User cancelled install
}
this.setState({ installPrompt: null });
updateInstallPrompt(null);
}, [installPrompt, updateInstallPrompt]);
useEffect(() => {
window.addEventListener('beforeinstallprompt', updateInstallPrompt);
return () => {
window.removeEventListener('beforeinstallprompt', updateInstallPrompt);
};
});
if (!installPrompt) {
return null;
}
render() {
const { installPrompt } = this.state;
return <a href="#install"
data-testid="install"
onClick={ handleInstall }
>
<Trans>Add to Home Screen</Trans>
</a>;
};
if (!installPrompt) {
return null;
}
return <a href="#install"
data-testid="install"
onClick={ this.handleInstall }
>
<Trans>Add to Home Screen</Trans>
</a>;
}
}
export { InstallPrompt };
export default withTranslation()(InstallPrompt);
export default InstallPrompt;

46
src/components/InstallPrompt/test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import { InstallPrompt } from 'components/InstallPrompt';
import InstallPrompt from 'components/InstallPrompt';
describe('InstallPrompt', () => {
test('rendering', () => {
@ -39,48 +39,4 @@ describe('InstallPrompt', () => {
'beforeinstallprompt',
expect.any(Function));
});
test('accepting install prompt', async () => {
const { asFragment, getByTestId } = render(
<InstallPrompt />
);
const promptEvent = new Event('beforeinstallprompt');
promptEvent.prompt = jest.fn();
promptEvent.userChoice = Promise.resolve();
const clickEvent = new MouseEvent('click', { bubbles: true });
jest.spyOn(clickEvent, 'preventDefault');
fireEvent(window, promptEvent);
expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run
await new Promise(resolve => setTimeout(resolve));
expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptEvent.prompt).toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
test('rejecting install prompt', async () => {
const { asFragment, getByTestId } = render(
<InstallPrompt />
);
const promptEvent = new Event('beforeinstallprompt');
promptEvent.prompt = jest.fn();
promptEvent.userChoice = Promise.reject();
const clickEvent = new MouseEvent('click', { bubbles: true });
jest.spyOn(clickEvent, 'preventDefault');
fireEvent(window, promptEvent);
expect(asFragment()).toMatchSnapshot();
fireEvent(getByTestId('install'), clickEvent);
// Allow async code to run
await new Promise(resolve => setTimeout(resolve));
expect(clickEvent.preventDefault).toHaveBeenCalled();
expect(promptEvent.prompt).toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});
});

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

@ -8,7 +8,7 @@ exports[`Layout rendering 1`] = `
>
<noscript />
<span
data-component="withI18nextTranslation(Header)"
data-component="Header"
data-props="{
\\"banner\\": \\"Test Banner\\"
}"
@ -20,7 +20,7 @@ exports[`Layout rendering 1`] = `
Example content
</span>
<span
data-component="withI18nextTranslation(Footer)"
data-component="Footer"
data-props="{
\\"buildId\\": \\"test-buildid\\"
}"

18
src/components/Loader/index.js
View File

@ -1,21 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';
import LoaderIcon from 'react-feather/dist/icons/loader';
import style from './style.module.css';
const Loader = ({ t }) => (
<div className={ style.loader }>
const Loader = () => {
const { t } = useTranslation();
return <div className={ style.loader }>
<LoaderIcon />
<div className={ style.message }>{ t('Loading...') }</div>
</div>
);
Loader.propTypes = {
t: PropTypes.func.isRequired
</div>;
};
export { Loader };
export default withTranslation()(Loader);
export default Loader;

5
src/components/Loader/test.js
View File

@ -1,15 +1,14 @@
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { Loader } from 'components/Loader';
import Loader from 'components/Loader';
describe('Loader', () => {
test('rendering', () => {
// Using full rendering here since styles for this depend on the structure
// of the SVG.
const { asFragment } = render(
<Loader t={ mockT } />
<Loader/>
);
expect(asFragment()).toMatchSnapshot();
});

76
src/components/LocaleSwitcher/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { withTranslation, Trans } from 'react-i18next';
import React, { useState, useEffect, useCallback } from 'react';
import { Trans } from 'react-i18next';
import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
@ -8,50 +8,40 @@ import i18n, { locales } from 'i18n';
import localeToAvailable from './locale-to-available';
import style from './style.module.css';
export class LocaleSwitcher extends React.PureComponent {
state = {
current: localeToAvailable(
i18n.language || '',
locales.map(l => l.code),
'en')
}
const LocaleSwitcher = () => {
const [ current, updateCurrent ] = useState(localeToAvailable(
i18n.language || '',
locales.map(l => l.code),
'en'));
componentDidMount() {
i18n.on('languageChanged', this.handleLanguageChange);
}
useEffect(() => {
i18n.on('languageChanged', updateCurrent);
componentWillUnmount() {
i18n.off('languageChanged', this.handleLanguageChange);
}
return () => {
i18n.off('languageChanged', updateCurrent);
};
});
handleSelectChange = ({ target }) => {
const handleSelectChange = useCallback(({ target }) => {
i18n.changeLanguage(target.value);
}
});
handleLanguageChange = lang => {
this.setState({ current: lang });
}
return <label>
<Trans>Language</Trans>
<div className={ style.switcher }>
<select data-testid="language-select"
value={ current }
onChange={ handleSelectChange }
>
{ locales.map(locale => (
<option value={ locale.code } key={ locale.code }>
{ locale.name }
</option>
)) }
</select>
<ExpandIcon />
</div>
</label>;
};
render() {
const { current } = this.state;
return <label>
<Trans>Language</Trans>
<div className={ style.switcher }>
<select data-testid="language-select"
value={ current }
onChange={ this.handleSelectChange }
>
{ locales.map(locale => (
<option value={ locale.code } key={ locale.code }>
{ locale.name }
</option>
)) }
</select>
<ExpandIcon />
</div>
</label>;
}
}
export default withTranslation()(LocaleSwitcher);
export default LocaleSwitcher;

10
src/components/LocaleSwitcher/test.js
View File

@ -3,10 +3,10 @@ jest.mock('react-feather/dist/icons/chevrons-down', () =>
'react-feather/dist/icons/chevrons-down'));
import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import { render, fireEvent, act } from 'react-testing-library';
import i18n from 'i18n';
import { LocaleSwitcher } from 'components/LocaleSwitcher';
import LocaleSwitcher from 'components/LocaleSwitcher';
// Ensure initial locale is always "en" during tests
jest.mock('./locale-to-available', () => jest.fn(() => 'en'));
@ -40,7 +40,11 @@ describe('LocaleSwitcher', () => {
);
expect(getByTestId('language-select').value).toEqual('en');
i18n.emit('languageChanged', 'other');
act(() => {
i18n.emit('languageChanged', 'other');
});
expect(getByTestId('language-select').value).toEqual('other');
});

37
src/components/Metadata/__snapshots__/test.js.snap
View File

@ -5,15 +5,15 @@ exports[`Metadata rendering 1`] = `
<span
data-component="HelmetWrapper"
data-props="{
\\"htmlAttributes\\": {
\\"lang\\": \\"test-lang\\"
}
\\"title\\": \\"Regexper\\",
\\"htmlAttributes\\": {},
\\"meta\\": [
{
\\"name\\": \\"description\\"
}
]
}"
>
<title>
Regexper
</title>
</span>
/>
</DocumentFragment>
`;
@ -22,18 +22,15 @@ exports[`Metadata rendering with a title and description 1`] = `
<span
data-component="HelmetWrapper"
data-props="{
\\"htmlAttributes\\": {
\\"lang\\": \\"test-lang\\"
}
\\"title\\": \\"Regexper - Testing\\",
\\"htmlAttributes\\": {},
\\"meta\\": [
{
\\"name\\": \\"description\\",
\\"content\\": \\"Test description\\"
}
]
}"
>
<title>
Regexper - Testing
</title>
<meta
content="Test description"
name="description"
/>
</span>
/>
</DocumentFragment>
`;

44
src/components/Metadata/index.js
View File

@ -1,29 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet';
class Metadata extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
description: PropTypes.string,
i18n: PropTypes.shape({
language: PropTypes.string.isRequired
}).isRequired
}
render() {
const { title, description, i18n } = this.props;
const htmlAttributes = {
const Metadata = ({ title, description }) => {
const { i18n } = useTranslation();
const helmetProps = {
title: title ? `Regexper - ${ title }` : 'Regexper',
htmlAttributes: {
lang: i18n.language
};
},
meta: [
{
name: 'description',
content: description
}
]
};
return <Helmet htmlAttributes={ htmlAttributes }>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
{ description && <meta name="description" content={ description } /> }
</Helmet>;
}
}
return <Helmet { ...helmetProps }></Helmet>;
};
export { Metadata };
export default withTranslation()(Metadata);
Metadata.propTypes = {
title: PropTypes.string,
description: PropTypes.string
};
export default Metadata;

11
src/components/Metadata/test.js
View File

@ -9,16 +9,12 @@ jest.mock('react-helmet', () => {
import React from 'react';
import { render } from 'react-testing-library';
import { Metadata } from 'components/Metadata';
const commonProps = {
i18n: { language: 'test-lang' }
};
import Metadata from 'components/Metadata';
describe('Metadata', () => {
test('rendering', () => {
const { asFragment } = render(
<Metadata { ...commonProps } />
<Metadata/>
);
expect(asFragment()).toMatchSnapshot();
});
@ -27,8 +23,7 @@ describe('Metadata', () => {
const { asFragment } = render(
<Metadata
title="Testing"
description="Test description"
{ ...commonProps } />
description="Test description" />
);
expect(asFragment()).toMatchSnapshot();
});

17
src/components/PrivacyPolicy/index.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import Message from 'components/Message';
export const PrivacyPolicy = ({ t, ...props }) => (
<Message type="info" heading={ t('Privacy Policy') } { ...props }>
export const PrivacyPolicy = props => {
const { t } = useTranslation();
return <Message type="info" heading={ t('Privacy Policy') } { ...props }>
<Trans i18nKey="Privacy policy copy">
<p>
Regexper and the tools used to create it are all open source. If you are
@ -44,11 +45,7 @@ export const PrivacyPolicy = ({ t, ...props }) => (
Regexper is not supported by ad revenue or sales of any kind.
</p>
</Trans>
</Message>
);
PrivacyPolicy.propTypes = {
t: PropTypes.func.isRequired
</Message>;
};
export default withTranslation()(PrivacyPolicy);
export default PrivacyPolicy;

5
src/components/PrivacyPolicy/test.js
View File

@ -4,13 +4,12 @@ jest.mock('components/Message', () =>
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { PrivacyPolicy } from 'components/PrivacyPolicy';
import PrivacyPolicy from 'components/PrivacyPolicy';
describe('PrivacyPolicy', () => {
test('rendering', () => {
const { asFragment } = render(
<PrivacyPolicy onClose={ jest.fn() } t={ mockT } />
<PrivacyPolicy onClose={ jest.fn() } />
);
expect(asFragment()).toMatchSnapshot();
});

60
src/components/Render/index.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import nodeTypes from 'rendering/types';
@ -40,48 +40,40 @@ const render = (data, key) => {
</React.Fragment>;
};
class Render extends React.PureComponent {
static propTypes = {
data: PropTypes.object.isRequired,
onRender: PropTypes.func.isRequired
}
const Render = ({ data, onRender }) => {
const svgContainer = useRef();
svgContainer = React.createRef()
componentDidMount() {
this.provideSVGData();
}
componentDidUpdate() {
this.provideSVGData();
}
provideSVGData() {
if (!this.svgContainer.current) {
const provideSVGData = useCallback(() => {
if (!svgContainer.current) {
return;
}
const svg = this.svgContainer.current.querySelector('svg');
this.props.onRender({
const svg = svgContainer.current.querySelector('svg');
onRender({
svg: svg.outerHTML,
width: Number(svg.getAttribute('width')),
height: Number(svg.getAttribute('height'))
});
}
}, [svgContainer, onRender]);
render() {
const { data } = this.props;
useEffect(() => {
provideSVGData();
}, [provideSVGData]);
return <div className={ style.render } ref={ this.svgContainer }>
{ render({
...data,
props: {
...data.props,
onReflow: this.provideSVGData
}
}) }
</div>;
}
}
return <div className={ style.render } ref={ svgContainer }>
{ render({
...data,
props: {
...data.props,
onReflow: provideSVGData
}
}) }
</div>;
};
Render.propTypes = {
data: PropTypes.object.isRequired,
onRender: PropTypes.func.isRequired
};
export default Render;

2
src/components/SentryBoundary/__snapshots__/test.js.snap
View File

@ -9,7 +9,7 @@ exports[`SentryBoundary error handling 1`] = `
exports[`SentryBoundary error handling 2`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(SentryError)"
data-component="SentryError"
data-props="{}"
/>
</DocumentFragment>

17
src/components/SentryError/index.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import * as Sentry from '@sentry/browser';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import Message from 'components/Message';
@ -13,19 +12,17 @@ const reportError = event => {
}
};
export const SentryError = ({ t }) => (
<Message type="error" heading={ t('An error has occurred') }>
export const SentryError = () => {
const { t } = useTranslation();
return <Message type="error" heading={ t('An error has occurred') }>
<p>
<Trans>This error has been logged. You may also <a
href="#error-report"
data-testid="error-report"
onClick={ reportError }>fill out a report</a>.</Trans>
</p>
</Message>
);
SentryError.propTypes = {
t: PropTypes.func.isRequired
</Message>;
};
export default withTranslation()(SentryError);
export default SentryError;

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

@ -7,13 +7,12 @@ import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import * as Sentry from '@sentry/browser';
import { mockT } from 'i18n';
import { SentryError } from 'components/SentryError';
import SentryError from 'components/SentryError';
describe('SentryError', () => {
test('rendering', () => {
const { asFragment } = render(
<SentryError t={ mockT }/>
<SentryError/>
);
expect(asFragment()).toMatchSnapshot();
});
@ -22,7 +21,7 @@ describe('SentryError', () => {
test('fill out a report when an event has been logged', () => {
Sentry.lastEventId.mockReturnValue(1);
const { getByTestId } = render(
<SentryError t={ mockT } />
<SentryError/>
);
const event = new MouseEvent('click', { bubbles: true });
jest.spyOn(event, 'preventDefault');
@ -35,7 +34,7 @@ describe('SentryError', () => {
test('fill out a report when an event has not been logged', () => {
Sentry.lastEventId.mockReturnValue(false);
const { getByTestId } = render(
<SentryError t={ mockT } />
<SentryError/>
);
const event = new MouseEvent('click', { bubbles: true });
jest.spyOn(event, 'preventDefault');

21
src/pages/404.js
View File

@ -1,19 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation, Trans } from 'react-i18next';
import { useTranslation, Trans } from 'react-i18next';
import Metadata from 'components/Metadata';
import Message from 'components/Message';
export const ErrorPage = ({ t }) => <>
<Metadata title={ t('Page Not Found') } />
<Message type="error" heading={ t('404 Page Not Found') }>
<p><Trans>The page you have requested could not be found.</Trans></p>
</Message>
</>;
export const ErrorPage = () => {
const { t } = useTranslation();
ErrorPage.propTypes = {
t: PropTypes.func.isRequired
return <>
<Metadata title={ t('Page Not Found') } />
<Message type="error" heading={ t('404 Page Not Found') }>
<p><Trans>The page you have requested could not be found.</Trans></p>
</Message>
</>;
};
export default withTranslation()(ErrorPage);
export default ErrorPage;

5
src/pages/404.test.js
View File

@ -6,13 +6,12 @@ jest.mock('components/Message', () =>
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { ErrorPage } from 'pages/404';
import ErrorPage from 'pages/404';
describe('Error Page', () => {
test('rendering', () => {
const { asFragment } = render(
<ErrorPage t={ mockT } />
<ErrorPage/>
);
expect(asFragment()).toMatchSnapshot();
});

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

@ -3,7 +3,7 @@
exports[`Error Page rendering 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Metadata)"
data-component="Metadata"
data-props="{
\\"title\\": \\"TRANSLATE(Page Not Found)\\"
}"

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

@ -3,7 +3,7 @@
exports[`Index Page rendering 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Metadata)"
data-component="Metadata"
data-props="{
\\"description\\": \\"Test description\\"
}"
@ -33,7 +33,7 @@ exports[`Index Page rendering 1`] = `
exports[`Index Page rendering with an expression on the URL 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Metadata)"
data-component="Metadata"
data-props="{
\\"description\\": \\"Test description\\"
}"

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

@ -3,13 +3,13 @@
exports[`Privacy Page rendering 1`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(Metadata)"
data-component="Metadata"
data-props="{
\\"title\\": \\"TRANSLATE(Privacy Policy)\\"
}"
/>
<span
data-component="withI18nextTranslation(PrivacyPolicy)"
data-component="PrivacyPolicy"
data-props="{}"
/>
</DocumentFragment>

2
src/pages/index.test.js
View File

@ -8,7 +8,7 @@ jest.mock('components/App', () =>
import React from 'react';
import { render } from 'react-testing-library';
import { IndexPage } from 'pages/index';
import IndexPage from 'pages/index';
const queryResult = {
site: {

17
src/pages/privacy.js
View File

@ -1,17 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';
import Metadata from 'components/Metadata';
import PrivacyPolicy from 'components/PrivacyPolicy';
export const PrivacyPage = ({ t }) => <>
<Metadata title={ t('Privacy Policy') } />
<PrivacyPolicy />
</>;
export const PrivacyPage = () => {
const { t } = useTranslation();
PrivacyPage.propTypes = {
t: PropTypes.func.isRequired
return <>
<Metadata title={ t('Privacy Policy') } />
<PrivacyPolicy />
</>;
};
export default withTranslation()(PrivacyPage);
export default PrivacyPage;

5
src/pages/privacy.test.js
View File

@ -6,13 +6,12 @@ jest.mock('components/PrivacyPolicy', () =>
import React from 'react';
import { render } from 'react-testing-library';
import { mockT } from 'i18n';
import { PrivacyPage } from 'pages/privacy';
import PrivacyPage from 'pages/privacy';
describe('Privacy Page', () => {
test('rendering', () => {
const { asFragment } = render(
<PrivacyPage t={ mockT } />
<PrivacyPage/>
);
expect(asFragment()).toMatchSnapshot();
});