Translating Form component

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

@@ -2,7 +2,7 @@
 
 exports[`App removing rendered expression 1`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="js"
@@ -20,7 +20,7 @@ exports[`App removing rendered expression 1`] = `
     }
   >
     <FormActions />
-  </Form>
+  </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
     onRender={[Function]}
@@ -30,7 +30,7 @@ exports[`App removing rendered expression 1`] = `
 
 exports[`App removing rendered expression 2`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr=""
     onSubmit={[Function]}
     syntax="js"
@@ -52,7 +52,7 @@ exports[`App removing rendered expression 2`] = `
 
 exports[`App rendering 1`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr=""
     onSubmit={[Function]}
     syntax="js"
@@ -74,7 +74,7 @@ exports[`App rendering 1`] = `
 
 exports[`App rendering an expression 1`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr=""
     onSubmit={[Function]}
     syntax="js"
@@ -96,7 +96,7 @@ exports[`App rendering an expression 1`] = `
 
 exports[`App rendering an expression 2`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="js"
@@ -119,7 +119,7 @@ exports[`App rendering an expression 2`] = `
 
 exports[`App rendering an expression 3`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="js"
@@ -137,7 +137,7 @@ exports[`App rendering an expression 3`] = `
     }
   >
     <FormActions />
-  </Form>
+  </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
     onRender={[Function]}
@@ -147,7 +147,7 @@ exports[`App rendering an expression 3`] = `
 
 exports[`App rendering image details 1`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="js"
@@ -165,7 +165,7 @@ exports[`App rendering image details 1`] = `
     }
   >
     <FormActions />
-  </Form>
+  </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
     onRender={[Function]}
@@ -175,7 +175,7 @@ exports[`App rendering image details 1`] = `
 
 exports[`App rendering image details 2`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="js"
@@ -199,7 +199,7 @@ exports[`App rendering image details 2`] = `
         }
       }
     />
-  </Form>
+  </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
     onRender={[Function]}
@@ -209,7 +209,7 @@ exports[`App rendering image details 2`] = `
 
 exports[`App rendering with an invalid syntax 1`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr=""
     onSubmit={[Function]}
     syntax="invalid"
@@ -231,7 +231,7 @@ exports[`App rendering with an invalid syntax 1`] = `
 
 exports[`App rendering with an invalid syntax 2`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="invalid"
@@ -254,7 +254,7 @@ exports[`App rendering with an invalid syntax 2`] = `
 
 exports[`App rendering with an invalid syntax 3`] = `
 <Fragment>
-  <Form
+  <LoadNamespace(Form)
     expr="test expression"
     onSubmit={[Function]}
     syntax="invalid"

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

@@ -12,12 +12,14 @@ exports[`Form rendering 1`] = `
       name="expr"
       onChange={[Function]}
       onKeyPress={[Function]}
-      placeholder="Enter regular expression to display"
+      placeholder="TRANSLATE(Enter regular expression to display)"
     />
     <button
       type="submit"
     >
-      Display
+      <WithMergedOptions(TransComponent)>
+        Display
+      </WithMergedOptions(TransComponent)>
     </button>
     <div
       className="select"
@@ -29,11 +31,15 @@ exports[`Form rendering 1`] = `
         <option
           key="testJS"
           value="testJS"
-        />
+        >
+          TRANSLATE(Testing JS)
+        </option>
         <option
           key="other"
           value="other"
-        />
+        >
+          TRANSLATE(Other)
+        </option>
       </select>
       <ChevronsDown
         color="currentColor"

src/components/Form/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withNamespaces, Trans } from 'react-i18next';
 
 import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
 
@@ -17,7 +18,8 @@ class Form extends React.PureComponent {
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.node
-    ])
+    ]),
+    t: PropTypes.func.isRequired
   }
 
   state = {
@@ -46,7 +48,8 @@ class Form extends React.PureComponent {
   render() {
     const {
       syntaxList,
-      children
+      children,
+      t
     } = this.props;
     const { expr, syntax } = this.state;
 
@@ -58,15 +61,15 @@ class Form extends React.PureComponent {
           onKeyPress={ this.handleKeyPress }
           onChange={ this.handleChange }
           autoFocus
-          placeholder="Enter regular expression to display"></textarea>
+          placeholder={ t('Enter regular expression to display') }></textarea>
-        <button type="submit">Display</button>
+        <button type="submit"><Trans>Display</Trans></button>
         <div className={ style.select }>
           <select
             name="syntax"
             value={ syntax }
             onChange={ this.handleChange } >
             { syntaxList.map(({ id, label }) => (
-              <option value={ id } key={ id }>{ label }</option>
+              <option value={ id } key={ id }>{ t(label) }</option>
             )) }
           </select>
           <ExpandIcon />
@@ -77,4 +80,5 @@ class Form extends React.PureComponent {
   }
 }
 
-export default Form;
+export { Form };
+export default withNamespaces()(Form);

src/components/Form/test.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Form from 'components/Form';
+import { mockT } from 'i18n';
+import { Form } from 'components/Form';
 
 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('Form', () => {
   test('rendering', () => {
     const component = shallow(
-      <Form syntaxList={ syntaxList } onSubmit={ jest.fn() }>
+      <Form onSubmit={ jest.fn() } { ...commonProps }>
         Actions
       </Form>
     );
@@ -22,7 +24,7 @@ describe('Form', () => {
     test('submitting form', () => {
       const onSubmit = jest.fn();
       const component = shallow(
-        <Form syntaxList={ syntaxList } onSubmit={ onSubmit } />
+        <Form onSubmit={ onSubmit } { ...commonProps } />
       );
 
       const exprInput = component.find('[name="expr"]');
@@ -52,7 +54,7 @@ describe('Form', () => {
 
     test('submitting form with Shift+Enter', () => {
       const component = shallow(
-        <Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
+        <Form onSubmit={ jest.fn() } { ...commonProps } />
       );
       const form = component.instance();
       const eventObj = {
@@ -68,7 +70,7 @@ describe('Form', () => {
 
     test('not submitting with just Enter', () => {
       const component = shallow(
-        <Form syntaxList={ syntaxList } onSubmit={ jest.fn() } />
+        <Form onSubmit={ jest.fn() } { ...commonProps } />
       );
       const form = component.instance();
       const eventObj = {

src/locales/en-AC.yaml

@@ -49,3 +49,11 @@
   AN ERROR OCCURRED WHILE RENDERING THE REGULAR EXPRESSION.
 "Retry": |
   RETRY
+"Enter regular expression to display": |
+  ENTER REGULAR EXPRESSION TO DISPLAY
+"Display": |
+  DISPLAY
+"JavaScript": |
+  JAVASCRIPT
+"PCRE": |
+  PCRE

src/locales/en.yaml

@@ -49,3 +49,11 @@
   An error occurred while rendering the regular expression.
 "Retry": |
   Retry
+"Enter regular expression to display": |
+  Enter regular expression to display
+"Display": |
+  Display
+"JavaScript": |
+  JavaScript
+"PCRE": |
+  PCRE