diff --git a/eslint.config.js b/eslint.config.js index 99a007a..94ba737 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -14,6 +14,7 @@ module.exports = tseslint.config( ], processor: angular.processInlineTemplates, rules: { + "@typescript-eslint/no-explicit-any": "off", "@angular-eslint/directive-selector": [ "error", { diff --git a/src/app/components/bread-crump/bread-crump.component.spec.ts b/src/app/components/bread-crump/bread-crump.component.spec.ts index ce78152..13bf452 100644 --- a/src/app/components/bread-crump/bread-crump.component.spec.ts +++ b/src/app/components/bread-crump/bread-crump.component.spec.ts @@ -1,21 +1,41 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { BreadCrumpComponent } from './bread-crump.component'; -import { ActivatedRoute } from '@angular/router'; -import { of } from 'rxjs'; +import { Router, NavigationEnd, ActivatedRoute, UrlTree } from '@angular/router'; +import { Subject } from 'rxjs'; +import { By } from '@angular/platform-browser'; describe('BreadCrumpComponent', () => { let component: BreadCrumpComponent; let fixture: ComponentFixture; - const mockActivatedRoute = { - params: of({ id: 1 }), - snapshot: { params: { id: 1 } }, + let mockRouter: { + events: Subject; + url: string; + createUrlTree: jasmine.Spy; + serializeUrl: jasmine.Spy; }; + let mockActivatedRoute: { snapshot: any }; beforeEach(async () => { + mockRouter = { + events: new Subject(), + url: '/', + createUrlTree: jasmine.createSpy('createUrlTree').and.callFake((commands: any[]) => { + return { + toString: () => commands.join('/'), + } as any as UrlTree; + }), + serializeUrl: jasmine.createSpy('serializeUrl').and.callFake((urlTree: UrlTree) => { + return urlTree.toString(); + }), + }; + mockActivatedRoute = { snapshot: { url: [] } }; + await TestBed.configureTestingModule({ imports: [BreadCrumpComponent], - providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }], + providers: [ + { provide: Router, useValue: mockRouter }, + { provide: ActivatedRoute, useValue: mockActivatedRoute } + ], }).compileComponents(); fixture = TestBed.createComponent(BreadCrumpComponent); @@ -23,7 +43,53 @@ describe('BreadCrumpComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD generate breadcrumbs based on the URL WHEN ever', () => { + // Arrange + mockRouter.url = '/dashboard/user/profile'; + + // Act + mockRouter.events.next(new NavigationEnd(1, mockRouter.url, mockRouter.url)); + fixture.detectChanges(); + + expect(component.breadcrumbs).toEqual([ + { label: 'Dashboard', url: '/dashboard' }, + { label: 'User', url: '/dashboard/user' }, + { label: 'Profile', url: '/dashboard/user/profile' }, + ]); + }); + + it('SHOULD render breadcrumbs correctly in the template WHEN ever', () => { + // Arrange + mockRouter.url = '/user/profile'; + + // Act + mockRouter.events.next(new NavigationEnd(1, mockRouter.url, mockRouter.url)); + fixture.detectChanges(); + + // Assert + const breadcrumbItems = fixture.debugElement.queryAll(By.css('nz-breadcrumb-item')); + + expect(breadcrumbItems.length).toBe(3); + + expect(breadcrumbItems[0].nativeElement.textContent.trim()).toContain(''); + expect(breadcrumbItems[1].nativeElement.textContent.trim()).toContain('User'); + expect(breadcrumbItems[2].nativeElement.textContent.trim()).toContain('Profile'); + }); + + it('SHOULD handle the case with an empty URL correctly WHEN ever', () => { + // Arrange + mockRouter.url = '/'; + + // Act + mockRouter.events.next(new NavigationEnd(1, mockRouter.url, mockRouter.url)); + fixture.detectChanges(); + + // Assert + const breadcrumbItems = fixture.debugElement.queryAll(By.css('nz-breadcrumb-item')); + expect(breadcrumbItems.length).toBe(1); + }); }); diff --git a/src/app/components/bread-crump/bread-crump.component.ts b/src/app/components/bread-crump/bread-crump.component.ts index 6e79c18..af06b4f 100644 --- a/src/app/components/bread-crump/bread-crump.component.ts +++ b/src/app/components/bread-crump/bread-crump.component.ts @@ -1,6 +1,6 @@ import { NgFor, NgIf } from '@angular/common'; import { Component, OnInit } from '@angular/core'; -import {NavigationEnd, Router, RouterLink } from '@angular/router'; +import { NavigationEnd, Router, RouterLink } from '@angular/router'; import { NzBreadCrumbComponent, NzBreadCrumbItemComponent } from 'ng-zorro-antd/breadcrumb'; import { filter } from 'rxjs'; @@ -12,14 +12,12 @@ import { filter } from 'rxjs'; styleUrl: './bread-crump.component.scss', }) export class BreadCrumpComponent implements OnInit { - breadcrumbs: {label: string, url: string}[] = []; + breadcrumbs: { label: string; url: string }[] = []; constructor(private router: Router) {} ngOnInit() { - this.router.events.pipe( - filter(event => event instanceof NavigationEnd) - ).subscribe(() => { + this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { this.generateBreadcrumbs(); }); @@ -27,7 +25,7 @@ export class BreadCrumpComponent implements OnInit { } private generateBreadcrumbs() { - const urlParts = this.router.url.split('/').filter(part => part); + const urlParts = this.router.url.split('/').filter((part) => part); this.breadcrumbs = urlParts.map((part, index) => { const url = '/' + urlParts.slice(0, index + 1).join('/'); const label = this.formatLabel(part); diff --git a/src/app/components/dashboard-content/dashboard-content.component.spec.ts b/src/app/components/dashboard-content/dashboard-content.component.spec.ts index 474dd71..7fc82e4 100644 --- a/src/app/components/dashboard-content/dashboard-content.component.spec.ts +++ b/src/app/components/dashboard-content/dashboard-content.component.spec.ts @@ -31,7 +31,7 @@ describe('DashboardContentComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/dashboard-content/dashboard-content.component.ts b/src/app/components/dashboard-content/dashboard-content.component.ts index cf0b83c..f06c6bc 100644 --- a/src/app/components/dashboard-content/dashboard-content.component.ts +++ b/src/app/components/dashboard-content/dashboard-content.component.ts @@ -18,8 +18,6 @@ export class DashboardContentComponent implements OnInit { protected commentList: commentType[] = []; ngOnInit(): void { - console.log(comments); - this.commentList = comments; } } diff --git a/src/app/components/dashboard-navbar/dashboard-navbar.component.html b/src/app/components/dashboard-navbar/dashboard-navbar.component.html index ffc33fa..171a5de 100644 --- a/src/app/components/dashboard-navbar/dashboard-navbar.component.html +++ b/src/app/components/dashboard-navbar/dashboard-navbar.component.html @@ -9,15 +9,15 @@
- {{ userData.firstName[0]?.toUpperCase() }}. {{ userData.lastName[0]?.toUpperCase() + {{ userData.firstName[0].toUpperCase() }}. {{ userData.lastName[0].toUpperCase() }}{{ userData.lastName.slice(1) }}
- {{ userData.firstName[0]?.toUpperCase() }}{{ userData.firstName.slice(1) }} - {{ userData.lastName[0]?.toUpperCase() }}{{ userData.lastName.slice(1) }} + {{ userData.firstName[0].toUpperCase() }}{{ userData.firstName.slice(1) }} + {{ userData.lastName[0].toUpperCase() }}{{ userData.lastName.slice(1) }}
  • @@ -31,7 +31,7 @@
  • { let component: DashboardNavbarComponent; let fixture: ComponentFixture; + let mockUserService: Partial; + let userDataSubject: BehaviorSubject; + let mockNotificationService: Partial; const mockActivatedRoute = { params: of({ id: 1 }), snapshot: { params: { id: 1 } }, }; + const initialUserData: UserData = { + id: 1, + username: 'testuser', + email: 'test@example.com', + firstName: 'John', + lastName: 'Doe', + roles: ['admin'], + }; + const httpSpy = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete', 'patch']); beforeEach(async () => { + userDataSubject = new BehaviorSubject(initialUserData); + + mockUserService = { + userData$: userDataSubject.asObservable(), + }; + + mockNotificationService = { + createNotification: jasmine.createSpy('createNotification'), + }; + await TestBed.configureTestingModule({ imports: [DashboardNavbarComponent], providers: [ - provideHttpClient(), + provideAnimationsAsync(), NzIconService, { provide: NZ_ICONS, useValue: [MenuOutline, SettingOutline, UserOutline], }, { provide: ActivatedRoute, useValue: mockActivatedRoute }, + { provide: UserService, useValue: mockUserService }, + { provide: NotificationService, useValue: mockNotificationService }, + { + provide: DashboardGuardService, + useValue: { canActivate: () => of(true) }, + }, + { provide: HttpClient, useValue: httpSpy }, + provideRouter(routes), ], }).compileComponents(); @@ -34,7 +70,50 @@ describe('DashboardNavbarComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD display user data correctly in the navbar WHEN ever', () => { + // Arrange + const compiled = fixture.nativeElement; + const userNameElement = compiled.querySelector('.navbar__right__menu-button'); + + // Act + + // Assert + expect(userNameElement.textContent).toContain('J. Doe'); + }); + + it('SHOULD display user data correctly in the navbar dropdown WHEN dropdown button clicked', async () => { + // Arrange + const dropdownButton = fixture.nativeElement.querySelector('.navbar__right__menu-button'); + + // Act + dropdownButton.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + // Assert + const userNameElement = window.document.querySelector('.navbar__right__custom-menu__header'); + expect(userNameElement?.textContent).toContain(' John Doe '); + }); + + it('SHOULD trigger logout WHEN logout button is clicked in the dropdown', async () => { + // Arrange + spyOn(component as any, 'logout'); + fixture.detectChanges(); + const dropdownButton = fixture.nativeElement.querySelector('.navbar__right__menu-button'); + + // Act + dropdownButton.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + const logoutButton = window.document.querySelector('.navbar__right__custom-menu__list__item-logout'); + logoutButton?.dispatchEvent(new Event('click')); + + // Assert + expect((component as any).logout).toHaveBeenCalled(); + }); }); diff --git a/src/app/components/edit-user-components/edit-password/edit-password.component.spec.ts b/src/app/components/edit-user-components/edit-password/edit-password.component.spec.ts index 012c1b7..734e9b5 100644 --- a/src/app/components/edit-user-components/edit-password/edit-password.component.spec.ts +++ b/src/app/components/edit-user-components/edit-password/edit-password.component.spec.ts @@ -1,26 +1,37 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; +import { NotificationService } from '../../../services/notification/notification.service'; import { KeyOutline, LockOutline } from '@ant-design/icons-angular/icons'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { UserService } from '../../../services/user/user.service'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { EditPasswordComponent } from './edit-password.component'; -import { of } from 'rxjs'; +import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; +import { HttpErrorResponse } from '@angular/common/http'; +import { NzModalModule } from 'ng-zorro-antd/modal'; import { ActivatedRoute } from '@angular/router'; -import { provideHttpClient } from '@angular/common/http'; +import { of, throwError } from 'rxjs'; describe('EditPasswordComponent', () => { let component: EditPasswordComponent; let fixture: ComponentFixture; + let userService: jasmine.SpyObj; + let notificationService: jasmine.SpyObj; + const mockActivatedRoute = { - queryParams: of({ id: 1 }), + queryParams: of({}), }; beforeEach(async () => { + userService = jasmine.createSpyObj('UserService', ['updatePassword']); + notificationService = jasmine.createSpyObj('NotificationService', ['createNotification']); + await TestBed.configureTestingModule({ - imports: [EditPasswordComponent], + imports: [EditPasswordComponent, ReactiveFormsModule, FormsModule, NzModalModule], providers: [ - provideHttpClient(), - { provide: ActivatedRoute, useValue: mockActivatedRoute }, NzIconService, { provide: NZ_ICONS, useValue: [LockOutline, KeyOutline] }, + { provide: ActivatedRoute, useValue: mockActivatedRoute }, + { provide: UserService, useValue: userService }, + { provide: NotificationService, useValue: notificationService }, ], }).compileComponents(); @@ -29,7 +40,168 @@ describe('EditPasswordComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD initialize the form with correct default values WHEN ever', () => { + // Arrange + const passwordForm = (component as any).passwordForm; + + // Act + + // Assert + expect(passwordForm).toBeDefined(); + expect(passwordForm.get('oldpassword')?.value).toBe(''); + expect(passwordForm.get('newpassword')?.value).toBe(''); + expect(passwordForm.get('confirmPassword')?.value).toBe(''); + }); + + it('SHOULD validate the new password with specific rules WHEN ever', () => { + // Arrange + const newPasswordControl = (component as any).passwordForm.get('newpassword'); + + // Act + newPasswordControl?.setValue('Short1!'); + + // Assert + expect(newPasswordControl?.valid).toBeFalse(); + + // Act + newPasswordControl?.setValue('ValidPassword1!'); + + // Assert + expect(newPasswordControl?.valid).toBeTrue(); + }); + + it('SHOULD update password validation indicators WHEN new password changes', () => { + // Arrange + const newPasswordControl = (component as any).passwordForm.get('newpassword'); + + // Act + newPasswordControl?.setValue('Test1!'); + + // Assert + expect((component as any).passwordValidation.hasDigit).toBeTrue(); + expect((component as any).passwordValidation.hasLowercase).toBeTrue(); + expect((component as any).passwordValidation.hasUppercase).toBeTrue(); + expect((component as any).passwordValidation.hasSpecialChar).toBeTrue(); + expect((component as any).passwordValidation.hasValidLength).toBeFalse(); + }); + + it('SHOULD validate password confirmation WHEN confirm password input changes', () => { + // Arrange + const passwordForm = (component as any).passwordForm; + + // Act + passwordForm.get('newpassword')?.setValue('ValidPassword1!'); + passwordForm.get('confirmPassword')?.setValue('DifferentPassword1!'); + + // Assert + expect(passwordForm.get('confirmPassword')?.valid).toBeFalse(); + passwordForm.get('confirmPassword')?.setValue('ValidPassword1!'); + expect(passwordForm.get('confirmPassword')?.valid).toBeTrue(); + }); + + it('SHOULD call userService.updatePassword for updating profile password WHEN isUpdatingProfile is true', () => { + // Arrange + (component as any).isUpdatingProfile = true; + userService.updatePassword.and.returnValue(of({ message: 'Success' })); + + // Act + (component as any).passwordForm.setValue({ + oldpassword: 'OldPassword1!', + newpassword: 'NewPassword1!', + confirmPassword: 'NewPassword1!', + }); + + (component as any).onSubmit(); + + // Assert + expect(userService.updatePassword).toHaveBeenCalledWith(null, (component as any).passwordForm, true); + expect(notificationService.createNotification).toHaveBeenCalledWith('success', 'Success', 'Success'); + }); + + it("SHOULD call userService.updatePassword for updating another user's password WHEN isUpdatingProfile is false", () => { + // Arrange + (component as any).isUpdatingProfile = false; + (component as any).userID = 1; + userService.updatePassword.and.returnValue(of({ message: 'Success' })); + + // Act + (component as any).passwordForm.setValue({ + oldpassword: 'OldPassword1!', + newpassword: 'NewPassword1!', + confirmPassword: 'NewPassword1!', + }); + + (component as any).onSubmit(); + + // Assert + expect(userService.updatePassword).toHaveBeenCalledWith(1, (component as any).passwordForm, false); + expect(notificationService.createNotification).toHaveBeenCalledWith('success', 'Success', 'Success'); + }); + + it('SHOULD display error notification WHEN update fails', () => { + // Arrange + userService.updatePassword.and.returnValue( + throwError(() => new HttpErrorResponse({ status: 400, statusText: 'Bad Request' })) + ); + + // Act + (component as any).passwordForm.setValue({ + oldpassword: 'OldPassword1!', + newpassword: 'NewPassword1!', + confirmPassword: 'NewPassword1!', + }); + + (component as any).onSubmit(); + + // Assert + expect(notificationService.createNotification).toHaveBeenCalledWith( + 'error', + 'Unexpected Error', + 'Bad Request: Old password is wrong!' + ); + }); + + it('SHOULD mark all fields as touched WHEN form is invalid and submitted', () => { + // Arrange + + // Act + (component as any).passwordForm.setValue({ + oldpassword: '', + newpassword: '', + confirmPassword: '', + }); + + (component as any).onSubmit(); + + // Assert + expect((component as any).passwordForm.get('oldpassword')?.touched).toBeTrue(); + expect((component as any).passwordForm.get('newpassword')?.touched).toBeTrue(); + expect((component as any).passwordForm.get('confirmPassword')?.touched).toBeTrue(); + }); + + it('SHOULD set isUpdatingProfile to false WHEN userID is present in URL params', () => { + // Arrange + mockActivatedRoute.queryParams = of({ id: 1 }); + + // Act + (component as any).ngOnInit(); + + // Assert + expect((component as any).isUpdatingProfile).toBeFalse(); + }); + + it('SHOULD set isUpdatingProfile to true WHEN userID is NOT present in URL params', () => { + // Arrange + mockActivatedRoute.queryParams = of({}); + + // Act + (component as any).ngOnInit(); + + // Assert + expect((component as any).isUpdatingProfile).toBeTrue(); + }); }); diff --git a/src/app/components/edit-user-components/edit-profile/edit-profile.component.spec.ts b/src/app/components/edit-user-components/edit-profile/edit-profile.component.spec.ts index 92f3f82..bcca4fc 100644 --- a/src/app/components/edit-user-components/edit-profile/edit-profile.component.spec.ts +++ b/src/app/components/edit-user-components/edit-profile/edit-profile.component.spec.ts @@ -1,41 +1,282 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { EditProfileComponent } from './edit-profile.component'; -import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; -import { provideHttpClient } from '@angular/common/http'; -import { of } from 'rxjs'; +import { of, Subject, throwError } from 'rxjs'; import { ActivatedRoute } from '@angular/router'; import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; import { IdcardOutline, MailOutline, TeamOutline, UserOutline } from '@ant-design/icons-angular/icons'; +import { UserService } from '../../../services/user/user.service'; +import { NotificationService } from '../../../services/notification/notification.service'; +import { UserData } from '../../../models/user-data'; +import { HttpErrorResponse } from '@angular/common/http'; describe('EditProfileComponent', () => { let component: EditProfileComponent; let fixture: ComponentFixture; + let userServiceMock: jasmine.SpyObj; + let notificationServiceMock: jasmine.SpyObj; + let userDataSubject: Subject; const mockActivatedRoute = { queryParams: of({ id: 1 }), }; beforeEach(async () => { + userDataSubject = new Subject(); + userServiceMock = jasmine.createSpyObj('UserService', ['updateUser'], { + userData$: userDataSubject.asObservable(), + }); + notificationServiceMock = jasmine.createSpyObj('NotificationService', ['createNotification']); + await TestBed.configureTestingModule({ imports: [EditProfileComponent], providers: [ - provideAnimationsAsync(), - provideHttpClient(), NzIconService, { provide: NZ_ICONS, useValue: [UserOutline, TeamOutline, MailOutline, IdcardOutline], }, { provide: ActivatedRoute, useValue: mockActivatedRoute }, + { provide: UserService, useValue: userServiceMock }, + { provide: NotificationService, useValue: notificationServiceMock }, ], }).compileComponents(); fixture = TestBed.createComponent(EditProfileComponent); component = fixture.componentInstance; + + userDataSubject.next({ + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'john.doe@example.com', + username: 'johndoe', + roles: ['Admin'], + }); + fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD initialize the form with default values WHEN ever', () => { + // Arrange + + // Act + + // Assert + expect((component as any).userForm).toBeDefined(); + expect((component as any).userForm.controls['firstName'].value).toEqual(''); + expect((component as any).userForm.controls['lastName'].value).toEqual(''); + expect((component as any).userForm.controls['email'].value).toEqual(''); + expect((component as any).userForm.controls['username'].value).toEqual(''); + }); + + it('SHOULD update form controls WHEN userData is set', () => { + // Arrange + (component as any).userData = { + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'john.doe@example.com', + username: 'johndoe', + }; + + // Act + component.ngOnChanges(); + + // Assert + expect((component as any).userForm.controls['firstName'].value).toEqual('John'); + expect((component as any).userForm.controls['lastName'].value).toEqual('Doe'); + expect((component as any).userForm.controls['email'].value).toEqual('john.doe@example.com'); + expect((component as any).userForm.controls['username'].value).toEqual('johndoe'); + }); + + it('SHOULD mark firstName as invalid WHEN first name input is empty', () => { + // Arrange + const firstNameControl = (component as any).userForm.controls['firstName']; + + // Act + firstNameControl.setValue(''); + + // Assert + expect(firstNameControl.invalid).toBeTruthy(); + expect(firstNameControl.errors?.['required']).toBeTruthy(); + }); + + it('SHOULD mark firstName as valid WHEN first name input is not empty', () => { + // Arrange + const firstNameControl = (component as any).userForm.controls['firstName']; + + // Act + firstNameControl.setValue('John'); + + // Assert + expect(firstNameControl.valid).toBeTruthy(); + }); + + it('SHOULD mark lastName as invalid WHEN last name input is empty', () => { + // Arrange + const lastNameControl = (component as any).userForm.controls['lastName']; + + // Act + lastNameControl.setValue(''); + + // Assert + expect(lastNameControl.invalid).toBeTruthy(); + expect(lastNameControl.errors?.['required']).toBeTruthy(); + }); + + it('SHOULD mark lastName as valid WHEN last name input is not empty', () => { + // Arrange + const lastNameControl = (component as any).userForm.controls['lastName']; + + // Act + lastNameControl.setValue('Doe'); + + // Assert + expect(lastNameControl.valid).toBeTruthy(); + }); + + it('SHOULD mark email as invalid WHEN email input is empty', () => { + // Arrange + const emailControl = (component as any).userForm.controls['email']; + + // Act + emailControl.setValue(''); + + // Assert + expect(emailControl.invalid).toBeTruthy(); + expect(emailControl.errors?.['required']).toBeTruthy(); + }); + + it('SHOULD mark email as invalid WHEN email input is not an email', () => { + // Arrange + const emailControl = (component as any).userForm.controls['email']; + + // Act + emailControl.setValue('john.doe'); + + // Assert + expect(emailControl.invalid).toBeTruthy(); + expect(emailControl.errors?.['email']).toBeTruthy(); + }); + + it('SHOULD mark email as valid WHEN email input is an email', () => { + // Arrange + const emailControl = (component as any).userForm.controls['email']; + + // Act + emailControl.setValue('a@gmail.com'); + + // Assert + expect(emailControl.valid).toBeTruthy(); + }); + + it('SHOULD mark username as invalid IF empty', () => { + // Arrange + const usernameControl = (component as any).userForm.controls['username']; + + // Act + usernameControl.setValue(''); + + // Assert + expect(usernameControl.invalid).toBeTruthy(); + expect(usernameControl.errors?.['required']).toBeTruthy(); + }); + + it('SHOULD mark username as invalid IF less than 3 characters', () => { + // Arrange + const usernameControl = (component as any).userForm.controls['username']; + + // Act + usernameControl.setValue('ab'); + + // Assert + expect(usernameControl.invalid).toBeTruthy(); + expect(usernameControl.errors?.['minlength']).toBeTruthy(); + }); + + it('SHOULD mark username as valid IF more than 3 characters', () => { + // Arrange + const usernameControl = (component as any).userForm.controls['username']; + + // Act + usernameControl.setValue('abcd'); + + // Assert + expect(usernameControl.valid).toBeTruthy(); + }); + + it('SHOULD submit the form WHEN form is valid upon submition', () => { + // Arrange + (component as any).userForm.setValue({ + firstName: 'John', + lastName: 'Doe', + email: 'john.doe@example.com', + username: 'johndoe', + }); + (component as any).userData = { + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'temp@gmail.com', + username: 'johndoe', + }; + userServiceMock.updateUser.and.returnValue(of({ message: 'Success' })); + + // Act + component.onSubmit(); + + // Assert + expect(userServiceMock.updateUser).toHaveBeenCalled(); + }); + + it('SHOULD not submit the form WHEN form invalid upon submition', () => { + // Arrange + (component as any).userData = { + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'temp@gmail.com', + username: 'johndoe', + }; + + // Act + component.onSubmit(); + + // Assert + expect(userServiceMock.updateUser).not.toHaveBeenCalled(); + }); + + it('SHOULD handle errors correctly WHEN updateUser returns a 400 error', () => { + // Arrange + (component as any).userData = { + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'temp@gmail.com', + username: 'johndoe', + }; + (component as any).userForm.setValue({ + firstName: 'John', + lastName: 'Doe', + email: 'john.doe@example.com', + username: 'johndoe', + }); + + const errorResponse = new HttpErrorResponse({ status: 400 }); + userServiceMock.updateUser.and.returnValue(throwError(() => errorResponse)); + + // Act + component.onSubmit(); + + // Assert + expect(notificationServiceMock.createNotification).toHaveBeenCalledWith( + 'error', + 'Unexpected Error', + 'Bad Request: Please check your inputs' + ); + }); }); diff --git a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts b/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts index 53e5834..fae188e 100644 --- a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts +++ b/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts @@ -43,12 +43,11 @@ export class EditProfileComponent implements OnChanges, OnInit { ngOnInit(): void { this.initializeForm(); + this.subscribeToQueryParams(); } ngOnChanges(): void { this.initializeForm(); - - this.subscribeToQueryParams(); } private subscribeToQueryParams() { diff --git a/src/app/components/edit-user-components/edit-role/edit-role.component.spec.ts b/src/app/components/edit-user-components/edit-role/edit-role.component.spec.ts index a4c50d8..484b78c 100644 --- a/src/app/components/edit-user-components/edit-role/edit-role.component.spec.ts +++ b/src/app/components/edit-user-components/edit-role/edit-role.component.spec.ts @@ -1,34 +1,212 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { of, Subject, throwError } from 'rxjs'; import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; -import { DotChartOutline, UsergroupAddOutline } from '@ant-design/icons-angular/icons'; import { EditRoleComponent } from './edit-role.component'; +import { UserService } from '../../../services/user/user.service'; +import { NotificationService } from '../../../services/notification/notification.service'; +import { DotChartOutline, UsergroupAddOutline } from '@ant-design/icons-angular/icons'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; -import { provideHttpClient } from '@angular/common/http'; +import { UserData } from '../../../models/user-data'; +import { HttpErrorResponse } from '@angular/common/http'; describe('EditRoleComponent', () => { let component: EditRoleComponent; let fixture: ComponentFixture; + let userService: jasmine.SpyObj; + let notificationService: jasmine.SpyObj; + let userDataSubject: Subject; beforeEach(async () => { + userDataSubject = new Subject(); + + const userServiceSpy = jasmine.createSpyObj('UserService', ['getRoles', 'updateRole', 'logout'], { + userData$: userDataSubject.asObservable(), + }); + const notificationServiceSpy = jasmine.createSpyObj('NotificationService', ['createNotification']); + await TestBed.configureTestingModule({ imports: [EditRoleComponent], providers: [ provideAnimationsAsync(), - provideHttpClient(), NzIconService, { provide: NZ_ICONS, useValue: [DotChartOutline, UsergroupAddOutline], }, + { + provide: UserService, + useValue: userServiceSpy, + }, + { + provide: NotificationService, + useValue: notificationServiceSpy, + }, ], }).compileComponents(); fixture = TestBed.createComponent(EditRoleComponent); component = fixture.componentInstance; + userService = TestBed.inject(UserService) as jasmine.SpyObj; + notificationService = TestBed.inject(NotificationService) as jasmine.SpyObj; + userDataSubject.next({ + id: 1, + firstName: 'John', + lastName: 'Doe', + email: 'john.doe@example.com', + username: 'johndoe', + roles: ['Admin'], + }); + userService.getRoles.and.returnValue(of(['Admin', 'User'])); fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD initialize form with roles field WHEN ever', () => { + // Arrange + + // Act + + // Assert + expect((component as any).roleForm.contains('roles')).toBeTruthy(); + expect((component as any).roleForm.get('roles')?.valid).toBeFalsy(); + }); + + it('SHOULD fetch and populate roles options on init WHEN ever', () => { + // Arrange + + // Act + + // Assert + expect(userService.getRoles).toHaveBeenCalled(); + expect((component as any).formControls[0].options.length).toBeGreaterThan(0); + expect((component as any).formControls[0].options).toEqual([ + { label: 'Admin', value: 'Admin' }, + { label: 'User', value: 'User' }, + ]); + }); + + it('SHOULD update form values WHEN userData changes', () => { + // Arrange + const mockUserData: UserData = { + id: 1, + firstName: 'John', + lastName: 'Smith', + username: 'johnsmith', + email: 'smith@gmail.com', + roles: ['admin'], + }; + component.userData = mockUserData; + + // Act + component.ngOnChanges(); + fixture.detectChanges(); + + // Assert + expect((component as any).roleForm.get('roles')?.value).toEqual(mockUserData.roles); + }); + + it('SHOULD display error message if form is invalid WHEN submitted', () => { + // Arrange + spyOn((component as any).roleForm, 'markAllAsTouched'); + + // Act + (component as any).onSubmit(); + + // Assert + expect((component as any).isSubmitted).toBeTruthy(); + expect((component as any).roleForm.markAllAsTouched).toHaveBeenCalled(); + }); + + it('SHOULD call updateRole service and handle success response WHEN submitted', () => { + // Arrange + const mockUserData: UserData = { + id: 1, + firstName: 'John', + lastName: 'Smith', + username: 'johnsmith', + email: 'smith@gmail.com', + roles: ['admin'], + }; + component.userData = mockUserData; + component.ngOnChanges(); + fixture.detectChanges(); + + const responseMock = { message: 'Role updated successfully' }; + userService.updateRole.and.returnValue(of(responseMock)); + + // Act + (component as any).roleForm.get('roles')?.setValue(['admin']); + (component as any).onSubmit(); + + // Assert + expect(userService.updateRole).toHaveBeenCalledWith(['admin'], 1); + expect(notificationService.createNotification).toHaveBeenCalledWith( + 'success', + 'Success', + 'Role updated successfully' + ); + }); + + it('SHOULD handle error response on updateRole service WHEN submitted', () => { + // Arrange + const mockUserData: UserData = { + id: 1, + firstName: 'John', + lastName: 'Smith', + username: 'johnsmith', + email: 'smith@gmail.com', + roles: ['admin'], + }; + component.userData = mockUserData; + component.ngOnChanges(); + fixture.detectChanges(); + const errorResponse = new HttpErrorResponse({ + error: 'Bad Request', + status: 400, + }); + userService.updateRole.and.returnValue(throwError(() => errorResponse)); + + // Act + (component as any).roleForm.get('roles')?.setValue(['admin']); + (component as any).onSubmit(); + + // Assert + expect(userService.updateRole).toHaveBeenCalledWith(['admin'], 1); + expect(notificationService.createNotification).toHaveBeenCalledWith( + 'error', + 'Unexpected Error', + 'Bad Request: Please check your input' + ); + }); + + it('SHOULD trigger logout if updated user is the logged-in user WHEN submitted and role updated successfully', () => { + // Arrange + const mockUserData: UserData = { + id: 1, + firstName: 'John', + lastName: 'Smith', + username: 'johnsmith', + email: 'smith@gmail.com', + roles: ['Admin'], + }; + component.userData = mockUserData; + component.ngOnChanges(); + fixture.detectChanges(); + + const responseMock = { message: 'Role updated successfully' }; + userService.updateRole.and.returnValue(of(responseMock)); + spyOn(component as any, 'logout'); + + // Act + (component as any).roleForm.get('roles')?.setValue(['Admin', 'User']); + (component as any).onSubmit(); + + userDataSubject.next({ id: 1, roles: ['Admin', 'User'] } as UserData); + + // Assert + expect((component as any).logout).toHaveBeenCalled(); + }); }); diff --git a/src/app/components/edit-user-components/edit-role/edit-role.component.ts b/src/app/components/edit-user-components/edit-role/edit-role.component.ts index 69e19c8..60b520d 100644 --- a/src/app/components/edit-user-components/edit-role/edit-role.component.ts +++ b/src/app/components/edit-user-components/edit-role/edit-role.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input, OnChanges, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms'; import { NgClass, NgIf, NgFor, CommonModule } from '@angular/common'; import { UserService } from '../../../services/user/user.service'; @@ -18,7 +18,7 @@ import { formInput } from '../../../models/form-input'; templateUrl: './edit-role.component.html', styleUrl: './edit-role.component.scss', }) -export class EditRoleComponent implements OnChanges { +export class EditRoleComponent implements OnChanges, OnInit { @Input({ required: true }) userData: UserData | undefined; protected roleForm!: FormGroup; @@ -43,7 +43,18 @@ export class EditRoleComponent implements OnChanges { this.roleForm = this.fb.group({ roles: ['', [Validators.required, Validators.minLength(1)]], }); + } + + ngOnChanges() { + if (this.userData) { + this.roleForm = this.fb.group({ + roles: [this.userData.roles, [Validators.required]], + }); + this.listOfTagOptions = this.userData.roles; + } + } + ngOnInit(): void { this.userService.getRoles().subscribe({ next: (response) => { const temp: userRoles[] = []; @@ -61,15 +72,6 @@ export class EditRoleComponent implements OnChanges { }); } - ngOnChanges() { - if (this.userData) { - this.roleForm = this.fb.group({ - roles: [this.userData.roles, [Validators.required]], - }); - this.listOfTagOptions = this.userData.roles; - } - } - protected onSubmit() { this.isSubmitted = true; if (this.roleForm.valid) { diff --git a/src/app/components/edit-user-components/edit-user/edit-user.component.html b/src/app/components/edit-user-components/edit-user/edit-user.component.html index 45741c2..d9323fa 100644 --- a/src/app/components/edit-user-components/edit-user/edit-user.component.html +++ b/src/app/components/edit-user-components/edit-user/edit-user.component.html @@ -1,10 +1,10 @@ -
    - - - - - @if (userPermissions.indexOf('/api/Admin') !== -1) { - - } - -
    \ No newline at end of file +
    + + + + + @if (userPermissions.indexOf('/api/Admin') !== -1) { + + } + +
    diff --git a/src/app/components/edit-user-components/edit-user/edit-user.component.spec.ts b/src/app/components/edit-user-components/edit-user/edit-user.component.spec.ts index f6fa67a..87d2011 100644 --- a/src/app/components/edit-user-components/edit-user/edit-user.component.spec.ts +++ b/src/app/components/edit-user-components/edit-user/edit-user.component.spec.ts @@ -1,57 +1,79 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; import { + IdcardOutline, KeyOutline, LockOutline, + MailOutline, MenuOutline, - SettingOutline + SettingOutline, + TeamOutline, + UsergroupAddOutline, + UserOutline, } from '@ant-design/icons-angular/icons'; import { of } from 'rxjs'; import { EditUserComponent } from './edit-user.component'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { UserService } from '../../../services/user/user.service'; import { PermisionsService } from '../../../services/permisisons/permisions.service'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { By } from '@angular/platform-browser'; describe('EditUserComponent', () => { let component: EditUserComponent; let fixture: ComponentFixture; - // Mock data const mockUserData = { id: 1, username: 'testuser', email: 'test@example.com', firstName: 'Test', lastName: 'User', - roles: ['user'] + roles: ['user'], }; - - // Mock services const mockUserService = { getUserById: jasmine.createSpy('getUserById').and.returnValue(Promise.resolve(mockUserData)), - userData$: of(mockUserData) + userData$: of(mockUserData), + getRoles: jasmine.createSpy('getRoles').and.returnValue(of(['Admin', 'User'])), }; - const mockPermisionService = { - permissions$: of(['read', 'write']) + permissions$: of(['/api/Admin', '/api/User']), }; - const mockActivatedRoute = { - queryParams: of({ id: 1 }) + queryParams: of({}), + }; + const mockRouter = { + url: 'dashboard/', + events: of({}), + navigate: jasmine.createSpy('navigate'), + createUrlTree: jasmine.createSpy('createUrlTree').and.callFake((commands) => commands), + serializeUrl: jasmine.createSpy('serializeUrl').and.callFake((url) => url.toString()), }; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [EditUserComponent], providers: [ + provideAnimationsAsync(), + NzIconService, { provide: ActivatedRoute, useValue: mockActivatedRoute }, { provide: UserService, useValue: mockUserService }, { provide: PermisionsService, useValue: mockPermisionService }, - NzIconService, { provide: NZ_ICONS, - useValue: [MenuOutline, SettingOutline, LockOutline, KeyOutline], + useValue: [ + MenuOutline, + SettingOutline, + LockOutline, + KeyOutline, + UserOutline, + MailOutline, + TeamOutline, + IdcardOutline, + UsergroupAddOutline, + ], }, + { provide: Router, useValue: mockRouter }, ], }).compileComponents(); @@ -60,11 +82,106 @@ describe('EditUserComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + it('SHOULD load user data from ActivatedRoute query parameters WHEN id is provided in query params', fakeAsync(() => { + // Arrange + mockActivatedRoute.queryParams = of({ id: 1 }); + + // Act + component.ngOnInit(); + fixture.detectChanges(); + tick(); + + // Assert + expect(mockUserService.getUserById).toHaveBeenCalledWith(1); + expect((component as any).userData).toEqual(mockUserData); + })); + + it('SHOULD load user data from userService userData$ observable WHEN id is not provided in query params', async () => { + // Arrange + mockActivatedRoute.queryParams = of({}); + + // Act + component.ngOnInit(); + fixture.detectChanges(); + await fixture.whenStable(); + + // Assert + expect((component as any).userData).toEqual(mockUserData); + }); + + it('SHOULD load user permissions from PermisionsService WHEN ever', fakeAsync(() => { + // Arrange + mockPermisionService.permissions$ = of(['/api/Admin']); + + // Act + component.ngOnInit(); + fixture.detectChanges(); + tick(); + + // Assert + expect((component as any).userPermissions).toEqual(['/api/Admin']); + })); + + it('SHOULD render WHEN user has Admin permissions', fakeAsync(() => { + // Arrange + mockPermisionService.permissions$ = of(['/api/Admin']); + + // Act + component.ngOnInit(); + fixture.detectChanges(); + tick(); + + // Assert + const editRoleComponent = fixture.nativeElement.querySelector('app-edit-role'); + expect(editRoleComponent).toBeTruthy(); + })); + + it('SHOULD NOT render WHEN user does not have Admin permissions', fakeAsync(() => { + // Arrange + mockPermisionService.permissions$ = of(['/api/User']); + + // Act + component.ngOnInit(); + fixture.detectChanges(); + tick(); + + // Assert + const editRoleComponent = fixture.nativeElement.querySelector('app-edit-role'); + expect(editRoleComponent).toBeFalsy(); + })); + + it('SHOULD pass correct userData to WHEN ever', () => { + // Arrange + + // Act + component.ngOnInit(); + fixture.detectChanges(); + + // Assert + const editProfileComponent = fixture.debugElement.query(By.css('app-edit-profile')).componentInstance; + expect(editProfileComponent.userData).toEqual(mockUserData); + }); + + it('SHOULD pass correct userData to WHEN user has admin permissions', fakeAsync(() => { + // Arrange + mockPermisionService.permissions$ = of(['/api/Admin']); + // Act + component.ngOnInit(); + fixture.detectChanges(); + tick(); + // Assert + const editRoleComponent = fixture.debugElement.query(By.css('app-edit-role')).componentInstance; + expect(editRoleComponent.userData).toEqual(mockUserData); + })); + it('SHOULD render WHEN ever', () => { + const breadCrumpComponent = fixture.nativeElement.querySelector('app-bread-crump'); + expect(breadCrumpComponent).toBeTruthy(); + }); }); diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts index fb5863c..33d9d57 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts @@ -17,7 +17,7 @@ describe('DataOverviewDrawerComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts index 1e69c57..f88b3c6 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.spec.ts @@ -27,7 +27,7 @@ describe('SigmaComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index 76f5aaf..57ec5fb 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -19,7 +19,7 @@ import { graphRecords } from '../../../../models/graph-records'; import { CommonModule, NgFor } from '@angular/common'; import { nodeData } from '../../../../models/node-data'; import { edgeData } from '../../../../models/edge-data'; -import { UploadGraphService } from '../../../../services/upload-graph/upload-graph.service'; +import { GraphService } from '../../../../services/graph/graph.service'; @Component({ selector: 'app-sigma', @@ -53,7 +53,7 @@ export class SigmaComponent implements AfterViewInit { constructor( private sigmaService: SigmaService, - private uploadService: UploadGraphService + private uploadService: GraphService ) {} ngAfterViewInit() { diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.spec.ts b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.spec.ts index ebcf724..6d584ee 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.spec.ts @@ -60,7 +60,7 @@ describe('GraphToolBarComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.spec.ts index dd3538f..d34e8f2 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.spec.ts @@ -20,7 +20,7 @@ describe('GetGraphComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts index 9b31619..4a37348 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzTypographyModule } from 'ng-zorro-antd/typography'; -import { UploadGraphService } from '../../../../../services/upload-graph/upload-graph.service'; +import { GraphService } from '../../../../../services/graph/graph.service'; import { NotificationService } from '../../../../../services/notification/notification.service'; import { NzButtonComponent } from 'ng-zorro-antd/button'; import { SigmaService } from '../../../../../services/sigma/sigma.service'; @@ -21,7 +21,7 @@ export class GetGraphComponent implements OnInit { constructor( private fb: FormBuilder, - private uploadGraphService: UploadGraphService, + private GraphService: GraphService, private sigmaService: SigmaService, private notificationService: NotificationService ) { @@ -33,7 +33,7 @@ export class GetGraphComponent implements OnInit { } ngOnInit(): void { - this.uploadGraphService.getNodeCategories().subscribe({ + this.GraphService.getNodeCategories().subscribe({ next: (data) => { this.nodeCategoryList = data; }, @@ -42,7 +42,7 @@ export class GetGraphComponent implements OnInit { }, }); - this.uploadGraphService.getEdgeCategories().subscribe({ + this.GraphService.getEdgeCategories().subscribe({ next: (data) => { this.edgeCategoryList = data; }, @@ -53,7 +53,7 @@ export class GetGraphComponent implements OnInit { } protected submit() { - this.uploadGraphService.getGraph().subscribe({ + this.GraphService.getGraph().subscribe({ next: (data) => { this.sigmaService.setGetGraph(data); this.notificationService.createNotification('success', 'Success', 'Graph data loaded successfully!'); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.spec.ts index 4638b38..8b06180 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/layouts/layouts.component.spec.ts @@ -52,7 +52,7 @@ describe('LayoutsComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-components.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-components.component.spec.ts index 544e1f7..6c01fd3 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-components.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-components.component.spec.ts @@ -33,7 +33,7 @@ describe('UploadComponentsComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); \ No newline at end of file diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.spec.ts index 7177f7f..6954cd2 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.spec.ts @@ -19,7 +19,7 @@ describe('UploadEdgeComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.ts index 6691424..e7fb6e4 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-edge/upload-edge.component.ts @@ -10,7 +10,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzMessageService } from 'ng-zorro-antd/message'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; -import { UploadGraphService } from '../../../../../../services/upload-graph/upload-graph.service'; +import { GraphService } from '../../../../../../services/graph/graph.service'; import { NotificationService } from '../../../../../../services/notification/notification.service'; import { HttpErrorResponse } from '@angular/common/http'; @@ -46,7 +46,7 @@ export class UploadEdgeComponent { constructor( private msg: NzMessageService, - private uploadGraphService: UploadGraphService, + private GraphService: GraphService, private notificationService: NotificationService, private fb: FormBuilder ) { @@ -96,7 +96,7 @@ export class UploadEdgeComponent { }; addEdgeCategory() { - this.uploadGraphService.addEdgeCategory(this.edgeCategory).subscribe({ + this.GraphService.addEdgeCategory(this.edgeCategory).subscribe({ next: (response) => { const successMessage = 'Success'; this.notificationService.createNotification('success', successMessage, response.message); @@ -117,7 +117,7 @@ export class UploadEdgeComponent { } getEdgeCategory() { - this.uploadGraphService.getEdgeCategories().subscribe({ + this.GraphService.getEdgeCategories().subscribe({ next: (response) => { this.edgeCategoryList = response; }, @@ -128,7 +128,7 @@ export class UploadEdgeComponent { } getNodeCategory() { - this.uploadGraphService.getNodeCategories().subscribe({ + this.GraphService.getNodeCategories().subscribe({ next: (response) => { this.nodeCategoryList = response; }, @@ -158,7 +158,7 @@ export class UploadEdgeComponent { }) - this.uploadGraphService.uploadEdgeData(formData).subscribe(({ + this.GraphService.uploadEdgeData(formData).subscribe(({ next: (response) => { this.notificationService.createNotification('success', 'Success', response.message); this.isPending = false; diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-layout/upload-components.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-layout/upload-components.component.spec.ts index 4752315..63c65f5 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-layout/upload-components.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-layout/upload-components.component.spec.ts @@ -11,7 +11,7 @@ describe('UploadComponentsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [UploadComponentsComponent], - providers: [provideAnimationsAsync(), HttpClient , HttpHandler] + providers: [provideAnimationsAsync(), HttpClient, HttpHandler] }) .compileComponents(); @@ -20,7 +20,7 @@ describe('UploadComponentsComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.spec.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.spec.ts index ef48bc9..fc7ad34 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.spec.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.spec.ts @@ -19,7 +19,7 @@ describe('UploadNodeComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.ts index a629cf2..9a3eddc 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.ts @@ -9,7 +9,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NgIf } from '@angular/common'; import { NzMessageService } from 'ng-zorro-antd/message'; -import { UploadGraphService } from '../../../../../../services/upload-graph/upload-graph.service'; +import { GraphService } from '../../../../../../services/graph/graph.service'; import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { NotificationService } from '../../../../../../services/notification/notification.service'; import { HttpErrorResponse } from '@angular/common/http'; @@ -48,7 +48,7 @@ export class UploadNodeComponent { constructor( private fb: FormBuilder, private msg: NzMessageService, - private uploadGraphService: UploadGraphService, + private GraphService: GraphService, private notificationService: NotificationService ) { this.uploadForm = this.fb.group({ @@ -70,7 +70,7 @@ export class UploadNodeComponent { } addNodeCategory() { - this.uploadGraphService.addNodeCategory(this.nodecategory).subscribe({ + this.GraphService.addNodeCategory(this.nodecategory).subscribe({ next: (response) => { const successMessage = 'Success'; this.notificationService.createNotification('success', successMessage, response.message); @@ -91,7 +91,7 @@ export class UploadNodeComponent { } getNodeCategory() { - this.uploadGraphService.getNodeCategories().subscribe({ + this.GraphService.getNodeCategories().subscribe({ next: (response) => { this.nodeCategoryList = response; }, @@ -120,7 +120,7 @@ export class UploadNodeComponent { formData.append('File', this.uploadForm.get('File')?.value as File); - this.uploadGraphService.uploadNodeData(formData).subscribe({ + this.GraphService.uploadNodeData(formData).subscribe({ next: (response) => { this.notificationService.createNotification('success', 'Success', response.message); this.isPending = false; diff --git a/src/app/components/input/input.component.spec.ts b/src/app/components/input/input.component.spec.ts index e94c07b..c8e567c 100644 --- a/src/app/components/input/input.component.spec.ts +++ b/src/app/components/input/input.component.spec.ts @@ -1,6 +1,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ReactiveFormsModule } from '@angular/forms'; import { InputComponent } from './input.component'; +import { By } from '@angular/platform-browser'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { NZ_ICONS, NzIconService } from 'ng-zorro-antd/icon'; +import { EyeInvisibleOutline } from '@ant-design/icons-angular/icons'; describe('InputComponent', () => { let component: InputComponent; @@ -8,16 +11,115 @@ describe('InputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ReactiveFormsModule, InputComponent], - }) - .compileComponents(); + imports: [InputComponent], + providers: [ + provideAnimationsAsync(), + NzIconService, + { + provide: NZ_ICONS, + useValue: [EyeInvisibleOutline], + }, + ], + }).compileComponents(); fixture = TestBed.createComponent(InputComponent); component = fixture.componentInstance; fixture.detectChanges(); }); - it('should create', () => { + it('SHOULD be created WHEN ever', () => { expect(component).toBeTruthy(); }); + + it('SHOULD initialize with default values WHEN ever', () => { + // Arrange + + // Act + + // Assert + expect(component.type).toBe('text'); + expect(component.placeholder).toBe(''); + expect(component.prefixIcon).toBe(''); + expect(component.errorTip).toBe(''); + expect(component.options).toEqual([]); + expect(component.listOfTagOptions).toEqual([]); + }); + + it('SHOULD handle value changes for text input WHEN any changes occur', () => { + // Arrange + const input = fixture.debugElement.query(By.css('input[type="text"]')).nativeElement; + const newValue = 'new value'; + + // Act + input.value = newValue; + input.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + // Assert + expect(input.value).toBe(newValue); + }); + + it('SHOULD toggle password visibility WHEN eye icon is clicked', () => { + // Arrange + component.type = 'password'; + fixture.detectChanges(); + const passwordInput = fixture.debugElement.query(By.css('input[type="password"]')).nativeElement; + const toggleIcon = fixture.debugElement.query(By.css('.toggle-password-visibility')).nativeElement; + + // Act + toggleIcon.dispatchEvent(new Event('click')); + fixture.detectChanges(); + + // Assert + expect(passwordInput.type).toBe('text'); + + // Act + toggleIcon.dispatchEvent(new Event('click')); + fixture.detectChanges(); + + // Assert + expect(passwordInput.type).toBe('password'); + }); + + it('SHOULD emit tagChange event WHEN tag selection changes', () => { + // Arrange + spyOn(component.tagChange, 'emit'); + component.type = 'select'; + component.options = [{ label: 'Option 1', value: 'option1' }]; + component.listOfTagOptions = []; + fixture.detectChanges(); + + // Act + component.listOfTagOptions = ['Option 1']; + component.onTagChange(component.listOfTagOptions); + fixture.detectChanges(); + + // Assert + expect(component.tagChange.emit).toHaveBeenCalledWith(['Option 1']); + }); + + it('SHOULD call onChange method WHEN input changes', () => { + // Arrange + spyOn(component, 'onChange'); + spyOn(component, 'onTouched'); + const input = fixture.debugElement.query(By.css('input')).nativeElement; + + // Act + input.value = 'new value'; + input.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + // Assert + expect(component.onChange).toHaveBeenCalledWith('new value'); + }); + + it('SHOULD correctly update the control value WHEN input changes', () => { + // Arrange + + // Act + component.writeValue('test value'); + + // Assert + expect((component as any).value).toBe('test value'); + }); }); diff --git a/src/app/components/input/input.component.ts b/src/app/components/input/input.component.ts index 21ae2fe..04453cd 100644 --- a/src/app/components/input/input.component.ts +++ b/src/app/components/input/input.component.ts @@ -34,7 +34,6 @@ export class InputComponent implements ControlValueAccessor, OnInit { @Output() tagChange: EventEmitter = new EventEmitter(); protected value = ''; - protected isDisabled = false; protected control: FormControl = new FormControl(); protected passwordVisible = false; diff --git a/src/app/components/landing-components/hero-section/hero-section.component.html b/src/app/components/landing-components/hero-section/hero-section.component.html index 788c3b2..38787ad 100644 --- a/src/app/components/landing-components/hero-section/hero-section.component.html +++ b/src/app/components/landing-components/hero-section/hero-section.component.html @@ -2,7 +2,7 @@
    -
    +

    Unlock Insights Visualize Data Make Decisions

    @@ -15,11 +15,13 @@

    Unlock Insights Visualize Data Make Decisions

    - +
    -
    +
    hero image