Translating the App component
This commit is contained in:
parent
bbdc5a3b12
commit
3f692fc20b
@ -10,11 +10,11 @@ exports[`App removing rendered expression 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -38,11 +38,11 @@ exports[`App removing rendered expression 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -60,11 +60,11 @@ exports[`App rendering 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -82,11 +82,11 @@ exports[`App rendering an expression 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -104,11 +104,11 @@ exports[`App rendering an expression 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -127,11 +127,11 @@ exports[`App rendering an expression 3`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -155,11 +155,11 @@ exports[`App rendering image details 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -183,11 +183,11 @@ exports[`App rendering image details 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -217,11 +217,11 @@ exports[`App rendering with an invalid syntax 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -239,11 +239,11 @@ exports[`App rendering with an invalid syntax 2`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -262,27 +262,31 @@ exports[`App rendering with an invalid syntax 3`] = `
|
||||
Array [
|
||||
Object {
|
||||
"id": "testJS",
|
||||
"name": "Testing JS",
|
||||
"label": "Testing JS",
|
||||
},
|
||||
Object {
|
||||
"id": "other",
|
||||
"name": "Other",
|
||||
"label": "Other",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<Message
|
||||
heading="Render Failure"
|
||||
heading="TRANSLATE(Render Failure)"
|
||||
type="error"
|
||||
>
|
||||
<p>
|
||||
An error occurred while rendering the regular expression.
|
||||
<WithMergedOptions(TransComponent)>
|
||||
An error occurred while rendering the regular expression.
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</p>
|
||||
<a
|
||||
href="#retry"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Retry
|
||||
<WithMergedOptions(TransComponent)>
|
||||
Retry
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</a>
|
||||
</Message>
|
||||
</Fragment>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withNamespaces, Trans } from 'react-i18next';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
import URLSearchParams from '@ungap/url-search-params';
|
||||
|
||||
@ -16,7 +17,8 @@ class App extends React.PureComponent {
|
||||
syntaxList: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
label: PropTypes.string
|
||||
}))
|
||||
})),
|
||||
t: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
@ -105,7 +107,8 @@ class App extends React.PureComponent {
|
||||
syntax,
|
||||
expr,
|
||||
permalinkUrl,
|
||||
syntaxList
|
||||
syntaxList,
|
||||
t
|
||||
} = this.props;
|
||||
const {
|
||||
loading,
|
||||
@ -142,9 +145,11 @@ class App extends React.PureComponent {
|
||||
|
||||
{ loading && <Loader /> }
|
||||
|
||||
{ loadingError && <Message type="error" heading="Render Failure">
|
||||
<p>An error occurred while rendering the regular expression.</p>
|
||||
<a href="#retry" onClick={ this.handleRetry }>Retry</a>
|
||||
{ loadingError && <Message type="error" heading={ t('Render Failure') }>
|
||||
<p><Trans>
|
||||
An error occurred while rendering the regular expression.
|
||||
</Trans></p>
|
||||
<a href="#retry" onClick={ this.handleRetry }><Trans>Retry</Trans></a>
|
||||
</Message> }
|
||||
|
||||
{ doRender && <Component { ...renderProps } /> }
|
||||
@ -152,4 +157,5 @@ class App extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
export { App };
|
||||
export default withNamespaces()(App);
|
||||
|
@ -1,24 +1,26 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import App from 'components/App';
|
||||
import { mockT } from 'i18n';
|
||||
import { App } from 'components/App';
|
||||
|
||||
const syntaxList = [
|
||||
{ id: 'testJS', name: 'Testing JS' },
|
||||
{ id: 'other', name: 'Other' }
|
||||
{ id: 'testJS', label: 'Testing JS' },
|
||||
{ id: 'other', label: 'Other' }
|
||||
];
|
||||
const commonProps = { syntaxList, t: mockT };
|
||||
|
||||
describe('App', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
<App expr="" syntax="js" { ...commonProps } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering an expression', async () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
<App expr="" syntax="js" { ...commonProps } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
|
||||
@ -38,7 +40,7 @@ describe('App', () => {
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const component = shallow(
|
||||
<App expr="" syntax="invalid" syntaxList={ syntaxList } />
|
||||
<App expr="" syntax="invalid" { ...commonProps } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
|
||||
@ -56,7 +58,7 @@ describe('App', () => {
|
||||
|
||||
test('removing rendered expression', async () => {
|
||||
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
|
||||
@ -73,7 +75,7 @@ describe('App', () => {
|
||||
|
||||
test('rendering image details', async () => {
|
||||
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
|
||||
@ -92,7 +94,7 @@ describe('App', () => {
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
const component = shallow(
|
||||
<App expr="test expression" syntax="invalid" syntaxList={ syntaxList } />
|
||||
<App expr="test expression" syntax="invalid" { ...commonProps } />
|
||||
);
|
||||
|
||||
const instance = component.instance();
|
||||
@ -108,7 +110,7 @@ describe('App', () => {
|
||||
|
||||
test('submitting an expression to render', () => {
|
||||
const component = shallow(
|
||||
<App expr="" syntax="js" syntaxList={ syntaxList } />
|
||||
<App expr="" syntax="js" { ...commonProps } />
|
||||
);
|
||||
|
||||
const instance = component.instance();
|
||||
|
@ -43,3 +43,9 @@
|
||||
404 PAGE NOT 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
|
||||
|
@ -43,3 +43,9 @@
|
||||
404 Page Not 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
|
||||
|
@ -22,7 +22,7 @@ exports[`Index Page rendering 1`] = `
|
||||
</p>
|
||||
</Message>
|
||||
</noscript>
|
||||
<App
|
||||
<LoadNamespace(App)
|
||||
expr=""
|
||||
permalinkUrl={null}
|
||||
syntax="testJs"
|
||||
@ -64,7 +64,7 @@ exports[`Index Page rendering with an expression on the URL 1`] = `
|
||||
</p>
|
||||
</Message>
|
||||
</noscript>
|
||||
<App
|
||||
<LoadNamespace(App)
|
||||
expr="testing"
|
||||
permalinkUrl="http://example.com"
|
||||
syntax="test"
|
||||
|
Loading…
Reference in New Issue
Block a user