From b11035362aefd6d13ea81ae13ae821759135bb5f Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 5 Feb 2021 19:23:54 -0500 Subject: [PATCH 1/8] fix: TT-106 Syntax correction in the ProjectListHover, EntryFields, TimeClock components and test files --- .../entry-fields.component.spec.ts | 18 +++++- .../entry-fields/entry-fields.component.ts | 58 ++++++++++++++----- .../project-list-hover.component.spec.ts | 16 ++++- .../project-list-hover.component.ts | 39 ++++++++++--- .../pages/time-clock.component.spec.ts | 14 +++++ .../time-clock/pages/time-clock.component.ts | 41 ++++++++++--- 6 files changed, 152 insertions(+), 34 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts index 4764ac6a8..907d6f656 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts @@ -1,3 +1,4 @@ +import { Observable, of } from 'rxjs'; import { LoadActiveEntry, EntryActionTypes, UpdateEntry } from './../../store/entry.actions'; import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; @@ -15,6 +16,7 @@ import { formatDate } from '@angular/common'; import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'; import * as moment from 'moment'; import { DATE_FORMAT_YEAR } from 'src/environments/environment'; +import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service'; describe('EntryFieldsComponent', () => { type Merged = TechnologyState & ProjectState; @@ -24,6 +26,7 @@ describe('EntryFieldsComponent', () => { let mockTechnologySelector; let mockProjectsSelector; let entryForm; + let featureManagerService: FeatureManagerService; const actionSub: ActionsSubject = new ActionsSubject(); const toastrServiceStub = { error: (message?: string, title?: string, override?: Partial) => { }, @@ -114,6 +117,7 @@ describe('EntryFieldsComponent', () => { entryForm = TestBed.inject(FormBuilder); mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies); mockProjectsSelector = store.overrideSelector(getCustomerProjects, state.projects); + featureManagerService = TestBed.inject(FeatureManagerService); })); beforeEach(() => { @@ -136,8 +140,6 @@ describe('EntryFieldsComponent', () => { spyOn(component.entryForm, 'patchValue'); - component.setDataToUpdate(entry); - expect(component.entryForm.patchValue).toHaveBeenCalledTimes(1); expect(component.entryForm.patchValue).toHaveBeenCalledWith( { @@ -151,11 +153,22 @@ describe('EntryFieldsComponent', () => { expect(component.selectedTechnologies).toEqual([]); }); + const exponentialGrowth = [true, false]; + exponentialGrowth.map((toggleValue) => { + it(`when FeatureToggle is ${toggleValue} should return true`, () => { + spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + const isFeatureToggleActivated: Promise = 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), start_hour : moment().format('HH:mm') }; + component.newData = mockEntry; component.activeEntry = mockEntry ; component.setDataToUpdate(mockEntry); @@ -411,5 +424,4 @@ describe('EntryFieldsComponent', () => { expect(component.selectedTechnologies).toBe(initialTechnologies); }); - }); diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index f6160a48f..c4f361226 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -1,13 +1,14 @@ import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions'; import { EntryActionTypes, LoadActiveEntry } from './../../store/entry.actions'; -import { filter } from 'rxjs/operators'; -import { Component, OnInit } from '@angular/core'; +import { filter, map } from 'rxjs/operators'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Store, ActionsSubject, select } from '@ngrx/store'; import { Activity, NewEntry } from '../../../shared/models'; import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer'; import { TechnologyState } from '../../../shared/store/technology.reducers'; import { ActivityState, LoadActivities } from '../../../activities-management/store'; +import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service'; import * as entryActions from '../../store/entry.actions'; import { get } from 'lodash'; @@ -16,6 +17,7 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; import { getTimeEntriesDataSource } from '../../store/entry.selectors'; import { DATE_FORMAT } from 'src/environments/environment'; +import { Subscription } from 'rxjs'; type Merged = TechnologyState & ProjectState & ActivityState; @@ -24,7 +26,7 @@ type Merged = TechnologyState & ProjectState & ActivityState; templateUrl: './entry-fields.component.html', styleUrls: ['./entry-fields.component.scss'], }) -export class EntryFieldsComponent implements OnInit { +export class EntryFieldsComponent implements OnInit, OnDestroy { entryForm: FormGroup; selectedTechnologies: string[] = []; activities: Activity[] = []; @@ -32,8 +34,17 @@ export class EntryFieldsComponent implements OnInit { newData; lastEntry; showTimeInbuttons = false; + loadActivitiesSubscribe: Subscription; + loadActiveEntrySubscribe: Subscription; + actionSetDateSubscribe: Subscription; + loadActivitiesSubject; + loadActiveEntrySubject; + actionSetDateSubject; + + exponentialGrowth; constructor( + private featureManagerService: FeatureManagerService, private formBuilder: FormBuilder, private store: Store, private actionsSubject$: ActionsSubject, @@ -48,17 +59,20 @@ export class EntryFieldsComponent implements OnInit { }); } - ngOnInit(): void { + + async ngOnInit(): Promise { + this.exponentialGrowth = await this.isFeatureToggleActivated(); this.store.dispatch(new LoadActivities()); this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear())); - this.actionsSubject$ + this.loadActivitiesSubject = this.actionsSubject$ .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS)) .subscribe((action) => { this.activities = action.payload; this.store.dispatch(new LoadActiveEntry()); }); - - this.actionsSubject$ + // tslint:disable-next-line + this.exponentialGrowth ? this.loadActivitiesSubscribe = this.loadActivitiesSubject : this.loadActivitiesSubject; + this.loadActiveEntrySubject = this.actionsSubject$ .pipe( filter( (action: any) => @@ -76,8 +90,9 @@ export class EntryFieldsComponent implements OnInit { this.store.dispatch(new entryActions.LoadEntriesSummary()); } }); - - this.actionsSubject$ + // tslint:disable-next-line + this.exponentialGrowth ? this.loadActiveEntrySubscribe = this.loadActiveEntrySubject : this.loadActiveEntrySubject; + this.actionSetDateSubject = this.actionsSubject$ .pipe(filter((action: any) => action.type === EntryActionTypes.LOAD_ACTIVE_ENTRY_SUCCESS)) .subscribe((action) => { this.activeEntry = action.payload; @@ -90,17 +105,16 @@ export class EntryFieldsComponent implements OnInit { start_date: this.activeEntry.start_date, start_hour: formatDate(this.activeEntry.start_date, 'HH:mm', 'en'), }; - }); + }); + // tslint:disable-next-line + this.exponentialGrowth ? this.actionSetDateSubscribe = this.actionSetDateSubject : this.actionSetDateSubject; } - get activity_id() { return this.entryForm.get('activity_id'); } - get start_hour() { return this.entryForm.get('start_hour'); } - setDataToUpdate(entryData: NewEntry) { if (entryData) { this.entryForm.patchValue({ @@ -174,4 +188,22 @@ export class EntryFieldsComponent implements OnInit { onTechnologyRemoved($event: string[]) { this.store.dispatch(new entryActions.UpdateEntryRunning({ ...this.newData, technologies: $event })); } + + + ngOnDestroy(): void { + + if (this.exponentialGrowth) { + this.loadActivitiesSubscribe.unsubscribe(); + this.loadActiveEntrySubscribe.unsubscribe(); + this.actionSetDateSubscribe.unsubscribe(); + } + } + + isFeatureToggleActivated() { + return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( + map((enabled) => { + return enabled === true ? true : false; + }) + ).toPromise(); + } } diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts index c7dd88ef4..6940e653e 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts +++ b/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; let store: MockStore; let mockProjectsSelector; + let featureManagerService: FeatureManagerService; const toastrServiceStub = { error: (message?: string, title?: string, override?: Partial) => { } }; @@ -56,6 +58,7 @@ describe('ProjectListHoverComponent', () => { fixture = TestBed.createComponent(ProjectListHoverComponent); component = fixture.componentInstance; fixture.detectChanges(); + featureManagerService = TestBed.inject(FeatureManagerService); }); it('should create', () => { @@ -118,7 +121,15 @@ describe('ProjectListHoverComponent', () => { .toHaveBeenCalledWith({ project_id: 'customer - xyz'}); }); - + const exponentialGrowth = [true, false]; + exponentialGrowth.map((toggleValue) => { + it(`when FeatureToggle is ${toggleValue} should return true`, () => { + spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + const isFeatureToggleActivated: Promise = 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: // [CreateEntry({ payload: Object({ project_id: '1', start_date: '2020-07-27T22:30:26.743Z', timezone_offset: 300 }), @@ -140,5 +151,4 @@ describe('ProjectListHoverComponent', () => { // }) // ); // }); - }); diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index 6213e3ca7..816150dcb 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -3,7 +3,7 @@ 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'; @@ -11,13 +11,13 @@ 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', styleUrls: ['./project-list-hover.component.scss'], }) export class ProjectListHoverComponent implements OnInit, OnDestroy { - keyword = 'search_field'; listProjects: Project[] = []; activeEntry; @@ -25,17 +25,26 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { showClockIn: boolean; updateEntrySubscription: Subscription; isLoading$: Observable; + projectsSubscribe: Subscription; + activeEntrySubscribe: Subscription; + projectsSubject; + activeEntrySubject; + exponentialGrowth; - constructor(private formBuilder: FormBuilder, private store: Store, + constructor(private featureManagerService: FeatureManagerService, + private formBuilder: FormBuilder, private store: Store, 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 { + + this.exponentialGrowth = await this.isFeatureToggleActivated(); + this.store.dispatch(new actions.LoadProjects()); const projects$ = this.store.pipe(select(getProjects)); - projects$.subscribe((projects) => { + this.projectsSubject = projects$.subscribe((projects) => { this.listProjects = []; projects.forEach((project) => { const projectWithSearchField = {...project}; @@ -45,7 +54,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { ); this.loadActiveTimeEntry(); }); - + // tslint:disable-next-line + this.exponentialGrowth ? this.projectsSubscribe = this.projectsSubject : this.projectsSubject; this.updateEntrySubscription = this.actionsSubject$.pipe( filter((action: any) => ( action.type === EntryActionTypes.UPDATE_ENTRY_SUCCESS @@ -61,7 +71,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { loadActiveTimeEntry() { this.store.dispatch(new entryActions.LoadActiveEntry()); const activeEntry$ = this.store.pipe(select(getActiveTimeEntry)); - activeEntry$.subscribe((activeEntry) => { + this.activeEntrySubject = activeEntry$.subscribe((activeEntry) => { this.activeEntry = activeEntry; if (activeEntry) { this.showClockIn = false; @@ -71,8 +81,9 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { this.projectsForm.setValue({ project_id: null }); } }); + // tslint:disable-next-line + this.exponentialGrowth ? this.activeEntrySubscribe = this.activeEntrySubject : this.activeEntrySubject; } - setSelectedProject() { this.listProjects.forEach( (project) => { if (project.id === this.activeEntry.project_id) { @@ -110,6 +121,18 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { + 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(); + } } diff --git a/src/app/modules/time-clock/pages/time-clock.component.spec.ts b/src/app/modules/time-clock/pages/time-clock.component.spec.ts index 1fa2476ee..582a114af 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.spec.ts +++ b/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; let store: MockStore; 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,14 @@ describe('TimeClockComponent', () => { expect(injectedToastrService.error).toHaveBeenCalled(); }); + + const exponentialGrowth = [true, false]; + exponentialGrowth.map((toggleValue) => { + it(`when FeatureToggle is ${toggleValue} should return true`, () => { + spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); + expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); + isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); + }); + }); }); diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index ac57d88aa..0667a84d1 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -2,12 +2,15 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ActionsSubject, select, Store } from '@ngrx/store'; import { ToastrService } from 'ngx-toastr'; import { Subscription } from 'rxjs'; -import { filter } from 'rxjs/operators'; + +import { filter, map } from 'rxjs/operators'; +import { threadId } from 'worker_threads'; import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service'; import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component'; import { Entry } from './../../shared/models/entry.model'; import { EntryActionTypes, LoadEntriesSummary, StopTimeEntryRunning } 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-time-clock', templateUrl: './time-clock.component.html', @@ -20,22 +23,27 @@ export class TimeClockComponent implements OnInit, OnDestroy { areFieldsVisible = false; activeTimeEntry: Entry; clockOutSubscription: Subscription; + storeSubscribe: Subscription; + storeSubject; + exponentialGrowth; + constructor( + private featureManagerService: FeatureManagerService, private azureAdB2CService: AzureAdB2CService, private store: Store, private toastrService: ToastrService, private actionsSubject$: ActionsSubject ) {} - ngOnDestroy(): void { - this.clockOutSubscription.unsubscribe(); - } + async ngOnInit(): Promise { + + this.exponentialGrowth = await this.isFeatureToggleActivated(); - ngOnInit() { this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : ''; - this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { + + this.storeSubscribe = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { this.activeTimeEntry = activeTimeEntry; if (this.activeTimeEntry) { this.areFieldsVisible = true; @@ -43,9 +51,10 @@ export class TimeClockComponent implements OnInit, OnDestroy { this.areFieldsVisible = false; } }); + // tslint:disable-next-line + this.exponentialGrowth ? this.storeSubscribe = this.storeSubject : this.storeSubject; this.reloadSummariesOnClockOut(); - } reloadSummariesOnClockOut() { @@ -72,4 +81,22 @@ export class TimeClockComponent implements OnInit, OnDestroy { this.toastrService.error('Activity is required'); } } + + ngOnDestroy(): void { + // tslint:disable-next-line + 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(); +} + +} + + From 480f0332328b126c9b3a56a64bada1a9fd4caf05 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 7 Feb 2021 19:28:21 -0500 Subject: [PATCH 2/8] refactor: TT-106 Use the exponentialGrowth flag to destroy unnecessary requests in EntryFields, ProjectListHover, TimeClock components --- .../entry-fields/entry-fields.component.ts | 27 +++++-------------- .../project-list-hover.component.ts | 20 +++++--------- .../time-clock/pages/time-clock.component.ts | 25 +++++------------ 3 files changed, 20 insertions(+), 52 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index c4f361226..d6f8120d8 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -9,7 +9,6 @@ import { ProjectState } from '../../../customer-management/components/projects/c import { TechnologyState } from '../../../shared/store/technology.reducers'; import { ActivityState, LoadActivities } from '../../../activities-management/store'; import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service'; - import * as entryActions from '../../store/entry.actions'; import { get } from 'lodash'; import * as moment from 'moment'; @@ -37,10 +36,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { loadActivitiesSubscribe: Subscription; loadActiveEntrySubscribe: Subscription; actionSetDateSubscribe: Subscription; - loadActivitiesSubject; - loadActiveEntrySubject; - actionSetDateSubject; - exponentialGrowth; constructor( @@ -59,20 +54,17 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { }); } - async ngOnInit(): Promise { this.exponentialGrowth = await this.isFeatureToggleActivated(); this.store.dispatch(new LoadActivities()); this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear())); - this.loadActivitiesSubject = this.actionsSubject$ + this.loadActivitiesSubscribe = this.actionsSubject$ .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS)) .subscribe((action) => { this.activities = action.payload; this.store.dispatch(new LoadActiveEntry()); }); - // tslint:disable-next-line - this.exponentialGrowth ? this.loadActivitiesSubscribe = this.loadActivitiesSubject : this.loadActivitiesSubject; - this.loadActiveEntrySubject = this.actionsSubject$ + this.loadActiveEntrySubscribe = this.actionsSubject$ .pipe( filter( (action: any) => @@ -90,9 +82,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { this.store.dispatch(new entryActions.LoadEntriesSummary()); } }); - // tslint:disable-next-line - this.exponentialGrowth ? this.loadActiveEntrySubscribe = this.loadActiveEntrySubject : this.loadActiveEntrySubject; - this.actionSetDateSubject = this.actionsSubject$ + this.actionSetDateSubscribe = this.actionsSubject$ .pipe(filter((action: any) => action.type === EntryActionTypes.LOAD_ACTIVE_ENTRY_SUCCESS)) .subscribe((action) => { this.activeEntry = action.payload; @@ -106,8 +96,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { start_hour: formatDate(this.activeEntry.start_date, 'HH:mm', 'en'), }; }); - // tslint:disable-next-line - this.exponentialGrowth ? this.actionSetDateSubscribe = this.actionSetDateSubject : this.actionSetDateSubject; } get activity_id() { return this.entryForm.get('activity_id'); @@ -191,7 +179,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { ngOnDestroy(): void { - if (this.exponentialGrowth) { this.loadActivitiesSubscribe.unsubscribe(); this.loadActiveEntrySubscribe.unsubscribe(); @@ -200,10 +187,10 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { } isFeatureToggleActivated() { - return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => { + return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( + map((enabled) => { return enabled === true ? true : false; - }) - ).toPromise(); + }) + ).toPromise(); } } diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index 816150dcb..3fc55c40c 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -27,8 +27,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { isLoading$: Observable; projectsSubscribe: Subscription; activeEntrySubscribe: Subscription; - projectsSubject; - activeEntrySubject; exponentialGrowth; constructor(private featureManagerService: FeatureManagerService, @@ -39,12 +37,10 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } async ngOnInit(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); - this.store.dispatch(new actions.LoadProjects()); const projects$ = this.store.pipe(select(getProjects)); - this.projectsSubject = projects$.subscribe((projects) => { + this.projectsSubscribe = projects$.subscribe((projects) => { this.listProjects = []; projects.forEach((project) => { const projectWithSearchField = {...project}; @@ -54,8 +50,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { ); this.loadActiveTimeEntry(); }); - // tslint:disable-next-line - this.exponentialGrowth ? this.projectsSubscribe = this.projectsSubject : this.projectsSubject; this.updateEntrySubscription = this.actionsSubject$.pipe( filter((action: any) => ( action.type === EntryActionTypes.UPDATE_ENTRY_SUCCESS @@ -65,13 +59,12 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { this.activeEntry = action.payload; this.setSelectedProject(); }); - } loadActiveTimeEntry() { this.store.dispatch(new entryActions.LoadActiveEntry()); const activeEntry$ = this.store.pipe(select(getActiveTimeEntry)); - this.activeEntrySubject = activeEntry$.subscribe((activeEntry) => { + this.activeEntrySubscribe = activeEntry$.subscribe((activeEntry) => { this.activeEntry = activeEntry; if (activeEntry) { this.showClockIn = false; @@ -81,9 +74,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { this.projectsForm.setValue({ project_id: null }); } }); - // tslint:disable-next-line - this.exponentialGrowth ? this.activeEntrySubscribe = this.activeEntrySubject : this.activeEntrySubject; } + setSelectedProject() { this.listProjects.forEach( (project) => { if (project.id === this.activeEntry.project_id) { @@ -130,9 +122,9 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { isFeatureToggleActivated() { return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => { + map((enabled) => { return enabled === true ? true : false; - }) - ).toPromise(); + }) + ).toPromise(); } } diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index 0667a84d1..5d3278c61 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -24,11 +24,8 @@ export class TimeClockComponent implements OnInit, OnDestroy { activeTimeEntry: Entry; clockOutSubscription: Subscription; storeSubscribe: Subscription; - storeSubject; exponentialGrowth; - - constructor( private featureManagerService: FeatureManagerService, private azureAdB2CService: AzureAdB2CService, @@ -38,11 +35,8 @@ export class TimeClockComponent implements OnInit, OnDestroy { ) {} async ngOnInit(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); - this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : ''; - this.storeSubscribe = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { this.activeTimeEntry = activeTimeEntry; if (this.activeTimeEntry) { @@ -51,9 +45,6 @@ export class TimeClockComponent implements OnInit, OnDestroy { this.areFieldsVisible = false; } }); - // tslint:disable-next-line - this.exponentialGrowth ? this.storeSubscribe = this.storeSubject : this.storeSubject; - this.reloadSummariesOnClockOut(); } @@ -83,20 +74,18 @@ export class TimeClockComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - // tslint:disable-next-line 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(); -} - + isFeatureToggleActivated() { + return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( + map((enabled) => { + return enabled === true ? true : false; + }) + ).toPromise(); + } } From 1d9395aa167832f8c073a5166eec5c7aff05dd71 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 9 Feb 2021 15:40:18 -0500 Subject: [PATCH 3/8] refactor: TT-106 Change of variables and call of the feature toggle in the TimeClock, EntryFields and ProjectListHover components --- .../entry-fields.component.spec.ts | 22 ++++---- .../entry-fields/entry-fields.component.ts | 24 ++++---- .../project-list-hover.component.spec.ts | 56 +++++++++++++++---- .../project-list-hover.component.ts | 21 ++++--- .../pages/time-clock.component.spec.ts | 20 +++---- .../time-clock/pages/time-clock.component.ts | 15 ++--- 6 files changed, 97 insertions(+), 61 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts index 907d6f656..494857390 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts @@ -117,7 +117,7 @@ describe('EntryFieldsComponent', () => { entryForm = TestBed.inject(FormBuilder); mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies); mockProjectsSelector = store.overrideSelector(getCustomerProjects, state.projects); - featureManagerService = TestBed.inject(FeatureManagerService); + // featureManagerService = TestBed.inject(FeatureManagerService); })); beforeEach(() => { @@ -139,7 +139,7 @@ describe('EntryFieldsComponent', () => { }; spyOn(component.entryForm, 'patchValue'); - + component.setDataToUpdate(entry); expect(component.entryForm.patchValue).toHaveBeenCalledTimes(1); expect(component.entryForm.patchValue).toHaveBeenCalledWith( { @@ -153,15 +153,15 @@ describe('EntryFieldsComponent', () => { expect(component.selectedTechnologies).toEqual([]); }); - const exponentialGrowth = [true, false]; - exponentialGrowth.map((toggleValue) => { - it(`when FeatureToggle is ${toggleValue} should return true`, () => { - spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); - expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); - isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); - }); - }); + // const exponentialGrowth = [true, false]; + // exponentialGrowth.map((toggleValue) => { + // it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { + // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + // const isFeatureToggleActivated: Promise = 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, diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index d6f8120d8..6917db6f4 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -33,9 +33,9 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { newData; lastEntry; showTimeInbuttons = false; - loadActivitiesSubscribe: Subscription; - loadActiveEntrySubscribe: Subscription; - actionSetDateSubscribe: Subscription; + loadActivitiesSubscription: Subscription; + loadActiveEntrySubscription: Subscription; + actionSetDateSubscription: Subscription; exponentialGrowth; constructor( @@ -54,17 +54,16 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { }); } - async ngOnInit(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); + ngOnInit(): void { this.store.dispatch(new LoadActivities()); this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear())); - this.loadActivitiesSubscribe = this.actionsSubject$ + this.loadActivitiesSubscription = this.actionsSubject$ .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS)) .subscribe((action) => { this.activities = action.payload; this.store.dispatch(new LoadActiveEntry()); }); - this.loadActiveEntrySubscribe = this.actionsSubject$ + this.loadActiveEntrySubscription = this.actionsSubject$ .pipe( filter( (action: any) => @@ -82,7 +81,7 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { this.store.dispatch(new entryActions.LoadEntriesSummary()); } }); - this.actionSetDateSubscribe = this.actionsSubject$ + this.actionSetDateSubscription = this.actionsSubject$ .pipe(filter((action: any) => action.type === EntryActionTypes.LOAD_ACTIVE_ENTRY_SUCCESS)) .subscribe((action) => { this.activeEntry = action.payload; @@ -178,11 +177,12 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { } - ngOnDestroy(): void { + async ngOnDestroy():Promise { + this.exponentialGrowth = await this.isFeatureToggleActivated(); if (this.exponentialGrowth) { - this.loadActivitiesSubscribe.unsubscribe(); - this.loadActiveEntrySubscribe.unsubscribe(); - this.actionSetDateSubscribe.unsubscribe(); + this.loadActivitiesSubscription.unsubscribe(); + this.loadActiveEntrySubscription.unsubscribe(); + this.actionSetDateSubscription.unsubscribe(); } } diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts index 6940e653e..53f10ea7a 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts @@ -58,7 +58,7 @@ describe('ProjectListHoverComponent', () => { fixture = TestBed.createComponent(ProjectListHoverComponent); component = fixture.componentInstance; fixture.detectChanges(); - featureManagerService = TestBed.inject(FeatureManagerService); + // featureManagerService = TestBed.inject(FeatureManagerService); }); it('should create', () => { @@ -110,6 +110,29 @@ describe('ProjectListHoverComponent', () => { expect(component.updateEntrySubscription.unsubscribe).toHaveBeenCalled(); }); + // it('calls projectsSubscribe unsubscribe on ngDestroy', () => { + // component.projectsSubscription = new Subscription(); + // spyOn(component.projectsSubscribe, 'unsubscribe'); + + // component.ngOnDestroy(); + + // expect(component.projectsSubscribe.unsubscribe).toHaveBeenCalledTimes(1); + // }); + + // fit('When Component is created, should call the feature toggle method', () => { + // // component.exponentialGrowth = true; + // component.projectsSubscribe = new Subscription(); + // component.activeEntrySubscribe = new Subscription(); + // spyOn(component.projectsSubscribe, 'unsubscribe'); + // spyOn(component.activeEntrySubscribe, 'unsubscribe'); + + // component.ngOnDestroy(); + + // expect(component.projectsSubscribe.unsubscribe).toHaveBeenCalled(); + // expect(component.activeEntrySubscribe.unsubscribe).toHaveBeenCalled(); + + // }); + it('sets customer name and project name on setSelectedProject', () => { spyOn(component.projectsForm, 'setValue'); component.activeEntry = { project_id : 'p1'}; @@ -121,15 +144,28 @@ describe('ProjectListHoverComponent', () => { .toHaveBeenCalledWith({ project_id: 'customer - xyz'}); }); - const exponentialGrowth = [true, false]; - exponentialGrowth.map((toggleValue) => { - it(`when FeatureToggle is ${toggleValue} should return true`, () => { - spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); - expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); - isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); - }); - }); + // const exponentialGrowth = [true, false]; + // exponentialGrowth.map((toggleValue) => { + // it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { + // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + // const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); + // expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); + // isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); + // }); + // }); + + // it('deleteProject, should dispatch DeleteProject action', () => { + // component.projectsSubscription = new Subscription(); + // const subscription = spyOn(component.projectsSubscription, 'unsubscribe'); + + // component.idToDelete = project.id; + // spyOn(store, 'dispatch'); + // component.deleteProject(); + // component.ngOnDestroy(); + // expect(subscription).toHaveBeenCalledTimes(1); + // expect(store.dispatch).toHaveBeenCalledTimes(1); + // expect(store.dispatch).toHaveBeenCalledWith(new DeleteProject(project.id)); + // }); // TODO Fix this test since it is throwing this error // Expected spy dispatch to have been called with: // [CreateEntry({ payload: Object({ project_id: '1', start_date: '2020-07-27T22:30:26.743Z', timezone_offset: 300 }), diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index 3fc55c40c..da8708bd9 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -25,8 +25,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { showClockIn: boolean; updateEntrySubscription: Subscription; isLoading$: Observable; - projectsSubscribe: Subscription; - activeEntrySubscribe: Subscription; + projectsSubscription: Subscription; + activeEntrySubscription: Subscription; exponentialGrowth; constructor(private featureManagerService: FeatureManagerService, @@ -36,11 +36,10 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { this.isLoading$ = this.store.pipe(delay(0), select(getIsLoading)); } - async ngOnInit(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); + ngOnInit(): void { this.store.dispatch(new actions.LoadProjects()); const projects$ = this.store.pipe(select(getProjects)); - this.projectsSubscribe = projects$.subscribe((projects) => { + this.projectsSubscription = projects$.subscribe((projects) => { this.listProjects = []; projects.forEach((project) => { const projectWithSearchField = {...project}; @@ -64,7 +63,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.activeEntrySubscription = activeEntry$.subscribe((activeEntry) => { this.activeEntry = activeEntry; if (activeEntry) { this.showClockIn = false; @@ -75,7 +74,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } }); } - setSelectedProject() { this.listProjects.forEach( (project) => { if (project.id === this.activeEntry.project_id) { @@ -112,10 +110,11 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } } - ngOnDestroy(): void { - if (this.exponentialGrowth) { - this.projectsSubscribe.unsubscribe(); - this.activeEntrySubscribe.unsubscribe(); + async ngOnDestroy(): Promise { + this.exponentialGrowth = await this.isFeatureToggleActivated(); + if(this.exponentialGrowth){ + this.projectsSubscription.unsubscribe(); + this.activeEntrySubscription.unsubscribe(); } this.updateEntrySubscription.unsubscribe(); } diff --git a/src/app/modules/time-clock/pages/time-clock.component.spec.ts b/src/app/modules/time-clock/pages/time-clock.component.spec.ts index 582a114af..be4693100 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.spec.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.spec.ts @@ -72,7 +72,7 @@ describe('TimeClockComponent', () => { fixture.detectChanges(); azureAdB2CService = TestBed.inject(AzureAdB2CService); injectedToastrService = TestBed.inject(ToastrService); - featureManagerService = TestBed.inject(FeatureManagerService); + // featureManagerService = TestBed.inject(FeatureManagerService); }); it('should be created', () => { @@ -147,13 +147,13 @@ describe('TimeClockComponent', () => { expect(injectedToastrService.error).toHaveBeenCalled(); }); - const exponentialGrowth = [true, false]; - exponentialGrowth.map((toggleValue) => { - it(`when FeatureToggle is ${toggleValue} should return true`, () => { - spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); - expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); - isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); - }); - }); + // const exponentialGrowth = [true, false]; + // exponentialGrowth.map((toggleValue) => { + // it(`when FeatureToggle is ${toggleValue} should return true`, () => { + // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); + // const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); + // expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); + // isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); + // }); + // }); }); diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index 5d3278c61..7705a53aa 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -23,7 +23,7 @@ export class TimeClockComponent implements OnInit, OnDestroy { areFieldsVisible = false; activeTimeEntry: Entry; clockOutSubscription: Subscription; - storeSubscribe: Subscription; + storeSubscription: Subscription; exponentialGrowth; constructor( @@ -34,10 +34,10 @@ export class TimeClockComponent implements OnInit, OnDestroy { private actionsSubject$: ActionsSubject ) {} - async ngOnInit(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); + ngOnInit(): void{ + this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : ''; - this.storeSubscribe = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { + this.storeSubscription = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { this.activeTimeEntry = activeTimeEntry; if (this.activeTimeEntry) { this.areFieldsVisible = true; @@ -73,10 +73,11 @@ export class TimeClockComponent implements OnInit, OnDestroy { } } - ngOnDestroy(): void { - this.exponentialGrowth && this.storeSubscribe.unsubscribe(); + async ngOnDestroy(): Promise { + this.exponentialGrowth = await this.isFeatureToggleActivated(); + this.exponentialGrowth && this.storeSubscription.unsubscribe(); this.clockOutSubscription.unsubscribe(); - this.storeSubscribe.unsubscribe(); + this.storeSubscription.unsubscribe(); } isFeatureToggleActivated() { From 6146572725ce62f9ae954f864f8a28e5faeaae7a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 9 Feb 2021 15:52:38 -0500 Subject: [PATCH 4/8] refactor: TT-106 Delete exponentialGrowth variable in the TimeClock, ProjectListHover and EntryFields components --- .../components/entry-fields/entry-fields.component.ts | 11 +++-------- .../project-list-hover.component.ts | 11 +++-------- .../modules/time-clock/pages/time-clock.component.ts | 11 +++-------- 3 files changed, 9 insertions(+), 24 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index 6917db6f4..b16947d1c 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -36,7 +36,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { loadActivitiesSubscription: Subscription; loadActiveEntrySubscription: Subscription; actionSetDateSubscription: Subscription; - exponentialGrowth; constructor( private featureManagerService: FeatureManagerService, @@ -177,9 +176,8 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { } - async ngOnDestroy():Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); - if (this.exponentialGrowth) { + ngOnDestroy(): void { + if (this.isFeatureToggleActivated()) { this.loadActivitiesSubscription.unsubscribe(); this.loadActiveEntrySubscription.unsubscribe(); this.actionSetDateSubscription.unsubscribe(); @@ -188,9 +186,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { isFeatureToggleActivated() { return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => { - return enabled === true ? true : false; - }) - ).toPromise(); + map((enabled) => enabled)); } } diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index da8708bd9..e26ba40f8 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -27,7 +27,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { isLoading$: Observable; projectsSubscription: Subscription; activeEntrySubscription: Subscription; - exponentialGrowth; constructor(private featureManagerService: FeatureManagerService, private formBuilder: FormBuilder, private store: Store, @@ -110,9 +109,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } } - async ngOnDestroy(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); - if(this.exponentialGrowth){ + ngOnDestroy(): void { + if(this.isFeatureToggleActivated()){ this.projectsSubscription.unsubscribe(); this.activeEntrySubscription.unsubscribe(); } @@ -121,9 +119,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { isFeatureToggleActivated() { return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => { - return enabled === true ? true : false; - }) - ).toPromise(); + map((enabled) => enabled)); } } diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index 7705a53aa..b1847637c 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -24,7 +24,6 @@ export class TimeClockComponent implements OnInit, OnDestroy { activeTimeEntry: Entry; clockOutSubscription: Subscription; storeSubscription: Subscription; - exponentialGrowth; constructor( private featureManagerService: FeatureManagerService, @@ -73,19 +72,15 @@ export class TimeClockComponent implements OnInit, OnDestroy { } } - async ngOnDestroy(): Promise { - this.exponentialGrowth = await this.isFeatureToggleActivated(); - this.exponentialGrowth && this.storeSubscription.unsubscribe(); + ngOnDestroy(): void { + this.isFeatureToggleActivated() && this.storeSubscription.unsubscribe(); this.clockOutSubscription.unsubscribe(); this.storeSubscription.unsubscribe(); } isFeatureToggleActivated() { return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => { - return enabled === true ? true : false; - }) - ).toPromise(); + map((enabled) => enabled)); } } From 38d25bf28f1f75d4da72b3802db8c6deb02be67c Mon Sep 17 00:00:00 2001 From: Vanessa Date: Tue, 9 Feb 2021 16:51:08 -0500 Subject: [PATCH 5/8] refactor: TT-106 New tests for the ProjectListHover component to verify the behavior of ngOnDestroy when the flag is true or false --- .../project-list-hover.component.spec.ts | 33 ++++++++++++++++++- .../project-list-hover.component.ts | 4 +-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts index 53f10ea7a..e55f09454 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts @@ -58,7 +58,7 @@ describe('ProjectListHoverComponent', () => { fixture = TestBed.createComponent(ProjectListHoverComponent); component = fixture.componentInstance; fixture.detectChanges(); - // featureManagerService = TestBed.inject(FeatureManagerService); + featureManagerService = TestBed.inject(FeatureManagerService); }); it('should create', () => { @@ -143,6 +143,36 @@ describe('ProjectListHoverComponent', () => { expect(component.projectsForm.setValue) .toHaveBeenCalledWith({ project_id: 'customer - xyz'}); }); + + var toggleValue = true; + fit(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { + spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(toggleValue)); + component.projectsSubscription = new Subscription(); + component.activeEntrySubscription = new Subscription(); + + spyOn(component.projectsSubscription, 'unsubscribe'); + spyOn(component.activeEntrySubscription, 'unsubscribe'); + + component.ngOnDestroy(); + + expect(component.projectsSubscription.unsubscribe).toHaveBeenCalled(); + expect(component.activeEntrySubscription.unsubscribe).toHaveBeenCalled(); + }); + + toggleValue = false; + fit(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { + spyOn(component, 'isFeatureToggleActivated').and.returnValue(of(toggleValue)); + component.projectsSubscription = new Subscription(); + component.activeEntrySubscription = new Subscription(); + + spyOn(component.projectsSubscription, 'unsubscribe'); + spyOn(component.activeEntrySubscription, 'unsubscribe'); + + component.ngOnDestroy(); + + expect(component.projectsSubscription.unsubscribe).not.toHaveBeenCalled(); + expect(component.activeEntrySubscription.unsubscribe).not.toHaveBeenCalled(); + }); // const exponentialGrowth = [true, false]; // exponentialGrowth.map((toggleValue) => { @@ -187,4 +217,5 @@ describe('ProjectListHoverComponent', () => { // }) // ); // }); + }); diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index e26ba40f8..38eb9172a 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -109,7 +109,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } } - ngOnDestroy(): void { + ngOnDestroy(): void { if(this.isFeatureToggleActivated()){ this.projectsSubscription.unsubscribe(); this.activeEntrySubscription.unsubscribe(); @@ -119,6 +119,6 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { isFeatureToggleActivated() { return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => enabled)); + map((enabled) => enabled === true ? true : false)); } } From b0c9e788f0d76c0d08fb1bcfb027f62b1ae8af42 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 11 Feb 2021 16:01:32 -0500 Subject: [PATCH 6/8] refactor: TT-106 Use the ngOnDestroy to destroy subscriptions running in the background when changing components and create test to validate the call to unsubscribe in the ngOnDestroy --- .../entry-fields.component.spec.ts | 30 ++++--- .../entry-fields/entry-fields.component.ts | 18 +--- .../project-list-hover.component.spec.ts | 87 ++----------------- .../project-list-hover.component.ts | 17 +--- .../pages/time-clock.component.spec.ts | 17 +--- .../time-clock/pages/time-clock.component.ts | 18 ++-- 6 files changed, 39 insertions(+), 148 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts index 494857390..d44db390f 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts @@ -1,4 +1,4 @@ -import { Observable, of } from 'rxjs'; +import { Observable, of, Subscription } from 'rxjs'; import { LoadActiveEntry, EntryActionTypes, UpdateEntry } from './../../store/entry.actions'; import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; @@ -16,7 +16,6 @@ import { formatDate } from '@angular/common'; import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'; import * as moment from 'moment'; import { DATE_FORMAT_YEAR } from 'src/environments/environment'; -import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service'; describe('EntryFieldsComponent', () => { type Merged = TechnologyState & ProjectState; @@ -26,7 +25,6 @@ describe('EntryFieldsComponent', () => { let mockTechnologySelector; let mockProjectsSelector; let entryForm; - let featureManagerService: FeatureManagerService; const actionSub: ActionsSubject = new ActionsSubject(); const toastrServiceStub = { error: (message?: string, title?: string, override?: Partial) => { }, @@ -117,7 +115,6 @@ describe('EntryFieldsComponent', () => { entryForm = TestBed.inject(FormBuilder); mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies); mockProjectsSelector = store.overrideSelector(getCustomerProjects, state.projects); - // featureManagerService = TestBed.inject(FeatureManagerService); })); beforeEach(() => { @@ -153,16 +150,6 @@ describe('EntryFieldsComponent', () => { expect(component.selectedTechnologies).toEqual([]); }); - // const exponentialGrowth = [true, false]; - // exponentialGrowth.map((toggleValue) => { - // it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { - // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - // const isFeatureToggleActivated: Promise = 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,4 +411,19 @@ describe('EntryFieldsComponent', () => { expect(component.selectedTechnologies).toBe(initialTechnologies); }); + + it('calls unsubscribe on ngDestroy', () => { + component.loadActivitiesSubscription = new Subscription(); + component.loadActiveEntrySubscription = new Subscription(); + component.actionSetDateSubscription = new Subscription(); + spyOn(component.loadActivitiesSubscription, 'unsubscribe'); + spyOn(component.loadActiveEntrySubscription, 'unsubscribe'); + spyOn(component.actionSetDateSubscription, 'unsubscribe'); + + component.ngOnDestroy(); + + expect(component.loadActivitiesSubscription.unsubscribe).toHaveBeenCalled(); + expect(component.loadActiveEntrySubscription.unsubscribe).toHaveBeenCalled(); + expect(component.actionSetDateSubscription.unsubscribe).toHaveBeenCalled(); + }); }); diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index b16947d1c..d2f2c6a0b 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -8,7 +8,6 @@ import { Activity, NewEntry } from '../../../shared/models'; import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer'; import { TechnologyState } from '../../../shared/store/technology.reducers'; import { ActivityState, LoadActivities } from '../../../activities-management/store'; -import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service'; import * as entryActions from '../../store/entry.actions'; import { get } from 'lodash'; import * as moment from 'moment'; @@ -38,7 +37,6 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { actionSetDateSubscription: Subscription; constructor( - private featureManagerService: FeatureManagerService, private formBuilder: FormBuilder, private store: Store, private actionsSubject$: ActionsSubject, @@ -175,17 +173,9 @@ export class EntryFieldsComponent implements OnInit, OnDestroy { this.store.dispatch(new entryActions.UpdateEntryRunning({ ...this.newData, technologies: $event })); } - - ngOnDestroy(): void { - if (this.isFeatureToggleActivated()) { - this.loadActivitiesSubscription.unsubscribe(); - this.loadActiveEntrySubscription.unsubscribe(); - this.actionSetDateSubscription.unsubscribe(); - } - } - - isFeatureToggleActivated() { - return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => enabled)); + ngOnDestroy(): void { + this.loadActivitiesSubscription.unsubscribe(); + this.loadActiveEntrySubscription.unsubscribe(); + this.actionSetDateSubscription.unsubscribe(); } } diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts index e55f09454..e81dd76dc 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts @@ -11,14 +11,12 @@ import { getCustomerProjects } from '../../../customer-management/components/pro 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; let store: MockStore; let mockProjectsSelector; - let featureManagerService: FeatureManagerService; const toastrServiceStub = { error: (message?: string, title?: string, override?: Partial) => { } }; @@ -58,7 +56,6 @@ describe('ProjectListHoverComponent', () => { fixture = TestBed.createComponent(ProjectListHoverComponent); component = fixture.componentInstance; fixture.detectChanges(); - featureManagerService = TestBed.inject(FeatureManagerService); }); it('should create', () => { @@ -103,36 +100,19 @@ describe('ProjectListHoverComponent', () => { it('calls unsubscribe on ngDestroy', () => { component.updateEntrySubscription = new Subscription(); + component.projectsSubscription = new Subscription(); + component.activeEntrySubscription = new Subscription(); spyOn(component.updateEntrySubscription, 'unsubscribe'); + spyOn(component.projectsSubscription, 'unsubscribe'); + spyOn(component.activeEntrySubscription, 'unsubscribe'); component.ngOnDestroy(); expect(component.updateEntrySubscription.unsubscribe).toHaveBeenCalled(); + expect(component.projectsSubscription.unsubscribe).toHaveBeenCalled(); + expect(component.activeEntrySubscription.unsubscribe).toHaveBeenCalled(); }); - // it('calls projectsSubscribe unsubscribe on ngDestroy', () => { - // component.projectsSubscription = new Subscription(); - // spyOn(component.projectsSubscribe, 'unsubscribe'); - - // component.ngOnDestroy(); - - // expect(component.projectsSubscribe.unsubscribe).toHaveBeenCalledTimes(1); - // }); - - // fit('When Component is created, should call the feature toggle method', () => { - // // component.exponentialGrowth = true; - // component.projectsSubscribe = new Subscription(); - // component.activeEntrySubscribe = new Subscription(); - // spyOn(component.projectsSubscribe, 'unsubscribe'); - // spyOn(component.activeEntrySubscribe, 'unsubscribe'); - - // component.ngOnDestroy(); - - // expect(component.projectsSubscribe.unsubscribe).toHaveBeenCalled(); - // expect(component.activeEntrySubscribe.unsubscribe).toHaveBeenCalled(); - - // }); - it('sets customer name and project name on setSelectedProject', () => { spyOn(component.projectsForm, 'setValue'); component.activeEntry = { project_id : 'p1'}; @@ -141,61 +121,9 @@ describe('ProjectListHoverComponent', () => { component.setSelectedProject(); expect(component.projectsForm.setValue) - .toHaveBeenCalledWith({ project_id: 'customer - xyz'}); + .toHaveBeenCalledWith({ project_id: 'customer - xyz'}); }); - - var toggleValue = true; - fit(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { - spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(toggleValue)); - component.projectsSubscription = new Subscription(); - component.activeEntrySubscription = new Subscription(); - - spyOn(component.projectsSubscription, 'unsubscribe'); - spyOn(component.activeEntrySubscription, 'unsubscribe'); - - component.ngOnDestroy(); - - expect(component.projectsSubscription.unsubscribe).toHaveBeenCalled(); - expect(component.activeEntrySubscription.unsubscribe).toHaveBeenCalled(); - }); - - toggleValue = false; - fit(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { - spyOn(component, 'isFeatureToggleActivated').and.returnValue(of(toggleValue)); - component.projectsSubscription = new Subscription(); - component.activeEntrySubscription = new Subscription(); - - spyOn(component.projectsSubscription, 'unsubscribe'); - spyOn(component.activeEntrySubscription, 'unsubscribe'); - - component.ngOnDestroy(); - - expect(component.projectsSubscription.unsubscribe).not.toHaveBeenCalled(); - expect(component.activeEntrySubscription.unsubscribe).not.toHaveBeenCalled(); - }); - - // const exponentialGrowth = [true, false]; - // exponentialGrowth.map((toggleValue) => { - // it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => { - // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - // const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); - // expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); - // isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); - // }); - // }); - - // it('deleteProject, should dispatch DeleteProject action', () => { - // component.projectsSubscription = new Subscription(); - // const subscription = spyOn(component.projectsSubscription, 'unsubscribe'); - // component.idToDelete = project.id; - // spyOn(store, 'dispatch'); - // component.deleteProject(); - // component.ngOnDestroy(); - // expect(subscription).toHaveBeenCalledTimes(1); - // expect(store.dispatch).toHaveBeenCalledTimes(1); - // expect(store.dispatch).toHaveBeenCalledWith(new DeleteProject(project.id)); - // }); // TODO Fix this test since it is throwing this error // Expected spy dispatch to have been called with: // [CreateEntry({ payload: Object({ project_id: '1', start_date: '2020-07-27T22:30:26.743Z', timezone_offset: 300 }), @@ -217,5 +145,4 @@ describe('ProjectListHoverComponent', () => { // }) // ); // }); - }); diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index 38eb9172a..c238d63bf 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -11,7 +11,6 @@ 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', @@ -28,8 +27,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { projectsSubscription: Subscription; activeEntrySubscription: Subscription; - constructor(private featureManagerService: FeatureManagerService, - private formBuilder: FormBuilder, private store: Store, + constructor(private formBuilder: FormBuilder, private store: Store, private actionsSubject$: ActionsSubject, private toastrService: ToastrService) { this.projectsForm = this.formBuilder.group({ project_id: null, }); this.isLoading$ = this.store.pipe(delay(0), select(getIsLoading)); @@ -78,7 +76,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { if (project.id === this.activeEntry.project_id) { this.projectsForm.setValue( { project_id: `${project.customer_name} - ${project.name}`, } - ); + ); } }); } @@ -110,15 +108,8 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - if(this.isFeatureToggleActivated()){ - this.projectsSubscription.unsubscribe(); - this.activeEntrySubscription.unsubscribe(); - } + this.projectsSubscription.unsubscribe(); + this.activeEntrySubscription.unsubscribe(); this.updateEntrySubscription.unsubscribe(); } - - isFeatureToggleActivated() { - return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => enabled === true ? true : false)); - } } diff --git a/src/app/modules/time-clock/pages/time-clock.component.spec.ts b/src/app/modules/time-clock/pages/time-clock.component.spec.ts index be4693100..10a4b5959 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.spec.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.spec.ts @@ -12,14 +12,12 @@ 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; let store: MockStore; let azureAdB2CService: AzureAdB2CService; - let featureManagerService: FeatureManagerService; const actionSub: ActionsSubject = new ActionsSubject(); let injectedToastrService; @@ -72,7 +70,6 @@ describe('TimeClockComponent', () => { fixture.detectChanges(); azureAdB2CService = TestBed.inject(AzureAdB2CService); injectedToastrService = TestBed.inject(ToastrService); - // featureManagerService = TestBed.inject(FeatureManagerService); }); it('should be created', () => { @@ -99,12 +96,14 @@ describe('TimeClockComponent', () => { expect(component.reloadSummariesOnClockOut).toHaveBeenCalled(); }); - it('unsubscribe clockOutSubscription onDestroy', () => { + it('unsubscribe clockOutSubscription, storeSubscription onDestroy', () => { spyOn(component.clockOutSubscription, 'unsubscribe'); + spyOn(component.storeSubscription, 'unsubscribe'); component.ngOnDestroy(); expect(component.clockOutSubscription.unsubscribe).toHaveBeenCalled(); + expect(component.storeSubscription.unsubscribe).toHaveBeenCalled(); }); it('onInit checks if isLogin and gets the userName', () => { @@ -146,14 +145,4 @@ describe('TimeClockComponent', () => { expect(injectedToastrService.error).toHaveBeenCalled(); }); - - // const exponentialGrowth = [true, false]; - // exponentialGrowth.map((toggleValue) => { - // it(`when FeatureToggle is ${toggleValue} should return true`, () => { - // spyOn(featureManagerService, 'isToggleEnabled').and.returnValue(of(toggleValue)); - // const isFeatureToggleActivated: Promise = component.isFeatureToggleActivated(); - // expect(featureManagerService.isToggleEnabled).toHaveBeenCalled(); - // isFeatureToggleActivated.then((value) => expect(value).toEqual(toggleValue)); - // }); - // }); }); diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index b1847637c..30cbbb994 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -10,7 +10,6 @@ import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.co import { Entry } from './../../shared/models/entry.model'; import { EntryActionTypes, LoadEntriesSummary, StopTimeEntryRunning } 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-time-clock', templateUrl: './time-clock.component.html', @@ -26,15 +25,13 @@ export class TimeClockComponent implements OnInit, OnDestroy { storeSubscription: Subscription; constructor( - private featureManagerService: FeatureManagerService, private azureAdB2CService: AzureAdB2CService, private store: Store, private toastrService: ToastrService, private actionsSubject$: ActionsSubject ) {} - ngOnInit(): void{ - + ngOnInit(): void { this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : ''; this.storeSubscription = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => { this.activeTimeEntry = activeTimeEntry; @@ -72,16 +69,11 @@ export class TimeClockComponent implements OnInit, OnDestroy { } } - ngOnDestroy(): void { - this.isFeatureToggleActivated() && this.storeSubscription.unsubscribe(); - this.clockOutSubscription.unsubscribe(); - this.storeSubscription.unsubscribe(); -} - - isFeatureToggleActivated() { - return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe( - map((enabled) => enabled)); + ngOnDestroy(): void { + this.clockOutSubscription.unsubscribe(); + this.storeSubscription.unsubscribe(); } + } From 6e889eb60d21610f8cb6677ab130156dd6e1bd71 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Thu, 11 Feb 2021 19:14:13 -0500 Subject: [PATCH 7/8] refactor: TT-106 Delete unnecessary imports --- .../components/entry-fields/entry-fields.component.spec.ts | 3 +-- .../components/entry-fields/entry-fields.component.ts | 2 +- .../project-list-hover/project-list-hover.component.ts | 2 +- src/app/modules/time-clock/pages/time-clock.component.ts | 4 +--- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts index d44db390f..aa588c670 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts @@ -1,10 +1,9 @@ -import { Observable, of, Subscription } from 'rxjs'; +import { Subscription } from 'rxjs'; import { LoadActiveEntry, EntryActionTypes, UpdateEntry } from './../../store/entry.actions'; import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {MockStore, provideMockStore} from '@ngrx/store/testing'; import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms'; - import {TechnologyState} from '../../../shared/store/technology.reducers'; import {allTechnologies} from '../../../shared/store/technology.selectors'; import {EntryFieldsComponent} from './entry-fields.component'; diff --git a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts index d2f2c6a0b..a5481281e 100644 --- a/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts +++ b/src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts @@ -1,6 +1,6 @@ import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions'; import { EntryActionTypes, LoadActiveEntry } from './../../store/entry.actions'; -import { filter, map } from 'rxjs/operators'; +import { filter } from 'rxjs/operators'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Store, ActionsSubject, select } from '@ngrx/store'; diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index c238d63bf..2e50b8a55 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -3,7 +3,7 @@ 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, map } from 'rxjs/operators'; +import { delay, filter } 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'; diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index 30cbbb994..5231ac2fa 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -2,9 +2,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ActionsSubject, select, Store } from '@ngrx/store'; import { ToastrService } from 'ngx-toastr'; import { Subscription } from 'rxjs'; - -import { filter, map } from 'rxjs/operators'; -import { threadId } from 'worker_threads'; +import { filter } from 'rxjs/operators'; import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service'; import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component'; import { Entry } from './../../shared/models/entry.model'; From 40db859fa005e766f26a192734a9da5b51625353 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 5 Feb 2021 19:23:54 -0500 Subject: [PATCH 8/8] fix: TT-106 Syntax correction in the ProjectListHover, EntryFields, TimeClock components and test files --- .../project-list-hover/project-list-hover.component.ts | 2 +- src/app/modules/time-clock/pages/time-clock.component.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts index 2e50b8a55..c238d63bf 100644 --- a/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts +++ b/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts @@ -3,7 +3,7 @@ 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'; diff --git a/src/app/modules/time-clock/pages/time-clock.component.ts b/src/app/modules/time-clock/pages/time-clock.component.ts index 5231ac2fa..30cbbb994 100644 --- a/src/app/modules/time-clock/pages/time-clock.component.ts +++ b/src/app/modules/time-clock/pages/time-clock.component.ts @@ -2,7 +2,9 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ActionsSubject, select, Store } from '@ngrx/store'; import { ToastrService } from 'ngx-toastr'; import { Subscription } from 'rxjs'; -import { filter } from 'rxjs/operators'; + +import { filter, map } from 'rxjs/operators'; +import { threadId } from 'worker_threads'; import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service'; import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component'; import { Entry } from './../../shared/models/entry.model';