TT-52 feat: include route in the feature toggle

Author: Angeluz-07

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { LoginComponent } from './modules/login/login.component';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 import { UsersComponent } from './modules/users/pages/users.component';
 import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
+import { TechnologiesReportGuard } from './guards/technologies-report-guard/technologies-report.guard';
 
 const routes: Routes = [
   {
@@ -25,7 +26,7 @@ const routes: Routes = [
       { path: 'activities-management', component: ActivitiesManagementComponent },
       { path: 'customers-management', canActivate: [AdminGuard], component: CustomerComponent },
       { path: 'users', canActivate: [AdminGuard], component: UsersComponent },
-      { path: 'technology-report', canActivate: [AdminGuard], component: TechnologyReportComponent},
+      { path: 'technology-report', canActivate: [AdminGuard, TechnologiesReportGuard], component: TechnologyReportComponent},
       { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
     ],
   },

src/app/guards/technologies-report-guard/technologies-report.guard.spec.ts

@@ -0,0 +1,45 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Observable, of } from 'rxjs';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
+import { TechnologiesReportGuard } from './technologies-report.guard';
+
+describe('TechnologiesReportGuard', () => {
+
+  let technologiesReportGuard: TechnologiesReportGuard;
+  let featureManagerService: FeatureManagerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ RouterTestingModule ]
+    });
+    technologiesReportGuard = TestBed.inject(TechnologiesReportGuard);
+    featureManagerService = TestBed.inject(FeatureManagerService);
+  });
+
+  it('should be created', () => {
+    expect(technologiesReportGuard).toBeTruthy();
+  });
+
+  it('can activate the route when feature is enabled for user', () => {
+    spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(true));
+
+    const canActivate: Observable<boolean> = technologiesReportGuard.canActivate();
+
+    expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
+    canActivate.subscribe(value => expect(value).toEqual(true));
+  });
+
+  it('can not active the route and is redirected to home if feature is not enabled for user', inject([Router], (router: Router) => {
+    spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(false));
+    spyOn(router, 'navigate').and.stub();
+
+    const canActivate: Observable<boolean> = technologiesReportGuard.canActivate();
+
+    expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
+    canActivate.subscribe(value => expect(value).toEqual(false));
+    expect(router.navigate).toHaveBeenCalledWith(['']);
+  }));
+
+});

src/app/guards/technologies-report-guard/technologies-report.guard.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TechnologiesReportGuard implements CanActivate {
+
+  constructor(
+    private featureManagerService: FeatureManagerService,
+    private router: Router
+  ) { }
+
+  canActivate() {
+    return this.featureManagerService
+    .isToggleEnabledForUser('ui-list-technologies')
+    .pipe(map((enabled) => {
+      if (enabled === true) {
+        return true;
+      } else {
+        this.router.navigate(['']);
+        return false;
+      }
+    }));
+  }
+}

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

@@ -6,12 +6,14 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {Router, Routes} from '@angular/router';
 import {TimeClockComponent} from '../../../time-clock/pages/time-clock.component';
 import {provideMockStore} from '@ngrx/store/testing';
-import {Observable, of} from 'rxjs';
+import {of} from 'rxjs';
+import {FeatureManagerService} from '../../feature-toggles/feature-toggle-manager.service';
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent;
   let fixture: ComponentFixture<SidebarComponent>;
   let azureAdB2CServiceStubInjected;
+  let featureManagerServiceStubInjected: FeatureManagerService;
   let router;
   const routes: Routes = [
     {path: 'time-clock', component: TimeClockComponent}
@@ -42,6 +44,7 @@ describe('SidebarComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(SidebarComponent);
     azureAdB2CServiceStubInjected = TestBed.inject(AzureAdB2CService);
+    featureManagerServiceStubInjected = TestBed.inject(FeatureManagerService);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -81,25 +84,21 @@ describe('SidebarComponent', () => {
     });
   });
 
-  it('List Technologies item is added when feature flag "ui-list-technologies" is enabled', () => {
-    const featureManagerServiceStub = {
-      isToggleEnabledForUser(toggleName: string, toggleLabel?: string): Observable<boolean> {
-        return of(true);
-      },
-    };
+  it('List Technologies item is added when feature flag "ui-list-technologies" is enabled for user', () => {
+    spyOn(featureManagerServiceStubInjected, 'isToggleEnabledForUser').and.returnValue(of(true));
     const itemsSidebar = [];
-    component.toggleListTechnologies(featureManagerServiceStub, itemsSidebar);
+
+    component.toggleListTechnologies(itemsSidebar);
+
     expect(itemsSidebar.length).toBe(1);
   });
 
-  it('List Technologies item is not added when feature flag "ui-list-technologies" is disabled', () => {
-    const featureManagerServiceStub = {
-      isToggleEnabledForUser(toggleName: string, toggleLabel?: string): Observable<boolean> {
-        return of(false);
-      },
-    };
+  it('List Technologies item is not added when feature flag "ui-list-technologies" is disabled for user', () => {
+    spyOn(featureManagerServiceStubInjected, 'isToggleEnabledForUser').and.returnValue(of(false));
     const itemsSidebar = [];
-    component.toggleListTechnologies(featureManagerServiceStub, itemsSidebar);
+
+    component.toggleListTechnologies(itemsSidebar);
+
     expect(itemsSidebar.length).toBe(0);
   });
 

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

@@ -29,7 +29,7 @@ export class SidebarComponent implements OnInit {
   ngOnInit(): void {
     this.toggleSideBar();
     this.getSidebarItems();
-    this.toggleListTechnologies(this.featureManagerService, this.itemsSidebar);
+    this.toggleListTechnologies(this.itemsSidebar);
     this.highlightMenuOption(this.router.routerState.snapshot.url);
     this.navStart.subscribe(evt => {
       this.highlightMenuOption(evt.url);
@@ -61,8 +61,8 @@ export class SidebarComponent implements OnInit {
     }
   }
 
-  toggleListTechnologies(featureManagerService, itemsSidebar: ItemSidebar[]){
-    featureManagerService
+  toggleListTechnologies(itemsSidebar: ItemSidebar[]){
+    this.featureManagerService
     .isToggleEnabledForUser('ui-list-technologies')
     .subscribe((enabled) => {
       if (enabled === true){