Commit c7ea0659 authored by Jeff Avallone's avatar Jeff Avallone

Adding HTML lang attribute and description metadata

parent 325f01f0
const pkg = require('./package.json');
const buildId = [
process.env.CI_COMMIT_REF_SLUG || 'prerelese',
(process.env.CI_COMMIT_SHA || 'gitsha').slice(0, 7)
......@@ -8,6 +10,7 @@ const banner = process.env.BANNER || (process.env.NODE_ENV === 'production'
module.exports = {
siteMetadata: {
description: pkg.description,
buildId,
banner,
defaultSyntax: 'js',
......
......@@ -4,6 +4,11 @@ exports[`Metadata rendering 1`] = `
<HelmetWrapper
defer={true}
encodeSpecialCharacters={true}
htmlAttributes={
Object {
"lang": "test-lang",
}
}
>
<title>
Regexper
......@@ -11,13 +16,22 @@ exports[`Metadata rendering 1`] = `
</HelmetWrapper>
`;
exports[`Metadata rendering with a title 1`] = `
exports[`Metadata rendering with a title and description 1`] = `
<HelmetWrapper
defer={true}
encodeSpecialCharacters={true}
htmlAttributes={
Object {
"lang": "test-lang",
}
}
>
<title>
Regexper - Testing
</title>
<meta
content="Test description"
name="description"
/>
</HelmetWrapper>
`;
import React from 'react';
import PropTypes from 'prop-types';
import { withNamespaces } from 'react-i18next';
import { Helmet } from 'react-helmet';
const Metadata = ({ title }) => (
<Helmet>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
</Helmet>
);
class Metadata extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
description: PropTypes.string,
i18n: PropTypes.shape({
language: PropTypes.string.isRequired
}).isRequired
}
Metadata.propTypes = {
title: PropTypes.string
};
render() {
const { title, description, i18n } = this.props;
const htmlAttributes = {
lang: i18n.language
};
export default Metadata;
return <Helmet htmlAttributes={ htmlAttributes }>
<title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
{ description && <meta name="description" content={ description } /> }
</Helmet>;
}
}
export { Metadata };
export default withNamespaces()(Metadata);
import React from 'react';
import { shallow } from 'enzyme';
import Metadata from 'components/Metadata';
import { Metadata } from 'components/Metadata';
const commonProps = {
i18n: { language: 'test-lang' }
};
describe('Metadata', () => {
test('rendering', () => {
const component = shallow(
<Metadata />
<Metadata { ...commonProps } />
);
expect(component).toMatchSnapshot();
});
test('rendering with a title', () => {
test('rendering with a title and description', () => {
const component = shallow(
<Metadata title="Testing" />
<Metadata
title="Testing"
description="Test description"
{ ...commonProps } />
);
expect(component).toMatchSnapshot();
});
......
......@@ -2,7 +2,7 @@
exports[`Error Page rendering 1`] = `
<Fragment>
<Metadata
<LoadNamespace(Metadata)
title="TRANSLATE(Page Not Found)"
/>
<Message
......
......@@ -2,7 +2,9 @@
exports[`Index Page rendering 1`] = `
<Fragment>
<Metadata />
<LoadNamespace(Metadata)
description="Test description"
/>
<noscript>
<Message
heading="JavaScript Required"
......@@ -44,7 +46,9 @@ exports[`Index Page rendering 1`] = `
exports[`Index Page rendering with an expression on the URL 1`] = `
<Fragment>
<Metadata />
<LoadNamespace(Metadata)
description="Test description"
/>
<noscript>
<Message
heading="JavaScript Required"
......
......@@ -2,7 +2,7 @@
exports[`Privacy Page rendering 1`] = `
<Fragment>
<Metadata
<LoadNamespace(Metadata)
title="TRANSLATE(Privacy Policy)"
/>
<Message
......
......@@ -11,6 +11,7 @@ export const query = graphql`
query IndexPageQuery {
site {
siteMetadata {
description
defaultSyntax
syntaxList { id, label }
}
......@@ -43,7 +44,7 @@ export const IndexPage = ({
location,
data: { site: { siteMetadata } }
}) => <>
<Metadata/>
<Metadata description={ siteMetadata.description } />
<noscript>
<Message type="error" heading="JavaScript Required">
<p>You need JavaScript to use Regexper.</p>
......@@ -61,6 +62,7 @@ IndexPage.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
description: PropTypes.string,
defaultSyntax: PropTypes.string,
syntaxList: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
......
......@@ -6,6 +6,7 @@ import { IndexPage } from 'pages/index';
const queryResult = {
site: {
siteMetadata: {
description: 'Test description',
defaultSyntax: 'testJs',
syntaxList: [
{ id: 'testJS', name: 'Testing JS' },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment