Use messageformat to support pluralization in translations

Victor Costa
1 parent 833e19f2
Showing 9 changed files with 72 additions and 45 deletions Show diff stats
bower.json
gulp/build.js
src/app/components/language-selector/language-selector.component.spec.ts
src/app/components/language-selector/language-selector.component.ts
src/app/components/noosfero-activities/activity/new_friendship.html
src/app/index.config.ts
src/languages/en.json
src/languages/pt.json
src/spec/mocks.ts
@@ -33,7 +33,8 @@
     "angular-translate-handler-log": "^2.10.0",
     "angular-dynamic-locale": "^0.1.30",
     "angular-i18n": "^1.5.0",
-    "angular-load": "^0.4.1"
+    "angular-load": "^0.4.1",
+    "angular-translate-interpolation-messageformat": "^2.10.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -48,6 +48,7 @@ gulp.task(&#39;html&#39;, [&#39;inject&#39;, &#39;partials&#39;], function () {
     .pipe($.replace('/languages/', noosferoThemePrefix + 'languages/'))
     .pipe($.replace('bower_components/angular-i18n/', noosferoThemePrefix + 'locale/angular-i18n/'))
     .pipe($.replace('bower_components/moment/', noosferoThemePrefix + 'locale/moment/'))
+    .pipe($.replace('bower_components/messageformat/', noosferoThemePrefix + 'locale/messageformat/'))
     .pipe($.sourcemaps.init())
     .pipe($.ngAnnotate())
     .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
@@ -88,6 +89,7 @@ gulp.task(&#39;locale&#39;, function () {
   return gulp.src([
     path.join("bower_components/angular-i18n", '*.js'),
     path.join("bower_components/moment/locale", '*.js'),
+    path.join("bower_components/messageformat/locale", '*.js'),
   ], {base: 'bower_components/'})
     .pipe(gulp.dest(path.join(conf.paths.dist, '/locale/')));
 });
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {provide} from 'ng-forward';
 import {LanguageSelector} from './language-selector.component';
 import * as helpers from "../../../spec/helpers";
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<language-selector></language-selector>';
-
 describe("Components", () => {
     describe("Language Selector Component", () => {
         beforeEach(angular.mock.module("templates"));
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [LanguageSelector],
-            providers: [
-                provide('$translate', {
-                    useValue: helpers.mocks.$translate
-                }),
-                provide('tmhDynamicLocale', {
-                    useValue: helpers.mocks.tmhDynamicLocale
-                }),
-                provide('amMoment', {
-                    useValue: helpers.mocks.amMoment
-                }),
-                provide('angularLoad', {
-                    useValue: helpers.mocks.angularLoad
-                })
-            ].concat(helpers.provideFilters("translateFilter"))
-        })
-        class BlockContainerComponent { }
-
-        it("set available languages when change language", () => {
+        let buildComponent = (): Promise<ComponentFixture> => {
+            return helpers.quickCreateComponent({
+                template: "<language-selector></language-selector>",
+                directives: [LanguageSelector],
+                providers: [
+                    provide('$translate', {
+                        useValue: helpers.mocks.$translate
+                    }),
+                    provide('tmhDynamicLocale', {
+                        useValue: helpers.mocks.tmhDynamicLocale
+                    }),
+                    provide('amMoment', {
+                        useValue: helpers.mocks.amMoment
+                    }),
+                    provide('angularLoad', {
+                        useValue: helpers.mocks.angularLoad
+                    })
+                ].concat(helpers.provideFilters("translateFilter"))
+            });
+        }
+
+        it("set available languages when change language", (done) => {
             let component: LanguageSelector = new LanguageSelector(
                 <any>helpers.mocks.$translate,
                 <any>helpers.mocks.tmhDynamicLocale,
@@ -47,11 +43,35 @@ describe(&quot;Components&quot;, () =&gt; {
             expect(component.availableLanguages).toBeNull();
             component.changeLanguage('en');
             expect(component.availableLanguages).toBeDefined();
+            done();
         });
-        it("display language options", () => {
-            helpers.createComponentFromClass(BlockContainerComponent).then(fixture => {
+        it("display language options", (done) => {
+            buildComponent().then(fixture => {
                 expect(fixture.debugElement.queryAll('li.language').length).toEqual(2);
+                done();
+            });
+        });
+
+        it("change the language", (done) => {
+            buildComponent().then(fixture => {
+                let component: LanguageSelector = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let $q = fixture.debugElement.getLocal("$q");
+                let loadScripPromise = $q.defer();
+                loadScripPromise.resolve();
+                component["angularLoad"].loadScript = jasmine.createSpy("loadScript").and.returnValue(loadScripPromise.promise);
+                component["tmhDynamicLocale"].set = jasmine.createSpy("set");
+                component["tmhDynamicLocale"].get = jasmine.createSpy("get").and.returnValue("en");
+                component["$translate"].use = jasmine.createSpy("use");
+
+                component.changeLanguage('pt');
+                fixture.debugElement.getLocal("$rootScope").$digest();
+
+                expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/moment/locale/pt.js");
+                expect(component["angularLoad"].loadScript).toHaveBeenCalledWith("/bower_components/messageformat/locale/pt.js");
+                expect(component["tmhDynamicLocale"].set).toHaveBeenCalledWith("pt");
+                expect(component["$translate"].use).toHaveBeenCalledWith("pt");
+                done();
             });
         });
@@ -14,6 +14,7 @@ export class LanguageSelector {
         private amMoment: any,
         private angularLoad: any) {
+        this.configAvailableLanguages();
         this.changeLanguage(tmhDynamicLocale.get() || $translate.use());
     }
@@ -24,14 +25,20 @@ export class LanguageSelector {
     changeLanguage(language: string) {
         this.changeMomentLocale(language);
         this.tmhDynamicLocale.set(language);
-        this.$translate.use(language).then((lang) => {
-            this.availableLanguages = {
-                "en": this.$translate.instant("language.en"),
-                "pt": this.$translate.instant("language.pt")
-            };
+        this.angularLoad.loadScript(`/bower_components/messageformat/locale/${language}.js`).then(() => {
+            return this.$translate.use(language);
+        }).then(() => {
+            this.configAvailableLanguages();
         });
     }
+    private configAvailableLanguages() {
+        this.availableLanguages = {
+            "en": this.$translate.instant("language.en"),
+            "pt": this.$translate.instant("language.pt")
+        };
+    }
+
     private changeMomentLocale(language: string) {
         let localePromise = Promise.resolve();
         if (language != "en") {
@@ -5,7 +5,7 @@
   <timeline-heading>
     <h4 class="timeline-title">
       <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
-      <span> {{"activities.new_friendship.description" | translate:{friends: ctrl.activity.params.friend_name.length} }} </span>
+      <span> {{"activities.new_friendship.description" | translate:{friends: ctrl.activity.params.friend_name.length}:"messageformat" }} </span>
       <span class="comma-separated">
         <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
           <strong ng-bind="friend"></strong>
@@ -29,6 +29,7 @@ function configTranslation($translateProvider: angular.translate.ITranslateProvi
         prefix: '/languages/',
         suffix: '.json'
     });
+    $translateProvider.addInterpolation('$translateMessageFormatInterpolation');
     $translateProvider.useMissingTranslationHandlerLog();
     $translateProvider.preferredLanguage('en');
     $translateProvider.useSanitizeValueStrategy('escape');
@@ -12,7 +12,7 @@
   "profile.wall": "Profile Wall",
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
-  "activities.new_friendship.description": "has made {{friends}} new friend(s):",
+  "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
   "auth.title": "Login",
   "auth.form.login": "Login / Email address",
   "auth.form.password": "Password",
@@ -12,7 +12,7 @@
   "profile.wall": "Mural do Perfil",
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
-  "activities.new_friendship.description": "fez {{friends}} novo(s) amigo(s):",
+  "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
   "auth.title": "Login",
   "auth.form.login": "Login / Email",
   "auth.form.password": "Senha",
@@ -45,9 +45,7 @@ export var mocks = {
     },
     $translate: {
         use: (lang?: string) => {
-            return {
-                then: (func?: any) => { if (func) func() }
-            }
+            return lang ? Promise.resolve(lang) : "en";
         },
         instant: () => { }
     },
@@ -60,9 +58,7 @@ export var mocks = {
     },
     angularLoad: {
         loadScript: (script?: string) => {
-            return {
-                then: (func?: any) => { if (func) func() }
-            }
+            return Promise.resolve();
         }
     }
 };
	@@ -5,7 +5,7 @@		@@ -5,7 +5,7 @@
5	<timeline-heading>	5	<timeline-heading>
6	<h4 class="timeline-title">	6	<h4 class="timeline-title">
7	<a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>	7	<a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
8	- <span> {{"activities.new_friendship.description" \| translate:{friends: ctrl.activity.params.friend_name.length} }} </span>	8	+ <span> {{"activities.new_friendship.description" \| translate:{friends: ctrl.activity.params.friend_name.length}:"messageformat" }} </span>
9	<span class="comma-separated">	9	<span class="comma-separated">
10	<a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">	10	<a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
11	<strong ng-bind="friend"></strong>	11	<strong ng-bind="friend"></strong>
	@@ -12,7 +12,7 @@		@@ -12,7 +12,7 @@
12	"profile.wall": "Profile Wall",	12	"profile.wall": "Profile Wall",
13	"activities.create_article.description": "has published on",	13	"activities.create_article.description": "has published on",
14	"activities.add_member_in_community.description": "has joined the community",	14	"activities.add_member_in_community.description": "has joined the community",
15	- "activities.new_friendship.description": "has made {{friends}} new friend(s):",	15	+ "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
16	"auth.title": "Login",	16	"auth.title": "Login",
17	"auth.form.login": "Login / Email address",	17	"auth.form.login": "Login / Email address",
18	"auth.form.password": "Password",	18	"auth.form.password": "Password",
	@@ -12,7 +12,7 @@		@@ -12,7 +12,7 @@
12	"profile.wall": "Mural do Perfil",	12	"profile.wall": "Mural do Perfil",
13	"activities.create_article.description": "publicou em",	13	"activities.create_article.description": "publicou em",
14	"activities.add_member_in_community.description": "entrou na comunidade",	14	"activities.add_member_in_community.description": "entrou na comunidade",
15	- "activities.new_friendship.description": "fez {{friends}} novo(s) amigo(s):",	15	+ "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
16	"auth.title": "Login",	16	"auth.title": "Login",
17	"auth.form.login": "Login / Email",	17	"auth.form.login": "Login / Email",
18	"auth.form.password": "Senha",	18	"auth.form.password": "Senha",