build: TT-106 Perform unit test on the TimeClock, ProjectListHover and EntryFields components

Author: VanessaIniguezG

src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts

@@ -155,6 +155,21 @@ describe('EntryFieldsComponent', () => {
     expect(component.selectedTechnologies).toEqual([]);
   });
 
+  
+
+    const exponentialGrowth = [true, false];
+    exponentialGrowth.map((toggleValue) => {
+      it(`when FeatureToggle is ${toggleValue} should return true`, () => {
+        console.log(toggleValue);
+        spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue));
+        const isFeatureToggleActivated: Promise<boolean> = component.isFeatureToggleActivated();
+        expect(featureManagerService.isToggleEnabled).toHaveBeenCalled();
+        isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue));
+      });
+    });
+    
+  
+
   it('displays error message when the date selected is in the future', () => {
     const mockEntry = { ...entry,
       start_date : moment().format(DATE_FORMAT_YEAR),
@@ -424,5 +439,10 @@ describe('EntryFieldsComponent', () => {
   //   expect(component.isFeatureToggleActivated).toHaveBeenCalled();
   //   expect(component.isUserRoleToggleOn).toBe(true);
   // });
+});
+
+describe('Describe de la primera prueba', () => {
 
+ 
+  
 });

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -62,10 +62,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
 
   async ngOnInit(): Promise<void> {
 
-    this.exponentialGrowth = await this.isFeatureToggleActivated();
-  
-    console.log(this.exponentialGrowth);
-  
+    this.exponentialGrowth = await this.isFeatureToggleActivated();  
 
     this.store.dispatch(new LoadActivities());
     this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear()));

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts

@@ -5,18 +5,20 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
-import { Subscription } from 'rxjs';
+import { Subscription, of } from 'rxjs';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { getCustomerProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
 import { FilterProjectPipe } from '../../../shared/pipes';
 import { UpdateEntryRunning } from '../../store/entry.actions';
 import { ProjectListHoverComponent } from './project-list-hover.component';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 
 describe('ProjectListHoverComponent', () => {
   let component: ProjectListHoverComponent;
   let fixture: ComponentFixture<ProjectListHoverComponent>;
   let store: MockStore<ProjectState>;
   let mockProjectsSelector;
+  let featureManagerService : FeatureManagerService;
   const toastrServiceStub = {
     error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
   };
@@ -56,6 +58,7 @@ describe('ProjectListHoverComponent', () => {
     fixture = TestBed.createComponent(ProjectListHoverComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    featureManagerService = TestBed.inject(FeatureManagerService);
   });
 
   it('should create', () => {
@@ -118,6 +121,17 @@ describe('ProjectListHoverComponent', () => {
       .toHaveBeenCalledWith({ project_id: 'customer - xyz'});
   });
 
+    const exponentialGrowth = [true, false];
+    exponentialGrowth.map((toggleValue) => {
+      it(`when FeatureToggle is ${toggleValue} should return true`, () => {
+        console.log(toggleValue);
+        spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue));
+        const isFeatureToggleActivated: Promise<boolean> = component.isFeatureToggleActivated();
+        expect(featureManagerService.isToggleEnabled).toHaveBeenCalled();
+        isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue));
+      });
+    });
+
 
   // TODO Fix this test since it is throwing this error
   // Expected spy dispatch to have been called with:

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -3,14 +3,15 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { ToastrService } from 'ngx-toastr';
 import { Observable, Subscription } from 'rxjs';
-import { delay, filter } from 'rxjs/operators';
+import { delay, filter, map } from 'rxjs/operators';
 import { Project } from 'src/app/modules/shared/models';
 import * as actions from '../../../customer-management/components/projects/components/store/project.actions';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import * as entryActions from '../../store/entry.actions';
 import { getIsLoading, getProjects } from './../../../customer-management/components/projects/components/store/project.selectors';
 import { EntryActionTypes } from './../../store/entry.actions';
 import { getActiveTimeEntry } from './../../store/entry.selectors';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 @Component({
   selector: 'app-project-list-hover',
   templateUrl: './project-list-hover.component.html',
@@ -25,24 +26,26 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   showClockIn: boolean;
   updateEntrySubscription: Subscription;
   isLoading$: Observable<boolean>;
-
-
-  /**
-   * subscription variables
-  */
   projectsSubscribe : Subscription;
   activeEntrySubscribe : Subscription;
+  projectsSubject;
+  activeEntrySubject;
+  exponentialGrowth;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<ProjectState>,
+  constructor(private featureManagerService: FeatureManagerService,
+              private formBuilder: FormBuilder, private store: Store<ProjectState>,
               private actionsSubject$: ActionsSubject, private toastrService: ToastrService) {
     this.projectsForm = this.formBuilder.group({ project_id: null, });
     this.isLoading$ = this.store.pipe(delay(0), select(getIsLoading));
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
+
+    this.exponentialGrowth = await this.isFeatureToggleActivated();
+
     this.store.dispatch(new actions.LoadProjects());
     const projects$ = this.store.pipe(select(getProjects));
-    this.projectsSubscribe = projects$.subscribe((projects) => {
+    this.projectsSubject = projects$.subscribe((projects) => {
       this.listProjects = [];
       projects.forEach((project) => {
           const projectWithSearchField = {...project};
@@ -53,6 +56,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
       this.loadActiveTimeEntry();
     });
 
+    this.exponentialGrowth  ? this.projectsSubscribe = this.projectsSubject : this.projectsSubject;
+
     this.updateEntrySubscription = this.actionsSubject$.pipe(
       filter((action: any) => (
           action.type === EntryActionTypes.UPDATE_ENTRY_SUCCESS
@@ -68,7 +73,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   loadActiveTimeEntry() {
     this.store.dispatch(new entryActions.LoadActiveEntry());
     const activeEntry$ = this.store.pipe(select(getActiveTimeEntry));
-    this.activeEntrySubscribe = activeEntry$.subscribe((activeEntry) => {
+    this.activeEntrySubject = activeEntry$.subscribe((activeEntry) => {
       this.activeEntry = activeEntry;
       if (activeEntry) {
         this.showClockIn = false;
@@ -78,6 +83,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
         this.projectsForm.setValue({ project_id: null });
       }
     });
+    this.exponentialGrowth  ? this.activeEntrySubscribe = this.activeEntrySubject : this.activeEntrySubject;
   }
 
   setSelectedProject() {
@@ -117,8 +123,18 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.updateEntrySubscription.unsubscribe();
-    this.projectsSubscribe.unsubscribe();
+    if(this.exponentialGrowth){
+      this.projectsSubscribe.unsubscribe();
     this.activeEntrySubscribe.unsubscribe();
+    }
+    this.updateEntrySubscription.unsubscribe();
   }
+
+  isFeatureToggleActivated() {
+    return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
+       map((enabled) => {
+         return enabled === true ? true : false;
+       })
+     ).toPromise();
+ }
 }

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -1,3 +1,4 @@
+import { of } from 'rxjs';
 import { FormBuilder } from '@angular/forms';
 import { StopTimeEntryRunning, EntryActionTypes, LoadEntriesSummary } from './../store/entry.actions';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
@@ -11,12 +12,14 @@ import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 import { ActionsSubject } from '@ngrx/store';
 import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component';
 import { ToastrService } from 'ngx-toastr';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
   let store: MockStore<ProjectState>;
   let azureAdB2CService: AzureAdB2CService;
+  let featureManagerService : FeatureManagerService;
   const actionSub: ActionsSubject = new ActionsSubject();
 
   let injectedToastrService;
@@ -69,6 +72,7 @@ describe('TimeClockComponent', () => {
     fixture.detectChanges();
     azureAdB2CService = TestBed.inject(AzureAdB2CService);
     injectedToastrService = TestBed.inject(ToastrService);
+    featureManagerService = TestBed.inject(FeatureManagerService);
   });
 
   it('should be created', () => {
@@ -142,4 +146,15 @@ describe('TimeClockComponent', () => {
 
     expect(injectedToastrService.error).toHaveBeenCalled();
   });
+
+  const exponentialGrowth = [true, false];
+    exponentialGrowth.map((toggleValue) => {
+      it(`when FeatureToggle is ${toggleValue} should return true`, () => {
+        console.log(toggleValue);
+        spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue));
+        const isFeatureToggleActivated: Promise<boolean> = component.isFeatureToggleActivated();
+        expect(featureManagerService.isToggleEnabled).toHaveBeenCalled();
+        isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue));
+      });
+    });
 });

src/app/modules/time-clock/pages/time-clock.component.ts

@@ -23,13 +23,7 @@ export class TimeClockComponent implements OnInit, OnDestroy {
   areFieldsVisible = false;
   activeTimeEntry: Entry;
   clockOutSubscription: Subscription;
-
-
-  /**
-   * subscription variables
-  */
   storeSubscribe : Subscription;
-
   storeSubject;
   exponentialGrowth;
 
@@ -43,21 +37,13 @@ export class TimeClockComponent implements OnInit, OnDestroy {
     private actionsSubject$: ActionsSubject
   ) {}
 
-  ngOnDestroy(): void {
-    // if(this.exponentialGrowth){
-    //   this.storeSubscribe.unsubscribe();
-    // }
-    this.clockOutSubscription.unsubscribe();
-    this.storeSubscribe.unsubscribe();
-  }
+  
 
-  ngOnInit() {
+  async ngOnInit(): Promise<void> {
 
-    this.isFeatureToggleActivated().subscribe((flag) => {
-      this.exponentialGrowth = flag;
-      // console.log('Time-clock', this.exponentialGrowth);
-    });
-    // console.log('Time-clock', this.exponentialGrowth);
+    this.exponentialGrowth = await this.isFeatureToggleActivated();
+
+    console.log('This is',this.exponentialGrowth);
 
     this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : '';
 
@@ -101,13 +87,20 @@ export class TimeClockComponent implements OnInit, OnDestroy {
     }
   }
 
-  isFeatureToggleActivated() {
-    return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
-       map((enabled) => {
-         return enabled === true ? true : false;
-       })
-     );
- }
+ ngOnDestroy(): void {
+  this.exponentialGrowth && this.storeSubscribe.unsubscribe();
+  this.clockOutSubscription.unsubscribe();
+  this.storeSubscribe.unsubscribe();
+}
+
+isFeatureToggleActivated() {
+  return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
+     map((enabled) => {
+       return enabled === true ? true : false;
+     })
+   ).toPromise();
+}
+
 }