fix: #237 Move notification messages to ngrx effects

Author: DiegoTinitana

src/app/modules/activities-management/pages/activities-management.component.spec.ts

@@ -1,129 +1,24 @@
-import { HttpClient, HttpHandler } from '@angular/common/http';
 import { async, TestBed, ComponentFixture } from '@angular/core/testing';
-import { of, Subscription } from 'rxjs';
-import { Activity } from '../../shared/models';
-import { ActivityService } from './../services/activity.service';
 import { ActivitiesManagementComponent } from './activities-management.component';
-import { ActionsSubject } from '@ngrx/store';
-import { ActivityManagementActionTypes } from '../store';
-import { ToastrService, ToastrModule, IndividualConfig } from 'ngx-toastr';
 
 describe('ActivitiesManagementComponent', () => {
   let component: ActivitiesManagementComponent;
   let fixture: ComponentFixture<ActivitiesManagementComponent>;
-  let activityService: ActivityService;
-  const activitiesFromApi: Activity[] = [{ id: '123', name: 'aaa', description: 'xxx' }];
-  const toastrService = {
-    success: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
-    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
-  };
-  let injectedToastrService;
 
   beforeEach(async(() => {
-    const actionSub: ActionsSubject = new ActionsSubject();
     TestBed.configureTestingModule({
-      imports: [ToastrModule.forRoot()],
-      declarations: [ActivitiesManagementComponent],
-      providers: [ActivityService, HttpClient, HttpHandler,
-        { provide: ActionsSubject, useValue: actionSub },
-        { provide: ToastrService, useValue: toastrService }
-      ],
+      imports: [],
+      declarations: [ActivitiesManagementComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActivitiesManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    injectedToastrService = TestBed.inject(ToastrService);
-    console.log(injectedToastrService);
-    activityService = TestBed.inject(ActivityService);
-    spyOn(activityService, 'getActivities').and.returnValue(of(activitiesFromApi));
   });
 
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should call #setDataNotification with action #ngOnInit', () => {
-    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
-    spyOn(component, 'setDataNotification');
-    const action = {
-      type: '[ActivityManagement] CREATE_ACTIVITY_SUCCESS',
-    };
-    actionSubject.next(action);
-
-    component.ngOnInit();
-    expect(component.setDataNotification).toHaveBeenCalledWith(action.type);
-  });
-
-  it('has a succesfull message on CREATE_ACTIVITY_SUCCESS', () => {
-    spyOn(injectedToastrService, 'success');
-    component.setDataNotification(ActivityManagementActionTypes.CREATE_ACTIVITY_SUCCESS);
-
-    expect(injectedToastrService.success).toHaveBeenCalled();
-  });
-
-  it('has a succesfull message on UPDATE_ACTIVITY_SUCCESS', () => {
-    spyOn(injectedToastrService, 'success');
-    component.setDataNotification(ActivityManagementActionTypes.UPDATE_ACTIVITY_SUCCESS);
-
-    expect(injectedToastrService.success).toHaveBeenCalled();
-  });
-
-  it('should destroy the subscription', () => {
-    component.actionsSubscription = new Subscription();
-    const subscription = spyOn(component.actionsSubscription, 'unsubscribe');
-
-    component.ngOnDestroy();
-
-    expect(subscription).toHaveBeenCalledTimes(1);
-  });
-
-  it('#setDataNotification should show an success notification with DELETE_ACTIVITY_SUCCESS case', () => {
-    spyOn(injectedToastrService, 'success').and.returnValue(of(activitiesFromApi));
-    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
-    const action = {
-      type: '[ActivityManagement] DELETE_ACTIVITY_SUCESS',
-    };
-    actionSubject.next(action);
-
-    component.setDataNotification(action.type);
-    expect(injectedToastrService.success).toHaveBeenCalled();
-  });
-
-  it('shows an error notification with CREATE_ACTIVITY_FAIL case', () => {
-    spyOn(injectedToastrService, 'error');
-
-    component.setDataNotification(ActivityManagementActionTypes.CREATE_ACTIVITY_FAIL);
-
-    expect(injectedToastrService.error).toHaveBeenCalled();
-  });
-
-  it('shows an error notification with UPDATE_ACTIVITY_FAIL case', () => {
-    spyOn(injectedToastrService, 'error');
-
-    component.setDataNotification(ActivityManagementActionTypes.UPDATE_ACTIVITY_FAIL);
-
-    expect(injectedToastrService.error).toHaveBeenCalled();
-  });
-
-  it('shows an error notification with DELETE_ACTIVITY_FAIL case', () => {
-    spyOn(injectedToastrService, 'error');
-
-    component.setDataNotification(ActivityManagementActionTypes.DELETE_ACTIVITY_FAIL);
-
-    expect(injectedToastrService.error).toHaveBeenCalled();
-  });
-
-  it('#setDataNotification should not show an error notification with incorrect action', () => {
-    spyOn(injectedToastrService, 'success').and.returnValue(of(activitiesFromApi));
-    const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
-    const action = {
-      type: '[ActivityManagement] TEST',
-    };
-    actionSubject.next(action);
-
-    component.setDataNotification(action.type);
-  });
 });

src/app/modules/activities-management/pages/activities-management.component.ts

@@ -1,55 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActionsSubject } from '@ngrx/store';
-import { Subscription } from 'rxjs';
-import { ActivityManagementActionTypes } from '../store';
-import { ToastrService } from 'ngx-toastr';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-activities-management',
   templateUrl: './activities-management.component.html',
   styleUrls: ['./activities-management.component.scss'],
 })
-export class ActivitiesManagementComponent implements OnInit, OnDestroy {
-  actionsSubscription: Subscription;
-
-  constructor(private actionsSubject$: ActionsSubject, private toastrService: ToastrService) {}
-
-  ngOnInit() {
-    this.actionsSubscription = this.actionsSubject$.subscribe((action) => {
-      this.setDataNotification(action.type);
-    });
-  }
-
-  ngOnDestroy() {
-    this.actionsSubscription.unsubscribe();
-  }
-
-  setDataNotification(action: any) {
-    switch (action) {
-      case ActivityManagementActionTypes.CREATE_ACTIVITY_SUCCESS: {
-        this.toastrService.success('The activity has been saved successfully.');
-        break;
-      }
-      case ActivityManagementActionTypes.UPDATE_ACTIVITY_SUCCESS: {
-        this.toastrService.success('The activity has been saved successfully.');
-        break;
-      }
-      case ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS: {
-        this.toastrService.success('The activity has been removed successfully.');
-        break;
-      }
-      case ActivityManagementActionTypes.CREATE_ACTIVITY_FAIL: {
-        this.toastrService.error('An unexpected error happened, please try again later.');
-        break;
-      }
-      case ActivityManagementActionTypes.UPDATE_ACTIVITY_FAIL: {
-        this.toastrService.error('An unexpected error happened, please try again later.');
-        break;
-      }
-      case ActivityManagementActionTypes.DELETE_ACTIVITY_FAIL : {
-        this.toastrService.error('An unexpected error happened, please try again later.');
-        break;
-      }
-    }
-  }
+export class ActivitiesManagementComponent {
+  constructor() {}
 }

src/app/modules/activities-management/store/activity-management.effects.ts

@@ -1,16 +1,22 @@
+import { INFO_SAVED_SUCCESSFULLY, INFO_DELETE_SUCCESSFULLY, UNEXPECTED_ERROR } from '../../shared/messages';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
 import { Observable, of } from 'rxjs';
 import { catchError, map, mergeMap } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
 
 import * as actions from './activity-management.actions';
 import { Activity } from './../../shared/models/activity.model';
 import { ActivityService } from './../services/activity.service';
 
 @Injectable()
 export class ActivityEffects {
-  constructor(private actions$: Actions, private activityService: ActivityService) {}
+  constructor(
+    private actions$: Actions,
+    private activityService: ActivityService,
+    private toastrService: ToastrService
+  ) {}
 
   @Effect()
   getActivities$: Observable<Action> = this.actions$.pipe(
@@ -32,9 +38,13 @@ export class ActivityEffects {
     mergeMap((activity) =>
       this.activityService.createActivity(activity).pipe(
         map((activityData) => {
+          this.toastrService.success(INFO_SAVED_SUCCESSFULLY);
           return new actions.CreateActivitySuccess(activityData);
         }),
-        catchError((error) => of(new actions.CreateActivityFail(error)))
+        catchError((error) => {
+          this.toastrService.error(UNEXPECTED_ERROR);
+          return of(new actions.CreateActivityFail(error));
+        })
       )
     )
   );
@@ -46,9 +56,13 @@ export class ActivityEffects {
     mergeMap((activityId) =>
       this.activityService.deleteActivity(activityId).pipe(
         map(() => {
+          this.toastrService.success(INFO_DELETE_SUCCESSFULLY);
           return new actions.DeleteActivitySuccess(activityId);
         }),
-        catchError((error) => of(new actions.DeleteActivityFail(error)))
+        catchError((error) => {
+          this.toastrService.error(UNEXPECTED_ERROR);
+          return of(new actions.DeleteActivityFail(error));
+        })
       )
     )
   );
@@ -60,9 +74,13 @@ export class ActivityEffects {
     mergeMap((activity) =>
       this.activityService.updateActivity(activity).pipe(
         map((activityData) => {
+          this.toastrService.success(INFO_SAVED_SUCCESSFULLY);
           return new actions.UpdateActivitySuccess(activityData);
         }),
-        catchError((error) => of(new actions.UpdateActivityFail(error)))
+        catchError((error) => {
+          this.toastrService.error(UNEXPECTED_ERROR);
+          return of(new actions.UpdateActivityFail(error));
+        })
       )
     )
   );

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts

@@ -6,16 +6,11 @@ import { CreateCustomerComponent } from './create-customer';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
 import { ResetCustomerToEdit, UpdateCustomer } from './../../../../store/customer-management.actions';
 import { Customer } from 'src/app/modules/shared/models';
-import { ToastrService, IndividualConfig } from 'ngx-toastr';
 
 describe('CreateCustomerComponent', () => {
   let component: CreateCustomerComponent;
   let fixture: ComponentFixture<CreateCustomerComponent>;
   let store: MockStore<CustomerState>;
-  const toastrService = {
-    success: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
-    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
-  };
 
   const state = {
     data: [],
@@ -35,8 +30,7 @@ describe('CreateCustomerComponent', () => {
       declarations: [CreateCustomerComponent],
       providers: [
         FormBuilder,
-        provideMockStore({ initialState: state }),
-        { provide: ToastrService, useValue: toastrService },
+        provideMockStore({ initialState: state })
       ],
     }).compileComponents();
 

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -13,7 +13,6 @@ import {
 } from 'src/app/modules/customer-management/store';
 import { LoadProjectTypes } from '../../../projects-type/store';
 import { LoadCustomerProjects } from '../../../projects/components/store/project.actions';
-import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-create-customer',
@@ -28,8 +27,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   customerToEdit: Customer;
   editSubscription: Subscription;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>,
-              private toastrService: ToastrService) {
+  constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
     this.customerForm = this.formBuilder.group({
       name: ['', Validators.required],
       description: ['', Validators.required],
@@ -61,7 +59,6 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     } else {
       this.store.dispatch(new CreateCustomer(customerData));
     }
-    this.toastrService.success('Customer information saved successfully');
     this.areTabsActive = true;
     this.changeValueAreTabsActives.emit(this.areTabsActive);
   }

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -1,4 +1,3 @@
-import { ToastrService, IndividualConfig } from 'ngx-toastr';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
@@ -21,18 +20,14 @@ describe('CustomerTableListComponent', () => {
     customerId: ''
   };
 
-  const toastrService = {
-    success: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
-    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
-  };
+
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NgxPaginationModule],
       declarations: [CustomerListComponent],
       providers: [
-        provideMockStore({ initialState: state }),
-        { provide: ToastrService, useValue: toastrService },
+        provideMockStore({ initialState: state })
       ],
     }).compileComponents();
   }));

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -6,7 +6,6 @@ import { allCustomers } from './../../../../store/customer-management.selectors'
 import { LoadCustomers, DeleteCustomer, SetCustomerToEdit } from './../../../../store/customer-management.actions';
 import { Customer } from './../../../../../shared/models/customer.model';
 import { ITEMS_PER_PAGE } from 'src/environments/environment';
-import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-customer-list',
@@ -22,7 +21,7 @@ export class CustomerListComponent implements OnInit, OnDestroy {
   customers: Customer[] = [];
   customerSubscription: Subscription;
 
-  constructor(private store: Store<Customer>, private toastrService: ToastrService) { }
+  constructor(private store: Store<Customer>) { }
 
   ngOnInit(): void {
     this.store.dispatch(new LoadCustomers());
@@ -44,6 +43,5 @@ export class CustomerListComponent implements OnInit, OnDestroy {
 
   deleteCustomer(customerId: string) {
     this.store.dispatch(new DeleteCustomer(customerId));
-    this.toastrService.success('Customer has been deleted');
   }
 }

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.spec.ts

@@ -1,4 +1,3 @@
-import { ToastrService, IndividualConfig } from 'ngx-toastr';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
@@ -39,18 +38,12 @@ describe('InputProjectTypeComponent', () => {
     description: 'It is good for learning',
   };
 
-  const toastrService = {
-    success: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
-    error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { }
-  };
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [CreateProjectTypeComponent],
       providers: [
         FormBuilder,
-        provideMockStore({ initialState: state }),
-        { provide: ToastrService, useValue: toastrService },
+        provideMockStore({ initialState: state })
       ],
     }).compileComponents();
   }));