fix: TTA-180 fixing tests

Author: Rodrigo Lins

src/app/modules/login/login.component.html

@@ -11,6 +11,6 @@ <h3>Please log in</h3>
     <button (click)="login() " class="btn btn-primary">login</button>
   </div>
   <div *ngIf="!isProduction">
-    <button class="btn btn-primary"><a href="{{loginAuth()}}">Login</a></button>
+    <a href="{{loginAuth()}}"><button class="btn btn-primary">Login</button></a>
   </div>
 </div>

src/app/modules/login/login.component.ts

@@ -23,6 +23,7 @@ export class LoginComponent implements OnInit {
   isProduction = environment.production === EnvironmentType.TT_PROD_LEGACY;
   cliendId = CLIENT_URL;
   authUrl = environment.authUrl;
+  authAppName = environment.authAppName;
   auth2: any;
 
 
@@ -67,7 +68,7 @@ export class LoginComponent implements OnInit {
   }
 
   loginAuth(): string {
-    return `${this.authUrl}/authn/login/timeTracker`;
+    return `${this.authUrl}/authn/login/${this.authAppName}`;
   }
 
 }

src/app/modules/login/services/login.service.spec.ts

@@ -1,6 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { SocialAuthService } from 'angularx-social-login';
 import { CookieService } from 'ngx-cookie-service';
@@ -12,6 +14,7 @@ describe('LoginService', () => {
   let service: LoginService;
   let cookieService: CookieService;
   let socialAuthService: SocialAuthService;
+  let router: Router;
   let account;
   const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['signOut', 'signIn']);
   const httpClientSpy = jasmine.createSpyObj('HttpClient', ['post', 'get']);
@@ -23,16 +26,17 @@ describe('LoginService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule.withRoutes([])],
       providers: [
         { providers: CookieService, useValue: cookieStoreStub },
         { provide: SocialAuthService, useValue: socialAuthServiceStub },
-        { provide: HttpClient, useValue: httpClientSpy }
+        { provide: HttpClient, useValue: httpClientSpy },
       ],
     });
     service = TestBed.inject(LoginService);
     cookieService = TestBed.inject(CookieService);
     socialAuthService = TestBed.inject(SocialAuthService);
+    router = TestBed.inject(Router);
     account = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImFiYyIsIm5hbWUiOiJhYmMiLCJlbWFpbCI6ImFiYyIsImdyb3VwcyI6WyJhYmMiXX0.UNxyDT8XzXJhI1F3LySBU7TJlpENPUPHj8my7Obw2ZM';
     let store = {};
     const mockLocalStorage = {
@@ -121,7 +125,9 @@ describe('LoginService', () => {
   });
 
   it('should logout with social angularx-social-login', () => {
+    service.router = router;
     spyOn(cookieService, 'deleteAll').and.returnValue();
+    spyOn(service, 'invalidateSessionCookie').and.returnValue(of(true));
 
     service.logout();
 

src/app/modules/login/services/login.service.ts

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { EnvironmentType, UserEnum } from 'src/environments/enum';
 import { environment } from 'src/environments/environment';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { map } from 'rxjs/operators';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { Router } from '@angular/router';
 
 @Injectable({
@@ -17,7 +17,6 @@ export class LoginService {
   isLegacyProd: boolean = environment.production === EnvironmentType.TT_PROD_LEGACY;
   localStorageKey = this.isLegacyProd ? 'user2' : 'user';
   router: Router;
-  ngZone: NgZone;
 
   constructor(
     private http?: HttpClient,
@@ -29,7 +28,14 @@ export class LoginService {
 
   logout() {
     localStorage.clear();
-    this.http.post(`${this.baseUrl}/logout`, null, { withCredentials: true }).subscribe();
+    this.cookieService.deleteAll();
+    this.invalidateSessionCookie().subscribe(() => {
+      this.router.navigate(['login']);
+    });
+  }
+
+  invalidateSessionCookie() {
+    return this.http.post(`${this.baseUrl}/logout`, null, { withCredentials: true });
   }
 
   isLogin() {

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

@@ -17,10 +17,10 @@
       <h3 class="font-poppins text-base ml-4 pl-3 -mt-6 text-left" >{{ item.text }}</h3>
       </a>
       <div class="bg-whiteTW pt-2 absolute bottom-4 dark:bg-grayTW-dark flex justify-center items-center">
-        <a class="flex pl-4 text-blackTW hover:text-grayTW dark:text-whiteTW" href="#">
+        <button class="logout flex pl-4 text-blackTW hover:text-grayTW dark:text-whiteTW" (click)="logout()">
           <em class="fas fa-sign-out-alt"></em>
-          <span class="font-poppins pl-3 font-medium  dark:text-whiteTW" (click)="logout()">Sign out</span>
-        </a>
+          <span class="font-poppins pl-3 font-medium  dark:text-whiteTW">Sign out</span>
+        </button>
         <app-dark-mode class="ml-4"></app-dark-mode>
       </div>
     </div>

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

@@ -4,6 +4,10 @@ body {
   overflow-x: hidden;
 }
 
+button.logout:active {
+  outline: none;
+}
+
 #sidebar-wrapper {
   min-height: 100vh;
   margin-left: -15rem;
@@ -76,4 +80,4 @@ body {
   height: -webkit-calc(100vh - 1vh);
   height: -o-calc(100vh - 1vh);
   height: calc(100vh - 1vh);
-}
+}

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

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ItemSidebar } from './models/item-sidebar.model';
 import { NavigationStart, Router } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, timer } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { UserInfoService } from 'src/app/modules/user/services/user-info.service';
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
@@ -42,6 +42,7 @@ export class SidebarComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.sidebarItems$.unsubscribe();
+    this.logout();
   }
 
   toggleSideBar() {

src/environments/environment.prod.ts

@@ -4,6 +4,8 @@ export const environment = {
   production: EnvironmentType.TT_PROD,
   timeTrackerApiUrl:  process.env["API_URL"],
   stackexchangeApiUrl: 'https://api.stackexchange.com',
+  authUrl: 'https://api.auth.ioet.com',
+  authAppName: 'timeTracker',
 };
 
 export const AUTHORITY = process.env["AUTHORITY"];

src/environments/environment.ts

@@ -9,6 +9,7 @@ export const environment = {
   timeTrackerApiUrl: process.env['API_URL'],
   stackexchangeApiUrl: 'https://api.stackexchange.com',
   authUrl: 'https://uat-backend.auth.ioet.com',
+  authAppName: 'timeTracker',
 };
 
 export const AUTHORITY = process.env['AUTHORITY'];