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

Translating the App component

Browse Source
This commit is contained in:
Jeff Avallone 2019-01-15 21:32:45 -05:00
parent bbdc5a3b12
commit 3f692fc20b
6 changed files with 67 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,11 +10,11 @@ exports[`App removing rendered expression 1`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -38,11 +38,11 @@ exports[`App removing rendered expression 2`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -60,11 +60,11 @@ exports[`App rendering 1`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -82,11 +82,11 @@ exports[`App rendering an expression 1`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -104,11 +104,11 @@ exports[`App rendering an expression 2`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -127,11 +127,11 @@ exports[`App rendering an expression 3`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -155,11 +155,11 @@ exports[`App rendering image details 1`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -183,11 +183,11 @@ exports[`App rendering image details 2`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -217,11 +217,11 @@ exports[`App rendering with an invalid syntax 1`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -239,11 +239,11 @@ exports[`App rendering with an invalid syntax 2`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
@ -262,27 +262,31 @@ exports[`App rendering with an invalid syntax 3`] = `
Array [ Array [
Object { Object {
"id": "testJS", "id": "testJS",
"name": "Testing JS", "label": "Testing JS",
}, },
Object { Object {
"id": "other", "id": "other",
"name": "Other", "label": "Other",
}, },
] ]
} }
/> />
<Message <Message
heading="Render Failure" heading="TRANSLATE(Render Failure)"
type="error" type="error"
> >
<p> <p>
An error occurred while rendering the regular expression. <WithMergedOptions(TransComponent)>
An error occurred while rendering the regular expression.
</WithMergedOptions(TransComponent)>
</p> </p>
<a <a
href="#retry" href="#retry"
onClick={[Function]} onClick={[Function]}
> >
Retry <WithMergedOptions(TransComponent)>
Retry
</WithMergedOptions(TransComponent)>
</a> </a>
</Message> </Message>
</Fragment> </Fragment>

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

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withNamespaces, Trans } from 'react-i18next';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import URLSearchParams from '@ungap/url-search-params'; import URLSearchParams from '@ungap/url-search-params';
@ -16,7 +17,8 @@ class App extends React.PureComponent {
syntaxList: PropTypes.arrayOf(PropTypes.shape({ syntaxList: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
label: PropTypes.string label: PropTypes.string
})) })),
t: PropTypes.func.isRequired
} }
state = { state = {
@ -105,7 +107,8 @@ class App extends React.PureComponent {
syntax, syntax,
expr, expr,
permalinkUrl, permalinkUrl,
syntaxList syntaxList,
t
} = this.props; } = this.props;
const { const {
loading, loading,
@ -142,9 +145,11 @@ class App extends React.PureComponent {
{ loading && <Loader /> } { loading && <Loader /> }
{ loadingError && <Message type="error" heading="Render Failure"> { loadingError && <Message type="error" heading={ t('Render Failure') }>
<p>An error occurred while rendering the regular expression.</p> <p><Trans>
<a href="#retry" onClick={ this.handleRetry }>Retry</a> An error occurred while rendering the regular expression.
</Trans></p>
<a href="#retry" onClick={ this.handleRetry }><Trans>Retry</Trans></a>
</Message> } </Message> }
{ doRender && <Component { ...renderProps } /> } { doRender && <Component { ...renderProps } /> }
@ -152,4 +157,5 @@ class App extends React.PureComponent {
} }
} }
export default App; export { App };
export default withNamespaces()(App);

22
src/components/App/test.js
View File

@ -1,24 +1,26 @@
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import App from 'components/App'; import { mockT } from 'i18n';
import { App } from 'components/App';
const syntaxList = [ const syntaxList = [
{ id: 'testJS', name: 'Testing JS' }, { id: 'testJS', label: 'Testing JS' },
{ id: 'other', name: 'Other' } { id: 'other', label: 'Other' }
]; ];
const commonProps = { syntaxList, t: mockT };
describe('App', () => { describe('App', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const component = shallow(
<App expr="" syntax="js" syntaxList={ syntaxList } /> <App expr="" syntax="js" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });
test('rendering an expression', async () => { test('rendering an expression', async () => {
const component = shallow( const component = shallow(
<App expr="" syntax="js" syntaxList={ syntaxList } /> <App expr="" syntax="js" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
@ -38,7 +40,7 @@ describe('App', () => {
jest.spyOn(console, 'error').mockImplementation(() => {}); jest.spyOn(console, 'error').mockImplementation(() => {});
const component = shallow( const component = shallow(
<App expr="" syntax="invalid" syntaxList={ syntaxList } /> <App expr="" syntax="invalid" { ...commonProps } />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
@ -56,7 +58,7 @@ describe('App', () => {
test('removing rendered expression', async () => { test('removing rendered expression', async () => {
const component = shallow( const component = shallow(
<App expr="test expression" syntax="js" syntaxList={ syntaxList } /> <App expr="test expression" syntax="js" { ...commonProps } />
); );
// Give a beat for module to load // Give a beat for module to load
@ -73,7 +75,7 @@ describe('App', () => {
test('rendering image details', async () => { test('rendering image details', async () => {
const component = shallow( const component = shallow(
<App expr="test expression" syntax="js" syntaxList={ syntaxList } /> <App expr="test expression" syntax="js" { ...commonProps } />
); );
// Give a beat for module to load // Give a beat for module to load
@ -92,7 +94,7 @@ describe('App', () => {
jest.spyOn(console, 'error').mockImplementation(() => {}); jest.spyOn(console, 'error').mockImplementation(() => {});
const component = shallow( const component = shallow(
<App expr="test expression" syntax="invalid" syntaxList={ syntaxList } /> <App expr="test expression" syntax="invalid" { ...commonProps } />
); );
const instance = component.instance(); const instance = component.instance();
@ -108,7 +110,7 @@ describe('App', () => {
test('submitting an expression to render', () => { test('submitting an expression to render', () => {
const component = shallow( const component = shallow(
<App expr="" syntax="js" syntaxList={ syntaxList } /> <App expr="" syntax="js" { ...commonProps } />
); );
const instance = component.instance(); const instance = component.instance();

6
src/locales/en-AC.yaml
View File

@ -43,3 +43,9 @@
404 PAGE NOT FOUND 404 PAGE NOT FOUND
"The page you have requested could not be found.": | "The page you have requested could not be found.": |
THE PAGE YOU HAVE REQUESTED COULD NOT BE FOUND. THE PAGE YOU HAVE REQUESTED COULD NOT BE FOUND.
"Render Failure": |
RENDER FAILURE
"An error occurred while rendering the regular expression.": |
AN ERROR OCCURRED WHILE RENDERING THE REGULAR EXPRESSION.
"Retry": |
RETRY

6
src/locales/en.yaml
View File

@ -43,3 +43,9 @@
404 Page Not Found 404 Page Not Found
"The page you have requested could not be found.": | "The page you have requested could not be found.": |
The page you have requested could not be found. The page you have requested could not be found.
"Render Failure": |
Render Failure
"An error occurred while rendering the regular expression.": |
An error occurred while rendering the regular expression.
"Retry": |
Retry

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

@ -22,7 +22,7 @@ exports[`Index Page rendering 1`] = `
</p> </p>
</Message> </Message>
</noscript> </noscript>
<App <LoadNamespace(App)
expr="" expr=""
permalinkUrl={null} permalinkUrl={null}
syntax="testJs" syntax="testJs"
@ -64,7 +64,7 @@ exports[`Index Page rendering with an expression on the URL 1`] = `
</p> </p>
</Message> </Message>
</noscript> </noscript>
<App <LoadNamespace(App)
expr="testing" expr="testing"
permalinkUrl="http://example.com" permalinkUrl="http://example.com"
syntax="test" syntax="test"