i18n changes

Author: Olaf Kwant

doc/i18n.md

@@ -1,14 +1,12 @@
 ## Using the I18n module
 
-The I18n module provides a helper called `I18n.t` that you can use to localize
-your application.
+The I18n module provides a helper called `i18n.t` that you can use to localize your application.
 
 ### Setup
 
-Put a `defaultLocale` property into your `manifest.json` file.
+Put a `defaultLocale` property into your `manifest.json` file, otherwise it will use english (en)
 
-Add your translation files as `src/translations/XX.json` where `XX` is a locale such
-as `en-US`, `de`, or `zh`.
+Add your translation files as `src/translations/XX.json` where `XX` is a locale such as `en-US`, `de`, or `zh`.
 
 A simple translation file might look like this:
 
@@ -22,40 +20,39 @@ A simple translation file might look like this:
 }
 ```
 
+The "app" section in translation files is used *only* for public app listings in the Zendesk Marketplace. For these listings, we only allow English. The "app" sections in other translation files will be ignored.
+
 ### Initialization
 
-When you know which locale you want to use, call `I18n.loadTranslations(locale)` where
-`locale` is a string like `en-US`, `de`, `zh`. This will load the strings under the
-matching file in `src/translations`. For example, you could use
+When you know which locale you want to use, call `i18n.loadTranslations(locale)` where `locale` is a string like `en-US`, `de`, `zh`. This will load the strings under the matching file in `src/translations`. For example, you could use
 
 ```javascript
-import I18n from 'i18n';
+import i18n from 'i18n';
 
 const zafClient = ZAFClient.init();
-zafClient.get('currentUser.locale').then(function(data) {
-  I18n.loadTranslations(data['currentUser.locale']);
+zafClient.get('currentUser.locale').then((data) => {
+  const locale = data['currentUser.locale'];
+  i18n.loadTranslations(locale);
 });
 ```
 
 ## Reference
 
-### I18n.loadTranslations(locale)
+### i18n.loadTranslations(locale)
 
-Sets the locale to be used by `I18n.t()`
+Sets the locale to be used by `i18n.t()`
 
 #### Arguments
 
 * `locale`: String representing the filename of the required translation JSON file.
 
-### I18n.t(key, context)
+### i18n.t(key, context)
 
-Returns a translated string using a key that is available in the relevant
-translation file (found in `src/translations/XX.json`).
+Returns a translated string using a key that is available in the relevant translation file (found in `src/translations/XX.json`).
 
 #### Arguments
 
-* `key`: The key assigned to the string in the JSON file. Dots may be used to access
-nested objects.
+* `key`: The key assigned to the string in the JSON file. Dots may be used to access nested objects.
 * `context`: An object with named values to be interpolated into the resulting string.
 
 #### Returns
@@ -65,7 +62,7 @@ A translated string generated by keying into the JSON file and interpolating any
 #### Example
 
 ```javascript
-I18n.t('hello'); // returns "Hello!"
-I18n.t('goodbye', { name: 'Yak' }); // returns "Bye Yak!"
-I18n.t('formal.farewell'); // returns "Farewell, friend."
+i18n.t('hello'); // returns "Hello!"
+i18n.t('goodbye', { name: 'Yak' }); // returns "Bye Yak!"
+i18n.t('formal.farewell'); // returns "Farewell, friend."
 ```

spec/i18n.spec.js

@@ -0,0 +1,64 @@
+/* eslint-env jest */
+import i18n from '../src/javascripts/lib/i18n'
+
+const mock_en = {
+  'one': 'the first translation',
+  'two.one': 'the second for: {{name}}',
+  'two.two': 'the second for: {{name}}-{{other}}',
+  'three.one.one': 'the {{name}} for {{name}} should be {{name}}'
+}
+
+jest.mock('../src/translations/en', () => {
+  return mock_en
+})
+
+jest.mock('../src/translations/fr', () => {
+  throw new Error('no such file')
+})
+
+describe('i18n', () => {
+  beforeAll(() => {
+    i18n.loadTranslations('en')
+  })
+
+  describe('#tryRequire', () => {
+    it('returns a json if the file exists', () => {
+      const result = i18n.tryRequire('en')
+      expect(result).toBe(mock_en)
+    })
+
+    it('returns null if the file doesn\'t exist', () => {
+      const result = i18n.tryRequire('fr')
+      expect(result).toBe(null)
+    })
+  })
+
+  describe('#t', () => {
+    it('returns a string', () => {
+      const result = i18n.t('one')
+      expect(result).toBe('the first translation')
+    })
+
+    it('interpolates one string', () => {
+      const result = i18n.t('two.one', {
+        name: 'olaf'
+      })
+      expect(result).toBe('the second for: olaf')
+    })
+
+    it('interpolates multiple strings', () => {
+      const result = i18n.t('two.two', {
+        name: 'olaf',
+        other: 'test'
+      })
+      expect(result).toBe('the second for: olaf-test')
+    })
+
+    it('interpolates duplicates strings', () => {
+      const result = i18n.t('three.one.one', {
+        name: 'olaf'
+      })
+      expect(result).toBe('the olaf for olaf should be olaf')
+    })
+  })
+})

src/javascripts/lib/i18n.js

@@ -1,7 +1,5 @@
 import manifest from '../../manifest.json'
 
-const defaultLocale = manifest.defaultLocale || 'en'
-
 // map to store the key/translation pairs of the loaded language
 let translations
 
@@ -21,25 +19,25 @@ function parsePlaceholders (str, context) {
     if (match) matches.push(match)
   } while (match)
 
-  return matches.reduce(
-    (str, match) => {
-      const newRegex = new RegExp(match[0], 'g')
-      str = str.replace(newRegex, context[match[1]])
-
-      return str
-    },
-    str
-  )
+  return matches.reduce((str, match) => {
+    const newRegex = new RegExp(match[0], 'g')
+    str = str.replace(newRegex, context[match[1]])
+    return str
+  }, str)
 }
 
-const I18n = {
-  tryRequire: function (locale) {
+class I18n {
+  constructor (locale = 'en') {
+    this.loadTranslations(locale)
+  }
+
+  tryRequire (locale) {
     try {
       return require(`../../translations/${locale}.json`)
     } catch (e) {
       return null
     }
-  },
+  }
 
   /**
    * Translate key with currently loaded translations,
@@ -48,8 +46,8 @@ const I18n = {
    * @param {Object} context object contains placeholder/value pairs
    * @return {String} tranlated string
    */
-  t: function (key, context) {
-    if (!translations) throw new Error('Translations must be initialized with I18n.loadTranslations before calling `t`.')
+  t (key, context) {
+    if (!translations) throw new Error('Translations must be initialized with i18n.loadTranslations before calling `t`.')
 
     const keyType = typeof key
     if (keyType !== 'string') throw new Error(`Translation key must be a string, got: ${keyType}`)
@@ -59,16 +57,12 @@ const I18n = {
     if (typeof template !== 'string') throw new Error(`Invalid translation for key: ${key}`)
 
     return parsePlaceholders(template, context)
-  },
-
-  loadTranslations: function (locale) {
-    translations = I18n.tryRequire(locale) ||
-      I18n.tryRequire(locale.replace(/-.+$/, '')) || // e.g. fallback `en-US` to `en`
-      I18n.tryRequire(defaultLocale) ||
-      {}
+  }
 
-    return translations
+  loadTranslations (locale) {
+    const newTranslations = this.tryRequire(locale) || this.tryRequire(locale.replace(/-.+$/, ''))
+    if (newTranslations) translations = newTranslations
   }
 }
 
-export default I18n
+export default new I18n(manifest.defaultLocale)

src/manifest.json

@@ -9,7 +9,9 @@
   "private": true,
   "location": {
     "support": {
-      "ticket_sidebar": "assets/iframe.html"
+      "ticket_sidebar": {
+        "url": "assets/iframe.html"
+      }
     }
   },
   "version": "1.0",