Merge pull request #978 from cozy/test-withLocales

test: Testing withLocales

react/I18n/index.jsx

@@ -22,14 +22,14 @@ export class I18n extends Component {
   init(props) {
     const { polyglot, lang, dictRequire, context, defaultLang } = props
 
-    this.translation =
+    this.translator =
       polyglot || initTranslation(lang, dictRequire, context, defaultLang)
     this.format = initFormat(lang, defaultLang)
   }
 
   getChildContext() {
     return {
-      t: this.translation.t.bind(this.translation),
+      t: this.translator.t.bind(this.translator),
       f: this.format,
       lang: this.props.lang
     }

react/I18n/withLocales.jsx

@@ -1,13 +1,28 @@
 import React from 'react'
 import { I18n, translate } from './'
+import omit from 'lodash/omit'
 
-const withLocales = locales => Component =>
-  translate()(props => {
-    return (
-      <I18n dictRequire={localeCode => locales[localeCode]} lang={props.lang}>
-        <Component {...props} />
-      </I18n>
-    )
-  })
+const withLocales = locales => Component => {
+  // The inner components needs to receive t
+  const Translated = translate()(Component)
+
+  class Wrapped extends React.Component {
+    render() {
+      // Do not pass t downwards
+      const { lang, ...rest } = omit(this.props, 't')
+      return (
+        <I18n dictRequire={localeCode => locales[localeCode]} lang={lang}>
+          <Translated {...rest} />
+        </I18n>
+      )
+    }
+  }
+
+  Wrapped.displayName = `withLocales(${Component.displayName ||
+    Component.name})`
+
+  // The outer component needs to receive lang
+  return translate()(Wrapped)
+}
 
 export default withLocales

react/I18n/withLocales.spec.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { I18n } from '.'
+import withLocales from './withLocales'
+
+const globalLocales = {
+  en: {
+    'hello-world': 'Hello global world !'
+  },
+  fr: {
+    'hello-world': 'Bonjour le monde global !'
+  }
+}
+
+const componentLocales = {
+  en: {
+    'hello-world': 'Hello local world !'
+  },
+  fr: {
+    'hello-world': 'Bonjour le monde local !'
+  }
+}
+
+class Component extends React.Component {
+  render() {
+    const { t } = this.props
+    return <div>{t('hello-world')}</div>
+  }
+}
+const TComponent = withLocales(componentLocales)(Component)
+
+describe('with locales', () => {
+  let root
+  const setup = ({ lang }) => {
+    root = mount(
+      <I18n lang={lang} dictRequire={localeCode => globalLocales[localeCode]}>
+        <TComponent />
+      </I18n>
+    )
+  }
+  it('should provide t with correct locale strings', () => {
+    setup({ lang: 'en' })
+    expect(root.text()).toBe('Hello local world !')
+    setup({ lang: 'fr' })
+    expect(root.text()).toBe('Bonjour le monde local !')
+  })
+})