[ADF-3028] i18n support for title service (#3342)

* i18n support for title service

* cleanup tests

* update tests

demo-shell/src/app/app.component.ts

@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { SettingsService, PageTitleService, StorageService } from '@alfresco/adf-core';
-import { SettingsService, PageTitleService, StorageService, TranslationService } from '@alfresco/adf-core';
 
 @Component({
   selector: 'app-root',
@@ -25,15 +24,17 @@ import { SettingsService, PageTitleService, StorageService, TranslationService }
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
-  constructor(private settingsService: SettingsService,
+    constructor(private settingsService: SettingsService,
-              private storage: StorageService,
+                private storage: StorageService,
-              translationService: TranslationService,
+                private pageTitleService: PageTitleService) {
-              pageTitleService: PageTitleService,
+    }
-              route: ActivatedRoute) {
+
+  ngOnInit() {
     this.setProvider();
-    pageTitleService.setTitle();
+
+    this.pageTitleService.setTitle('title');
   }
 
   private setProvider() {

lib/content-services/upload/components/base-upload/upload-base.spec.ts

@@ -26,7 +26,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
     selector: 'adf-upload-button-test',
     template: 'test componente'
 })
-
 export class UploadTestComponent extends UploadBase {
 
     constructor(protected uploadService: UploadService,
@@ -234,7 +233,7 @@ describe('UploadBase', () => {
             addToQueueSpy = spyOn(uploadService, 'addToQueue');
         });
 
-        it('should be a mahor version upload if majorVersion is true', () => {
+        it('should be a major version upload if majorVersion is true', () => {
             component.majorVersion = true;
             component.versioning = true;
 
@@ -250,7 +249,7 @@ describe('UploadBase', () => {
             }));
         });
 
-        it('should not  be a mahor version upload if majorVersion is false', () => {
+        it('should not  be a major version upload if majorVersion is false', () => {
             component.majorVersion = false;
             component.versioning = true;
 

lib/content-services/upload/components/upload-button.component.spec.ts

@@ -20,7 +20,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContentService, UploadService, TranslationService, setupTestBed, CoreModule } from '@alfresco/adf-core';
 import { Observable } from 'rxjs/Observable';
 import { UploadButtonComponent } from './upload-button.component';
-import { TranslationMock, PermissionsEnum } from '@alfresco/adf-core';
+import { TranslationMock } from '@alfresco/adf-core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('UploadButtonComponent', () => {

lib/core/mock/translation.service.mock.ts

@@ -28,9 +28,9 @@ export class TranslationMock {
     defaultLang: string = 'en';
     userLang: string;
     customLoader: any;
-    translate: any;
+    translate = {
-
+        onLangChange: new EventEmitter<LangChangeEvent>()
-    onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+    };
 
     addTranslationFolder() {
 

lib/core/services/page-title.service.spec.ts

@@ -20,6 +20,9 @@ import { Title } from '@angular/platform-browser';
 
 import { AppConfigService } from '../app-config/app-config.service';
 import { PageTitleService } from './page-title.service';
+import { CoreTestingModule } from '../testing/core.testing.module';
+import { TranslationService } from './translation.service';
+import { TranslationMock } from '../mock/translation.service.mock';
 
 class TestConfig {
     private setup: any = {
@@ -28,6 +31,7 @@ class TestConfig {
 
     titleService: Title = null;
     appTitleService: PageTitleService = null;
+    translationService: TranslationService;
 
     constructor(setup: any = {}) {
         Object.assign(this.setup, setup);
@@ -53,48 +57,69 @@ class TestConfig {
         };
 
         TestBed.configureTestingModule({
+            imports: [
+                CoreTestingModule
+            ],
             providers: [
                 titleServiceProvider,
                 appConfigProvider,
-                PageTitleService
+                PageTitleService,
+                {
+                    provide: TranslationService,
+                    useClass: TranslationMock
+                }
             ]
         });
 
-        inject([ Title, PageTitleService ], (titleService, appTitleService) => {
+        inject([ Title, PageTitleService, TranslationService ], (titleService, appTitleService, translationService) => {
             this.titleService = titleService;
             this.appTitleService = appTitleService;
+            this.translationService = translationService;
         })();
     }
 }
 
 describe('AppTitle service', () => {
-    it('sets default application name', () => {
+    it('should set default application name', () => {
         const { appTitleService, titleService } = new TestConfig({
             applicationName: undefined
         });
 
         appTitleService.setTitle();
-        expect(titleService.setTitle)
+        expect(titleService.setTitle).toHaveBeenCalledWith('Alfresco ADF Application');
-            .toHaveBeenCalledWith('Alfresco ADF Application');
     });
 
-    it('sets only the application name', () => {
+    it('should set only the application name', () => {
         const { appTitleService, titleService } = new TestConfig({
             applicationName: 'My application'
         });
 
         appTitleService.setTitle();
-        expect(titleService.setTitle)
+        expect(titleService.setTitle).toHaveBeenCalledWith('My application');
-            .toHaveBeenCalledWith('My application');
     });
 
-    it('appends application name to the title', () => {
+    it('should append application name to the title', () => {
         const { appTitleService, titleService } = new TestConfig({
             applicationName: 'My application'
         });
 
         appTitleService.setTitle('My page');
-        expect(titleService.setTitle)
+        expect(titleService.setTitle).toHaveBeenCalledWith('My page - My application');
-            .toHaveBeenCalledWith('My page - My application');
+    });
+
+    it('should update title on language change', () => {
+        const { appTitleService, titleService, translationService } = new TestConfig({
+            applicationName: 'My application'
+        });
+
+        spyOn(translationService, 'instant').and.returnValues('hello', 'привет');
+
+        appTitleService.setTitle('key');
+        expect(titleService.setTitle).toHaveBeenCalledWith('hello - My application');
+
+        (<any> titleService).setTitle.calls.reset();
+
+        translationService.translate.onLangChange.next(<any> {});
+        expect(titleService.setTitle).toHaveBeenCalledWith('привет - My application');
     });
 });

lib/core/services/page-title.service.ts

@@ -18,22 +18,41 @@
 import { Injectable } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { AppConfigService } from '../app-config/app-config.service';
+import { TranslationService } from './translation.service';
 
 @Injectable()
 export class PageTitleService {
 
+    private originalTitle: string = '';
+    private translatedTitle: string = '';
+
     constructor(
         private titleService: Title,
-        private appConfig: AppConfigService) {}
+        private appConfig: AppConfigService,
+        private translationService: TranslationService) {
+        translationService.translate.onLangChange.subscribe(() => this.onLanguageChanged());
+    }
 
     /**
      * Sets the page title.
      * @param value The new title
      */
     setTitle(value: string = '') {
-        const name = this.appConfig.get('application.name') || 'Alfresco ADF Application';
+        this.originalTitle = value;
-        const title = value ? `${value} - ${name}` : `${name}`;
+        this.translatedTitle = this.translationService.instant(value);
 
+        this.updateTitle();
+    }
+
+    private onLanguageChanged() {
+        this.translatedTitle = this.translationService.instant(this.originalTitle);
+        this.updateTitle();
+    }
+
+    private updateTitle() {
+        const name = this.appConfig.get('application.name') || 'Alfresco ADF Application';
+
+        const title = this.translatedTitle ? `${this.translatedTitle} - ${name}` : `${name}`;
         this.titleService.setTitle(title);
     }
 }