Testing values changed by observable responses in Angular

Question

If I want to test the following code

even: boolean;

ngOnInit(

this.myService.obs.subscribe(response: number => {

if (response % 2 === 0){ this.even = true } else {this.even = false}

});
)

for the value of this.even, something like this in my unit test using jasmine-marbles

const responses = cold('a-b-c-', a: 3, b:4, c:5);
const expected = cold('-d-e-f', d: false, b: true, c: false);

component.ngOnInit();

expect(component.even).toEqual(expected);

Obviously this does not work since this.even is not an observable while cold requires type TestColdObservable. Is there a way to test the change in value of this.even over time using jasmine marbles or another basic testing framework?

Answer 1

Something like this I think could work although I am not good with jasmine-marbles.

import { map } from 'rxjs/operators';
....
even$: Observable<boolean>;

ngOnInit(
  this.even$ = this.myService.obs.pipe(map(response => response % 2 === 0));
}

/////
// assuming responses is tied to myService.obs
const responses = cold('a-b-c-', a: 3, b:4, c:5);
const expected = cold('-d-e-f', d: false, b: true, c: false);

component.ngOnInit();

expect(component.even$).toEqual(expected);

Basically we convert both things we are comparing into observables and you can subscribe to the even$ observable in your HTML with the async pipe.