use isAuth in app component

localServer/server.ts

@@ -16,6 +16,7 @@ app.use(cors({
 app.use(bodyParser.json())
 
 app.route('/api/auth/login').post(authRoutes.login)
+app.route('/api/auth/logout').post(authRoutes.logout)
 
 const port = 9000
 app.listen(port, () => {

src/app/app.component.html

@@ -1,8 +1,15 @@
 <div class="componentBorder">
-  <h1 data-id="welcomeMessage">{{ 'app.HELLO' | transloco:{value: title} }}</h1>
-  <button data-id="logoutButton" (click)="onLogout()">{{'app.LOGOUT_BUTTON' | transloco}}</button>
-  <p>Congratulations! Your app is running. 🎉</p>
-
+  @if(isAuth | async) {
+    <h1
+      data-id="welcomeMessage">
+        {{ 'app.HELLO' | transloco:{value: title} }}
+    </h1>
+    <button
+      data-id="logoutButton"
+      (click)="onLogout()">
+        {{'app.LOGOUT_BUTTON' | transloco}}
+    </button>
+  }  
   <router-outlet />
 </div>
 

src/app/app.component.ts

@@ -16,14 +16,21 @@ import {
 import {
   AuthService
 } from './services/auth/auth.service'
+import {
+  AsyncPipe
+} from '@angular/common'
+import {
+  Observable
+} from 'rxjs'
 
 const COMPONENT_TRANSLOCO_SCOPE = 'app'
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     RouterOutlet,
-    TranslocoPipe
+    TranslocoPipe,
+    AsyncPipe
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
@@ -38,11 +45,14 @@ export class AppComponent {
   }
 
   public title = 'contracts-angular'
+  public isAuth: Observable<boolean>
 
   public constructor(
     private auth$: AuthService,
     private router: Router
-  ) {}
+  ) {
+    this.isAuth = this.auth$.isAuth()
+  }
 
   public onLogout(): void {
     this.auth$.logout().subscribe({

src/app/tests/app.component.harness.ts

@@ -23,4 +23,8 @@ export class AppHarness extends ComponentHarness {
     const text = await this.getH1(id)
     return await text?.text() || ''
   }
+
+  public async controlPresent(id: string): Promise<boolean> {
+    return !!(await this.locatorForOptional(`h1[data-id="${id}"],button[data-id="${id}"]`)())
+  }
 }

src/app/tests/app.component.spec.ts

@@ -15,6 +15,7 @@ import {
   Router
 } from '@angular/router'
 import {
+  BehaviorSubject,
   of
 } from 'rxjs'
 import {
@@ -28,14 +29,18 @@ import {
 } from '@angular/cdk/testing/testbed'
 
 describe('AppComponent', () => {
+  let isAuthMock: BehaviorSubject<boolean>
   let appHarness: AppHarness
   let router: Router
 
   beforeEach(async () => {
-    const authServiceMock = jasmine.createSpyObj<AuthService>('authService', ['logout'])
-    authServiceMock.logout.and.callFake(() => {
-      return of(undefined)
-    })
+    isAuthMock = new BehaviorSubject(true)
+    const authServiceMock = jasmine.createSpyObj<AuthService>('authService', [
+      'logout',
+      'isAuth'
+    ])
+    authServiceMock.isAuth.and.returnValue(isAuthMock)
+    authServiceMock.logout.and.returnValue(of(undefined))
     await TestBed.configureTestingModule({
       imports: [
         AppComponent,
@@ -63,4 +68,17 @@ describe('AppComponent', () => {
     await appHarness.clickButton('logoutButton')
     expect(navigateSpy).toHaveBeenCalledWith(['/login'])
   })
+
+  it('should display welcome message and logout button only to authenticated user', async () => {
+    expect(await appHarness.controlPresent('welcomeMessage')).toBe(true)
+    expect(await appHarness.controlPresent('logoutButton')).toBe(true)
+
+    isAuthMock.next(false)
+    expect(await appHarness.controlPresent('welcomeMessage')).toBe(false)
+    expect(await appHarness.controlPresent('logoutButton')).toBe(false)
+
+    isAuthMock.next(true)
+    expect(await appHarness.controlPresent('welcomeMessage')).toBe(true)
+    expect(await appHarness.controlPresent('logoutButton')).toBe(true)
+  })
 })