code-smell: TT-331 Fixing bugs and code-smells

Author: Edgar Guaman

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

@@ -2,11 +2,11 @@
   <div class="table-row bg-white border-r border-grey-500 shadow-sm" id="sidebar-wrapper">
     <div class="table-cell">
       <div class="relative flex items-center border-b border-grey-500 sidebar-heading">
-        <img src="assets/img/ioet-logo-without-letters.png" width="50" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;" alt="logo"/>
+        <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" width="40" height="40"/>
+        <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>
@@ -20,13 +20,12 @@ <h2 class="font-sans text-base font-semibold">{{userName}}</h2>
           class="font-sans relative pl-4 py-3 bg-white"
           [ngClass]="{active: item.active}"
         >
-        <img src="{{item.icon}}" width="22" height="22" class="absolute"/>
+        <img src="{{item.icon}}" alt="icon-item" width="22" height="22" class="absolute"/>
         <h3 class="font-sans text-base ml-4 pl-3 text-left" >{{ item.text }}</h3>
-        <!-- <i class="{{ item.icon }} pr-3"></i> {{ item.text }} -->
         </a>
         <div class="bg-white pt-2 pr-24 absolute bottom-0">
           <a class="flex pl-4 mb-4 text-black-dark hover:text-gray-800" href="#">
-            <img src="assets/icons/signout.svg" width="25" height="25"/>
+            <img src="assets/icons/signout.svg" alt="signout-icon" width="25" height="25"/>
             <span class="font-sans pl-4 font-medium" (click)="logout()">Sign out</span>
           </a>
         </div>       
@@ -35,11 +34,11 @@ <h3 class="font-sans text-base ml-4 pl-3 text-left" >{{ item.text }}</h3>
   <div class="table-cell relative">
     <span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-blue-400"  (click)="toggleSideBar()"></span>
       <span class="group cursor-pointer absolute w-5 top-20 -right-3">
-        <img src="assets/icons/left-chevron.svg" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:hidden md:block lg:block shadow-sm"/>
+        <img src="assets/icons/left-chevron.svg" alt="hide-chevron" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:hidden md:block lg:block shadow-sm"/>
         <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Hide</div>
       </span>
       <span class="group cursor-pointer absolute top-20 -right-5">
-        <img src="assets/icons/right-chevron.svg" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:block md:hidden lg:hidden"/>
+        <img src="assets/icons/right-chevron.svg" alt="show-chevron" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:block md:hidden lg:hidden"/>
         <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Show</div>
       </span>
   </div>

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

@@ -15,15 +15,6 @@ describe('SidebarComponent', () => {
   let router;
   const routes: Routes = [{ path: 'time-clock', component: TimeClockComponent }];
 
-  const azureAdB2CServiceStub = {
-    isLogin() {
-      return true;
-    },
-    isAdmin() {
-      return true;
-    },
-  };
-
   const userInfoServiceStub = {
     isAdmin: () => of(true),
   };
@@ -83,10 +74,33 @@ describe('SidebarComponent', () => {
     });
   });
 
-  it('uses the Azure service on logout', () => {
+  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();
     expect(azureAdB2CServiceStubInjected.logout).toHaveBeenCalled();
   });
-
 });

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

@@ -32,6 +32,7 @@ export class SidebarComponent implements OnInit, OnDestroy {
     if (this.azureAdB2CService.isLogin()) {
       this.userName = this.azureAdB2CService.getName();
       this.userEmail = this.azureAdB2CService.getUserEmail();
+      this.azureAdB2CService.setTenantId();
     }
   }