RxJS interval is behaving differently after an Angular upgrade

I have an Angular 18 service that would update a BehaviorSubject once a minute, to track time. Here is a simplified version of it

private totalDurationMin = 0;
private totalDurationMinutesSubject$ = new BehaviorSubject(this.totalDurationMin);
public totalDurationMinutes$ = this.totalDurationMinutesSubject$.asObservable();

public clockIn(): void {
this.startTimer(0);
}

private startTimer(startingMinutes: number): void {
this.totalDurationMin = startingMinutes;
this.totalDurationMinutesSubject$.next(this.totalDurationMin);

this.timerSubscription = interval(60 * 1000).subscribe({
next: () => {
this.totalDurationMin++;
this.totalDurationMinutesSubject$.next(this.totalDurationMin);
}
});
}


I have a unit test for this:

it('should update the observables and start the timer when clocking in', fakeAsync(() => {
//skip initial emit, the start of the timer, and then then next 4 minute ticks
service.totalDurationMinutes$.pipe(skip(6)).subscribe({
next: (val) => {
console log(`minutes: ${val}`);
expect(val).toEqual(5);
},
});

service.clockIn();
tick(60 * 1000 * 5); //simulate 5 minutes passing
}));


This test passes just fine. Then I upgraded to Angular 19 and now the above test will emit one additional time! I get a test failure about the value being 6 but it expected 5.

I added the console.log for debugging the test, and I would get this output in Angular 18

minutes: 5


But after the upgrade to v19 I get this output:

minutes: 5
minutes: 6


Why is this happening all of a sudden? I added a take(1) to my unit test to make it at least pass for now, but I want to understand what is different here.

Continue reading...