Translation code fixes

app/localization.js

@@ -16,13 +16,19 @@ export class Localizer {
         this.language = 'en';
 
         // Current dictionary of translations
-        this.dictionary = undefined;
+        this._dictionary = undefined;
     }
 
     // Configure suitable language based on user preferences
-    setup(supportedLanguages) {
+    async setup(supportedLanguages, baseURL) {
         this.language = 'en'; // Default: US English
+        this._dictionary = undefined;
 
+        this._setupLanguage(supportedLanguages);
+        await this._setupDictionary(baseURL);
+    }
+
+    _setupLanguage(supportedLanguages) {
         /*
          * Navigator.languages only available in Chrome (32+) and FireFox (32+)
          * Fall back to navigator.language for other browsers
@@ -40,12 +46,6 @@ export class Localizer {
                 .replace("_", "-")
                 .split("-");
 
-            // Built-in default?
-            if ((userLang[0] === 'en') &&
-                ((userLang[1] === undefined) || (userLang[1] === 'us'))) {
-                return;
-            }
-
             // First pass: perfect match
             for (let j = 0; j < supportedLanguages.length; j++) {
                 const supLang = supportedLanguages[j]
@@ -64,7 +64,12 @@ export class Localizer {
                 return;
             }
 
-            // Second pass: fallback
+            // Second pass: English fallback
+            if (userLang[0] === 'en') {
+                return;
+            }
+
+            // Third pass pass: other fallback
             for (let j = 0;j < supportedLanguages.length;j++) {
                 const supLang = supportedLanguages[j]
                     .toLowerCase()
@@ -84,10 +89,32 @@ export class Localizer {
         }
     }
 
+    async _setupDictionary(baseURL) {
+        if (baseURL) {
+            if (!baseURL.endsWith("/")) {
+                baseURL = baseURL + "/";
+            }
+        } else {
+            baseURL = "";
+        }
+
+        if (this.language === "en") {
+            return;
+        }
+
+        let response = await fetch(baseURL + this.language + ".json");
+        if (!response.ok) {
+            throw Error("" + response.status + " " + response.statusText);
+        }
+
+        this._dictionary = await response.json();
+    }
+
     // Retrieve localised text
     get(id) {
-        if (typeof this.dictionary !== 'undefined' && this.dictionary[id]) {
-            return this.dictionary[id];
+        if (typeof this._dictionary !== 'undefined' &&
+            this._dictionary[id]) {
+            return this._dictionary[id];
         } else {
             return id;
         }

app/ui.js

@@ -1762,21 +1762,9 @@ const UI = {
 };
 
 // Set up translations
-const LINGUAS = ["cs", "de", "el", "en", "es", "fr", "it", "ja", "ko", "nl", "pl", "pt_BR", "ru", "sv", "tr", "zh_CN", "zh_TW"];
-l10n.setup(LINGUAS);
-if (l10n.language === "en" || l10n.dictionary !== undefined) {
-    UI.prime();
-} else {
-    fetch('app/locale/' + l10n.language + '.json')
-        .then((response) => {
-            if (!response.ok) {
-                throw Error("" + response.status + " " + response.statusText);
-            }
-            return response.json();
-        })
-        .then((translations) => { l10n.dictionary = translations; })
-        .catch(err => Log.Error("Failed to load translations: " + err))
-        .then(UI.prime);
-}
+const LINGUAS = ["cs", "de", "el", "es", "fr", "it", "ja", "ko", "nl", "pl", "pt_BR", "ru", "sv", "tr", "zh_CN", "zh_TW"];
+l10n.setup(LINGUAS, "app/locale/")
+    .catch(err => Log.Error("Failed to load translations: " + err))
+    .then(UI.prime);
 
 export default UI;

tests/test.localization.js

@@ -1,61 +1,146 @@
 const expect = chai.expect;
-import { l10n } from '../app/localization.js';
+import _, { Localizer, l10n } from '../app/localization.js';
 
 describe('Localization', function () {
     "use strict";
 
-    describe('language selection', function () {
-        let origNavigator;
-        beforeEach(function () {
-            // window.navigator is a protected read-only property in many
-            // environments, so we need to redefine it whilst running these
-            // tests.
-            origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
-
-            Object.defineProperty(window, "navigator", {value: {}});
-            window.navigator.languages = [];
+    let origNavigator;
+    let fetch;
+
+    beforeEach(function () {
+        // window.navigator is a protected read-only property in many
+        // environments, so we need to redefine it whilst running these
+        // tests.
+        origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+
+        Object.defineProperty(window, "navigator", {value: {}});
+        window.navigator.languages = [];
+
+        fetch = sinon.stub(window, "fetch");
+        fetch.resolves(new Response("{}"));
+    });
+    afterEach(function () {
+        fetch.restore();
+
+        Object.defineProperty(window, "navigator", origNavigator);
+    });
+
+    describe('Singleton', function () {
+        it('should export a singleton object', function () {
+            expect(l10n).to.be.instanceOf(Localizer);
         });
-        afterEach(function () {
-            Object.defineProperty(window, "navigator", origNavigator);
+        it('should export a singleton translation function', async function () {
+            // FIXME: Can we use some spy instead?
+            window.navigator.languages = ["de"];
+            fetch.resolves(new Response(JSON.stringify({ "Foobar": "gazonk" })));
+            await l10n.setup(["de"]);
+            expect(_("Foobar")).to.equal("gazonk");
         });
+    });
 
+    describe('language selection', function () {
         it('should use English by default', function () {
-            expect(l10n.language).to.equal('en');
+            let lclz = new Localizer();
+            expect(lclz.language).to.equal('en');
         });
-        it('should use English if no user language matches', function () {
+        it('should use English if no user language matches', async function () {
             window.navigator.languages = ["nl", "de"];
-            l10n.setup(["es", "fr"]);
-            expect(l10n.language).to.equal('en');
+            let lclz = new Localizer();
+            await lclz.setup(["es", "fr"]);
+            expect(lclz.language).to.equal('en');
         });
-        it('should use the most preferred user language', function () {
+        it('should fall back to generic English for other English', async function () {
+            window.navigator.languages = ["en-AU", "de"];
+            let lclz = new Localizer();
+            await lclz.setup(["de", "fr", "en-GB"]);
+            expect(lclz.language).to.equal('en');
+        });
+        it('should prefer specific English over generic', async function () {
+            window.navigator.languages = ["en-GB", "de"];
+            let lclz = new Localizer();
+            await lclz.setup(["de", "en-AU", "en-GB"]);
+            expect(lclz.language).to.equal('en-GB');
+        });
+        it('should use the most preferred user language', async function () {
             window.navigator.languages = ["nl", "de", "fr"];
-            l10n.setup(["es", "fr", "de"]);
-            expect(l10n.language).to.equal('de');
+            let lclz = new Localizer();
+            await lclz.setup(["es", "fr", "de"]);
+            expect(lclz.language).to.equal('de');
         });
-        it('should prefer sub-languages languages', function () {
+        it('should prefer sub-languages languages', async function () {
             window.navigator.languages = ["pt-BR"];
-            l10n.setup(["pt", "pt-BR"]);
-            expect(l10n.language).to.equal('pt-BR');
+            let lclz = new Localizer();
+            await lclz.setup(["pt", "pt-BR"]);
+            expect(lclz.language).to.equal('pt-BR');
         });
-        it('should fall back to language "parents"', function () {
+        it('should fall back to language "parents"', async function () {
             window.navigator.languages = ["pt-BR"];
-            l10n.setup(["fr", "pt", "de"]);
-            expect(l10n.language).to.equal('pt');
+            let lclz = new Localizer();
+            await lclz.setup(["fr", "pt", "de"]);
+            expect(lclz.language).to.equal('pt');
         });
-        it('should not use specific language when user asks for a generic language', function () {
+        it('should not use specific language when user asks for a generic language', async function () {
             window.navigator.languages = ["pt", "de"];
-            l10n.setup(["fr", "pt-BR", "de"]);
-            expect(l10n.language).to.equal('de');
+            let lclz = new Localizer();
+            await lclz.setup(["fr", "pt-BR", "de"]);
+            expect(lclz.language).to.equal('de');
         });
-        it('should handle underscore as a separator', function () {
+        it('should handle underscore as a separator', async function () {
             window.navigator.languages = ["pt-BR"];
-            l10n.setup(["pt_BR"]);
-            expect(l10n.language).to.equal('pt_BR');
+            let lclz = new Localizer();
+            await lclz.setup(["pt_BR"]);
+            expect(lclz.language).to.equal('pt_BR');
         });
-        it('should handle difference in case', function () {
+        it('should handle difference in case', async function () {
             window.navigator.languages = ["pt-br"];
-            l10n.setup(["pt-BR"]);
-            expect(l10n.language).to.equal('pt-BR');
+            let lclz = new Localizer();
+            await lclz.setup(["pt-BR"]);
+            expect(lclz.language).to.equal('pt-BR');
+        });
+    });
+
+    describe('Translation loading', function () {
+        it('should not fetch a translation for English', async function () {
+            window.navigator.languages = [];
+            let lclz = new Localizer();
+            await lclz.setup([]);
+            expect(fetch).to.not.have.been.called;
+        });
+        it('should fetch dictionary relative base URL', async function () {
+            window.navigator.languages = ["de", "fr"];
+            fetch.resolves(new Response('{ "Foobar": "gazonk" }'));
+            let lclz = new Localizer();
+            await lclz.setup(["ru", "fr"], "/some/path/");
+            expect(fetch).to.have.been.calledOnceWith("/some/path/fr.json");
+            expect(lclz.get("Foobar")).to.equal("gazonk");
+        });
+        it('should handle base URL without trailing slash', async function () {
+            window.navigator.languages = ["de", "fr"];
+            fetch.resolves(new Response('{ "Foobar": "gazonk" }'));
+            let lclz = new Localizer();
+            await lclz.setup(["ru", "fr"], "/some/path");
+            expect(fetch).to.have.been.calledOnceWith("/some/path/fr.json");
+            expect(lclz.get("Foobar")).to.equal("gazonk");
+        });
+        it('should handle current base URL', async function () {
+            window.navigator.languages = ["de", "fr"];
+            fetch.resolves(new Response('{ "Foobar": "gazonk" }'));
+            let lclz = new Localizer();
+            await lclz.setup(["ru", "fr"]);
+            expect(fetch).to.have.been.calledOnceWith("fr.json");
+            expect(lclz.get("Foobar")).to.equal("gazonk");
+        });
+        it('should fail if dictionary cannot be found', async function () {
+            window.navigator.languages = ["de", "fr"];
+            fetch.resolves(new Response('{}', { status: 404 }));
+            let lclz = new Localizer();
+            let ok = false;
+            try {
+                await lclz.setup(["ru", "fr"], "/some/path/");
+            } catch (e) {
+                ok = true;
+            }
+            expect(ok).to.be.true;
         });
     });
 });