Implementing translations

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

@@ -3,7 +3,9 @@
 exports[`SentryError rendering 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <SentryError />,
+  Symbol(enzyme.__unrendered__): <SentryErrorImpl
+    t={[Function]}
+  />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
     "getNode": [Function],
@@ -18,64 +20,7 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": <p>
-        This error has been logged. You may also 
-        <a
-          href="#error-report"
-          onClick={[Function]}
-        >
-          fill out a report
-        </a>
-        .
-      </p>,
-      "heading": "An error has occurred",
-      "type": "error",
-    },
-    "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          "This error has been logged. You may also ",
-          <a
-            href="#error-report"
-            onClick={[Function]}
-          >
-            fill out a report
-          </a>,
-          ".",
-        ],
-      },
-      "ref": null,
-      "rendered": Array [
-        "This error has been logged. You may also ",
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "fill out a report",
-            "href": "#error-report",
-            "onClick": [Function],
-          },
-          "ref": null,
-          "rendered": "fill out a report",
-          "type": "a",
-        },
-        ".",
-      ],
-      "type": "p",
-    },
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": <p>
+        <WithMergedOptions(TransComponent)>
           This error has been logged. You may also 
           <a
             href="#error-report"
@@ -84,15 +29,33 @@ ShallowWrapper {
             fill out a report
           </a>
           .
-        </p>,
-        "heading": "An error has occurred",
-        "type": "error",
+        </WithMergedOptions(TransComponent)>
+      </p>,
+      "heading": "TRANSLATE(An error has occurred)",
+      "type": "error",
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": <WithMergedOptions(TransComponent)>
+          This error has been logged. You may also 
+          <a
+            href="#error-report"
+            onClick={[Function]}
+          >
+            fill out a report
+          </a>
+          .
+        </WithMergedOptions(TransComponent)>,
       },
       "ref": null,
       "rendered": Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "host",
+        "nodeType": "class",
         "props": Object {
           "children": Array [
             "This error has been logged. You may also ",
@@ -123,6 +86,87 @@ ShallowWrapper {
           },
           ".",
         ],
+        "type": [Function],
+      },
+      "type": "p",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "function",
+      "props": Object {
+        "children": <p>
+          <WithMergedOptions(TransComponent)>
+            This error has been logged. You may also 
+            <a
+              href="#error-report"
+              onClick={[Function]}
+            >
+              fill out a report
+            </a>
+            .
+          </WithMergedOptions(TransComponent)>
+        </p>,
+        "heading": "TRANSLATE(An error has occurred)",
+        "type": "error",
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <WithMergedOptions(TransComponent)>
+            This error has been logged. You may also 
+            <a
+              href="#error-report"
+              onClick={[Function]}
+            >
+              fill out a report
+            </a>
+            .
+          </WithMergedOptions(TransComponent)>,
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": Array [
+              "This error has been logged. You may also ",
+              <a
+                href="#error-report"
+                onClick={[Function]}
+              >
+                fill out a report
+              </a>,
+              ".",
+            ],
+          },
+          "ref": null,
+          "rendered": Array [
+            "This error has been logged. You may also ",
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "fill out a report",
+                "href": "#error-report",
+                "onClick": [Function],
+              },
+              "ref": null,
+              "rendered": "fill out a report",
+              "type": "a",
+            },
+            ".",
+          ],
+          "type": [Function],
+        },
         "type": "p",
       },
       "type": [Function],

src/components/SentryError/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as Sentry from '@sentry/browser';
+import { withNamespaces, Trans } from 'react-i18next';
 
 import Message from 'components/Message';
 
-class SentryError extends React.Component {
+export class SentryErrorImpl extends React.Component {
   reportError = event => {
     event.preventDefault();
 
@@ -13,11 +15,19 @@ class SentryError extends React.Component {
   }
 
   render() {
-    return <Message type="error" heading="An error has occurred">
-      <p>This error has been logged. You may also <a href="#error-report"
-        onClick={ this.reportError }>fill out a report</a>.</p>
+    const { t } = this.props;
+
+    return <Message type="error" heading={ t('An error has occurred') }>
+      <p>
+        <Trans>This error has been logged. You may also <a href="#error-report"
+          onClick={ this.reportError }>fill out a report</a>.</Trans>
+      </p>
     </Message>;
   }
 }
 
-export default SentryError;
+SentryErrorImpl.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+export default withNamespaces()(SentryErrorImpl);

src/components/SentryError/test.js

@@ -4,12 +4,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import * as Sentry from '@sentry/browser';
 
-import SentryError from 'components/SentryError';
+import { mockT } from 'i18n';
+import { SentryErrorImpl } from 'components/SentryError';
 
 describe('SentryError', () => {
   test('rendering', () => {
     const component = shallow(
-      <SentryError />
+      <SentryErrorImpl t={ mockT }/>
     );
     expect(component).toMatchSnapshot();
   });
@@ -18,7 +19,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has been logged', () => {
       Sentry.lastEventId.mockReturnValue(1);
       const component = shallow(
-        <SentryError />
+        <SentryErrorImpl t={ mockT } />
       );
       const eventObj = { preventDefault: jest.fn() };
       component.find('a').simulate('click', eventObj);
@@ -30,7 +31,7 @@ describe('SentryError', () => {
     test('fill out a report when an event has not been logged', () => {
       Sentry.lastEventId.mockReturnValue(false);
       const component = shallow(
-        <SentryError />
+        <SentryErrorImpl t={ mockT } />
       );
       const eventObj = { preventDefault: jest.fn() };
       component.find('a').simulate('click', eventObj);