Unit tests checking signals and services within an effect

In an ngAfterViewInit I have the following check, following the declarations:

protected iconNotificacaoNova = false;
@ViewChild('popoverNotificacao') popoverNotificacaoComponent!: NgbPopover;
@Input() public notificacoesView: boolean = false;
protected readonly notificacoesService = inject(NotificacoesService);

...

ngAfterViewInit(): void {
if (this.notificacoesView) {
effect(() => {
if (this.popoverNotificacaoComponent?.isOpen() && this.notificacoesService.notificacoes().length) {
this.iconNotificacaoNova = false;
} else if (this.notificacoesService.notificacoes().length) {
this.iconNotificacaoNova = true;
}
if (!this.notificacoesService.notificacoes().length) {
this.popoverNotificacaoComponent.close();
}
this.cdr.detectChanges();
}, { injector: this.injector });
}
}


this.notificacoesService.notificacoes being a signal to array type.

In my test I do it as follows:

describe('NavMenuComponent NgAfterViewInit', () => {
let component: NavMenuComponent;
let fixture: ComponentFixture<NavMenuComponent>;

let mockActivatedRoute: ActivatedRoute;
let notificacoesServiceMock: jasmine.SpyObj<NotificacoesService>;
let popoverNotificacaoComponentMock: jasmine.SpyObj<NgbPopover>;


it("must call the instance's close method popoverNotificationComponent", async () => {
notificacoesServiceMock = jasmine.createSpyObj('NotificacoesService', ['notificacoes', 'updateNotificacoes']);
popoverNotificacaoComponentMock = jasmine.createSpyObj('NgbPopover', ['isOpen', 'close']);

await TestBed.configureTestingModule({
imports: [
NavMenuComponent,
NgbPopoverModule,
],
providers: [
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
{ provide: NotificacoesService, useValue: notificacoesServiceMock },
]
}).compileComponents();
fixture = TestBed.createComponent(NavMenuComponent);
component = fixture.componentInstance;

popoverNotificacaoComponentMock.isOpen.and.returnValue(true);
popoverNotificacaoComponentMock.close.and.returnValue();
component.popoverNotificacaoComponent = popoverNotificacaoComponentMock;

const spyCDR = spyOn((component as any).cdr, 'detectChanges');

component.notificacoesView = true;

notificacoesServiceMock.notificacoes.and.returnValue([]);

fixture.detectChanges();

expect((component as any).iconNotificacaoNova).toBeFalse();
expect(spyCDR).toHaveBeenCalled();
expect(popoverNotificacaoComponentMock.close).toHaveBeenCalled();
});
});


Result:
Expected spy NgbPopover.close to have been called

I hope to get to this part of the code:

if (!this.notificacoesService.notificacoes().length) {
this.popoverNotificacaoComponent.close();
}


Code-Coverage:

I'm using Angular 16.2.12

Continue reading...