From d48b48bffce3a32c7e20139f2324bfb222c1ed23 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Tue, 15 Jan 2019 21:46:23 -0500 Subject: [PATCH] Translating FormActions component --- src/components/App/__snapshots__/test.js.snap | 8 +++--- .../FormActions/__snapshots__/test.js.snap | 28 ++++++++++++------- src/components/FormActions/index.js | 13 ++++++--- src/components/FormActions/test.js | 11 ++++---- src/locales/en-AC.yaml | 6 ++++ src/locales/en.yaml | 6 ++++ 6 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/components/App/__snapshots__/test.js.snap b/src/components/App/__snapshots__/test.js.snap index 1e7fda7..b00feff 100644 --- a/src/components/App/__snapshots__/test.js.snap +++ b/src/components/App/__snapshots__/test.js.snap @@ -19,7 +19,7 @@ exports[`App removing rendered expression 1`] = ` ] } > - + - + - + - - Example PNG Link + TRANSLATE(Example PNG Link)
  • @@ -33,7 +33,7 @@ exports[`FormActions rendering download links 1`] = ` color="currentColor" size="24" /> - Example SVG Link + TRANSLATE(Example SVG Link)
  • @@ -51,7 +51,9 @@ exports[`FormActions rendering download links with data after mounting 1`] = ` color="currentColor" size="24" /> - Permalink + + Permalink + @@ -71,7 +73,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = ` color="currentColor" size="24" /> - Example PNG Link + TRANSLATE(Example PNG Link)
  • @@ -84,7 +86,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = ` color="currentColor" size="24" /> - Example SVG Link + TRANSLATE(Example SVG Link)
  • @@ -95,7 +97,9 @@ exports[`FormActions rendering download links with data after mounting 2`] = ` color="currentColor" size="24" /> - Permalink + + Permalink +
  • @@ -115,7 +119,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = ` color="currentColor" size="24" /> - Example PNG Link + TRANSLATE(Example PNG Link)
  • @@ -128,7 +132,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = ` color="currentColor" size="24" /> - Example SVG Link + TRANSLATE(Example SVG Link)
  • @@ -139,7 +143,9 @@ exports[`FormActions rendering download links with data after mounting 3`] = ` color="currentColor" size="24" /> - Permalink + + Permalink +
  • @@ -157,7 +163,9 @@ exports[`FormActions rendering with a permalink 1`] = ` color="currentColor" size="24" /> - Permalink + + Permalink + diff --git a/src/components/FormActions/index.js b/src/components/FormActions/index.js index 00411c1..b3b1846 100644 --- a/src/components/FormActions/index.js +++ b/src/components/FormActions/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { withNamespaces, Trans } from 'react-i18next'; import DownloadIcon from 'react-feather/dist/icons/download'; import LinkIcon from 'react-feather/dist/icons/link'; @@ -15,7 +16,8 @@ class FormActions extends React.PureComponent { svg: PropTypes.string, width: PropTypes.number, height: PropTypes.number - }) + }), + t: PropTypes.func.isRequired } state = { @@ -63,9 +65,11 @@ class FormActions extends React.PureComponent { } downloadLink({ url, filename, type, label }) { + const { t } = this.props; + return
  • - { label } + { t(label) }
  • ; } @@ -83,10 +87,11 @@ class FormActions extends React.PureComponent { { pngLink && this.downloadLink(pngLink) } { svgLink && this.downloadLink(svgLink) } { permalinkUrl &&
  • - Permalink + Permalink
  • } ; } } -export default FormActions; +export { FormActions }; +export default withNamespaces()(FormActions); diff --git a/src/components/FormActions/test.js b/src/components/FormActions/test.js index 0bc1b6d..bdc461c 100644 --- a/src/components/FormActions/test.js +++ b/src/components/FormActions/test.js @@ -3,7 +3,8 @@ jest.mock('./links'); import React from 'react'; import { shallow } from 'enzyme'; -import FormActions from 'components/FormActions'; +import { mockT } from 'i18n'; +import { FormActions } from 'components/FormActions'; import { createPngLink, createSvgLink } from './links'; createPngLink.mockResolvedValue({ @@ -22,14 +23,14 @@ createSvgLink.mockResolvedValue({ describe('FormActions', () => { test('rendering', () => { const component = shallow( - + ); expect(component).toMatchSnapshot(); }); test('rendering with a permalink', () => { const component = shallow( - + ); expect(component).toMatchSnapshot(); }); @@ -42,7 +43,7 @@ describe('FormActions', () => { }; const component = shallow( - + ); // Give a beat for mocked promises to resolve @@ -53,7 +54,7 @@ describe('FormActions', () => { test('rendering download links with data after mounting', async () => { const component = shallow( - + ); component.setProps({ permalinkUrl: 'http://example.com' }); diff --git a/src/locales/en-AC.yaml b/src/locales/en-AC.yaml index b018f5b..d166778 100644 --- a/src/locales/en-AC.yaml +++ b/src/locales/en-AC.yaml @@ -57,3 +57,9 @@ JAVASCRIPT "PCRE": | PCRE +"Permalink": | + PERMALINK +"Download SVG": | + DOWNLOAD SVG +"Download PNG": | + DOWNLOAD PNG diff --git a/src/locales/en.yaml b/src/locales/en.yaml index d8b1ab9..0147e53 100644 --- a/src/locales/en.yaml +++ b/src/locales/en.yaml @@ -57,3 +57,9 @@ JavaScript "PCRE": | PCRE +"Permalink": | + Permalink +"Download SVG": | + Download SVG +"Download PNG": | + Download PNG