From 5dd6c62dd243ad18e17d138f422256dc930db180 Mon Sep 17 00:00:00 2001 From: Mo Kouli Date: Wed, 10 Apr 2019 09:34:18 -0700 Subject: [PATCH] =?UTF-8?q?Feature:=20pass=20localeCode=20along=20with=20t?= =?UTF-8?q?he=20translate=20prop=20in=20the=20withTra=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/fusionjs/fusion-plugin-i18n-react/pull/238 Co-authored-by: Mo Kouli --- README.md | 4 +- package.json | 4 + .../with-translations.test.browser.js.snap | 3 + .../with-translations.test.browser.js | 50 +++++++ src/setupTests.js | 6 + src/with-translations.js | 16 ++- yarn.lock | 126 +++++++++++++++++- 7 files changed, 203 insertions(+), 6 deletions(-) create mode 100644 src/__tests__/__snapshots__/with-translations.test.browser.js.snap create mode 100644 src/__tests__/with-translations.test.browser.js create mode 100644 src/setupTests.js diff --git a/README.md b/README.md index b029a13..159638f 100644 --- a/README.md +++ b/README.md @@ -257,13 +257,14 @@ const TranslatedComponent = withTranslations(['key'])(Component); Be aware that the `withTranslations` function expects an array of string literals. This plugin uses a babel transform and the argument to this function must be an inline value, i.e. you cannot pass a variable. -The original `Component` receives a prop called `{translate}`. +The original `Component` receives a prop called `{translate}` and the `{localeCode}`. **Types** ```js type TranslateProp = { translate: (key: string, interpolations: Object) => string, + localeCode: string }; type WithTranslations = ( translationKeys: Array @@ -272,6 +273,7 @@ type WithTranslations = ( * `translationKeys: Array` - list of keys with which to provide translations for. * `translate: (key: string, interpolations: Object) => string` - returns the translation for the given key, with the provided interpolations. +* `localeCode: string = 'en_US'` - the current `localeCode` we are tranlating to. Defaults to `en_US`. --- diff --git a/package.json b/package.json index 92e471a..c3c4955 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "babel-jest": "^23.6.0", "create-universal-package": "3.4.6", "enzyme": "^3.8.0", + "enzyme-adapter-react-16": "^1.12.1", "eslint": "^5.11.1", "eslint-config-fusion": "^4.0.0", "eslint-plugin-cup": "2.0.1", @@ -84,5 +85,8 @@ } } }, + "jest": { + "setupFilesAfterEnv": ["/src/setupTests.js"] + }, "license": "MIT" } diff --git a/src/__tests__/__snapshots__/with-translations.test.browser.js.snap b/src/__tests__/__snapshots__/with-translations.test.browser.js.snap new file mode 100644 index 0000000..be7bd81 --- /dev/null +++ b/src/__tests__/__snapshots__/with-translations.test.browser.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`withTranslations() - localeCode 1`] = `"
fr_CAfoo bar baz
"`; diff --git a/src/__tests__/with-translations.test.browser.js b/src/__tests__/with-translations.test.browser.js new file mode 100644 index 0000000..1373f7c --- /dev/null +++ b/src/__tests__/with-translations.test.browser.js @@ -0,0 +1,50 @@ +// @flow + +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {mount} from 'enzyme'; + +import {withTranslations} from '../index'; + +function mockProvider(i18n) { + class I18NProvider extends Component<*, *> { + getChildContext() { + return {i18n}; + } + render() { + return React.Children.only(this.props.children); + } + } + + I18NProvider.childContextTypes = { + i18n: PropTypes.object.isRequired, + }; + + return I18NProvider; +} + +test('withTranslations() HOC - localeCode', () => { + const Foo = withTranslations([])(({localeCode, translate}) => { + return ( +
+ {localeCode} + {translate()} +
+ ); + }); + + const Provider = mockProvider({ + localeCode: 'fr_CA', + translate() { + return 'foo bar baz'; + }, + }); + + expect( + mount( + + + + ).html() + ).toMatchSnapshot(); +}); diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..b117acd --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,6 @@ +// @flow + +import {configure} from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({adapter: new Adapter()}); diff --git a/src/with-translations.js b/src/with-translations.js index 40e5ce0..df5ac25 100644 --- a/src/with-translations.js +++ b/src/with-translations.js @@ -29,13 +29,19 @@ export const withTranslations = ( ) => { return ( Component: React$ComponentType - ): Class>> => { + ): Class< + React$Component< + $Diff + > + > => { class WithTranslations extends React.Component { translate: TranslateType; + localeCode: string; constructor(props: T, context: Context) { super(props, context); const {i18n} = context; + this.localeCode = i18n ? i18n.localeCode : 'en_US'; this.translate = i18n ? (key: string, interpolations?: {[string]: string | number}) => i18n.translate(key, interpolations) @@ -43,7 +49,13 @@ export const withTranslations = ( } render() { - return ; + return ( + + ); } } diff --git a/yarn.lock b/yarn.lock index e99b945..f0ae120 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1059,6 +1059,22 @@ agent-base@^4.1.0: dependencies: es6-promisify "^5.0.0" +airbnb-prop-types@^2.12.0: + version "2.13.2" + resolved "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz#43147a5062dd2a4a5600e748a47b64004cc5f7fc" + integrity sha512-2FN6DlHr6JCSxPPi25EnqGaXC4OC3/B3k1lCd6MMYrZ51/Gf/1qDfaR+JElzWa+Tl7cY2aYOlsYJGFeQyVHIeQ== + dependencies: + array.prototype.find "^2.0.4" + function.prototype.name "^1.1.0" + has "^1.0.3" + is-regex "^1.0.4" + object-is "^1.0.1" + object.assign "^4.1.0" + object.entries "^1.1.0" + prop-types "^15.7.2" + prop-types-exact "^1.2.0" + react-is "^16.8.6" + ajv-keywords@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a" @@ -1220,6 +1236,14 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= +array.prototype.find@^2.0.4: + version "2.0.4" + resolved "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.0.4.tgz#556a5c5362c08648323ddaeb9de9d14bc1864c90" + integrity sha1-VWpcU2LAhkgyPdrrnenRS8GGTJA= + dependencies: + define-properties "^1.1.2" + es-abstract "^1.7.0" + array.prototype.flat@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4" @@ -2280,7 +2304,7 @@ default-require-extensions@^2.0.0: dependencies: strip-bom "^3.0.0" -define-properties@^1.1.2: +define-properties@^1.1.2, define-properties@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ== @@ -2509,6 +2533,31 @@ entities@^1.1.1, entities@~1.1.1: resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56" integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w== +enzyme-adapter-react-16@^1.12.1: + version "1.12.1" + resolved "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.12.1.tgz#6a2d74c80559d35ac0a91ca162fa45f4186290cf" + integrity sha512-GB61gvY97XvrA6qljExGY+lgI6BBwz+ASLaRKct9VQ3ozu0EraqcNn3CcrUckSGIqFGa1+CxO5gj5is5t3lwrw== + dependencies: + enzyme-adapter-utils "^1.11.0" + object.assign "^4.1.0" + object.values "^1.1.0" + prop-types "^15.7.2" + react-is "^16.8.6" + react-test-renderer "^16.0.0-0" + semver "^5.6.0" + +enzyme-adapter-utils@^1.11.0: + version "1.11.0" + resolved "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.11.0.tgz#6ffff782b1b57dd46c72a845a91fc4103956a117" + integrity sha512-0VZeoE9MNx+QjTfsjmO1Mo+lMfunucYB4wt5ficU85WB/LoetTJrbuujmHP3PJx6pSoaAuLA+Mq877x4LoxdNg== + dependencies: + airbnb-prop-types "^2.12.0" + function.prototype.name "^1.1.0" + object.assign "^4.1.0" + object.fromentries "^2.0.0" + prop-types "^15.7.2" + semver "^5.6.0" + enzyme@^3.8.0: version "3.8.0" resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.8.0.tgz#646d2d5d0798cb98fdec39afcee8a53237b47ad5" @@ -2564,7 +2613,7 @@ es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.5.0, es-abstract@^1.6.1 is-callable "^1.1.3" is-regex "^1.0.4" -es-abstract@^1.5.1: +es-abstract@^1.12.0, es-abstract@^1.5.1: version "1.13.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9" integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg== @@ -4895,7 +4944,7 @@ longest@^1.0.1: resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc= -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -5507,6 +5556,16 @@ object.entries@^1.0.4: function-bind "^1.1.0" has "^1.0.1" +object.entries@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519" + integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.12.0" + function-bind "^1.1.1" + has "^1.0.3" + object.fromentries@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab" @@ -5550,6 +5609,16 @@ object.values@^1.0.4: function-bind "^1.1.0" has "^1.0.1" +object.values@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9" + integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.12.0" + function-bind "^1.1.1" + has "^1.0.3" + on-finished@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947" @@ -5977,6 +6046,15 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" +prop-types-exact@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869" + integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA== + dependencies: + has "^1.0.3" + object.assign "^4.1.0" + reflect.ownkeys "^0.2.0" + prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" @@ -5985,6 +6063,15 @@ prop-types@^15.6.2: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.7.2: + version "15.7.2" + resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + proxy-from-env@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee" @@ -6148,6 +6235,21 @@ react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g== +react-is@^16.8.1, react-is@^16.8.6: + version "16.8.6" + resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" + integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== + +react-test-renderer@^16.0.0-0: + version "16.8.6" + resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1" + integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.6.2" + react-is "^16.8.6" + scheduler "^0.13.6" + react@^16.7.0: version "16.7.0" resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381" @@ -6247,6 +6349,11 @@ realpath-native@^1.0.0, realpath-native@^1.0.2: dependencies: util.promisify "^1.0.0" +reflect.ownkeys@^0.2.0: + version "0.2.0" + resolved "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" + integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA= + regenerate-unicode-properties@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c" @@ -6601,11 +6708,24 @@ scheduler@^0.12.0: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.13.6: + version "0.13.6" + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" + integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1: version "5.6.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg== +semver@^5.6.0: + version "5.7.0" + resolved "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b" + integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA== + set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"