feat(guards): add functional guards

Author: ismaelramosmeta

src/app/modules/auth/auth.routes.ts

@@ -1,14 +1,18 @@
 import { Route } from '@angular/router';
 import { authPaths } from '~modules/auth/shared/auth-routes';
 import { LogInPageComponent } from '~modules/auth/pages/log-in-page/log-in-page.component';
-import { NoAuthGuard } from '~modules/shared/guards/no-auth.guard';
 import { appPaths } from '../../app-routes';
 import { RegisterPageComponent } from '~modules/auth/pages/register-page/register-page.component';
 import { LogoutPageComponent } from '~modules/auth/pages/logout-page/logout-page.component';
+import { noAuthenticationGuard } from '~modules/shared/guards/no-authentication.guard';
 
 export const AUTH_ROUTES: Route[] = [
-  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [NoAuthGuard] },
-  { path: authPaths.register, component: RegisterPageComponent, canActivate: [NoAuthGuard] },
+  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [noAuthenticationGuard()] },
+  {
+    path: authPaths.register,
+    component: RegisterPageComponent,
+    canActivate: [noAuthenticationGuard()],
+  },
   {
     path: authPaths.logout,
     component: LogoutPageComponent,

src/app/modules/shared/guards/auth.guard.spec.ts

@@ -0,0 +1,40 @@
+import { TestBed } from '@angular/core/testing';
+import { lastValueFrom, of } from 'rxjs';
+import { Router } from '@angular/router';
+import { AuthRepository } from '~modules/auth/store/auth.repository';
+import { authenticationGuard } from '~modules/shared/guards/authentication.guard';
+
+// eslint-disable-next-line max-lines-per-function
+describe('AuthenticationGuard', () => {
+  const mockRouter = jasmine.createSpyObj<Router>(['navigate']);
+  mockRouter.navigate.and.returnValue(lastValueFrom(of(true)));
+
+  const setup = (authRepositoryMock: unknown) => {
+    TestBed.configureTestingModule({
+      providers: [
+        authenticationGuard,
+        { provide: AuthRepository, useValue: authRepositoryMock },
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+
+    return TestBed.runInInjectionContext(authenticationGuard);
+  };
+
+  it('should allow to continue', () => {
+    const mockDomainService: unknown = {
+      isLoggedInValue: () => true,
+    };
+    const guard = setup(mockDomainService);
+    expect(guard).toBe(true);
+  });
+
+  it('should redirect to /', () => {
+    const mockDomainService: unknown = {
+      isLoggedInValue: () => false,
+    };
+    const guard = setup(mockDomainService);
+    expect(guard).toBe(false);
+    expect(mockRouter.navigate).toHaveBeenCalledWith(['/']);
+  });
+});

src/app/modules/shared/guards/auth.guard.ts

@@ -0,0 +1,15 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { appRoutes } from '../../../app-routes';
+import { AuthRepository } from '~modules/auth/store/auth.repository';
+
+export const authenticationGuard = () => {
+  const authRepository: AuthRepository = inject(AuthRepository);
+  if (authRepository.isLoggedInValue()) {
+    return true;
+  } else {
+    const router: Router = inject(Router);
+    router.navigate([appRoutes.home]);
+    return false;
+  }
+};

src/app/modules/shared/guards/authentication.guard.spec.ts

@@ -0,0 +1,17 @@
+import { userRoutes } from '~modules/user/shared/user-routes';
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { AuthRepository } from '~modules/auth/store/auth.repository';
+
+export function noAuthenticationGuard(): CanActivateFn {
+  return () => {
+    const authRepository: AuthRepository = inject(AuthRepository);
+    if (!authRepository.isLoggedInValue()) {
+      return true;
+    } else {
+      const router: Router = inject(Router);
+      router.navigate([userRoutes.dashboard]);
+      return false;
+    }
+  };
+}

src/app/modules/shared/guards/authentication.guard.ts

@@ -2,25 +2,25 @@ import { Route } from '@angular/router';
 import { appPaths } from '../../app-routes';
 import { userPaths } from '~modules/user/shared/user-routes';
 import { DashboardPageComponent } from '~modules/user/pages/dashboard/dashboard-page.component';
-import { AuthGuard } from '~modules/shared/guards/auth.guard';
 import { MyAccountComponent } from '~modules/user/pages/my-account/my-account.component';
 import { MyHeroesPageComponent } from '~modules/user/pages/my-heroes/my-heroes-page.component';
+import { authenticationGuard } from '~modules/shared/guards/authentication.guard';
 
 export const USER_ROUTES: Route[] = [
   {
     path: userPaths.dashboard,
     component: DashboardPageComponent,
-    canActivate: [AuthGuard],
+    canActivate: [authenticationGuard()],
   },
   {
     path: userPaths.myHeroes,
     component: MyHeroesPageComponent,
-    canActivate: [AuthGuard],
+    canActivate: [authenticationGuard()],
   },
   {
     path: userPaths.myAccount,
     component: MyAccountComponent,
-    canActivate: [AuthGuard],
+    canActivate: [authenticationGuard()],
   },
   { path: '**', redirectTo: appPaths.error404 },
 ];