feat: TT-190

Author: LEON12699

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

@@ -10,7 +10,7 @@
       <tr class="d-flex flex-wrap">
         <th class="col-4">User Email</th>
         <th class="col-5">Names</th>
-        <th class="col-3">{{ isUserGroupsToggleOn ? "Groups" : "Roles" }}</th>
+        <th class="col-3">{{ isUserGroupsToggleOn ? 'Groups' : 'Roles' }}</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
@@ -19,71 +19,31 @@
         <td class="col-4 text-break">{{ user.email }}</td>
         <td class="col-5 text-break">{{ user.name }}</td>
         <td class="col-3 text-center">
-<<<<<<< HEAD
-<<<<<<< HEAD
           <div *ngIf="isUserGroupsToggleOn">
             <ui-switch
               size="small"
-<<<<<<< HEAD
               (change)="switchGroup(user.id, user.groups, 'time-tracker-admin')"
               [checked]="user.groups.includes('time-tracker-admin')"
             ></ui-switch>
-            group admin
-            <ui-switch
-              size="small"
-              (change)="switchGroup(user.id, user.groups, 'time-tracker-tester')"
-              [checked]="user.groups.includes('time-tracker-tester')"
-            ></ui-switch>
-            group test
-          </div>
-
-          <div *ngIf="!isUserGroupsToggleOn">
-            <ui-switch
-              size="small"
-              (change)="switchRole(user.id, user.roles, 'admin','time-tracker-admin')"
-              [checked]="user.roles.includes('time-tracker-admin')"
-=======
-              (change)="switchGroups(user.id, user.groups, 'admin', 'time-tracker-admin')"
-=======
-          <div *ngIf="flakyToggle; else elseBlock">
-=======
-          <div *ngIf="isUserGroupsToggleOn">
->>>>>>> feat: TT-190create feature toggle in azure
-            <ui-switch
-              size="small"
-              (change)="switchGroup(user.id, user.groups, 'time-tracker-admin')"
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
-              [checked]="user.groups.includes('time-tracker-admin')"
->>>>>>> fix: TT-190 use add remove groups
-            ></ui-switch>
-            group admin
+            admin
             <ui-switch
               size="small"
-<<<<<<< HEAD
-<<<<<<< HEAD
-              (change)="switchRole(user.id, user.roles,'tester','time-tracker-tester')"
-              [checked]="user.roles.includes('time-tracker-tester')"
-=======
-              (change)="switchGroups(user.id, user.groups, 'test', 'time-tracker-tester')"
-=======
               (change)="switchGroup(user.id, user.groups, 'time-tracker-tester')"
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
               [checked]="user.groups.includes('time-tracker-tester')"
->>>>>>> fix: TT-190 use add remove groups
             ></ui-switch>
-            group test
+            test
           </div>
 
           <div *ngIf="!isUserGroupsToggleOn">
             <ui-switch
               size="small"
-              (change)="switchRole(user.id, user.roles, 'admin','time-tracker-admin')"
+              (change)="switchRole(user.id, user.roles, 'admin', 'time-tracker-admin')"
               [checked]="user.roles.includes('time-tracker-admin')"
             ></ui-switch>
             admin
             <ui-switch
               size="small"
-              (change)="switchRole(user.id, user.roles,'tester','time-tracker-tester')"
+              (change)="switchRole(user.id, user.roles, 'test', 'time-tracker-tester')"
               [checked]="user.roles.includes('time-tracker-tester')"
             ></ui-switch>
             test

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

@@ -1,10 +1,5 @@
-import { HttpClient } from '@angular/common/http';
 import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
-<<<<<<< HEAD
-import { waitForAsync, ComponentFixture, TestBed, inject } from '@angular/core/testing';
-=======
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
->>>>>>> feat: TT-190 mock test
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { UsersListComponent } from './users-list.component';
@@ -19,28 +14,20 @@ import {
 } from '../../store';
 import { ActionsSubject } from '@ngrx/store';
 import { DataTablesModule } from 'angular-datatables';
-import { of } from 'rxjs';
-<<<<<<< HEAD
+import { Observable, of } from 'rxjs';
 import { FeatureToggleProvider } from 'src/app/modules/shared/feature-toggles/feature-toggle-provider.service';
 import { AppConfigurationClient } from '@azure/app-configuration';
 import { FeatureFilterProvider } from '../../../shared/feature-toggles/filters/feature-filter-provider.service';
 import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
-import { FeatureToggleModel } from 'src/app/modules/shared/feature-toggles/feature-toggle.model';
-=======
->>>>>>> feat: TT-190 mock test
 
 describe('UsersListComponent', () => {
   let component: UsersListComponent;
   let fixture: ComponentFixture<UsersListComponent>;
   let store: MockStore<UserState>;
   const actionSub: ActionsSubject = new ActionsSubject();
-<<<<<<< HEAD
   const fakeAppConfigurationConnectionString = 'Endpoint=http://fake.foo;Id=fake.id;Secret=fake.secret';
   let service: FeatureManagerService;
   let fakeFeatureToggleProvider;
-=======
-  let featureManagerService: FeatureManagerService;
->>>>>>> feat: TT-190 mock test
 
   const state: UserState = {
     data: [
@@ -60,22 +47,21 @@ describe('UsersListComponent', () => {
 
   beforeEach(
     waitForAsync(() => {
-
       fakeFeatureToggleProvider = new FeatureToggleProvider(
         new AppConfigurationClient(fakeAppConfigurationConnectionString),
         new FeatureFilterProvider(new AzureAdB2CService())
       );
-      //spyOn(fakeFeatureToggleProvider, 'getFeatureToggle').and.returnValue(of(aFeatureToggle));
       service = new FeatureManagerService(fakeFeatureToggleProvider);
 
       TestBed.configureTestingModule({
         imports: [NgxPaginationModule, DataTablesModule],
         declarations: [UsersListComponent],
-        providers: [provideMockStore({ initialState: state }),
+        providers: [
+          provideMockStore({ initialState: state }),
           { provide: ActionsSubject, useValue: actionSub },
-          { provide: FeatureManagerService, useValue: service}],
+          { provide: FeatureManagerService, useValue: service }
+        ],
       }).compileComponents();
-      featureManagerService = TestBed.inject(FeatureManagerService);
     })
   );
 
@@ -218,7 +204,7 @@ describe('UsersListComponent', () => {
   ];
 
   removeGroupTypes.map((param) => {
-    it(`When user switchGroup to ${param.groupName} and belongs to group, should remove ${param.groupName} group to user`, () => {
+    it(`When user switchGroup to ${param.groupName} and belongs to group, should remove ${param.groupName} group from user`, () => {
       const groupName = param.groupName;
       const userGroups = param.userGroups;
       const userId = 'userId';
@@ -245,7 +231,7 @@ describe('UsersListComponent', () => {
     });
   });
 
-  fit('on success load users, the data of groups should be an array', () => {
+  it('on success load users, the data of groups should be an array', () => {
     const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
     const action = {
       type: UserActionTypes.LOAD_USERS_SUCCESS,
@@ -259,7 +245,7 @@ describe('UsersListComponent', () => {
     });
   });
 
-  fit('on success load users, the datatable should be reloaded', async () => {
+  it('on success load users, the datatable should be reloaded', async () => {
     const actionSubject = TestBed.inject(ActionsSubject);
     const action = {
       type: UserActionTypes.LOAD_USERS_SUCCESS,
@@ -272,32 +258,30 @@ describe('UsersListComponent', () => {
     expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
   });
 
-<<<<<<< HEAD
-  fit('When Component is created, should call the feature toggle method', () => {
+  it('When Component is created, should call the feature toggle method', () => {
     spyOn(component, 'isFeatureToggleActivated').and.returnValue(of(true));
-=======
-
-  fit('When Component is created, should call the feature toggle method', () => {
-
-    // spyOn(service, 'getAll').and.callFake( () => {
-    //   return of(mockUser);
-    // });
-
-    spyOn(component, 'isFeatureToggleActivated').and.callFake(() => {
-      return of(true);
-    });
->>>>>>> feat: TT-190 mock test
 
     component.ngOnInit();
 
     expect(component.isFeatureToggleActivated).toHaveBeenCalled();
     expect(component.isUserGroupsToggleOn).toBe(true);
   });
 
+  const toggleValues = [true, false];
+  toggleValues.map((toggleValue) => {
+    it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => {
+      spyOn(service, 'isToggleEnabledForUser').and.returnValue(of(toggleValue));
+
+      const isFeatureToggleActivated: Observable<boolean> = component.isFeatureToggleActivated();
+
+      expect(service.isToggleEnabledForUser).toHaveBeenCalled();
+      isFeatureToggleActivated.subscribe((value) => expect(value).toEqual(toggleValue));
+    });
+  });
+
   afterEach(() => {
     component.dtTrigger.unsubscribe();
     component.loadUsersSubscription.unsubscribe();
     fixture.destroy();
   });
-
 });

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

@@ -1,8 +1,6 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
-<<<<<<< HEAD
-<<<<<<< HEAD
 import { Observable, Subject, Subscription } from 'rxjs';
 import { delay, filter, map } from 'rxjs/operators';
 import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
@@ -15,27 +13,6 @@ import {
   AddUserToGroup,
   RemoveUserFromGroup,
 } from '../../store/user.actions';
-=======
-import { Observable, Subject, Subscription} from 'rxjs';
-import { delay, filter, map } from 'rxjs/operators';
-import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
-import { User } from '../../models/users';
-import { GrantRoleUser, LoadUsers, RevokeRoleUser, UserActionTypes, AddUserToGroup, RemoveUserToGroup} from '../../store/user.actions';
->>>>>>> fix: TT-190 use add remove groups
-=======
-import { Observable, Subject, Subscription } from 'rxjs';
-import { delay, filter, map } from 'rxjs/operators';
-import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
-import { User } from '../../models/users';
-import {
-  GrantRoleUser,
-  LoadUsers,
-  RevokeRoleUser,
-  UserActionTypes,
-  AddUserToGroup,
-  RemoveUserToGroup,
-} from '../../store/user.actions';
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
 import { getIsLoading } from '../../store/user.selectors';
 
 @Component({
@@ -54,25 +31,12 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {};
   switchGroupsSubscription: Subscription;
   isEnableToggleSubscription: Subscription;
-<<<<<<< HEAD
-<<<<<<< HEAD
-  isUserGroupsToggleOn: boolean;
-=======
-  isUserGroupsToggleOn;
-<<<<<<< HEAD
-  flakyToggle: boolean = false; // borrar para implementar feature toggle
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
-=======
-  flakyToggle = true; // borrar para implementar feature toggle
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
-=======
   isUserGroupsToggleOn: boolean;
->>>>>>> feat: TT-190create feature toggle in azure
 
   constructor(
     private store: Store<User>,
     private actionsSubject$: ActionsSubject,
-    // private featureManagerService: FeatureManagerService
+    private featureManagerService: FeatureManagerService
   ) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
   }
@@ -86,16 +50,9 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
         this.rerenderDataTable();
       });
 
-<<<<<<< HEAD
     this.isEnableToggleSubscription = this.isFeatureToggleActivated().subscribe((flag) => {
       this.isUserGroupsToggleOn = flag;
     });
-=======
-  /*  this.isEnableToggleSubscription = this.isFeatureToggleActivated().subscribe((flag) => {
-      this.isUserGroupsToggleOn = flag;
-      console.log('in subscription', this.isUserGroupsToggleOn);
-    });*/
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
 
     this.switchGroupsSubscription = this.actionsSubject$
       .pipe(
@@ -146,8 +103,8 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   switchRole(userId: string, userRoles: string[], roleId: string, roleValue: string) {
     userRoles.includes(roleValue)
-    ? this.store.dispatch(new RevokeRoleUser(userId, roleId))
-    : this.store.dispatch(new GrantRoleUser(userId, roleId));
+      ? this.store.dispatch(new RevokeRoleUser(userId, roleId))
+      : this.store.dispatch(new GrantRoleUser(userId, roleId));
   }
 
   switchGroup(userId: string, userGroups: string[], groupName: string) {
@@ -156,32 +113,11 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
       : this.store.dispatch(new AddUserToGroup(userId, groupName));
   }
 
-<<<<<<< HEAD
   isFeatureToggleActivated() {
     return this.featureManagerService.isToggleEnabledForUser('switch-group').pipe(
-=======
-  switchGroup(userId: string, userGroups: string[], groupName: string) {
-    userGroups.includes(groupName)
-      ? this.store.dispatch(new RemoveUserToGroup(userId, groupName))
-      : this.store.dispatch(new AddUserToGroup(userId, groupName));
-  }
-
- /* isFeatureToggleActivated() {
-    return this.featureManagerService.isToggleEnabledForUser('ui-list-technologies').pipe(
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
       map((enabled) => {
         return enabled === true ? true : false;
       })
     );
-<<<<<<< HEAD
-  }
-
-  switchGroups(userId: string, userGroups: string[], groupname: string, groupValue: string) {
-    userGroups.includes(groupValue)
-      ? this.store.dispatch(new RemoveUserFromGroup(userId, groupname))
-      : this.store.dispatch(new AddUserToGroup(userId, groupname));
   }
-=======
-  }*/
->>>>>>> feat: TT-190 Use add/remove groups endpoints in users section in UI
 }