Testing Functional Guards in Angular with Vitest and TestBed

// domain.guard.ts (Modern Functional Guard)
import { inject } from '@angular/core';
import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { map } from 'rxjs';
import { DomainService } from './domain.service';
 
export const domainGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const router = inject(Router);
  const domainService = inject(DomainService);
 
  return domainService.isAvailable().pipe(
    map((available) => (available ? true : router.createUrlTree(['/unavailable'])))
  );
};

// ❌ FAILS: Calling guard directly without injection context
it('should test guard', () => {
  domainGuard(mockRoute, mockState); // Throws Error: NG0203: inject() must be called from an injection context!
});

// domain.guard.spec.ts (Vitest + TestBed)
import { TestBed } from '@angular/core/testing';
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { of } from 'rxjs';
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { domainGuard } from './domain.guard';
import { DomainService } from './domain.service';
 
describe('domainGuard (Vitest)', () => {
  // 1. Mock dependencies with Vitest
  const mockDomainService = {
    isAvailable: vi.fn(),
  };
 
  const mockRouter = {
    createUrlTree: vi.fn(),
  };
 
  const mockRoute = {} as ActivatedRouteSnapshot;
  const mockState = { url: '/protected' } as RouterStateSnapshot;
 
  beforeEach(() => {
    vi.clearAllMocks();
 
    TestBed.configureTestingModule({
      providers: [
        { provide: DomainService, useValue: mockDomainService },
        { provide: Router, useValue: mockRouter },
      ],
    });
  });
 
  it('should allow access (return true) when domain is available', async () => {
    mockDomainService.isAvailable.mockReturnValue(of(true));
 
    // Execute guard inside active injection context
    const result$ = TestBed.runInInjectionContext(() => domainGuard(mockRoute, mockState));
 
    result$.subscribe((result) => {
      expect(result).toBe(true);
      expect(mockRouter.createUrlTree).not.toHaveBeenCalled();
    });
  });
 
  it('should redirect to /unavailable (return UrlTree) when domain is inactive', async () => {
    const fallbackTree = new UrlTree();
    mockDomainService.isAvailable.mockReturnValue(of(false));
    mockRouter.createUrlTree.mockReturnValue(fallbackTree);
 
    const result$ = TestBed.runInInjectionContext(() => domainGuard(mockRoute, mockState));
 
    result$.subscribe((result) => {
      expect(result).toBe(fallbackTree);
      expect(mockRouter.createUrlTree).toHaveBeenCalledWith(['/unavailable']);
    });
  });
});

// auth.guard.ts (Synchronous)
export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
 
  return auth.isLoggedIn() ? true : router.createUrlTree(['/login']);
};
 
// auth.guard.spec.ts
it('should evaluate synchronous guard', () => {
  mockAuthService.isLoggedIn.mockReturnValue(true);
 
  const result = TestBed.runInInjectionContext(() => authGuard(mockRoute, mockState));
  expect(result).toBe(true);
});