fix: TT-97 Add new tests and fix a typo errors

Author: PaulRC-ioet

src/app/modules/users/components/users-list/users-list.component.html

@@ -8,15 +8,15 @@
     <tr class="d-flex">
       <th class="col">User Email</th>
       <th class="col">Names</th>
-      <th class="col" *ngIf="isFlagOn">Roles</th>
+      <th class="col" *ngIf="isUserRoleToggleOn">Roles</th>
     </tr>
   </thead>
   <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
   <tbody *ngIf="(isLoading$ | async) === false">
     <tr class="d-flex" *ngFor="let user of users">
       <td class="col">{{ user.email }}</td>
       <td class="col">{{ user.name }}</td>
-      <td class="col text-center" *ngIf="isFlagOn">
+      <td class="col text-center" *ngIf="isUserRoleToggleOn">
         <div>
           <ui-switch
             size="small"

src/app/modules/users/components/users-list/users-list.component.spec.ts

@@ -4,14 +4,16 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { UsersListComponent } from './users-list.component';
 import { UserActionTypes, UserState, LoadUsers, GrantRoleUser, RevokeRoleUser } from '../../store';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 import { ActionsSubject } from '@ngrx/store';
 import { DataTablesModule } from 'angular-datatables';
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 describe('UsersListComponent', () => {
   let component: UsersListComponent;
   let fixture: ComponentFixture<UsersListComponent>;
   let store: MockStore<UserState>;
+  let featureManagerService: FeatureManagerService;
   const actionSub: ActionsSubject = new ActionsSubject();
 
   const state: UserState = {
@@ -37,6 +39,7 @@ describe('UsersListComponent', () => {
         declarations: [UsersListComponent],
         providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
       }).compileComponents();
+      featureManagerService = TestBed.inject(FeatureManagerService);
     })
   );
 
@@ -78,7 +81,7 @@ describe('UsersListComponent', () => {
     component.ngOnInit();
 
     expect(component.isFeatureToggleActivated).toHaveBeenCalled();
-    expect(component.isFlagOn).toBe(true);
+    expect(component.isUserRoleToggleOn).toBe(true);
   });
 
   const actionsParams = [
@@ -187,6 +190,18 @@ describe('UsersListComponent', () => {
     });
   });
 
+  const toggleValues = [true, false];
+  toggleValues.map((toggleValue) => {
+    it(`when FeatureToggle is ${toggleValue} should return true`, () => {
+      spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(toggleValue));
+
+      const isFeatureToggleActivated: Observable<boolean> = component.isFeatureToggleActivated();
+
+      expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
+      isFeatureToggleActivated.subscribe((value) => expect(value).toEqual(toggleValue));
+    });
+  });
+
   /*
     TODO: block commented on purpose so that when the tests pass and the Feature toggle is removed,
         the table will be rendered again with dtInstance and not with dtOptions

src/app/modules/users/components/users-list/users-list.component.ts

@@ -17,11 +17,12 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   users: User[] = [];
   isLoading$: Observable<boolean>;
   loadUsersSubscription: Subscription;
+  switchRoleSubscription: Subscription;
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;
   dtOptions: any = {};
-  isFlagOn;
+  isUserRoleToggleOn;
 
   constructor(
     private store: Store<User>,
@@ -33,7 +34,7 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnInit(): void {
     this.isFeatureToggleActivated().subscribe((flag) => {
-      this.isFlagOn = flag;
+      this.isUserRoleToggleOn = flag;
     });
     this.store.dispatch(new LoadUsers());
     this.loadUsersSubscription = this.actionsSubject$
@@ -43,7 +44,7 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
         this.rerenderDataTable();
       });
 
-    this.loadUsersSubscription = this.actionsSubject$
+    this.switchRoleSubscription = this.actionsSubject$
       .pipe(
         filter(
           (action: any) =>
@@ -86,11 +87,7 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   isFeatureToggleActivated() {
     return this.featureManagerService.isToggleEnabledForUser('ui-list-test-users').pipe(
       map((enabled) => {
-        if (enabled === true) {
-          return true;
-        } else {
-          return false;
-        }
+        return enabled === true ? true : false;
       })
     );
   }

src/app/modules/users/store/user.effects.spec.ts

@@ -78,4 +78,31 @@ describe('UserEffects', () => {
       expect(action.type).toEqual(UserActionTypes.GRANT_USER_ROLE_FAIL);
     });
   });
+
+  it('action type is REVOKE_USER_ROLE_SUCCESS when service is executed sucessfully', async () => {
+    const userId = 'userId';
+    const roleId = 'roleId';
+    actions$ = of({ type: UserActionTypes.REVOKE_USER_ROLE, userId, roleId });
+    const serviceSpy = spyOn(service, 'revokeRole');
+    spyOn(toastrService, 'success');
+    serviceSpy.and.returnValue(of(user));
+
+    effects.revokeUserRole$.subscribe((action) => {
+      expect(toastrService.success).toHaveBeenCalledWith('Revoke User Role Success');
+      expect(action.type).toEqual(UserActionTypes.REVOKE_USER_ROLE_SUCCESS);
+    });
+  });
+
+  it('action type is REVOKE_USER_ROLE_FAIL when service is executed and fail', async () => {
+    const userId = 'userId';
+    const roleId = 'roleId';
+    actions$ = of({ type: UserActionTypes.REVOKE_USER_ROLE, userId, roleId });
+    spyOn(service, 'revokeRole').and.returnValue(throwError({ error: { message: 'error' } }));
+    spyOn(toastrService, 'error');
+
+    effects.revokeUserRole$.subscribe((action) => {
+      expect(toastrService.error).toHaveBeenCalled();
+      expect(action.type).toEqual(UserActionTypes.REVOKE_USER_ROLE_FAIL);
+    });
+  });
 });

src/app/modules/users/store/user.reducer.spec.ts

@@ -57,7 +57,7 @@ describe('userReducer', () => {
     const action = new actions.GrantRoleUserFail('error');
     const state = userReducer(initialState, action);
 
-    expect(state.message).toEqual('Something went wrong granted user rol');
+    expect(state.message).toEqual('Something went wrong granting user role');
     expect(state.isLoading).toEqual(false);
   });
 
@@ -89,7 +89,7 @@ describe('userReducer', () => {
     const action = new actions.RevokeRoleUserFail('error');
     const state = userReducer(initialState, action);
 
-    expect(state.message).toEqual('Something went wrong revoking user rol');
+    expect(state.message).toEqual('Something went wrong revoking user role');
     expect(state.isLoading).toEqual(false);
   });
 

src/app/modules/users/store/user.reducers.ts

@@ -59,7 +59,7 @@ export const userReducer = (state: UserState = initialState, action: UserActions
         ...state,
         data: state.data,
         isLoading: false,
-        message: 'Something went wrong granted user rol',
+        message: 'Something went wrong granting user role',
       };
     }
 
@@ -85,7 +85,7 @@ export const userReducer = (state: UserState = initialState, action: UserActions
         ...state,
         data: state.data,
         isLoading: false,
-        message: 'Something went wrong revoking user rol',
+        message: 'Something went wrong revoking user role',
       };
     }
     default: