From 15cbd3a3167fc636e1e372fe359af9c307d02b8b Mon Sep 17 00:00:00 2001
From: siva kumar <siva.kumar@muraai.com>
Date: Sat, 18 Nov 2017 02:30:16 +0530
Subject: [PATCH] [ADF-1945] Profile image has Initials displayed behind it.
 (#2648)

*  Refactored userInfo component.
*  Added test cases.
---
 .../components/user-info.component.html       | 16 ++---
 .../components/user-info.component.scss       |  6 +-
 .../components/user-info.component.spec.ts    | 62 ++++++++++++++++++-
 .../components/user-info.component.ts         |  8 +++
 4 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/lib/core/userinfo/components/user-info.component.html b/lib/core/userinfo/components/user-info.component.html
index ff482d8907..6c19af929a 100644
--- a/lib/core/userinfo/components/user-info.component.html
+++ b/lib/core/userinfo/components/user-info.component.html
@@ -8,15 +8,15 @@
     <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button">
         <div class="adf-userinfo-button-profile" id="user-profile" data-automation-id="user-profile">
             <div *ngIf="bpmUser && !ecmUser" id="bpm-user-image">
-                <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
-                <div *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-container">
+                <div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
+                <div *ngIf="hasBpmUserPictureId()" class="adf-userinfo-profile-container">
                     <img id="logged-user-img" [src]="bpmUserImage" alt="user-info-profile-button"
                         class="adf-userinfo-profile-image"/>
                 </div>
             </div>
             <div *ngIf="ecmUser" id="ecm-user-image">
-                    <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
-                    <div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container">
+                    <div *ngIf="!hasEcmUserAvatarId()" [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
+                    <div *ngIf="hasEcmUserAvatarId()" class="adf-userinfo-profile-container">
                         <img id="logged-user-img" [src]="ecmUserImage" alt="user-info-profile-button"
                             class="adf-userinfo-profile-image"/>
                     </div>
@@ -29,8 +29,8 @@
             <mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser">
                 <mat-card class="adf-userinfo-card">
                     <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
-                        <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
-                        <div  *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container adf-hide-small">
+                        <div *ngIf="!hasEcmUserAvatarId()" [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                        <div *ngIf="hasEcmUserAvatarId()" class="adf-userinfo-profile-container adf-hide-small">
                             <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
                                 alt="ecm-profile-image" [src]="ecmUserImage" />
                         </div>
@@ -55,8 +55,8 @@
             <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser">
             <mat-card class="adf-userinfo-card">
                 <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                    <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
-                    <img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
+                    <div *ngIf="!hasBpmUserPictureId()" [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                    <img *ngIf="hasBpmUserPictureId()" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
                             alt="bpm-profile-image" [src]="bpmUserImage"/>
                    <div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div>
                 </mat-card-header>
diff --git a/lib/core/userinfo/components/user-info.component.scss b/lib/core/userinfo/components/user-info.component.scss
index 1c1fddae01..3b1ea19c53 100644
--- a/lib/core/userinfo/components/user-info.component.scss
+++ b/lib/core/userinfo/components/user-info.component.scss
@@ -35,6 +35,7 @@
         }
 
         &-userinfo-profile-image {
+            background: mat-color($primary, 300);
             text-align: center;
             border-radius: 90%;
             width: 40px;
@@ -42,7 +43,7 @@
             margin-right: 0;
             cursor: pointer;
             vertical-align: middle;
-            margin-left: -45px;
+            margin-left: 0px;
         }
 
         &-userinfo-profile-container{
@@ -136,11 +137,12 @@
         }
 
         &-userinfo-profile-picture {
+            background: mat-color($primary, 300);
             background-size: cover;
             border-radius: 50%;
             height: 80px;
             width: 80px;
-            margin-left: -88px;
+            margin-left: 0px;
             margin-right: 8px;
         }
 
diff --git a/lib/core/userinfo/components/user-info.component.spec.ts b/lib/core/userinfo/components/user-info.component.spec.ts
index 6240791e1c..194220426f 100644
--- a/lib/core/userinfo/components/user-info.component.spec.ts
+++ b/lib/core/userinfo/components/user-info.component.spec.ts
@@ -16,8 +16,9 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { By, DomSanitizer } from '@angular/platform-browser';
 import { AuthenticationService, ContentService } from '../../services';
+import { InitialUsernamePipe } from '../../pipes';
 import { fakeBpmUser } from '../../mock/bpm-user.service.mock';
 import { fakeEcmEditedUser, fakeEcmUser, fakeEcmUserNoImage } from '../../mock/ecm-user.service.mock';
 import { MaterialModule } from '../../material.module';
@@ -26,6 +27,37 @@ import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { UserInfoComponent } from './user-info.component';
 
+class FakeSanitazer extends DomSanitizer {
+
+        constructor() {
+            super();
+        }
+
+        sanitize(html) {
+            return html;
+        }
+
+        bypassSecurityTrustHtml(value: string): any {
+            return value;
+        }
+
+        bypassSecurityTrustStyle(value: string): any {
+            return null;
+        }
+
+        bypassSecurityTrustScript(value: string): any {
+            return null;
+        }
+
+        bypassSecurityTrustUrl(value: string): any {
+            return null;
+        }
+
+        bypassSecurityTrustResourceUrl(value: string): any {
+            return null;
+        }
+    }
+
 declare let jasmine: any;
 
 describe('User info component', () => {
@@ -189,6 +221,20 @@ describe('User info component', () => {
                 });
             }));
 
+            it('should display the current user image if user has avatarId', async(() => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
+                    imageButton.click();
+                    fixture.detectChanges();
+                    let loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
+                    expect(userInfoComp.ecmUser.avatarId).toBe('fake-avatar-id');
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    expect(loggedImage).not.toBeNull();
+                    expect(loggedImage.properties.src).toContain('assets/images/ecmImg.gif');
+                });
+            }));
+
             it('should get the ecm user informations from the service', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
@@ -239,6 +285,20 @@ describe('User info component', () => {
                 let tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
                 expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
             });
+
+            it('should display the current user Initials if the user dose not have avatarId', async(() => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let pipe = new InitialUsernamePipe(new FakeSanitazer());
+                    expect(userInfoComp.ecmUser.avatarId).toBeNull();
+                    expect(pipe.transform({
+                        id: 13,
+                        firstName: 'Wilbur',
+                        lastName: 'Adams',
+                        email: 'wilbur@app.com'
+                    })).toBe('<div id="user-initials-image" class="">WA</div>');
+                });
+            }));
         });
 
     });
diff --git a/lib/core/userinfo/components/user-info.component.ts b/lib/core/userinfo/components/user-info.component.ts
index 6f1849fa2d..28858ae7d7 100644
--- a/lib/core/userinfo/components/user-info.component.ts
+++ b/lib/core/userinfo/components/user-info.component.ts
@@ -111,4 +111,12 @@ export class UserInfoComponent implements OnInit {
     showOnRight() {
         return this.namePosition === 'right';
     }
+
+    hasBpmUserPictureId(): boolean {
+        return !!this.bpmUser.pictureId;
+    }
+
+    hasEcmUserAvatarId(): boolean {
+        return !!this.ecmUser.avatarId;
+    }
 }