Fix lint

src/app/components/edit-role/edit-role.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { EditRoleComponent } from './edit-role.component';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 describe('EditRoleComponent', () => {
   let component: EditRoleComponent;
   let fixture: ComponentFixture<EditRoleComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [EditRoleComponent]
+      imports: [EditRoleComponent],
+      providers: [provideAnimationsAsync()]
     })
     .compileComponents();
 

src/app/components/edit-role/edit-role.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import {
   FormGroup,
   FormBuilder,
@@ -16,7 +16,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
   templateUrl: './edit-role.component.html',
   styleUrl: './edit-role.component.scss',
 })
-export class EditRoleComponent implements OnInit {
+export class EditRoleComponent {
   roleForm: FormGroup;
   formControls = [
     { name: 'role', type: 'text', placeholder: 'Role', minLength: 1 },
@@ -35,12 +35,6 @@ export class EditRoleComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {}
-
-  onSelectionChange(value: any): void {
-    this.roleForm.setValue(value);
-  }
-
   onSubmit() {
     this.isSubmitted = true;
     if (this.roleForm.valid) {

src/app/components/profile/profile.component.spec.ts

@@ -1,14 +1,40 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ProfileComponent } from './profile.component';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from '../../services/user/user.service';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 describe('ProfileComponent', () => {
   let component: ProfileComponent;
   let fixture: ComponentFixture<ProfileComponent>;
 
+  const mockUserService = {
+    userData$: of({
+      id: 1,
+      username: 'testuser',
+      email: '[email protected]',
+      firstName: 'Test',
+      lastName: 'User',
+      roles: ['user']
+    })
+  };
+
+  const mockActivatedRoute = {
+    params: of({ id: 1 }),
+    snapshot: { params: { id: 1 } }
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ProfileComponent]
+      imports: [
+        ProfileComponent
+      ],
+      providers: [
+        provideHttpClient,
+        { provide: UserService, useValue: mockUserService },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute }
+      ]
     })
     .compileComponents();
 

src/app/components/sidebar/sidebar.component.spec.ts

@@ -3,20 +3,30 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SidebarComponent } from './sidebar.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
 import { DashboardOutline, NodeIndexOutline, TeamOutline } from '@ant-design/icons-angular/icons';
+import { provideHttpClient } from '@angular/common/http';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent;
   let fixture: ComponentFixture<SidebarComponent>;
 
+  const mockActivatedRoute = {
+    params: of({ id: 1 }),
+    snapshot: { params: { id: 1 } }
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [SidebarComponent],
       providers: [
+        provideHttpClient(),
         NzIconService,
         {
           provide: NZ_ICONS,
           useValue: [NodeIndexOutline, TeamOutline, DashboardOutline]
-        }
+        },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute }
       ]
     })
     .compileComponents();

src/app/components/users-table/users-table.component.html

@@ -40,11 +40,23 @@ <h1 class="content-container__title-container__title">Users</h1>
           <td>{{ data.firstName }}</td>
           <td>{{ data.lastName }}</td>
           <td>{{ data.email }}</td>
-          <td>{{ data.roles?.join(', ') }}</td>
+          <td>{{ data.roles?.join(", ") }}</td>
           <td>
-            <a (click)="editUser(data)"><span nz-icon nzType="edit" nzTheme="outline"></span></a>
+            <a
+              (click)="editUser(data)"
+              (keyup.enter)="editUser(data)"
+              (keydown.space)="editUser(data)"
+              tabindex="0"
+            >
+              <span nz-icon nzType="edit" nzTheme="outline"></span>
+            </a>
             <nz-divider nzType="vertical"></nz-divider>
-            <a class="table__delete-icon" nz-popconfirm nzPopconfirmTitle="Sure to delete?" (nzOnConfirm)="deleteUser(data)">
+            <a
+              class="table__delete-icon"
+              nz-popconfirm
+              nzPopconfirmTitle="Sure to delete?"
+              (nzOnConfirm)="deleteUser(data)"
+            >
               <span nz-icon nzType="delete" nzTheme="outline"></span>
             </a>
           </td>

src/app/components/users-table/users-table.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { UsersTableComponent } from './users-table.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
 import { UserAddOutline } from '@ant-design/icons-angular/icons';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('UsersTableComponent', () => {
   let component: UsersTableComponent;
@@ -13,6 +14,7 @@ describe('UsersTableComponent', () => {
       imports: [UsersTableComponent],
       providers: [
         NzIconService,
+        provideHttpClient(),
         {
           provide: NZ_ICONS,
           useValue: [UserAddOutline]

src/app/components/users-table/users-table.component.ts

@@ -5,12 +5,6 @@ import { NgFor } from '@angular/common';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { AddUserComponent } from '../add-user/add-user.component';
-import {
-  Router,
-  NavigationStart,
-  NavigationEnd,
-  NavigationError,
-} from '@angular/router';
 import { UserData } from '../../models/user-data';
 import { NzPaginationComponent } from 'ng-zorro-antd/pagination';
 import { UserService } from '../../services/user/user.service';
@@ -38,7 +32,7 @@ export class UsersTableComponent implements OnInit {
   protected pageSize = 10;
   protected pageIndex = 1;
   protected currentPage = 1;
-  protected total = 2;
+  protected total = 10;
 
   constructor(private userService: UserService, private notification: NotificationService) {}
 
@@ -51,7 +45,7 @@ export class UsersTableComponent implements OnInit {
     this.userService.getUsers(pageIndex, pageSize).subscribe({
       next: (data) => {
         this.listOfData = data;
-        this.total = data.length;
+        // this.total = data.length;
       },
       error: (error) => {
         console.error('Error loading users:', error);
@@ -88,6 +82,7 @@ export class UsersTableComponent implements OnInit {
 
   editUser(user: UserData): void {
     // this.userService.editUser(user);
+    console.log(user);
   }
 
   deleteUser(user: UserData): void {
@@ -96,6 +91,7 @@ export class UsersTableComponent implements OnInit {
         if (response && response.message === "User Deleted successfully!") {
           this.notification.createNotification('success', 'User deleted', `User ${user.username} has been deleted`);
           this.loadDataFromServer(this.pageIndex - 1, this.pageSize);
+
         } else {
           this.notification.createNotification('error', 'Error deleting user', `User ${user.username} could not be deleted`);
         }

src/app/page/dashboard/dashboard.component.spec.ts

@@ -2,24 +2,42 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DashboardComponent } from './dashboard.component';
 import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon';
-import { DashboardOutline, NodeIndexOutline, TeamOutline, UserAddOutline } from '@ant-design/icons-angular/icons';
+import {
+  DashboardOutline,
+  NodeIndexOutline,
+  TeamOutline,
+  UserAddOutline,
+} from '@ant-design/icons-angular/icons';
+import { provideHttpClient } from '@angular/common/http';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
+  const mockActivatedRoute = {
+    params: of({ id: 1 }),
+    snapshot: { params: { id: 1 } },
+  };
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [DashboardComponent],
       providers: [
         NzIconService,
+        provideHttpClient(),
         {
           provide: NZ_ICONS,
-          useValue: [NodeIndexOutline, UserAddOutline, TeamOutline, DashboardOutline],
+          useValue: [
+            NodeIndexOutline,
+            UserAddOutline,
+            TeamOutline,
+            DashboardOutline,
+          ],
         },
-      ]
-    })
-    .compileComponents();
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
+      ],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;

src/app/services/gaurds/auth-guard/auth-guard.service.ts

@@ -21,9 +21,9 @@ export class AuthGuardService {
           if (
             typeof response === 'object' &&
             'permissions' in response &&
-            typeof (response as any).permissions === 'string'
+            typeof (response).permissions === 'string'
           ) {
-            const permissionsArray = JSON.parse((response as any).permissions);
+            const permissionsArray = JSON.parse((response).permissions);
             if (
               Array.isArray(permissionsArray) &&
               permissionsArray.every((item) => typeof item === 'string')
@@ -36,6 +36,7 @@ export class AuthGuardService {
           this.router.navigate(['/']);
           return false;
         } catch (error) {
+          console.log(error);
           this.router.navigate(['/']);
           return false;
         }

src/app/services/gaurds/dashboard-guard/dashboard-guard.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { DashboardGuardService } from './dashboard-guard.service';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('DashboardGuardService', () => {
   let service: DashboardGuardService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient()],
+    });
     service = TestBed.inject(DashboardGuardService);
   });
 

src/app/services/gaurds/dashboard-guard/dashboard-guard.service.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { PermisionsService } from '../../permisisons/permisions.service';
 import { Observable, of } from 'rxjs';
-import { map, catchError, tap } from 'rxjs/operators';
+import { map, catchError } from 'rxjs/operators';
 import { UserService } from '../../user/user.service';
 
 @Injectable({
@@ -24,9 +24,9 @@ export class DashboardGuardService {
         if (
           typeof response === 'object' &&
           'permissions' in response &&
-          typeof (response as any).permissions === 'string'
+          typeof (response).permissions === 'string'
         ) {
-          const permissionsArray = JSON.parse((response as any).permissions);
+          const permissionsArray = JSON.parse((response).permissions);
           if (
             Array.isArray(permissionsArray) &&
             permissionsArray.every((item) => typeof item === 'string')
@@ -45,4 +45,4 @@ export class DashboardGuardService {
       })
     );
   }
-}
+}

src/app/services/gaurds/manage-users/manage-users-guard.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ManageUsersGuardService } from './manage-users-guard.service';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('ManageUsersGuardService', () => {
   let service: ManageUsersGuardService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient()]
+    });
     service = TestBed.inject(ManageUsersGuardService);
   });
 

src/app/services/login/login.service.spec.ts

@@ -23,7 +23,7 @@ describe('LoginService', () => {
   it('SHOULD call post method with proper data WHEN submited', () => {
     // Arrange
     const spy = spyOn(httpClient, 'post').and.callThrough();
-    const apiUrl = 'http://192.168.24.180:5293/api/Auth/Login';
+    const apiUrl = 'http://localhost:5293/api/Auth/Login';
     const body = { username: 'armin', password: '123' };
     // Act
     service.login('armin', '123');

src/app/services/user/user.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { UserService } from './user.service';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('UserService', () => {
   let service: UserService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient()]
+    });
     service = TestBed.inject(UserService);
   });
 

src/app/services/user/user.service.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, catchError, of, throwError } from 'rxjs';
 import { UserData } from '../../models/user-data';
+import { loginResponse } from '../../models/login-response';
 
 @Injectable({
   providedIn: 'root'
@@ -34,19 +35,19 @@ export class UserService {
     });
   }
 
-  getUsers(pageNum: number, pageSize: number = 10): Observable<UserData[]> {
+  getUsers(pageNum: number, pageSize = 10): Observable<UserData[]> {
     const apiUrl = `${this.URL}/api/Admin/GetAllUser/${pageNum}/${pageSize}`;
     const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
 
     return this.http.get<UserData[]>(apiUrl, { headers, withCredentials: true }).pipe(catchError(() => of([])));;
   }
 
-  deleteUser(userId: number): Observable<any> {
+  deleteUser(userId: number): Observable<loginResponse> {
     const apiUrl = `${this.URL}/api/Admin/DeleteUser/${userId}`;
-    return this.http.delete(apiUrl, { withCredentials: true }).pipe(
+    return this.http.delete<loginResponse>(apiUrl, { withCredentials: true }).pipe(
       catchError((error) => {
         console.error('Error deleting user', error);
-        return throwError(() => error);
+        return throwError(() => new Error('Error deleting user'));
       })
     );
   }