fix: TT-331 Changes in user and sidebar components

Author: Edgar Guaman

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -5,13 +5,7 @@
         <img src="assets/img/ioet-logo-without-letters.png" alt="ioet-logo" width="50" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;"/>
         <h1 class="pl-2 pt-2" style="font-family:spinnaker,sans-serif">ioet</h1>
       </div>
-      <div class=" py-8 flex items-center pl-3">
-        <img src="assets/icons/user.svg" alt="user-icon" width="40" height="40"/>
-        <span class="pl-1">
-          <h2 class="font-sans text-base font-semibold">{{userName}}</h2>
-          <p class="font-sans mt-1 text-xs font-medium text-grey dark:text-gray-400">{{userEmail}}</p>
-        </span>
-      </div>
+      <app-user></app-user>
       <div class="list-group list-group-flush">
         <a
           *ngFor="let item of itemsSidebar"

src/app/modules/shared/components/sidebar/sidebar.component.spec.ts

@@ -15,6 +15,18 @@ describe('SidebarComponent', () => {
   let router;
   const routes: Routes = [{ path: 'time-clock', component: TimeClockComponent }];
 
+  const azureAdB2CServiceStub = {
+    isLogin() {
+      return true;
+    },
+    isAdmin() {
+      return true;
+    },
+    logout(){
+      return true;
+    }
+  };
+
   const userInfoServiceStub = {
     isAdmin: () => of(true),
   };
@@ -24,7 +36,7 @@ describe('SidebarComponent', () => {
       TestBed.configureTestingModule({
         declarations: [SidebarComponent],
         providers: [
-          AzureAdB2CService,
+          { provide: AzureAdB2CService, useValue: azureAdB2CServiceStub },
           { provide: UserInfoService, useValue: userInfoServiceStub },
         ],
         imports: [RouterTestingModule.withRoutes(routes)],
@@ -41,19 +53,19 @@ describe('SidebarComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
+  it('component should be created', () => {
     spyOn(azureAdB2CServiceStubInjected, 'isAdmin').and.returnValue(false);
     expect(component).toBeTruthy();
   });
 
-  it('admin users have six menu items', () => {
+  it('admin users should have six menu items', () => {
     component.getSidebarItems().subscribe(() => {
       const menuItems = component.itemsSidebar;
       expect(menuItems.length).toBe(6);
     });
   });
 
-  it('non admin users have two menu items', () => {
+  it('non admin users should have two menu items', () => {
     spyOn(userInfoServiceStub, 'isAdmin').and.returnValue(of(false));
 
     component.getSidebarItems().subscribe(() => {
@@ -62,7 +74,7 @@ describe('SidebarComponent', () => {
     });
   });
 
-  it('when item is selected is should be set as active and the others as inactive', () => {
+  it('when item is selected should be set as active and the others as inactive', () => {
     const route = 'time-clock';
     router.navigate([route]);
 
@@ -74,30 +86,6 @@ describe('SidebarComponent', () => {
     });
   });
 
-  it('onInit checks if isLogin is true and gets the name, email and sets the tenantid in the Storage', () => {
-    spyOn(azureAdB2CServiceStubInjected, 'isLogin').and.returnValue(true);
-    spyOn(azureAdB2CServiceStubInjected, 'getName').and.returnValue('Name');
-    spyOn(azureAdB2CServiceStubInjected, 'getUserEmail').and.returnValue('Email');
-    spyOn(azureAdB2CServiceStubInjected, 'setTenantId');
-    component.ngOnInit();
-    expect(azureAdB2CServiceStubInjected.isLogin).toHaveBeenCalled();
-    expect(azureAdB2CServiceStubInjected.getName).toHaveBeenCalled();
-    expect(azureAdB2CServiceStubInjected.getUserEmail).toHaveBeenCalled();
-    expect(azureAdB2CServiceStubInjected.setTenantId).toHaveBeenCalled();
-  });
-
-  it('onInit does not get the name and the email if isLogin is false', () => {
-    spyOn(azureAdB2CServiceStubInjected, 'isLogin').and.returnValue(false);
-    spyOn(azureAdB2CServiceStubInjected, 'getName').and.returnValue('Name');
-    spyOn(azureAdB2CServiceStubInjected, 'getUserEmail').and.returnValue('Email');
-    spyOn(azureAdB2CServiceStubInjected, 'setTenantId');
-    component.ngOnInit();
-    expect(azureAdB2CServiceStubInjected.isLogin).toHaveBeenCalled();
-    expect(azureAdB2CServiceStubInjected.getName).toHaveBeenCalledTimes(0);
-    expect(azureAdB2CServiceStubInjected.getUserEmail).toHaveBeenCalledTimes(0);
-    expect(azureAdB2CServiceStubInjected.setTenantId).not.toHaveBeenCalled();
-  });
-
   it('should use the Azure service on logout', () => {
     spyOn(azureAdB2CServiceStubInjected, 'logout');
     component.logout();

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -11,11 +11,9 @@ import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service'
   styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent implements OnInit, OnDestroy {
-  itemsSidebar: ItemSidebar[];
+  itemsSidebar: ItemSidebar[] = [];
   navStart;
   sidebarItems$: Subscription;
-  userName: string;
-  userEmail: string;
 
   constructor(private router: Router, private userInfoService: UserInfoService, private azureAdB2CService: AzureAdB2CService) {
     this.navStart = this.router.events.pipe(
@@ -29,11 +27,6 @@ export class SidebarComponent implements OnInit, OnDestroy {
     this.navStart.subscribe((evt) => {
       this.highlightMenuOption(evt.url);
     });
-    if (this.azureAdB2CService.isLogin()) {
-      this.userName = this.azureAdB2CService.getName();
-      this.userEmail = this.azureAdB2CService.getUserEmail();
-      this.azureAdB2CService.setTenantId();
-    }
   }
 
   ngOnDestroy(): void {
@@ -68,7 +61,6 @@ export class SidebarComponent implements OnInit, OnDestroy {
     );
   }
 
-
   highlightMenuOption(route) {
     this.itemsSidebar.map((item) => (item.active = false));
     this.itemsSidebar.filter((item) => item.route === route).map((item) => (item.active = true));

src/app/modules/shared/components/user/user.component.html

@@ -1,10 +1,7 @@
-<li class="nav-item active dropdown">
-  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
-     aria-haspopup="true" aria-expanded="false">
-    <i class="far fa-user-circle"></i>
-    {{name}}
-  </a>
-  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-    <a class="dropdown-item" href="#" (click)="logout()">Sign Out</a>
-  </div>
-</li>
+<div class=" py-8 flex items-center pl-3">
+  <img src="assets/icons/user.svg" alt="user-icon" width="40" height="40"/>
+  <span class="pl-1">
+    <h2 class="font-sans text-base font-semibold">{{userName}}</h2>
+    <p class="font-sans mt-1 text-xs font-medium text-grey dark:text-gray-400">{{userEmail}}</p>
+  </span>
+</div>

src/app/modules/shared/components/user/user.component.spec.ts

@@ -40,28 +40,24 @@ describe('UserComponent', () => {
   it('onInit checks if isLogin and gets the name and set tenantIn in the storage', () => {
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(true);
     spyOn(azureAdB2CService, 'getName').and.returnValue('Name');
+    spyOn(azureAdB2CService, 'getUserEmail').and.returnValue('Email');
     spyOn(azureAdB2CService, 'setTenantId');
     component.ngOnInit();
     expect(azureAdB2CService.isLogin).toHaveBeenCalled();
     expect(azureAdB2CService.getName).toHaveBeenCalled();
+    expect(azureAdB2CService.getUserEmail).toHaveBeenCalled();
     expect(azureAdB2CService.setTenantId).toHaveBeenCalled();
   });
 
   it('onInit does not get the name if isLogin false', () => {
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(false);
     spyOn(azureAdB2CService, 'getName').and.returnValue('Name');
+    spyOn(azureAdB2CService, 'getUserEmail').and.returnValue('Email');
     spyOn(azureAdB2CService, 'setTenantId');
     component.ngOnInit();
     expect(azureAdB2CService.isLogin).toHaveBeenCalled();
     expect(azureAdB2CService.getName).toHaveBeenCalledTimes(0);
+    expect(azureAdB2CService.getUserEmail).toHaveBeenCalledTimes(0);
     expect(azureAdB2CService.setTenantId).not.toHaveBeenCalled();
   });
-
-  it('uses the Azure service on logout', () => {
-    spyOn(azureAdB2CService, 'logout');
-
-    component.logout();
-
-    expect(azureAdB2CService.logout).toHaveBeenCalled();
-  });
 });

src/app/modules/shared/components/user/user.component.ts

@@ -7,18 +7,16 @@ import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service'
   styleUrls: ['./user.component.scss'],
 })
 export class UserComponent implements OnInit {
-  name: string;
+  userName: string;
+  userEmail: string;
 
   constructor(private azureAdB2CService: AzureAdB2CService) {}
 
   ngOnInit(): void {
     if (this.azureAdB2CService.isLogin()) {
-      this.name = this.azureAdB2CService.getName();
+      this.userName = this.azureAdB2CService.getName();
+      this.userEmail = this.azureAdB2CService.getUserEmail();
       this.azureAdB2CService.setTenantId();
     }
   }
-
-  logout() {
-    this.azureAdB2CService.logout();
-  }
 }