Why does my integration test not work in Angular 19?

Just having a simple navbar component with 4 links : Login & Signup (if not logged in), My Account & Logout (if logged in). I wrote an integration test to check if the click on the logout link calls the logout method.

Here is the navbar.component.html :

<nav class="navbar">
<a routerLink="/" class="logo">E-Market</a>
<ul class="nav-links">
<li><a routerLink="/products">Products</a></li>
<li id="login" *ngIf="!isLoggedIn"><a routerLink="/auth/login">Login</a></li>
<li id="sign-up" *ngIf="!isLoggedIn"><a routerLink="/auth/sign-up">Sign up</a></li>
<li id="account" *ngIf="isLoggedIn"><a routerLink="/account">My account</a></li>
<li id="logout" *ngIf="isLoggedIn"><a (click)="logout()">Logout</a></li>
</ul>
</nav>



Here is the navbar.component.ts :

import { Component, effect } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/core/services/auth.service';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
standalone: false
})
export class NavbarComponent {
isLoggedIn!: boolean;

constructor(private authService: AuthService) {
effect(() => {
this.isLoggedIn = this.authService.isLoggedIn();
});
}

logout() {
this.authService.logout();
}

}


Here is the navbar.component.spec.ts :

import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
import { AuthService } from 'src/app/core/services/auth.service';
import { Router } from '@angular/router';

describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
let authServiceSpy: jasmine.SpyObj<AuthService>;
let routerSpy: jasmine.SpyObj<Router>;

beforeEach(() => {
authServiceSpy = jasmine.createSpyObj('AuthService', ['isLoggedIn', 'logout']);
routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);

TestBed.configureTestingModule({
declarations: [NavbarComponent],
providers: [
{ provide: AuthService, useValue: authServiceSpy },
{ provide: Router, useValue: routerSpy },
],
}).compileComponents();

fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
});

it('should call logout method when clicking on "Logout"', () => {
authServiceSpy.isLoggedIn.and.returnValue(true);
fixture.detectChanges();
component = fixture.componentInstance;
spyOn(component, 'logout').and.callThrough();;

const logoutLink = fixture.nativeElement.querySelector('#logout');
logoutLink.click();
expect(component.logout).toHaveBeenCalled();
expect(authServiceSpy.logout).toHaveBeenCalled();
expect(routerSpy.navigateByUrl).toHaveBeenCalledWith('/');
});
});


And when I run the tests, I get this answer:

Chrome 131.0.0.0 (Windows 10) NavbarComponent should call logout method when clicking on "Logout" FAILED Expected spy logout to have been called. at at UserContext.apply (src/app/navbar/components/navbar/navbar.component.spec.ts:67:30) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2082:39) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:34) Expected spy AuthService.logout to have been called. at at UserContext.apply (src/app/navbar/components/navbar/navbar.component.spec.ts:68:35) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2082:39) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:34) Expected spy Router.navigateByUrl to have been called with: [ '/' ] but it was never called. at at UserContext.apply (src/app/navbar/components/navbar/navbar.component.spec.ts:69:37) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:2082:39) at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:368:34)
​

I tried to edit the integration test but it always fails. Also I've tested the functionality on the browser, and the click on the logout anchor works as expected so I understand that the problem is in the test code. ChatGPT can't help me either.

Continue reading...