#ADF-452-userinfo show full name on the banner (#1814)

* #ADF-452-userinfo show full name on the banner

* #ADF-452 - added improvement from PR

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -27,12 +27,12 @@
                                      alt="ecm-profile-image"
                                      (error)="onImageLoadingError($event)"
                                      [src]="getEcmUserAvatar()"/>
-                                <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
+                                <h2 class="mdl-card__title-text" id="ecm-username">{{ecmUser.fullNameDisplay}}</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">{{getEcmFullName()}}</span>
+                                        <span id="ecm-full-name" class="truncate-long-names">{{ecmUser.fullNameDisplay}}</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 user-info__job-title">
@@ -55,12 +55,12 @@
                                      alt="bpm-profile-image"
                                      (error)="onImageLoadingError($event)"
                                      [src]="getBpmUserAvatar()"/>
-                                <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
+                                <h2 class="mdl-card__title-text" id="bpm-username">{{bpmUser.fullNameDisplay}}</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="bpm-full-name" class="truncate-long-names">{{ getBpmFullName() }}</span>
+                                        <span id="bpm-full-name" class="truncate-long-names">{{ bpmUser.fullNameDisplay }}</span>
                                         <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
                                     </span>
                                     <span id="bpm-tenant" class="mdl-list__item-secondary-content user-info__job-title">

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts

@@ -18,7 +18,7 @@
 import { UserInfoComponent } from './user-info.component';
 import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserService } from '../services/bpm-user.service';
-import { BpmUserModel } from '../models/bpm-user.model';
+import { fakeBpmUser } from '../assets/fake-bpm-user.service.mock';
 import { TranslationMock } from '../assets/translation.service.mock';
 import {
     CoreModule,
@@ -27,47 +27,10 @@ import {
     AlfrescoTranslationService
 } from 'ng2-alfresco-core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { BpmUserModel } from './../models/bpm-user.model';
 
 declare let jasmine: any;
 
-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;
@@ -90,7 +53,7 @@ describe('User info component', () => {
             providers: [
                 EcmUserService,
                 BpmUserService,
-                {provide: AlfrescoTranslationService, useClass: TranslationMock}
+                { provide: AlfrescoTranslationService, useClass: TranslationMock }
             ]
         }).compileComponents().then(() => {
             fixture = TestBed.createComponent(UserInfoComponent);
@@ -119,18 +82,6 @@ describe('User info component', () => {
         expect(element.querySelector('#user-profile-lists')).toBeNull();
     });
 
-    it('should format null string values in empty value', () => {
-        let res = userInfoComp.formatValue('null');
-        expect(res).toBe('');
-    });
-
-    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: {
@@ -156,6 +107,32 @@ describe('User info component', () => {
             jasmine.Ajax.uninstall();
         });
 
+        it('should show ecm only last name when user first name is null ', async(() => {
+            fixture.detectChanges();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: {
+                    'entry': {
+                        'id': 'fake-id',
+                        'firstName': null,
+                        'lastName': 'fake-ecm-last-name',
+                        'description': 'i am a fake user for test',
+                        'avatarId': 'fake-avatar-id',
+                        'email': 'fakeEcm@ecmUser.com'
+                    }
+                }
+            });
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#ecm-username')).toBeDefined();
+                expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
+                expect(element.querySelector('#ecm-username').textContent).not.toContain('null');
+            });
+        }));
+
         describe('and has image', () => {
 
             beforeEach(async(() => {
@@ -180,21 +157,13 @@ describe('User info component', () => {
                 });
             }));
 
-            it('should show ecm only last name when user first name is null ', async(() => {
-                userInfoComp.ecmUser.firstName = null;
-                fixture.detectChanges();
-                expect(element.querySelector('#userinfo_container')).toBeDefined();
-                expect(element.querySelector('#ecm-username')).toBeDefined();
-                expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
-            }));
-
-            xit('should get the ecm current user image from the service', async(() => {
+            it('should get the ecm 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')).toContain('assets/images/ecmImg.gif');
             }));
 
-            xit('should get the ecm user informations from the service', async(() => {
+            it('should get the ecm user informations from the service', async(() => {
                 expect(element.querySelector('#userinfo_container')).toBeDefined();
                 expect(element.querySelector('#ecm_username')).toBeDefined();
                 expect(element.querySelector('#ecm_title')).toBeDefined();
@@ -243,13 +212,10 @@ describe('User info component', () => {
 
     describe('when user is logged on bpm', () => {
 
-        let fakeBpmUserForTest;
-
         beforeEach(() => {
             spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
             jasmine.Ajax.install();
-            fakeBpmUserForTest = fakeBpmUser;
         });
 
         beforeEach(async(() => {
@@ -257,8 +223,8 @@ describe('User info component', () => {
             fixture.detectChanges();
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
-                contentType: 'json',
-                responseText: fakeBpmUserForTest
+                contentType: 'application/json',
+                responseText: JSON.stringify(fakeBpmUser)
             });
         }));
 
@@ -270,6 +236,13 @@ describe('User info component', () => {
             jasmine.Ajax.uninstall();
         });
 
+        it('should show full name next the user image', async(() => {
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-username')).toBeDefined();
+            expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-bpm-first-name fake-bpm-last-name');
+
+        }));
+
         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();
@@ -279,27 +252,25 @@ describe('User info component', () => {
         }));
 
         it('should show last name if first name is null', async(() => {
-            userInfoComp.bpmUser.firstName = null;
+            let wrongBpmUser: BpmUserModel = new BpmUserModel({
+                firstName: null,
+                lastName: 'fake-last-name'
+            });
+            userInfoComp.bpmUser = wrongBpmUser;
             fixture.detectChanges();
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#bpm-username')).not.toBeNull();
-            expect(element.querySelector('#bpm-username').textContent).toContain('fake-bpm-last-name');
-
-        }));
-
-        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');
+            expect(element.querySelector('#bpm-username').textContent).toContain('fake-last-name');
+            expect(element.querySelector('#bpm-username').textContent).not.toContain('fake-bpm-first-name');
 
         }));
 
         it('should not show first name if it is null string', async(() => {
-            userInfoComp.bpmUser.firstName = 'null';
-            userInfoComp.bpmUser.lastName = 'fake-last-name';
+            let wrongFirstNameBpmUser: BpmUserModel = new BpmUserModel({
+                firstName: 'null',
+                lastName: 'fake-last-name'
+            });
+            userInfoComp.bpmUser = wrongFirstNameBpmUser;
             fixture.detectChanges();
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#bpm-full-name')).toBeDefined();
@@ -308,8 +279,11 @@ describe('User info component', () => {
         }));
 
         it('should not show last name if it is null string', async(() => {
-            userInfoComp.bpmUser.firstName = 'fake-first-name';
-            userInfoComp.bpmUser.lastName = 'null';
+            let wrongLastNameBpmUser: BpmUserModel = new BpmUserModel({
+                firstName: 'fake-first-name',
+                lastName: 'null'
+            });
+            userInfoComp.bpmUser = wrongLastNameBpmUser;
             fixture.detectChanges();
             expect(element.querySelector('#userinfo_container')).toBeDefined();
             expect(element.querySelector('#bpm-full-name')).toBeDefined();

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -81,7 +81,7 @@ export class UserInfoComponent implements OnInit {
         if (this.authService.isEcmLoggedIn()) {
             this.ecmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
-                        this.ecmUser = <EcmUserModel> res;
+                        this.ecmUser = new EcmUserModel(res);
                         this.getEcmAvatar();
                     }
                 );
@@ -95,7 +95,7 @@ export class UserInfoComponent implements OnInit {
         if (this.authService.isBpmLoggedIn()) {
             this.bpmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
-                    this.bpmUser = <BpmUserModel> res;
+                    this.bpmUser = new BpmUserModel(res);
                 });
             this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
         } else {
@@ -115,32 +115,6 @@ export class UserInfoComponent implements OnInit {
         event.stopPropagation();
     }
 
-    getEcmFullName(): string {
-        if (this.ecmUser) {
-            return `${this.formatValue(this.ecmUser.firstName)} ${this.formatValue(this.ecmUser.lastName)}`.trim();
-        }
-        return 'N/A';
-    }
-
-    getBpmFullName(): string {
-        if (this.bpmUser) {
-            return `${this.formatValue(this.bpmUser.firstName)} ${this.formatValue(this.bpmUser.lastName)}`.trim();
-        }
-        return 'N/A';
-    }
-
-    getUserNameHeaderFor(env: string): string {
-        if (this.ecmUser && env === 'ECM') {
-            return this.ecmUser.firstName || this.ecmUser.lastName;
-        }
-
-        if (this.bpmUser && env === 'BPM') {
-            return this.formatValue(this.bpmUser.firstName) ||
-                this.formatValue(this.bpmUser.lastName) ||
-                this.formatValue(this.bpmUser.fullname);
-        }
-    }
-
     private getEcmAvatar() {
         this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
     }
@@ -156,8 +130,4 @@ export class UserInfoComponent implements OnInit {
     getEcmUserAvatar() {
         return this.ecmUserImage;
     }
-
-    formatValue(value: string) {
-        return value && value !== 'null' ? value : '';
-    }
 }