test: add Angular unit tests (#19)

* feat(members): add invitation and member management UI (ref Sentinent-AI/Sentinent#15)

* test(frontend): add Angular unit test coverage

Author: neethika12

src/app/components/login/login.html

@@ -48,7 +48,7 @@ <h2>Welcome back</h2>
       <form *ngIf="isLoginVisible" (ngSubmit)="handleLogin()" class="form-section" novalidate>
         <label class="input-label" for="loginEmail">Email</label>
         <input id="loginEmail" name="loginEmail" class="input-field" type="email" autocomplete="email"
-          [(ngModel)]="loginEmail" (input)="onLoginEmailInput()" placeholder="you@email.com">
+          [class.error]="!!loginError" [(ngModel)]="loginEmail" (input)="onLoginEmailInput()" placeholder="you@email.com">
 
         <label class="input-label" for="loginPassword">Password</label>
         <input id="loginPassword" name="loginPassword" class="input-field" type="password"
@@ -73,7 +73,7 @@ <h2>Welcome back</h2>
       <form *ngIf="isRegisterVisible" (ngSubmit)="handleRegister()" class="form-section" novalidate>
         <label class="input-label" for="regEmail">Email</label>
         <input id="regEmail" name="regEmail" class="input-field" type="email"
-          autocomplete="email" [(ngModel)]="regEmail" (input)="onRegisterEmailInput()"
+          [class.error]="!!registerError" autocomplete="email" [(ngModel)]="regEmail" (input)="onRegisterEmailInput()"
           placeholder="you@email.com">
 
         <label class="input-label" for="regPassword">Password</label>
@@ -88,9 +88,10 @@ <h2>Welcome back</h2>
 
       <form *ngIf="showForgot" (ngSubmit)="handleForgot()" class="form-section">
         <label class="input-label" for="forgotEmail">Work Email</label>
-        <input id="forgotEmail" name="forgotEmail" class="input-field" type="email" required [(ngModel)]="forgotEmail"
+        <input id="forgotEmail" name="forgotEmail" class="input-field" type="email" [class.error]="!!forgotError" required [(ngModel)]="forgotEmail"
           (input)="onForgotEmailInput()" placeholder="you@company.com">
         <p class="subtle-copy">We'll send a password reset link to your email address.</p>
+        <p *ngIf="forgotError" class="error-text">{{ forgotError }}</p>
 
         <button type="submit" class="btn-primary" [disabled]="isForgotSubmitting">
           Send Reset Link

src/app/components/login/login.spec.ts

@@ -0,0 +1,187 @@
+import { DOCUMENT } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of, throwError } from 'rxjs';
+import { Login } from './login';
+import { AuthService } from '../../services/auth';
+
+describe('Login', () => {
+  let component: Login;
+  let fixture: ComponentFixture<Login>;
+  let mockAuthService: jasmine.SpyObj<AuthService>;
+  let router: Router;
+  let document: Document;
+
+  beforeEach(async () => {
+    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['login', 'signup']);
+
+    spyOn(localStorage, 'getItem').and.returnValue(null);
+    spyOn(localStorage, 'setItem');
+    spyOn(window, 'matchMedia').and.returnValue({
+      matches: false,
+      media: '',
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [Login, RouterTestingModule],
+      providers: [
+        { provide: AuthService, useValue: mockAuthService }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Login);
+    component = fixture.componentInstance;
+    router = TestBed.inject(Router);
+    document = TestBed.inject(DOCUMENT);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('initializes in login mode by default', () => {
+    expect(component.activeTab).toBe('login');
+    expect(component.isLoginVisible).toBeTrue();
+  });
+
+  it('switches to the register tab and navigates', () => {
+    spyOn(router, 'navigate');
+
+    component.switchTab('register');
+
+    expect(component.activeTab).toBe('register');
+    expect(router.navigate).toHaveBeenCalledWith(['/signup']);
+  });
+
+  it('toggles the theme and stores the selection', () => {
+    component.toggleTheme();
+
+    expect(component.isDarkMode).toBeTrue();
+    expect(document.documentElement.classList.contains('dark')).toBeTrue();
+    expect(localStorage.setItem).toHaveBeenCalledWith('theme', 'dark');
+  });
+
+  it('shows an error when login credentials are missing', () => {
+    component.loginEmail = ' ';
+    component.loginPassword = '';
+
+    component.handleLogin();
+
+    expect(component.loginError).toBe('Invalid credentials');
+    expect(mockAuthService.login).not.toHaveBeenCalled();
+  });
+
+  it('rejects login when the email format is invalid', () => {
+    component.loginEmail = 'invalid-email';
+    component.loginPassword = 'secret';
+
+    component.handleLogin();
+
+    expect(component.loginError).toBe('Enter a valid email address');
+    expect(mockAuthService.login).not.toHaveBeenCalled();
+  });
+
+  it('shows a success message and redirects after login', fakeAsync(() => {
+    spyOn(router, 'navigate');
+    mockAuthService.login.and.returnValue(of({ token: 'token-1' }));
+    component.loginEmail = 'user@example.com';
+    component.loginPassword = 'secret';
+
+    component.handleLogin();
+    tick(1200);
+
+    expect(mockAuthService.login).toHaveBeenCalledWith('user@example.com', 'secret');
+    expect(component.showSuccess).toBeTrue();
+    expect(component.successTitle).toBe('Welcome back');
+    expect(router.navigate).toHaveBeenCalledWith(['/dashboard']);
+  }));
+
+  it('maps a 401 login response to invalid credentials', () => {
+    mockAuthService.login.and.returnValue(
+      throwError(() => new HttpErrorResponse({ status: 401, error: 'invalid credentials' }))
+    );
+    component.loginEmail = 'user@example.com';
+    component.loginPassword = 'wrong';
+
+    component.handleLogin();
+
+    expect(component.loginError).toBe('Invalid credentials');
+    expect(component.isLoginSubmitting).toBeFalse();
+  });
+
+  it('prevents register submission when fields are missing', () => {
+    component.regEmail = '';
+    component.regPassword = '';
+
+    component.handleRegister();
+
+    expect(component.registerError).toBe('Invalid credentials');
+    expect(mockAuthService.signup).not.toHaveBeenCalled();
+  });
+
+  it('rejects registration when the email format is invalid', () => {
+    component.activeTab = 'register';
+    component.regEmail = 'invalid-email';
+    component.regPassword = 'secret';
+
+    component.handleRegister();
+
+    expect(component.registerError).toBe('Enter a valid email address');
+    expect(mockAuthService.signup).not.toHaveBeenCalled();
+  });
+
+  it('disables registration when the email format is invalid', () => {
+    component.regEmail = 'invalid-email';
+    component.regPassword = 'secret';
+
+    expect(component.isRegisterDisabled).toBeTrue();
+  });
+
+  it('shows a duplicate email message when signup returns a conflict', () => {
+    mockAuthService.signup.and.returnValue(
+      throwError(() => new HttpErrorResponse({ status: 409, error: 'already exists' }))
+    );
+    component.activeTab = 'register';
+    component.regEmail = 'user@example.com';
+    component.regPassword = 'secret';
+
+    component.handleRegister();
+
+    expect(component.registerError).toBe('Email already exists');
+    expect(component.activeTab).toBe('register');
+  });
+
+  it('returns to login after a successful registration', fakeAsync(() => {
+    spyOn(router, 'navigate');
+    mockAuthService.signup.and.returnValue(of(void 0));
+    component.activeTab = 'register';
+    component.regEmail = 'new@example.com';
+    component.regPassword = 'secret';
+
+    component.handleRegister();
+    tick(1500);
+
+    expect(component.loginEmail).toBe('new@example.com');
+    expect(component.activeTab).toBe('login');
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  }));
+
+  it('rejects forgot-password submission when the email format is invalid', () => {
+    component.showForgotPassword();
+    component.forgotEmail = 'invalid-email';
+
+    component.handleForgot();
+
+    expect(component.forgotError).toBe('Enter a valid email address');
+    expect(component.isForgotSubmitting).toBeFalse();
+  });
+});

src/app/components/login/login.ts

@@ -14,13 +14,16 @@ import { AuthService } from '../../services/auth';
   styleUrl: './login.css',
 })
 export class Login implements OnInit {
+  private readonly emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
   activeTab: 'login' | 'register' = 'login';
 
   loginEmail = '';
   loginPassword = '';
   rememberMe = true;
   loginError = '';
   registerError = '';
+  forgotError = '';
 
   regEmail = '';
   regPassword = '';
@@ -68,6 +71,7 @@ export class Login implements OnInit {
   showForgotPassword(): void {
     this.showForgot = true;
     this.showSuccess = false;
+    this.forgotError = '';
   }
 
   backToLogin(): void {
@@ -80,6 +84,10 @@ export class Login implements OnInit {
       this.loginError = 'Invalid credentials';
       return;
     }
+    if (!this.isValidEmail(this.loginEmail)) {
+      this.loginError = 'Enter a valid email address';
+      return;
+    }
     this.isLoginSubmitting = true;
 
     this.authService.login(this.loginEmail.trim(), this.loginPassword).pipe(
@@ -112,6 +120,10 @@ export class Login implements OnInit {
       this.registerError = 'Invalid credentials';
       return;
     }
+    if (!this.isValidEmail(this.regEmail)) {
+      this.registerError = 'Enter a valid email address';
+      return;
+    }
     this.isRegisterSubmitting = true;
     this.registerError = '';
 
@@ -158,6 +170,11 @@ export class Login implements OnInit {
   }
 
   handleForgot(): void {
+    this.forgotError = '';
+    if (!this.isValidEmail(this.forgotEmail)) {
+      this.forgotError = 'Enter a valid email address';
+      return;
+    }
     this.isForgotSubmitting = true;
     setTimeout(() => {
       this.isForgotSubmitting = false;
@@ -182,7 +199,7 @@ export class Login implements OnInit {
   }
 
   get isRegisterDisabled(): boolean {
-    return !this.regEmail.trim() || !this.regPassword;
+    return !this.regEmail.trim() || !this.regPassword || !this.isValidEmail(this.regEmail);
   }
 
   get isAuthFormVisible(): boolean {
@@ -222,7 +239,11 @@ export class Login implements OnInit {
   }
 
   onForgotEmailInput(): void {
-    this.clearGlobalError();
+    this.forgotError = '';
+  }
+
+  private isValidEmail(email: string): boolean {
+    return this.emailPattern.test(email.trim());
   }
 
   private syncView(): void {

src/app/guards/auth-guard.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { authGuard } from './auth-guard';
+import { AuthService } from '../services/auth';
+
+describe('authGuard', () => {
+  let mockAuthService: jasmine.SpyObj<AuthService>;
+  let mockRouter: jasmine.SpyObj<Router>;
+
+  beforeEach(() => {
+    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['isLoggedIn']);
+    mockRouter = jasmine.createSpyObj<Router>('Router', ['navigate']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: AuthService, useValue: mockAuthService },
+        { provide: Router, useValue: mockRouter }
+      ]
+    });
+  });
+
+  it('returns true when the user is logged in', () => {
+    mockAuthService.isLoggedIn.and.returnValue(true);
+
+    const result = TestBed.runInInjectionContext(() => authGuard({} as never, {} as never));
+
+    expect(result).toBeTrue();
+    expect(mockRouter.navigate).not.toHaveBeenCalled();
+  });
+
+  it('redirects to login when the user is not logged in', () => {
+    mockAuthService.isLoggedIn.and.returnValue(false);
+
+    const result = TestBed.runInInjectionContext(() => authGuard({} as never, {} as never));
+
+    expect(result).toBeFalse();
+    expect(mockRouter.navigate).toHaveBeenCalledWith(['/login']);
+  });
+});