From 5dd82dca25fb06cc8bf19fa89cf28ff996b2b0c2 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 8 Nov 2016 15:52:10 +0000
Subject: [PATCH] Improved test for component and added translation

---
 .../ng2-alfresco-userinfo/karma.conf.js       |  14 +-
 .../src/assets/translation.service.mock.ts    |  37 ++
 .../src/components/user-info.component.html   |  53 +-
 .../components/user-info.component.spec.ts    | 515 ++++++++++--------
 .../src/components/user-info.component.ts     |   8 +-
 .../ng2-alfresco-userinfo/src/i18n/en.json    |  13 +
 .../ng2-alfresco-userinfo/src/i18n/it.json    |  12 +
 .../src/services/bpm-user.service.spec.ts     |  25 +-
 .../src/services/ecm-user.service.spec.ts     |  14 +-
 .../src/services/ecm-user.service.ts          |   7 +-
 10 files changed, 426 insertions(+), 272 deletions(-)
 create mode 100644 ng2-components/ng2-alfresco-userinfo/src/assets/translation.service.mock.ts
 create mode 100644 ng2-components/ng2-alfresco-userinfo/src/i18n/en.json
 create mode 100644 ng2-components/ng2-alfresco-userinfo/src/i18n/it.json

diff --git a/ng2-components/ng2-alfresco-userinfo/karma.conf.js b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
index 2b805693c3..3558dce80d 100644
--- a/ng2-components/ng2-alfresco-userinfo/karma.conf.js
+++ b/ng2-components/ng2-alfresco-userinfo/karma.conf.js
@@ -24,8 +24,8 @@ module.exports = function (config) {
       'node_modules/zone.js/dist/fake-async-test.js',
 
       // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false},
 
       // Paths loaded via module imports:
       // Angular itself
@@ -44,11 +44,13 @@ module.exports = function (config) {
       {pattern: 'dist/**/*.css', included: true, served: true, watched: true},
 
       // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false },
+      {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
       // Fake files
-      { pattern: 'src/assets/ecmImg.gif', included: false, watched: true, served: true },
-      { pattern: 'src/assets/bpmImg.gif', included: false, watched: true, served: true },
-      { pattern: 'src/img/anonymous.gif', included: false, watched: true, served: true },
+      {pattern: 'src/assets/ecmImg.gif', included: false, watched: true, served: true},
+      {pattern: 'src/assets/bpmImg.gif', included: false, watched: true, served: true},
+      {pattern: 'src/img/anonymous.gif', included: false, watched: true, served: true},
+      {pattern: 'src/img/blueBanner.png', included: false, watched: true, served: true},
+      {pattern: 'src/img/orangeBanner.png', included: false, watched: true, served: true},
 
       // paths to support debugging with source maps in dev tools
       {pattern: 'src/**/*.ts', included: false, watched: false},
diff --git a/ng2-components/ng2-alfresco-userinfo/src/assets/translation.service.mock.ts b/ng2-components/ng2-alfresco-userinfo/src/assets/translation.service.mock.ts
new file mode 100644
index 0000000000..3ddf9a9050
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/src/assets/translation.service.mock.ts
@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Observable } from 'rxjs/Rx';
+import { EventEmitter } from '@angular/core';
+
+export interface LangChangeEvent {
+    lang: string;
+    translations: any;
+}
+
+export class TranslationMock {
+
+    public onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+
+    addTranslationFolder() {
+
+    }
+
+    public get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
+        return Observable.of(key);
+    }
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
index 2e17fc6186..b58e6b22c9 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
@@ -1,66 +1,73 @@
 <div id="userinfo_container">
-    <div class="button-profile" id="user-profile" data-automation-id="user-profile">
+    <div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
         <img id="logged-user-img"
              [src]="getUserAvatar()"
+             alt="user-info-profile-button"
              (error)="onImageLoadingError($event)"
              class="profile-image"/>
     </div>
-    <div id="user-profile-lists" class="user-profile-list-mdl
+    <div *ngIf="ecmUser || bpmUser" id="user-profile-lists" class="user-profile-list-mdl
                 mdl-menu mdl-menu--bottom-right
                 mdl-js-menu mdl-js-ripple-effect"
          for="user-profile" (click)="stopClosing($event)">
         <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
-            <div class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
-                <a href="#ecm-panel" class="mdl-tabs__tab is-active">ECM</a>
-                <a href="#bpm-panel" class="mdl-tabs__tab">BPM</a>
+            <div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
+                <a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">ECM</a>
+                <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
             </div>
             <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
                 <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
                     <div class="demo-card-wide mdl-card">
                         <div class="card-title__option mdl-card__title"
+                             id="ecm-background-image"
                              [style.background-image]="'url(' + baseComponentPath + '/../img/orangeBanner.png)'">
                             <img class="profile-picture"
+                                 id="ecm-user-detail-image"
+                                 alt="ecm-profile-image"
                                  (error)="onImageLoadingError($event)"
                                  [src]="getEcmUserAvatar()"/>
-                            <h2 class="mdl-card__title-text">{{getUserNameHeaderFor('ECM')}}</h2>
+                            <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
                         </div>
                         <div class="mdl-card__supporting-text">
                             <li class="mdl-list__item mdl-list__item--two-line">
-                        <span class="mdl-list__item-primary-content">
-                          <span id="ecm-full-name" class="truncate-long-names">
-                              {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
-                          </span>
-                          <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
-                        </span>
-                                <span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                            <span class="role-label-user">Job Title</span>
-                            {{ecmUser.jobTitle}}
-                        </span>
+                                <span class="mdl-list__item-primary-content">
+                                  <span id="ecm-full-name" class="truncate-long-names">
+                                      {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                  </span>
+                                  <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
+                                </span>
+                                <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
+                                    <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
+                                    {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
+                                </span>
                             </li>
                         </div>
                     </div>
                 </div>
             </div>
-            <div  class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
+            <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
                 <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
                     <div class="demo-card-wide mdl-card">
                         <div class="card-title__option mdl-card__title"
+                             id="bpm-background-image"
                              [style.background-image]="'url(' + baseComponentPath + '/../img/blueBanner.png)'">
                             <img class="profile-picture"
+                                 id="bpm-user-detail-image"
+                                 alt="bpm-profile-image"
                                  (error)="onImageLoadingError($event)"
-                                 [src]="getEcmUserAvatar()"/>
-                            <h2 class="mdl-card__title-text">{{getUserNameHeaderFor('BPM')}}</h2>
+                                 [src]="getBpmUserAvatar()"/>
+                            <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
                         </div>
                         <div class="mdl-card__supporting-text">
                             <li class="mdl-list__item mdl-list__item--two-line">
                         <span class="mdl-list__item-primary-content">
-                          <span id="ecm-full-name" class="truncate-long-names">
+                          <span id="bpm-full-name" class="truncate-long-names">
                               {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
                           </span>
-                          <span id="ecm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
+                          <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
                         </span>
-                                <span id="ecm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                            <span class="role-label-user">Job Title</span>
+                                <span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
+                            <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
                             {{bpmUser.tenantName}}
                         </span>
                             </li>
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
index 5c1e383faf..15e1bd0877 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts
@@ -18,47 +18,72 @@
 import { UserInfoComponent } from './user-info.component';
 import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserService } from '../services/bpm-user.service';
-import { FakeEcmUserService } from '../assets/fake-ecm-user.service.mock';
-import { fakeEcmEditedUser } from '../assets/fake-ecm-user.service.mock';
-import { FakeBpmUserService } from '../assets/fake-bpm-user.service.mock';
-import { fakeBpmEditedUser } from '../assets/fake-bpm-user.service.mock';
-import { AlfrescoContentService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+import { BpmUserModel } from '../models/bpm-user.model';
+import { TranslationMock } from '../assets/translation.service.mock';
+import {
+    CoreModule,
+    AlfrescoSettingsService,
+    AlfrescoContentService,
+    AlfrescoTranslationService
+} from 'ng2-alfresco-core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 
-class StubSetting {
-    provider: string;
+declare let jasmine: any;
 
-    setProviders(provider: string) {
-        this.provider = provider;
-    };
-
-    getProviders() {
-        return this.provider;
-    };
-}
-
-class StubAlfrescoContentService {
-    getContentUrl() {
-        return 'fake/url/image/for/ecm/user';
-    };
-}
+const fakeBpmUser: BpmUserModel = <BpmUserModel>{
+    'id': 'fake-id',
+    'firstName': 'fake-bpm-first-name',
+    'lastName': 'fake-bpm-last-name',
+    'created': null,
+    'lastUpdate': null,
+    'latestSyncTimeStamp': null,
+    'email': 'fake-bpm-email',
+    'externalId': null,
+    'company': null,
+    'pictureId': null,
+    'fullname': 'fake-full-name',
+    'password': null,
+    'type': 'enterprise',
+    'status': 'active',
+    'tenantId': '1',
+    'groups': [{
+        'id': 1,
+        'name': 'analytics-users',
+        'externalId': null,
+        'status': 'active',
+        'tenantId': 1,
+        'type': 0,
+        'parentGroupId': null,
+        'lastSyncTimeStamp': null,
+        'userCount': null,
+        'users': null,
+        'capabilities': null,
+        'groups': null,
+        'manager': null
+    }],
+    'capabilities': null,
+    'apps': [],
+    'primaryGroup': null,
+    'tenantPictureId': null,
+    'tenantName': 'fake-tenant-name'
+};
 
 describe('User info component', () => {
 
     let userInfoComp: UserInfoComponent;
     let fixture: ComponentFixture<UserInfoComponent>;
-    let stubSetting: StubSetting;
-    let fakeEcmService: FakeEcmUserService;
-    let fakeBpmService: FakeBpmUserService;
     let element: HTMLElement;
+    let stubSetting: AlfrescoSettingsService;
+    let stubContent: AlfrescoContentService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            imports: [CoreModule],
             declarations: [UserInfoComponent],
-            providers: [{provide: EcmUserService, useClass: FakeEcmUserService},
-                {provide: BpmUserService, useClass: FakeBpmUserService},
-                {provide: AlfrescoSettingsService, useClass: StubSetting},
-                {provide: AlfrescoContentService, useClass: StubAlfrescoContentService}
+            providers: [EcmUserService,
+                BpmUserService,
+                AlfrescoSettingsService,
+                {provide: AlfrescoTranslationService, useClass: TranslationMock}
             ]
         }).compileComponents().then(() => {
             fixture = TestBed.createComponent(UserInfoComponent);
@@ -67,13 +92,17 @@ describe('User info component', () => {
         });
     }));
 
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
     it('should not show any image if the user is not logged in', () => {
         expect(element.querySelector('#userinfo_container')).toBeDefined();
         expect(element.querySelector('#logged-user-img')).toBeNull();
     });
 
     it('should NOT have users immediately after ngOnInit', () => {
-        fixture.detectChanges();
         expect(element.querySelector('#userinfo_container')).toBeDefined();
         expect(element.querySelector('#ecm_username')).toBeNull();
         expect(element.querySelector('#bpm_username')).toBeNull();
@@ -82,174 +111,213 @@ describe('User info component', () => {
 
     it('should format null string values in null value', () => {
         let res = userInfoComp.formatValue('null');
-
         expect(res).toBeDefined();
         expect(res).toBeNull();
     });
 
     it('should return the value when it is not null string', () => {
         let res = userInfoComp.formatValue('fake-value');
-
         expect(res).toBeDefined();
         expect(res).not.toBeNull();
         expect(res).toEqual('fake-value');
     });
 
+    it('should return the anonymous avatar when users do not have images', () => {
+        let event = <any> {
+            target: {
+                src: ''
+            }
+        };
+        userInfoComp.onImageLoadingError(event);
+        expect(event.target.src).toContain('src/img/anonymous.gif');
+    });
+
     describe('when user is logged on ecm', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeEcmService = fixture.debugElement.injector.get(EcmUserService);
+            stubContent = fixture.debugElement.injector.get(AlfrescoContentService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('ECM');
+        });
 
-            stubSetting.setProviders('ECM');
-            fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
+        beforeEach(() => {
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        describe('and has image', () => {
+
+            beforeEach(() => {
+                fixture.detectChanges();
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200,
+                    contentType: 'json',
+                    responseText: {
+                        'entry': {
+                            'id': 'fake-id',
+                            'firstName': 'fake-ecm-first-name',
+                            'lastName': 'fake-ecm-last-name',
+                            'description': 'i am a fake user for test',
+                            'avatarId': 'fake-avatar-id',
+                            'email': 'fakeEcm@ecmUser.com'
+                        }
+                    }
                 });
-        }));
+            });
 
-        it('should get the ecm current user image from the service', () => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#logged-user-img')).toBeDefined();
-            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-        });
-
-        it('should get the ecm user informations from the service', () => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#ecm_username')).toBeDefined();
-            expect(element.querySelector('#ecm_title')).toBeDefined();
-            expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-            expect(element.querySelector('#ecm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#ecm-job-title').innerHTML).toContain('test job');
-        });
-
-        it('should return the anonymous user avatar image url when user does not have avatarId', () => {
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getEcmUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src'))
-                        .toContain('src/img/anonymous.gif');
-                });
-        });
-
-        it('should show N/A when the job title is null', () => {
-            fakeEcmEditedUser.jobTitle = null;
-            fakeEcmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
+            it('should show ecm only last name when user first name is null ', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    userInfoComp.ecmUser.firstName = null;
                     fixture.detectChanges();
                     expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#ecm-job-title')).toBeDefined();
-                    expect(element.querySelector('#ecm-job-title').innerHTML).toContain('N/A');
+                    expect(element.querySelector('#ecm-username')).toBeDefined();
+                    expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
                 });
+            }));
+
+            it('should get the ecm current user image from the service', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    expect(element.querySelector('#logged-user-img')).toBeDefined();
+                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
+                });
+            }));
+
+            it('should get the ecm user informations from the service', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    expect(element.querySelector('#ecm_username')).toBeDefined();
+                    expect(element.querySelector('#ecm_title')).toBeDefined();
+                    expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
+                    expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
+                    expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                    expect(element.querySelector('#ecm-job-title').textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
+                });
+            }));
         });
+
+        describe('and has no image', () => {
+
+            beforeEach(async(() => {
+                userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+                fixture.detectChanges();
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200,
+                    contentType: 'json',
+                    responseText: {
+                        'entry': {
+                            'id': 'fake-id',
+                            'firstName': 'fake-first-name',
+                            'lastName': 'fake-last-name',
+                            'description': 'i am a fake user for test',
+                            'email': 'fakeEcm@ecmUser.com'
+                        }
+                    }
+                });
+            }));
+
+            it('should show N/A when the job title is null', async(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#ecm-job-title')).toBeDefined();
+                expect(element.querySelector('#ecm-job-title').textContent).toContain('N/A');
+            }));
+
+            it('should not show the tabs', () => {
+                fixture.detectChanges();
+                expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+            });
+        });
+
     });
 
     describe('when user is logged on bpm', () => {
 
-        beforeEach(async(() => {
-            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeBpmService = fixture.debugElement.injector.get(BpmUserService);
+        let fakeBpmUserForTest;
 
-            stubSetting.setProviders('BPM');
+        beforeEach(() => {
+            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('BPM');
+            jasmine.Ajax.install();
+            fakeBpmUserForTest = fakeBpmUser;
+        });
+
+        beforeEach(async(() => {
+            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
             fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                });
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeBpmUserForTest
+            });
         }));
 
-        it('should get the bpm current user image from the service', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('should get the bpm current user image from the service', async(() => {
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#logged-user-img')).toBeDefined();
-            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-        });
+            expect(element.querySelector('#logged-user-img').getAttribute('src'))
+                .toContain('activiti-app/app/rest/admin/profile-picture');
 
-        it('should show last name if first name is null', () => {
-            fakeBpmEditedUser.firstName = null;
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm_username')).toBeDefined();
-                    expect(element.querySelector('#bpm_username').innerHTML).toContain('fake-last-name');
-                });
-        });
+        }));
 
-        it('should show full name if first and last name are null', () => {
-            fakeBpmEditedUser.firstName = null;
-            fakeBpmEditedUser.lastName = null;
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm_username')).toBeDefined();
-                    expect(element.querySelector('#bpm_username').innerHTML).toContain('fake-full-name');
-                });
-        });
-
-        it('should not show first name if it is null string', () => {
-            fakeBpmEditedUser.firstName = 'null';
-            fakeBpmEditedUser.lastName = 'fake-last-name';
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name').innerHTML).not.toContain('fake-first-name');
-                    expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-last-name');
-                });
-        });
-
-        it('should not show last name if it is null string', () => {
-            fakeBpmEditedUser.lastName = 'null';
-            fakeBpmEditedUser.firstName = 'fake-first-name';
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name');
-                    expect(element.querySelector('#bpm-full-name').innerHTML).not.toContain('fake-last-name');
-                });
-        });
-
-        it('should get the bpm user informations from the service', () => {
+        it('should show last name if first name is null', async(() => {
+            userInfoComp.bpmUser.firstName = null;
+            fixture.detectChanges();
             expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm_username')).toBeDefined();
-            expect(element.querySelector('#bpm_title')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-            expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#bpm-tenant').innerHTML).toContain('fake-tenant-name');
-        });
+            expect(element.querySelector('#bpm-username')).not.toBeNull();
+            expect(element.querySelector('#bpm-username').textContent).toContain('fake-bpm-last-name');
 
-        it('should return the anonymous user avatar image url when user does not have avatarId', () => {
-            fakeBpmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getBpmUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src'))
-                        .toContain('src/img/anonymous.gif');
-                });
+        }));
+
+        it('should show full name if first and last name are null', async(() => {
+            userInfoComp.bpmUser.firstName = null;
+            userInfoComp.bpmUser.lastName = null;
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-username')).toBeDefined();
+            expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-full-name');
+
+        }));
+
+        it('should not show first name if it is null string', async(() => {
+            userInfoComp.bpmUser.firstName = 'null';
+            userInfoComp.bpmUser.lastName = 'fake-last-name';
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
+            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+        }));
+
+        it('should not show last name if it is null string', async(() => {
+            userInfoComp.bpmUser.firstName = 'fake-first-name';
+            userInfoComp.bpmUser.lastName = 'null';
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
+            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+        }));
+
+        it('should not show the tabs', () => {
+            fixture.detectChanges();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
         });
     });
 
@@ -257,25 +325,56 @@ describe('User info component', () => {
 
         beforeEach(async(() => {
             stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeBpmService = fixture.debugElement.injector.get(BpmUserService);
-            fakeEcmService = fixture.debugElement.injector.get(EcmUserService);
-
-            stubSetting.setProviders('ALL');
-            fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                });
+            stubContent = fixture.debugElement.injector.get(AlfrescoContentService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('ALL');
+            spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            jasmine.Ajax.install();
+            fakeBpmUser.firstName = 'fake-bpm-first-name';
+            fakeBpmUser.lastName = 'fake-bpm-last-name';
         }));
 
+        beforeEach(async(() => {
+            fixture.detectChanges();
+            jasmine.Ajax.requests.first().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: {
+                    'entry': {
+                        'id': 'fake-id',
+                        'firstName': 'fake-ecm-first-name',
+                        'lastName': 'fake-ecm-last-name',
+                        'description': 'i am a fake user for test',
+                        'avatarId': 'fake-ecm-avatar-id',
+                        'email': 'fakeEcm@ecmUser.com',
+                        'jobTitle': 'job-ecm-test'
+                    }
+                }
+            });
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeBpmUser
+            });
+        }));
+
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
         it('should get the bpm user informations from the service', () => {
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#bpm_username')).toBeDefined();
             expect(element.querySelector('#bpm_title')).toBeDefined();
             expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-            expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#bpm-tenant').innerHTML).toContain('fake-tenant-name');
+            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src'))
+                .toContain('app/rest/admin/profile-picture');
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
+            expect(element.querySelector('#bpm-tenant').textContent).toContain('fake-tenant-name');
         });
 
         it('should get the ecm user informations from the service', () => {
@@ -284,53 +383,39 @@ describe('User info component', () => {
             expect(element.querySelector('#ecm_title')).toBeDefined();
             expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
             expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-            expect(element.querySelector('#ecm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#ecm-job-title').innerHTML).toContain('test job');
-        });
-
-        it('should return the anonymous avatar when users do not have images', () => {
-            fakeBpmService.respondWithTheUserWithoutImage();
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('src/img/anonymous.gif');
-                });
+            expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+            expect(element.querySelector('#ecm-job-title').textContent).toContain('job-ecm-test');
         });
 
         it('should show the ecm image if exists', () => {
-            fakeBpmService.respondWithTheUserWithImage();
-            fakeEcmService.respondWithTheUserWithImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-                });
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#logged-user-img')).toBeDefined();
+            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
         });
 
         it('should show the bpm image if ecm does not have it', () => {
-            fakeBpmService.respondWithTheUserWithImage();
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-                });
+            userInfoComp.ecmUserImage = null;
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#logged-user-img')).toBeDefined();
+            expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('rest/admin/profile-picture');
+        });
+
+        it('should show the tabs for the env', () => {
+            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+            expect(element.querySelector('#ecm-tab')).not.toBeNull();
+            expect(element.querySelector('#bpm-tab')).not.toBeNull();
+        });
+
+        it('should not close the menu when a tab is clicked', () => {
+            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+            let bpmTab = <HTMLElement>element.querySelector('#bpm-tab');
+            bpmTab.click();
+            expect(element.querySelector('#user-profile-lists')).not.toBeNull();
         });
     });
 });
diff --git a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
index a32c794c5b..f63787d645 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
@@ -20,7 +20,7 @@ import { EcmUserModel } from './../models/ecm-user.model';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { EcmUserService } from './../services/ecm-user.service';
 import { BpmUserService } from './../services/bpm-user.service';
-import { AlfrescoSettingsService } from 'ng2-alfresco-core';
+import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'ng2-alfresco-userinfo',
@@ -41,7 +41,11 @@ export class UserInfoComponent implements OnInit {
 
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
-                public setting: AlfrescoSettingsService) {
+                public setting: AlfrescoSettingsService,
+                private translate: AlfrescoTranslationService) {
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
+        }
     }
 
     ngOnInit() {
diff --git a/ng2-components/ng2-alfresco-userinfo/src/i18n/en.json b/ng2-components/ng2-alfresco-userinfo/src/i18n/en.json
new file mode 100644
index 0000000000..264b734d28
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/src/i18n/en.json
@@ -0,0 +1,13 @@
+{
+    "USER_PROFILE": {
+        "LABELS": {
+            "ECM": {
+                "JOB_TITLE": "Job Title"
+            },
+            "BPM": {
+                "TENANT": "Tenant"
+            }
+        }
+    }
+}
+
diff --git a/ng2-components/ng2-alfresco-userinfo/src/i18n/it.json b/ng2-components/ng2-alfresco-userinfo/src/i18n/it.json
new file mode 100644
index 0000000000..51092f510b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/src/i18n/it.json
@@ -0,0 +1,12 @@
+{
+    "USER_PROFILE": {
+        "LABELS": {
+            "ECM": {
+                "JOB_TITLE": "Professione"
+            },
+            "BPM": {
+                "TENANT": "Organizzazione"
+            }
+        }
+    }
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.spec.ts
index 7833b60617..1bbd6d1f72 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.spec.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.spec.ts
@@ -39,7 +39,7 @@ describe('Bpm User service', () => {
     beforeEach(() => {
         service = injector.get(BpmUserService);
         authService = injector.get(AlfrescoAuthenticationService);
-        apiService =  injector.get(AlfrescoApiService);
+        apiService = injector.get(AlfrescoApiService);
         jasmine.Ajax.install();
     });
 
@@ -72,14 +72,10 @@ describe('Bpm User service', () => {
             });
         });
 
-        it('should retrieve avatar url for current user', (done) => {
-            spyOn(service, 'callGetProfilePictureApi').and.returnValue(Promise.resolve('fake/img/path'));
-            service.getCurrentUserProfileImage().subscribe(
-                (path) => {
-                    expect(path).toBeDefined();
-                    expect(path).toEqual('fake/img/path');
-                    done();
-                });
+        it('should retrieve avatar url for current user', () => {
+            let path = service.getCurrentUserProfileImage();
+            expect(path).toBeDefined();
+            expect(path).toContain('/app/rest/admin/profile-picture');
         });
 
         it('should catch errors on call for profile', (done) => {
@@ -92,16 +88,5 @@ describe('Bpm User service', () => {
                 status: 403
             });
         });
-
-        it('should catch errors on call for profile picture', (done) => {
-            service.getCurrentUserProfileImage().subscribe(() => {
-            }, () => {
-                done();
-            });
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 403
-            });
-        });
     });
 });
diff --git a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts b/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts
index 2f048d93b4..fec3d3e62b 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.spec.ts
@@ -29,7 +29,7 @@ declare let jasmine: any;
 
 describe('Ecm User service', () => {
 
-    let service, injector, authService, contentService;
+    let service, injector, authService, contentService, apiService;
 
     beforeEach(() => {
         injector = ReflectiveInjector.resolveAndCreate([
@@ -43,20 +43,28 @@ describe('Ecm User service', () => {
 
     beforeEach(() => {
         service = injector.get(EcmUserService);
+        apiService = injector.get(AlfrescoApiService);
         authService = injector.get(AlfrescoAuthenticationService);
         contentService = injector.get(AlfrescoContentService);
     });
 
     it('can instantiate service with authorization', () => {
         expect(authService).not.toBeNull('authorization should be provided');
-        let serviceAuth = new EcmUserService(authService, null);
+        let serviceAuth = new EcmUserService(null, authService, null);
 
         expect(serviceAuth instanceof EcmUserService).toBe(true, 'new service should be ok');
     });
 
     it('can instantiate service with content service', () => {
         expect(contentService).not.toBeNull('contentService should be provided');
-        let serviceContent = new EcmUserService(null, contentService);
+        let serviceContent = new EcmUserService(null, null, contentService);
+
+        expect(serviceContent instanceof EcmUserService).toBe(true, 'new service should be ok');
+    });
+
+    it('can instantiate service with api service', () => {
+        expect(contentService).not.toBeNull('api service should be provided');
+        let serviceContent = new EcmUserService(apiService, null, null);
 
         expect(serviceContent instanceof EcmUserService).toBe(true, 'new service should be ok');
     });
diff --git a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts b/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts
index 7edeefad40..b2eb4a873e 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { AlfrescoAuthenticationService, AlfrescoContentService } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoContentService, AlfrescoApiService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
@@ -29,7 +29,8 @@ import { EcmUserModel } from '../models/ecm-user.model';
 @Injectable()
 export class EcmUserService {
 
-    constructor(private authService: AlfrescoAuthenticationService,
+    constructor(private apiService: AlfrescoApiService,
+                private authService: AlfrescoAuthenticationService,
                 private contentService: AlfrescoContentService) {
     }
 
@@ -50,7 +51,7 @@ export class EcmUserService {
     }
 
     private callApiGetPersonInfo(userName: string, opts?: any) {
-        return this.authService.getAlfrescoApi().core.peopleApi.getPerson(userName, opts);
+        return this.apiService.getInstance().core.peopleApi.getPerson(userName, opts);
     }
 
     getUserProfileImage(avatarId: string) {