Translating the App component

src/components/App/__snapshots__/test.js.snap

@@ -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>
+      <WithMergedOptions(TransComponent)>
         An error occurred while rendering the regular expression.
+      </WithMergedOptions(TransComponent)>
     </p>
     <a
       href="#retry"
       onClick={[Function]}
     >
+      <WithMergedOptions(TransComponent)>
         Retry
+      </WithMergedOptions(TransComponent)>
     </a>
   </Message>
 </Fragment>

src/components/App/index.js

@@ -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);

src/components/App/test.js

@@ -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();

src/locales/en-AC.yaml

@@ -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

src/locales/en.yaml

@@ -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

src/pages/__snapshots__/index.test.js.snap

@@ -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"